[JS] var let const 차이 그리고 호이스팅(hoisting)

최준영·2024년 1월 19일

변수선언

1. var

  • var는 가장 오래된 변수 선언 키워드로,함수 스코프(function scope)를 가집니다.
    -> 함수 스코프란?
    생성된 함수 내에서만 사용 가능하고, 함수 내부에서 생성되지 않은 경우 전역 범위를 가집니다.
  • var에서는 호이스팅(hoisting)이 발생합니다.
    -> 변수 선언하기 전 사용 가능 하지만 이때 변수의 값은 'undefined'입니다.
  • var는 같은 스코프 내에서는 재선언 가능합니다
var a = 'javascript';
console.log(a); // javascript
var a = 'web';
console.log(a); // web
// 아래는 hoisting 예시
console.log(b); // undefined
var b = 5;
console.log(b); // 5

2. let

  • let은 ES6에서 처음 도입되었고, 블록 스코프(block scope)를 가집니다.
    -> 블록 스코프란?
    변수가 선언된 블록 내에서만 접근 가능한 범위를 의미한다.
  • let으로 선언된 변수는 같은 스코프내에서 재선언 불가능 합니다.
  • let도 호이스팅(hoisting)이 발생하지만 선언 이전에 let 변수를 사용하면 reference error(참조 오류)가 발생합니다.
let a = 'javascript';
console.log(a); // javascript
let a = 'web';
console.log(a); 
// Uncaught SyntaxError: Identifier 'a' has already been declared
// 아래는 호이스팅 예시
console.log(b); //ReferenceError: Cannot access 'b' before initialization
let b = 5;
console.log(b); //5

3. const

  • const도 ES6에서 처음 도입되었고, let과 마찬가지로 블록 스코프를 가집니다.
  • const는 변수 선언 시에 값을 할당해야 하고, 그 이후에는 값을 변경 불가능합니다.
  • const도 마찬가지로 호이스팅이 발생하지만 let과 마찬가지로 선언 전에는 접근 불가능합니다.
const a = 'javascript';
console.log(a); // javascript
a = 'web';
console.log(a); // Uncaught TypeError: Assignment to constant variable
// 아래는 호이스팅 예시
console.log(b); //ReferenceError: Cannot access 'b' before initialization
const b = 5;
console.log(b); //5

4. 호이스팅(hoisting)이란?

호이스팅(Hoisting)이란 함수 내의 변수 및 함수 선언을 각 유효 범위의 최상단으로 끌어 올려주는 JS의 독특한 특징이다.

0개의 댓글