[자바스크립트(js)] let과 var 무엇을 쓸건인가?

let과 var

ECMAScript 2015(ES6)에서 도입된 let과 var 키워드는 프로그래밍 언어의 스코프를 제어하는 방법의 차이를 가리킨다. let과 var은 같은 이름의 변수를 생성하기 위해 사용하는 키워드이지만, 변수를 특정 스코프 안에서 유효하게 생성하는 방법의 차이가 있다.

let

let은 블록 스코프(block scope)를 사용하여 변수를 선언하는 구문이다. 블록 스코프는 블록 내부의 스코프를 의미하며, 블록의 시작과 끝을 나타내는 중괄호 {} 로 구분한다. 따라서 let은 해당 블록 내부에서만 유효한 변수를 생성한다.

예시

function testLet() {
  let a = 10;
  if (a > 5) {
    let b = a * 2;
    console.log(b); //20
  }
  console.log(b); //ReferenceError: b is not defined
}

위의 예시에서는 함수 testLet()을 사용하여 변수 a와 b를 선언했다. 변수 a는 if문 밖에서 선언되었고, 변수 b는 if문 안에서 블록 스코프를 사용하여 선언되었다. 따라서 if문 밖에서는 변수 b를 사용할 수 없는 것을 볼 수 있다.

var

var은 함수 스코프(function scope)를 사용하여 변수를 선언하는 구문이다. 함수 스코프는 함수 내부의 스코프를 의미하며, 함수의 시작과 끝을 나타내는 괄호() 로 구분한다. 따라서 var은 함수 내부에서 유효한 변수를 생성한다.

예시

function testVar() {
  var a = 10;
  if (a > 5) {
    var b = a * 2;
    console.log(b); //20
  }
  console.log(b); //20
}

위의 예시에서는 함수 testVar()을 사용하여 변수 a와 b를 선언했다. 변수 a와 b 모두 if문 내부에서 선언되었지만, 변수 b는 var 키워드를 사용하여 함수 내부의 스코프를 사용하여 선언되었다. 따라서 if문 밖에서도 변수 b를 사용할 수 있는 것을 볼 수 있다.

활용방법

let과 var은 같은 이름의 변수를 생성하기 위해 사용하는 키워드이지만, 변수를 유효하게 생성하는 방법의 차이가 있다. 같은 이름의 변수가 중복해서 선언되지 않도록 하거나, 특정 블록 내부에서만 유효하게 하고 싶은 경우는 let을 사용하면 된다. 반면, 함수 내부에서만 유효하게 하고 싶은 경우는 var을 사용하면 된다.