#변수 선언

자바스크립트를 진행하기에 앞서

지난 과정 HTML과 CSS를 진행하며 우리는 웹사이트의 생김새 구조, 애니메이션, 디자인요소들의 배열 등등 
즉 사이트의 "얼굴" 을만들어 냈다.

하지만 우리가 사용하던 여러 페이지들을 둘러봤을 때처럼

회원가입을 하거나 상품을 주문을 하거나 글을 작성을 하거나 페이지가 넘어가거나 하는 등

내가 만들어낸 사이트가 "기능적인 동작" 은하진 않았다.

그럼 우리가 만들어낸 얼굴에 기능을 더하려면 무엇을 알아야 할까.

우리는 이 기능적인 부분들을 자바스크립트를 통해 구현할 것이다.

---

변수 

자바스크립트를 사용하기 위해선 기본개념인 변수에 대해서 알아야 한다.

실습을 위해 크롬창에서 f12를 눌러 콘솔창을 켜보자

해당 콘솔창에서 기본적인 구조와 문법을 학습할 수 있다.

 

변수란 데이터를 담고 , 꺼내 쓰는 상자

라고 정의 할 수 있다.

변수에는 우리가 기존에 클래스이름을 정해주듯이 아무 이름이나 상관없게 만들어 줄 수 있지만 

다른 개발자와의 협업을 위해 직관적인 이름을 사용하는 것이 좋다.

 

변수 선언 을 하기 위한 키워드에는 3가지 종류가 있다.

 

var                            let                       const

이 세 가지 중에서 var 은 잘 사용을 하지 않으니 

잘 사용하지 않는 이유는 후설 하도록 하겠다.

 

 

let box1 = "박스 1" ;

 

 

 

const box2 = 123 ;

 

let과 const를 이용하여 각각 변수의 선언과 데이터 할당을 동시에 해주었다.

 

이러한 구조로 box1이라는 변수를 선언하고

box1이라는 변수에 박스 1이라는 문자열데이터를 할당해 주었다는 이야기가 된다.

해당구조는 const에서도 동일하다. 

 

그렇다면 let과 const는 무슨 차이가 있길래 서로 구분이 지어져 있는 걸까?

 

let       - 데이터 재할당 가능

            - 재선언 불가

 

const  - 데이터 재할당 불가

             - 재선언 불가

이러한 차이가 있다. 하지만 

처음 배우는 입장으로써 무슨 소리인지 이해가 잘 되지 않는다.

콘솔 창에서 확인해 보자 

 

 

let을 이용하여 콘솔창에서 box1 변수에  박스 1이라는 데이터를 할당해 줬다가  

box1이라는 영문으로 데이터를 재할당 해주었다. 

콘솔로그로  확인하니 마지막으로 할당해 준 box1이라는 스트링 데이터만 나오는 것을 확인할 수 있다.

이번엔 const을 이용하여 변수선언을 해주고 위의 let 의경우처럼 box2의 데이터 재할당을 시도했지만 

오류가뜨며 재할당 이 되지 않았다. 

 

이처럼 데이터를 재할당해줘야 하는 변수는 let을 

재할당이 필요 없거나 고정값으로 들어가야 하는 변수는 const를 사용한다고 할 수 있겠다.

 

 

 

 

그렇다면 위에서 언급한 var라는 변수선언 키워드는 왜 사용하지 않는 걸까? 

이는 var 의 문제점이라고 할 수 있는 특징인 재선언이 가능한 키워드이기 때문이다.

위에서 언급한 let과 const 의 경우에는 둘 다 변수를 재선 언 할 수 있지 않다. 

하지만 var 의경우 재선언이 가능하여 

데이터를 명확하게 구분하기위해 사용하는 변수선언이 의미가 없어지기 때문이다.

간단한 코드에서는 의미구분이 명확하지 않지만 프로젝트규모가 커질수록 데이터의 혼동을 불러올 수도 있기 때문이다.

 

사실 필자는 아직 배우는 입장이라 쓰면 혼난 대서 안 쓸 것 같긴 함 ㅋㅋ

 

 

---

참고자료: 코드캠프 훈훈한 javascript