프론트엔드 개발자 면접 질문(기술면접)(2) - 자바스크립트 변수 const와 var의 차이

자바스크립트 변수 const와 var의 차이

자바스크립트의 변수 선언에는 var, let, const 세 가지를 사용함

var - 재할당 가능

처음에 자바스크립트의 변수 선언은 var로만 가능했었음.
var로 변수를 선언 했을 때의 가장 큰 특징은 중복 선언이 가능함.

var a = 1
console.log(a)  // 결과값 1
var a = 2
console.log(b)  // 결과값 2

var를 사용하면 중복으로 같은 변수명을 계속 선언하고 값을 넣어도 오류가 나지 않고, 첫 번째에 넣은 1은 초기화되고 가장 마지막에 넣은 2만 값으로 저장됨.
유연한 변수 선언이 가능하지만 중복선언의 위험이 큼
=> ES6 이휴에 이를 보완하기 위해서 let과 const가 추가됨.

let - 재할당 가능

변수명을 중복으로 선언하면 오류가 발생하지만 값을 재할당 하는 것이 가능함.

let a = 1
console.log(a)   // 결과값 1
let a = 2
console.log(a)   // Uncaught SyntaxError: Identifier 'a' has already been declared
                 // 중복으로 선언할 수 없음
a = 3
console.log(a)   // 결과값 3

const - 재할당 불가

변수명을 중복으로 선언하면 let과 같은 오류가 발생하지만 값을 재할당 하는 것도 불가능함.
처음에 한번 선언학 나면 다른 값을 넣을 수 없기 때문에 보통 const는 상수를 선언하는 키워드로 사용됨.
=> const는 한번 선언 후 값을 변경 할 수 없기 때문에 값의 흐름이 눈에 잘 보이고 안전하기 때문에 요즘에는 보통 const를 사용함.

const a = 1
console.log(a)   // 결과값 1
const a = 2
console.log(a)   // Uncaught SyntaxError: Identifier 'a' has already been declared
                 // 중복 선언 불가
a = 3
console.log(a)   // Uncaught TypeError: Assignment to constant variable.
                 // 재할당 불가

var, let, const 차이점

1. 변수 선언 방식

var는 변수를 여러번 선언해도 에러가 나지 않고 각기 다른 값이 출력됨.
이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있으나, 코드량이 많아진다면 어디에서 어떻게 사용되는지 파악하기 힘들고 값이 바뀔 우려가 있음.

ES6 이후, 이를 보완하기 위해 추가된 변수 선언 방식이 const와 let임
const와let은 변수 재선언이 되지 않지만 let은 변수에 재할당이 가능하지만 const는 변수의 재할당도 불가능함.

2. 호이스팅

호이스팅(Hoisiting)이란, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

console.log(name)    // undefined
var name = '홍길동'
/*
실행 순서
1. var name
2. console.log(name)  => undefined
3. name = '홍길동'  <= 여기서 할당이 일어남
*/

console.log(age)     // ReferenceError
let age = 40
/*
실행 순서
1. let age => TDZ 안으로 들어감
2. console.log(age)  // Error
3. age = 40
*/

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function, class)을 호이스팅 하지만, var로 선언된 변수와 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생
=> let 으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대 (Temporal Dead Zone, TDZ)에 빠지기 때문
변수는 선언 단계 > 초기화 단계 > 할당 단계에 걸쳐 생성됨
var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어짐

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행
// => 변수 선언문 이전에 변수를 참조할 수 있음
console.log(name)  // undefined
var name
console.log(name)  // undefined

name = '홍길동'
console.log(name)  // 결과값  홍길동

let 으로 선언된 변수는 단계와 초기화 단계가 분리되어 진행(const도 동일)

// 스코프의 선두에서 선언 단계가 실행
// 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않음
// => 변수 선언문 이전에 변수를 참조할 수 없음
console.log(name)  // ReferenceError

let name           // 변수 선언문에서 초기화 단계가 실행
console.log(name)  // undefined

name = '홍길동'     // 할당문에서 할당 단계가 실행
console.log(name)  // 결과값  홍길동

ⅰ) TDZ(Temporal Dead Zone)
 - 값이 할당되어지지 않은 요소들이 TDZ 안에 들어 있을 때 값에 접근하려면 에러가 남
ⅱ) 스코프
 - 변수에 접근할 수 있는 범위

정리

var는 변수를 중복으로 선언하는 것이 가능하고 재할당이 가능해서 유연한 변수 선언이 가능하지만 중복선언의 위험이 크기 때문에 ES6부터는 let과 const를 사용함
let은 변수를 중복으로 선언하는 것은 불가능하지만 재할당이 가능하기때문에 재할당이 필요한 경우를 한정하여 let을 사용하는 것이 좋지만 변수의 스코프는 최대한 좁게 만듬
const는 변수를 중복으로 선언하는 것이 불가능하고 재할당도 불가능하기 때문에 값의 흐림이 눈에 잘 보이고 안전하기 때문에 변수 선언에는 기본적으로 const를 사용함