FRONTEND/JAVASCRIPT

JavaScript 튜토리얼 - JavaScript Let

우진하다 2023. 7. 24. 15:40

let

let 키워드는 ES6(2015)부터 도입되어 재선언 할 수 없습니다.
var와 비교했을 때, let은 다음과 같은 특성과 차이점을 가집니다.

 

Cannot be Redeclared

같은 스코프 또는 블록 내에서 let으로 선언된 변수는 재선언할 수 없습니다. 
반면에 var 키워드를 사용하면 같은 스코프 내에서 변수를 재선언할 수 있습니다.

let y = 1;
let y = 2;  // Uncaught SyntaxError: Identifier 'y' has already been declared

 

Block Scope

let 키워드로 선언된 변수는 블록 스코프를 가집니다. 
블록 스코프란 중괄호 {}로 둘러싸인 영역을 의미합니다. 
따라서, let으로 선언된 변수는 그 변수가 선언된 블록 내에서만 접근 가능합니다.

let x = 1;  // global scope

if (true) {
    let x = 2;  // local scope inside this block
    console.log(x);  // logs 2
}

console.log(x);  // logs 1
var  x = 10;
// Here x is 10

{  
var x = 2;
// Here x is 2
}

// Here x is 2
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10

 

Difference Between var, let and const

var 
var는 함수 스코프를 가진 변수를 선언하는데 사용됩니다. var로 선언된 변수는 선언된 함수 내에서 어디에서나 접근할 수 있습니다. var로 선언된 변수는 호이스팅되며, 같은 스코프 내에서 재선언이 가능합니다. 또한, var로 선언된 변수는 선언 전에 사용될 수 있습니다(하지만 그 값은 undefined로 설정됩니다).

console.log(varVar); // undefined
var varVar = 5;

let
let은 블록 스코프를 가진 변수를 선언하는데 사용됩니다. let으로 선언된 변수는 선언된 블록({}로 둘러싸인 영역) 내에서만 접근할 수 있습니다. let으로 선언된 변수는 호이스팅되지 않으며, 같은 블록 내에서 재선언이 불가능합니다. 또한, let으로 선언된 변수는 선언전에 사용될 수 없습니다. 이를 Temporal Dead Zone이라고 합니다.

console.log(letVar); // Uncaught ReferenceError: letVar is not defined
let letVar = 5;

const
const도 블록 스코프를 가진 변수를 선언하는데 사용됩니다. 그러나 const는 상수를 선언하는데 사용됩니다.
즉, 한번 선언된 const 변수의 값은 변경될 수 없습니다. 만약 객체나 배열을 const로 선언한다면, 그 객체나 배열 자체는 변경될 수 없지만, 그 내부의 속성이나 요소는 변경될 수 있습니다.

const constVar = 5;
constVar = 10; // Uncaught TypeError: Assignment to constant variable.

 

 

정리.

좋은 점들
let과 const는 블록 스코프를 가집니다.
let과 const는 재선언이 불가능합니다.
let과 const는 사용하기 전에 반드시 선언해야 합니다.
let과 const는 this에 바인딩되지 않습니다.
let과 const는 호이스팅되지 않습니다.

부정적인 점들
var는 반드시 선언할 필요가 없습니다.
var는 호이스팅됩니다.