[JavaScript] var, let, const

Letmegooutside·2022년 1월 9일

목록 보기

6/25

1.var

자바스크립트 ES5버전 까지의 변수 선언 방식이었다.

var 키워드는 생략 가능하다.

a = 10; // a는 var 변수이다.
console.log(a); // 10

재선언과 재할당이 모두 가능하다.

var a = "10";
console.log(a); //10

var a = "20"; // 재선언
console.log(a); //20

a = "30"; // 재할당
console.log(a); //30

함수레벨 스코프(function level scope) 이다.

자바스크립트는 기본적으로 함수 레벨 스코프를 가진다.
함수 레벨 스코프란 함수 안에서 사용하면 함수 밖을 제외한 내부 어디서든 접근 가능하고, 함수 외부에서 선언된 모든 변수는 전역 변수로 한다는 의미이다.
(c와 java같은 다른 언어는 블록 레벨 스코프를 가진다.)

function f() {
  var hello = "hello world";
  console.log(hello);
}
f(); // hello world
console.log(hello); // ReferenceError

함수 외부에서hello변수에 접근한다면 참조에러가 발생한다.
전역 변수의 사용은 변수 이름이 중복될 수 있고, 의도치 않은 재할당에 의한 상태 변화로 코드를 예측하기 어렵게 만들 수 있으므로 사용을 지양하는 것이 좋다.
이러한 문제점들을 해결하기 위해 ES6부터 도입된 let과 const로 블록 레벨 스코프를 사용할 수 있게 해준다.

2. let, const

재선언이 불가능하다.

let a = 10;
let a = 20; // SyntaxError

const b = 10;
const b = 20; // SyntaxError

let은 재할당이 가능하지만 const는 불가능하다.

let a = 10;
a = 20;
console.log(a); // 20

const b = 10;
b = 20; // TypeError
console.log(b); // 10

블록 레벨 스코프(block level scope)이다.

블록 레벨 스코프란 모든 코드 블록 (함수, if, for, while, try/catch ...)내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
즉 코드 블록 내부에서 선언한 변수는 지역 변수이다.

function f() {
  if (true) {
    let a = 10;
  }
  console.log(a); // ReferenceError
}

변수 a는 코드 블록 내에서만 유효하므로 참조에러가 출력된다.

3. var vs let, const

변수 선언에는 기본적으로 const를 사용하고, let은 재할당이 필요한 경우에 한정하여 사용하는 것이 좋으며 이 때 변수의 스코프는 최대한 좁게 만든다.
const 키워드는 의도치 않은 재할당을 방지해 주기 때문에 안전하게 사용할 수 있다.

var

재선언, 재할당 가능
함수 레벨 스코프
어디든 선언이 가능하고, 변수 값 할당도 어디서든 가능함

let

재선언 불가능
재할당 가능
블록 레벨 스코프

const

상수(변하지 않는 값)를 위해 사용
재선언 불가능
블록 레벨 스코프
변수 선언과 값 할당이 동시에 이루어져야 함 (재할당 금지)
지정된 값은 수정할 수 없음
원시값이 들어가는 변수에 사용 적합

Letmegooutside

이전 포스트

[JavaScript] 호이스팅

다음 포스트