[Javascript] 변수 (var, const, let)

자바스크립트에서 변수를 선언하는 방법은 총 3개이다.

• var
• let
• const

 

모두 변수를 선언하는 키워드이며 가장 큰 차이점으로 버전의 차이가 있다.

 

var - ES6 이전 방식 (구식)

let -  ES6의 문법 (최신)

const - ES6의 문법 (최신)

 

 

사실 const와 let은 var를 대체하기 위해 만들어진 것이다.

그러니 var사용을 지양해야한다.

 

바로 변수를 선언해 보겠다.

 

index.js

Console

 

3 키워드 모두 잘 작동한다.

 

그런데 여기서 var 사용을 왜 지양해야하는지 알려주겠다.

 

var variable 2 times

Colsole

 

실행은 잘 되긴한다. variable의 값이 바뀌었구나로 생각할 수 있다.

하지만 동일 변수 선언이라고 생각해보자. 위의 코드는 아래의 코드와 같은 형태를 띈다.

 

int num=1; // num 초기화1

int num=2; // num 초기화2

 

그리고 var는 static 비슷한 성질을 약간 갖고있는데

블록(범위)를 구분하지 않고 현재 함수(현재 페이지) 어디서든 참조할 수 있다.

 

그냥 부르기만하면 내부 함수의 내부에서도 마음대로 값을 변경할 수 있다는 뜻이다.

 

var가 유연해서 사용이 편리할 수는 있다.

그런데 유연한 만큼 문제를 초기할 가능성이 많다.

 

그래서 대체제가 만들어진 것이다.

var 사용은 지양하는 것이 좋겠다. (써도 프로그램은 돌아감)

 

추가적으로 이런게 실행이된다.

 

hoisting

Console

 

이런게 실행되는 이유는 호이스팅(hoisting)때문이다.

 

자바스크립트는 함수를 실행하기전 함수 내부에 선언된 모든 변수들을 최상단으로 끌고온다.

함수 실행 전 함수 내부의 모든 변수의 선언을 최상단에 선언하는것이 호이스팅이다.

 

그래서 초기화는 나중에 하더라도 최상단에서 모조리 선언을 시키는 것이다.

 

그래서 2번줄의 console.log(a)는 a가 선언만되었기 때문에 undefined이고

4분줄의 console.log(a)는 위에서 a가 초기화 되었기 때문에 값이 출력되는 것이다.

 

이러한 부분들이 유연하다고 생각할 수도 있지만 나중에 코드가 길어졌을 때 에러를 찾을 수 없게 만든다.

 

다른 프로그래밍언어를 공부해보았으면 이런 결과가 얼마나 말이 안되는 것인지 바로 이해할 것이다.

 

이제 let에 대해 알아보겠다.

 

 

let은 블럭 단위의 범위를 갖는 지역변수를 선언하는 키워드이다. 다른 프로그래밍 언어의 변수에 가장 가깝다.

 

block scope 예제

Console

 

이처럼 블럭({중괄호})을 단위로 범위를 나눌 수 있다. let은 지역변수라고 생각하면 좋겠다.

 

그리고 만약 let을 재선언하려고 하면 Syntax Error가 발생한다.

 

물론 let이 var보다 제약이 많다.

그러나 let을 사용하면 사용에 제약이 상대적으로 많은 동시에 실수를 줄일 수 있다는 것이다.

제약은 사실 프로그래머를 도와주는 것이라고 생각한다.

 

 

이제 const에 대해 알아보겠다.

 

const는 constance의 약자이며 상수를 뜻한다.

자바의 final과 같으며 선언시 무조건 초깃값이 정해져야하고 값은 변경할 수 없다.

 

let은 초기화가 필수는 아니지만 const는 초기화가 필수이다.

const의 범위는 let과 같다.

 

const

Console

 

Console에서 constVariable의 값 변경을 시도 했다.

값을 변경할 수 없다.

 

또한 const를 사용할 때 생각해야하는 것이 있다.

 

아래의 예제를 통해 설명하겠다.

 

const 사용 예제

Console

 

이처럼 모두 대문자로 만들어주는 것이 좋다. 그러면 변수 이름만 봐도 상수라는 것을 알 수가 있다.

 

실제로 많은 사람들이 위와 같이 사용하며 관례라고 생각할 수도 있다.