[ES6] let, const

sangminnn·2020년 4월 2일
0

글로 정리하는 ES6

목록 보기
1/11
post-thumbnail

등장 배경

이전의 Execution Context 글에서 정리한 내용 중

실행 컨텍스트 생성 시에 조금은 독특한 움직임이 하나 있었다.

그것은 바로 호이스팅(Hoisting) 이다.

이전 글에 있던 내용의 일부분을 가져와보면

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.

따라서 변수 선언문 이전에 변수에 접근하여도

Variable Object에 변수가 존재하기 때문에 에러가 발생하지 않는다. 

다만 undefined를 반환한다. 

이러한 현상을 변수 호이스팅(Variable Hoisting)이라한다.

아직 변수 x는 ‘xxx’로 초기화되지 않았다. 

이후 변수 할당문에 도달하면 비로소 값의 할당이 이루어진다.

이라는 내용이 나온다.

( 추후 비교를 위해 여기서 var로 선언된 변수는 선언과 초기화가 한번에 이루어 진다는 점만 기억하자. )

이러한 독특한 움직임 때문에 아마 개발자들은 이 호이스팅에 대한 것을 고려하며

코드를 짜느라 항상 보다 더 많은 생각을 하고, 불편해 했을 것이다.

그래서 나온게 let, const 이다.

사용 방법

사용방법은 var를 사용하는 방식과 동일하게 사용해주면 된다.

var one = 1;
let two = 2;
const three = 3;

달라진 점?

먼저 3가지 변수 선언 방식에 대한 코드를 소개하고 진행하려고 한다.

//ES5 code :: var>>
    console.log(foo); //undefined
    var foo;
    console.log(foo); //undefined
    foo = 123;
    console.log(foo); //123
    //ES6 code :: let>>
    console.log(foo); //ReferenceError
    let foo;
    console.log(foo); //undefined
    foo = 123;
    console.log(foo); //123
// 출처 : https://jaeyeophan.github.io/2017/04/18/let-const/

아무래도 varlet, const 의 차이를 찾아보다보면 가장 많이 보이는 문장은

var를 사용했을때와 다르게 let으로 정의된 변수들은 호이스팅 되지 않는다.

라는 문장이라고 생각한다.

하지만 이전에 공부한 실행컨텍스트를 다시 생각해보면 뭔가 이상하다고 생각했다.

' 실행컨텍스트의 변수 객체에는 변수라면 모두 처음에 들어갈텐데,
이 과정은 호이스팅이 아닌가 ..? '

라는 생각을 가지고 더 찾아보고 직접 console에 찍어본 결과 내 생각이 맞았다.

호이스팅은 일어나지만 undefined로 값이 초기화 되는 것은 var 를 사용했을 때만 그런 것이다.

이 외의 차이점으로는

let으로 정의된 변수는 같은 블록에서 재할당될 수는 있지만 재정의는 될 수 없다.

const의 경우는 재할당조차도 안된다. 따라서 상수를 정의할 때 주로 사용한다는 점이 있고,

var , let / const 이 두 부류의 가장 큰 차이는 var의 경우는 함수 스코프 안에서 유효하고,

let / const블록 스코프 안에서 유효하다는 점이다.

++) 여기서 블록이란 if, else, for, while 같은 문법으로 지정된 { } 블록을 의미한다.

( 참고: https://jaeyeophan.github.io/2017/04/18/let-const/ )

profile
생각하며 코딩하려고 노력하는 개발자가 되겠습니다.

0개의 댓글