변수 선언 방식(JS)

코드스테이츠의 첫날이 밝았다. 첫날에는 변수의 선언과 자료형에 관한 수업을 들었다. 오랜만에 만나는 JS인만큼 나름대로 나만의 개념을 정립하며 나아갈 생각이다. 오늘은 그중에서 변수의 선언 방식에 관해 공부해 적는다

---

변수 선언

js의 변수선언 방식 var, let, const의 차이에 대해 알아본다.

var은 선언방식에 단점이 있다.

var curry = ‘honey butter curry’;
console.log(curry) // honey butter curry
var curry = 'mango chicken curry';
console.log(curry) // mango chicken curry

중복된 변수를 선언했지만 각기 다른 값이 출력됨을 볼 수 있다. 이렇듯 var은 코드의 양이 많아질 수록 오류를 야기시킬 위험이 높다.

이를 보완하기 위해 ES6이후 추가된 변수 선언 방식이 let과 const라고 한다.

let curry = ‘honey butter curry’;
console.log(curry) // honey butter curry
let curry = 'mango chicken curry';
console.log(curry)
// Uncaught SyntaxError: Identifier 'name' has already been declared

---

const curry = ‘honey butter curry’;
console.log(curry) // honey butter curry
const curry = 'mango chicken curry';
console.log(curry)
// Uncaught SyntaxError: Identifier 'name' has already been declared

const 와 let 모두 이미 선언되었다는 에러가 나오며 변수재선언을 할 수 없다.

그렇다면 let과 const의 차이는 무엇일까

immutability의 여부라고 한다. immutability(변경불가성)은 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다.

let은 변수에 재할당이 가능하다.

let curry = ‘honey butter curry’;
console.log(curry) // honey butter curry
let curry = 'mango chicken curry';
console.log(curry)
// Uncaught SyntaxError: Identifier 'name' has already been declared
curry = 'india curry'
console.log(curry) // indea curry

const는 재할당할 수 없다.

const curry = ‘honey butter curry’;
console.log(curry) // honey butter curry
const curry = 'mango chicken curry';
console.log(curry)
// Uncaught SyntaxError: Identifier 'name' has already been declared
curry = 'india curry
console.log(curry)
// Uncaught TypeError: Assignment to constant variable.

또한 JS에는 호이스팅(hoisting)이라는게 있다. 이는 python의 동기적 처리에 익숙해진 내겐 낯선 단어였다. 호이스팅이란 var,let,function등 각종 선언문들을 스코프의 시작으로 끌어올리는 것을 말한다.

다시말해 변수를 호출하고 그뒤에 선언,할당을 해도 해당 변수를 사용할 수 있다는 말이다.

console.log(curry); // undefined
var curry

여기서 잠깐 짚고 넘어가야 할것이 변수의 선언부터 할당까지는 세단계를 걸친다. 선언 > 초기화 > 할당 이 그 순서이다.

초기화 단계는 변수를 담을 메모리 공간 확보와 undefined로 초기화를 의미한다.

var선언은 선언과 초기화가 한꺼번에 이루어지는 반면, let은 선언과 초기화가 분리되어 다음과 같은 현상이 일어난다.

// var의 경우
// 선언과 초기화가 동시에 진행됩니다 > undefined로 초기화되어있음
console.log(curry); // undefined
var curry; // 변수 선언(스코프의 맨 위로 올라감)
console.log(curry); // undefined
curry = 'butter curry' // 할당문에서 변수에 값이 할당이 됨
console.log(curry); // 'butter curry'

---

//let의 경우
// 선언은 진행되었지만 아직 초기화가 되지 않았습니다. > 아예 할당된 메모리가 없음
console.log(curry); // ReferenceError: curry is not defined
let curry; // 선언과 함께 초기화가 이루어집니다. 이때에서야 비로소 메모리가 할당되고 undefined로 참조할 수 있습니다.
console.log(curry); // undefined
curry = 'butter curry' // 할당문에서 변수에 값이 할당이 됨
console.log(curry); // 'butter curry'

결론

재할당이 필요하다면 let, 아니라면 const를 사용하자.

단 let을 사용할때 선언과 초기화가 분리되있음을 조심할 것