변수 var, let, const의 차이는?

Yoon·2021년 7월 14일
0

Javascript

목록 보기
1/8

📌 JavaScript에는 var, let, const 변수가 있다.
각각의 차이점은 무엇인지 알아보자.

var

  1. 선언 및 초기화 단계가 동시에 이루어진다.
  2. 할당 단계
  • 재선언, 재할당이 모두 가능하다.
  • var에서는 유일하게 벗어날 수 없는 스코프가 함수 내에 선언되었을 때이다. (함수 스코프)
  • var는 선언하기 전에 사용할 수 있다. 오류가 나지 않는대신 undefined로 값이 출력된다.
    -> 호이스팅(hoisting) : 어디에 선언했는지에 상관없이 항상 제일 위로 선언을 끌어 올려주는 것이다. '스코프 내부' 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다.
console.log(name); //값 할당 전, undefined가 출력된다.
name = 'Mike';
var name;

let

  1. 선언 단계
  2. 초기화 단계
  3. 할당 단계
  • 재선언은 불가, 재할당 가능.
  • 블록 스코프 (함수,if,for,while,try/catch문 등)에서 쓰일 때 : 코드블록내에서만 유효하며 외부 블록에서는 접근 불가하다.
  • 블록 밖에 선언하게 되면 어디에서나 접근이 가능하다. (전역 변수)
    최소한으로 사용하는 것이 좋으며 조건문이나 반복문처럼 필요한 부분에서만 정의해 쓰는 것이 좋다.
let name;
name = 'Mike';

const

  1. 선언 + 초기화 + 할당 단계가 동시에 이루어진다.
  • 재선언, 재할당이 모두 불가능하다.
  • let, var와 다르게 값을 한번 할당하면 값을 또다시 변경할 수 없는 immutable variable
const gender;
gender = 'male'; 
//선언하면서 할당을 안했기 때문에 에러가 난다.
const name = 'hi';
console.log(name); // 'hi' 출력
const name = 'bye';
console.log(name); // 재선언이 불가능하다.
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'js';
console.log(name);// 재할당이 불가능하다.
// Uncaught TypeError: Assignment to constant variable

let은 왜 var처럼 동작하지 않고 에러가 날까❓

=> TDZ : Temporal Dead Zone 때문

  • TDZ영역에 있는 변수들은 사용불가
  • let, const는 TDZ에 영향
  • 할당하기 전에는 사용이 불가.
    코드가 예측가능하고, 잠재적 버그 줄일 수 있다는 장점이 있다.

✔ 정리

변수를 사용할 때는 , var는 사용하지 않고 let, const를 사용한다.

이는 예측가능한 결과를 낼 수 있고, 버그를 줄일 수 있다.
변수 선언에는 const를 기본적으로 사용하고, 재할당이 필요한 경우를 한정해 let을 사용하는 것이 좋다.

profile
FE Developer✨

0개의 댓글