[basics] var, const, let (변수 선언 키워드 비교, 호이스팅)

Jinbro·2022년 8월 23일
0

basics

목록 보기
4/8

javascript ES5 변수 선언 키워드 var의 약점들을 보완하기 위해
ES6letconst 키워드가 도입되었다.
각 변수 선언 방법에 대해 알아보자.

javascript 변수 선언 방식 비교

비교 구분varletconst
ES6 도입 여부XOO
level-scope함수블록블록
중복 선언 가능 여부OXX
재할당 가능 여부OOX

1. var

  • ES5까지 변수 선언 유일한 방법
  • 함수 레벨 스코프
    함수 내 선언된 변수는 함수 내에서만 유효하며 함수 외부에서 참조 불가능
    ex) for 문 내 var 변수 선언 시, for 문 코드 블럭 외부 에서 참조 가능 (함수 내부)
  • var 키워드 생략 가능
    => 선언과 할당 구분 어려움. 전역 변수 양산 가능성 큼
  • 변수 중복 선언 허용
    => 의도하지 않은 변수의 값 변경 가능성 큼
  • 호이스팅
    => 변수 선언 전에 참조 가능
  • 변수 선언과 초기화 동시에 수행

2. let

  • ES6 부터 도입
  • 블록 레벨 스코프
    코드 블록 (함수, if문, for문, while문, try-catch문 등) 내에서만 유효하며 코드 블록 외부에서 참조 불가능
    ex) for 문 코드 블럭 외부에서 참조 불가능
  • 변수 중복 선언 불가
  • 재할당 가능
  • 변수 선언과 초기화 분리

3. 호이스팅

  • 선언문을 해당 scope 의 선두로 옮긴 것처럼 동작하는 특성
  • javascript는 var, let, const, function, class 등 모든 선언을 호이스팅한다.
console.log(salad); // undefined => Error 발생 X
var salad; //  var : 변수 선언과 동시에 undefined 초기화

console.log(pasta); // Error: Uncaught ReferenceError: pasta is not defined
let pasta; // let : 변수 선언, 초기화 분리
// 초기화는 변수 선언문 line에서 수행 => 초기화 이전에 변수 접근 시, 참조 Error 발생!

4. const

  • ES6 부터 도입
  • 블록 레벨 스코프
  • 상수 (불변값) 할당을 위해 사용
  • 변수 중복 선언 불가
  • 재할당 불가
    const 변수 타입이 json object인 경우, 요소의 내용은 변경 가능
  • 선언과 동시에 할당 필수
    만약 const 변수 선언만 할 경우, 문법 오류 (SyntaxError) 발생

정리

  • ES6 에서는 var 키워드 사용 불가
  • 재할당이 필요한 경우에만 let 사용. 그 외 const 사용하는 것이 안전
  • 변수의 scope는 최대한 좁게 만드는 것이 예외 상황 발생 방지에 유리

참고

profile
자기 개발 기록 저장소

0개의 댓글