Javscript 변수 선언 방법 (var, const, let)

들어가기

javascript 변수 선언방식에는 var, const, let 키워드 3가지가 있다.

각 선언방식의 유효 범위와 값 재할당 및 재선언에 대해서 자세히 알아보자.

var 키워드

---

• 유효 범위 - 함수 레벨 스코프
• 값 재할당 - 가능
• 재선언 - 가능

var키워드는 함수 레벨 스코프이기 때문에 아래 코드와 같이 작동된다.

var a = '123';

const test = () => {
  var a = '테스트';

  console.log(a); // result: '테스트'
};

test();

console.log(a); // result: '123'

 

또한 함수 레벨 스크프이기 때문에 블록 레벨 스코프는 무시된다.

var i = 0;

for (var i = 0; i < 10; i++) {
  console.log('for')l
}

console.log(i)

또한 var 키워드를 사용한 변수 선언은 코드 예측이 힘들 뿐더러(전역에서 var로 선언 시 window에 들어감) 예기치 못한 상황 혹은 버그를 일으킬 수 있다. 때문에 const와 let이 나온 이후 부턴 var 사용보단 let과 const 사용을 권장한다.

let 키워드

---

• 유효 범위 - 블록 레벨 스코프 / 함수 스코프
• 값 재할당 - 가능
• 재선언 - 불가능

재할당은 가능하지만 재선언은 불가능

let a = '123';
a = '테스트';

console.log(a); // result: '테스트'

let b = '123';
let b = '테스트';

// Uncaught SyntaxError: Identifier 'b' has already been declared

 

블록 레벨 스코프이기 때문에 아래와 같이 작동된다.

let i = 0;

for (let i = 0; i < 10; i++) {
  console.log(i); // result: 0 ~ 9
}

console.log(i); // result: 0

const 키워드

---

• 유효 범위 - 블록 레벨 스코프 / 함수 스코프
• 값 재할당 - 불가능
• 재선언 - 불가능

재선언 불가능, 값 재할당은 원시 값의 경우엔 변경이 불가능하지만 배열이나 객체의 데이터는 변경 가능

const a = '123';
a = '테스트';

// VM1225:2 Uncaught TypeError: Assignment to constant variable.

const b = '123';
const b = '테스트';

// Uncaught SyntaxError: Identifier 'b' has already been declared

const obj = {
  name: '테스트',
};

obj.name = '수정';

console.log(obj.name); // result: '수정'