본문 바로가기
JavaScript

[JavaScript] var, let, const

by Vintz 2020. 12. 21.
반응형

ES6의 등장 전후

블록 스코프를 갖지않는 var

ES6가 나오기 전에는 var로 변수선언을 했습니다. var는 재선언과 재할당이 가능하고 블록 스코프를 갖지않습니다.

// 재선언 및 값의 재할당 가능
{
  // 블록 스코프를 갖지 않음
  var name = '개발 전용';
}
console.log(name); // "개발 전용" (블록 스코프 영향 X)

var name = '개발자 전용';
name = 'only dev';
console.log(name); // "only dev"

var 호이스팅

일반적으로 변수를 선언한 후 값을 할당하지만 var는 '호이스팅'으로 인해 선언부가 최상단으로 끌어올려지고 'undefined'로 값이 초기화되기 때문에 변수를 선언하기전에도 값을 사용 할 수 있습니다.

console.log(blog); // undefined

blog = '티스토리';
var blog;

console.log(blog); // "티스토리"

let과 const를 사용하자

var의 유연성때문에 프로그램을 빠르게 만들 순 있지만 규모가 커지게 되면 어느 시점에 값이 바뀐 건지 알기 어려워지고, 다른 개발자와 협업할 때에도 같은 변수의 이름을 사용해도 에러가 발생하지 않기때문에 디버깅과 유지보수가 힘들어집니다. 그 결과 ES6에서 let과 const가 탄생하게 됩니다.

변수 var 대신 let

let은 var와 달리 값의 재할당은 가능하지만 재선언이 불가능합니다. 또한 변수를 선언하기 전 값을 사용할 수 없고 블록 스코프를 갖습니다. 결국 변수의 이름은 현재 스코프에서 같으면 안되고, 좀 더 절차적인 코드, 값은 변경이 되는 제대로 된 변수 키워드가 나오게 된 것 같습니다.

재선언 불가능한 let

// 값의 재할당 가능 재선언 불가

let name = '개발 전용';
console.log(name); // "개발 전용"

name = 'only dev';
console.log(name); // "only dev"

블록 스코프와 글로벌 스코프

// 글로벌 스코프

let globalName = '티스토리';

{
  // 블록 스코프   
  let name = '개발 전용';
  name = 'only dev'
  console.log(name); // "only dev"
  console.log(globalName); // "티스토리"
}

console.log(globalName); // "티스토리"

※ 글로벌 스코프는 전역범위로써 프로그램이 실행되는 순간부터 끝날 때까지 메모리에 저장되어 어느 곳이든 접근이 가능합니다. 따라서 가능하면 블록스코프 내에서 필요한 부분에서만 정의해서 사용하는 것이 좋습니다.

상수 const

const는 선언함과 동시에 값도 변경할 수 없습니다. 이러한 제약은 여러가지 이점이 있습니다.

  • 보안 - 한 번 작성한 값을 변경할 수 없기때문에 해커들이 임의로 변경하거나 다른 값을 넣는 것을 방지합니다.
  • 스레드 안정성 - 여러개의 스레드가 동시에 값에 접근해서 변경하는 것을 막습니다.
  • 개발자의 실수 방지 - 좀 더 엄격한 코드로 인해 다른 개발자와 협업할 때나 코드를 변경할 때 실수를 줄여줍니다.
  재선언 값 재할당 블록 스코프 호이스팅 변수 타입
var O O X O(undefined) 가변(mutable)
let X O O O(uninitialized) 가변(mutable)
const X X O O(uninitialized) 불변(immutable)

참고

자바스크립트 3. 데이터타입, data types, let vs var, hoisting - 드림코딩 by 엘리(유튜브)
반응형