본문 바로가기
  • 실행력이 모든걸 결정한다
Frontend/JavaScript

var, let, const의 차이점 정리

by 김코더 김주역 2021. 3. 13.
반응형

 

이번 포스팅에서는 javascript의 변수 선언 방식인 var, let, const의 차이점에 대해 다룰 것이다.

 

1. 변수 or 상수?

  • var : 변수
  • let : 변수
  • const : 상수

2. 재선언이 가능한가?

  • var : O
  • let : X
  • const : X

3. 선언 이전에 참조할 수 있는가? (블록 내)

  • var : O (단, undefined가 출력된다)
  • let : X
  • const : X

※ 선언 이전에 참조하는 것을 Hoisting이라고 한다.

4. IE 지원 버전

  • var : 모든 버전 지원
  • let : IE11~
  • const : IE11~ 

 

차이점은 이정도로만 정리해보기로 하고, 자바스크립트에서는 var보단 let을 사용하는걸 권장하는 이유를 알아보자.

 

전역 변수는 가급적 사용을 자제하라는 말이 많은데 왜 그런지 알고 있는가?

전역 변수는 프로그램의 어디에든 영향을 끼치기 때문에 개발자들의 실수를 더욱 유발하게 된다.

scope(범위)가 넓을수록 원하지 않는 값이 실수로 들어가버리기 쉬워지고, 이는 컴파일에러가 나는 문제도 아니기 때문에 디버깅도 쉬운일이 아닐 것이다.

 

자바스크립트는 function-level-scope(함수 레벨 스코프)로 만들어졌으며, var은 함수 내 어디에 선언하든 함수 전체 범위에 영향을 미치게 된다. 함수의 맨 처음에 선언한 것과 동일한 효과인것이다.

그래서 var은 아까 설명했던 Hoisting이 가능했던 것이다.

 

이처럼 var은 scope도 넓고 Hoisting도 가능하고 대부분의 프로그래밍 언어는 block-level-scope(블록 레벨 스코프)이기 때문에 개발자의 실수를 더더욱 유발하기 쉬워지는 것이다.

그래서 이 var의 단점들을 보완하고자, 이후에 도입된 것이 let과 const이다. let과 const는 블록 레벨 스코프를 따르는 효과를 내는 변수 선언 방식이다.

 

 

 

 

 

반응형

댓글