1.변수선언 방식
- var, let, const 는 javascript의 변수선언 방식
-> 같은 기능을 하는 것 같지만 조금씩 다름
var
- 중복선언 가능, 재할당 가능
var animal = 'polarBear';
console.log(animal); // polarBear
var animal = 'lion';
console.log(animal); // lion
var animal = 'tiger';
console.log(animal); // tiger
- var 는 원조 변수선언방식으로, 위 코드와 같이 선언한 변수가 동일한 이름으로 중복 선언이 가능함
-> 마지막에 할당된 값이 최종 변수에 저장됨- 변수를 유연하게 사용할 수 있지만, 기존에 선언해둔 변수의 존재를 잊고 재선언 하는 경우 문제가 발생함
- 특히 간단한 코드가 아닌, 길고 복잡한 코드에서 같은 이름의 변수가 여러번 선언되어 사용되면 어떤 부분에서 값이 변경되고 문제가 발생하는지 파악하기 힘듦
-> 이를 보완하기 위해 ES6 부터 추가된 변수선언 방식이 let 과 const
let
- 중복선언 불가능, 재할당 가능
let animal = 'polarBear';
console.log(animal); // polarBear
let animal = 'lion';
console.log(animal);
//Uncaught SyntaxError: Identifier 'animal' has already been declared
animal = 'tiger';
console.log(animal); // tiger
- let은 var와 달리 중복선언 시, 해당 변수는 이미 선언되었다는 에러 메세지가 뜸
-> 중복선언이 불가함
-> But 변수에 값을 재할당하는 것은 가능함
const
- 중복선언 불가능, 재할당 불가능
const animal = 'polarBear';
console.log(animal); // polarBear
const animal = 'lion';
console.log(animal);
//Uncaught SyntaxError: Identifier 'animal' has already been declared
animal = 'tiger';
console.log(animal);
//Uncaught TypeError: Assignment to constant variable
- let와 const의 차이는 immutable(재할당)가능 여부
-> 재할당은 가능한 let과 달리 const는 재할당 또한 불가능함.
2. 스코프(Scope)
- 변수에 접근할 수 있는 범위
-> var로 선언한 변수와 let 또는 const로 선언한 변수의 스코프는 다름
var - 함수 레벨 스코프를 가짐 (function-level scope)
function func() {
if (true) {
var animal = 'polarBear';
console.log(animal); // polarBear
}
console.log(animal); // polarBear
}
func(); // polarBear
> console.log(animal); // ReferenceError: 'animal' is not defined
- 함수 내에서 선언된 변수는 함수 내에서만 유효하고 함수 외부에서는 참조할 수 없음.
-> 함수 내부에서 선언한 변수는 지역 변수이고,
함수 외부에서 선언한 변수는 모두 전역 변수로 취급
let, const - 블록 레벨 스코프를 가짐 (block-level scope)
function func() {
if (true) {
let animal = 'polarBear';
console.log(animal); // polarBear
}
console.log(animal); // ReferenceError: 'animal' is not defined
}
console.log(animal); // ReferenceError: 'animal' is not defined
- 함수, if문, for문, while문, try/catch문 등의 모든 코드 블록 ({...}) 내부에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없음
-> 코드 블록 내부에서 선언한 변수는 지역 변수로 취급
3. 호이스팅(Hoisting)
- 변수나 함수가 해당 스코프의 최상단으로 끌어올려지는 현상
(실제로 코드가 끌어올려지는 것이 아닌, 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻함)
-> 미리 선언문을 실행해둔다고 이해하면 됨
var, 함수선언문 -> 호이스팅이 발생
/* 변수 호이스팅 */
console.log(animal); // undefined
var animal = 'polarBear';
console.log(animal); // polarBear
lion(); // lion
function lion() {
console.log('lion');
}
- 변수 animal이 선언되기 전에 참조되었음에도 에러가 발생하지 않음
-> 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined 로 초기화를 해두었기 때문임
-> 함수선언문 또한 동일하게 선언되기 전 호출됨에도 에러가 발생하지 않음
let, const, 함수표현식 -> 호이스팅이 발생하지만, 다른 방식으로 작동
/* 변수 호이스팅 */
console.log(animal); // ReferenceError: a is not defined
let animal = 'polarBear';
console.log(animal); // 'polarBear'
/* 함수 호이스팅 */
lion(); // error
var lion = function() {
console.log("lion");
}
- 변수 animal이 선언되기 전에 참조하니 에러가 발생
-> 호이스팅이 발생하지 않는 것이 아닌, 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문에 보이는 현상임- 함수표현식을 사용하거나 let 또는 const 로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함
-> 그래서 호이스팅이 발생하기는 하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보임
Summary
- 재선언
- var -> 재선언 가능
- let, const -> 재선언 불가능
- 재할당
- var -> 재할당 가능
- let, const -> 선언과 초기화가 반드시 동시에 일어나야 하며 재할당이 불가능(상수와 같은 고정값을 선언할 때 사용)
- 스코프규칙
- var -> 함수레벨스코프를 가짐
- let, const -> 블록레벨스코프를 가짐
- 호이스팅
- var -> 함수 스코프의 최상단으로 호이스팅,
선언과 동시에 undefined로 초기화됨 (선언 전에 출력하면 undefined 가 출력됨)- let, const -> 블록 스코프의 최상단으로 호이스팅,
선언만 되고 값이 할당되기 전까지 어떤 값으로도 초기화되지 않음
- TDZ (Temporal Dead Zone)
-> let, const의 경우는 선언 전에 호이스팅 되긴 하지만 어떤 값도 가지지 않기 때문에 ReferenceError가 발생함
- 바인딩(strict mode가 아니라는 가정 하에)
- var(글로벌 스코프에서 선언되었을 경우) -> 글로벌 객체에 바인딩
- let, const(글로벌 스코프에서 선언되었을 경우) -> 글로벌 객체에 바인딩되지 않음
developer(Frontend)