자바스크립트의 ‘let’과 ‘var’ 차이점 예제와 함께 알아보자

자바스크립트에서 ‘var’와 ‘let’ 키워드는 모두 변수 선언에 사용됩니다.

‘let’ 키워드는 자바스크립트의 최근 버전인 ES6(ES2015)에서 도입되었으며, 이제 변수를 선언하는 선호되는 방법입니다.

자바스크립트 ‘let’ 대 ‘var’

‘let’과 ‘var’의 차이점을 아래에 개관적으로 정리해보았습니다.

let:

• 블록 스코프를 가집니다.
• 변수를 재선언할 수 없습니다.
• 호이스팅이 발생하지 않습니다.

var:

• 함수 스코프를 가집니다.
• 변수를 재선언할 수 있습니다.
• 호이스팅이 발생합니다.

로컬 스코프에서의 자바스크립트 ‘let’과 ‘var’

‘var’는 함수 스코프입니다. ‘var’로 선언된 변수는 함수 내 어디에서나 사용될 수 있습니다. 예를 들어,

// 텍스트 출력 프로그램
// a 변수는 여기서 사용할 수 없습니다.
function greet() {
// a 변수는 여기서 사용할 수 있습니다.
var a = 'hello';
console.log(a);
}
// a 변수는 여기서 사용할 수 없습니다.
greet(); // hello

위의 프로그램에서, 변수 ‘a’는 ‘var’로 선언되었고, 함수 ‘greet’ 내 어디에서나 사용할 수 있습니다.

‘let’은 블록 스코프입니다. ‘let’으로 선언된 변수는 코드 블록 내에서만 접근할 수 있습니다. 예를 들어,

// 텍스트 출력 프로그램
// a 변수는 여기서 사용할 수 없습니다.
function greet() {
  let a = 'hello';
  // b 변수는 여기서 사용할 수 없습니다.
  if(a == 'hello'){
    // b 변수는 여기서 사용할 수 있습니다.
    let b = 'world';
    console.log(a + ' ' + b);
  }
  // b 변수는 여기서 사용할 수 없습니다.
  console.log(a + ' ' + b); // 오류
}
// a 변수는 여기서 사용할 수 없습니다.
greet();

출력 결과는 “hello world”이며, 변수 ‘b’는 if 블록 문 내에서만 접근할 수 있기 때문에 if 블록 바깥에서 b 변수에 접근하려 하면 오류가 발생합니다(위 프로그램에서와 같이).

주의: 함수 내에서 선언된 변수는 ‘var’와 ‘let’ 모두 함수 스코프를 가집니다.

변수를 재선언할 수 없는 ‘let’

1. ‘var’로 선언된 변수는 다시 재선언할 수 있습니다. 예를 들어,

var a = 5; // 5
var a = 3; // 3

반면 ‘let’으로 선언된 변수는 같은 블록이나 스코프에서 재선언할 수 없습니다. 예를 들어,

let a = 5;
let a = 3; // 오류

출력 결과는 “Uncaught SyntaxError: Identifier ‘a’ has already been declared” 입니다.

2. 다른 스코프나 블록에서 ‘var’로 변수를 재선언하면 외부 변수의 값도 변경됩니다. 예를 들어,

var a = 5;
console.log(a); // 5
{
  var a = 3;
  console.log(a); // 3
}
console.log(a); // 3

다른 스코프나 블록에서 ‘let’으로 변수를 재선언하면 해당 변수는 다른 변수로 취급되며 외부 변수의 값은 변경되지 않습니다. 예를 들어,

let a = 5;
console.log(a); // 5
{
  let a = 3;
  console.log(a); // 3
}
console.log(a); // 5

3. ‘var’로 선언된 변수가 루프에서 사용되면 그 변수의 값이 변합니다. 예를 들어,

var a = 2;
for(var a = 0; a < 3; a++)
{
  console.log('hello'); 
}
console.log(a); // 3

위의 프로그램에서, for 루프는 변수 ‘a’를 다시 선언합니다. 따라서 끝나고 나면 ‘a’의 값은 3으로 변경됩니다. ‘let’으로 선언된 변수가 루프에서 사용되면 변수의 값은 변하지 않습니다. 예를 들어,

let a = 2;
for(let a = 0; a < 3; a++)
{
  console.log('hello');
}
console.log(a); // 2

위의 프로그램에서 for 루프는 위에서 선언된 변수 ‘a’와는 다른 변수로 취급하고, 그 변수의 스코프는 for 루프 내부로 한정됩니다. 그래서 변수 ‘a’의 값은 끝까지 2로 남아있습니다.

호이스팅을 허용하지 않는 ‘let’

‘var’로 선언된 변수는 프로그램의 스코프 상단으로 호이스팅됩니다. 예를 들어,

console.log(a);// undefined (에러가 아닙니다)
var a; 

‘let’ 키워드는 호이스팅을 허용하지 않습니다. 예를 들어,

console.log(a);// Uncaught ReferenceError: a is not defined
let a; 

‘let’과 ‘var’의 브라우저 지원 대부분의 현대 브라우저는 ‘let’의 사용을 지원합니다. 그러나 일부 브라우저는 ‘let’을 완전히 지원하지 않습니다. 자세한 내용은 자바스크립트 ‘let’ 브라우저 지원을 방문하시기 바랍니다.