[11월 4주차] 자바스크립트 ES5와 ES6의 차이점 (feat. 항해99 알고리즘 주차 후기)

이번주는 알고리즘 주차였다. 일주일 동안 프로그래머스 중간 단계문제들 26문제를 풀었다. 사실 자바스크립트로 알고리즘 문제는 처음 풀어봐서 처음에는 달리기반에 온 것을 약간 후회할 뻔 했지만, 그래도 일주일 동안 실력이 많이 늘은 것이 보여서 매우 뿌듯해하는 중이다. 일주일 전만해도 깊은 복사, 얕은 복사도 모르고 call by value도 몰랐던 나였다ㅋㅋㅋ 알고리즘뿐 만 아니라 자바스크립트라는 언어 자체에 대한 이해도가 높아졌다.

 

ES라는 자바스크립트의 언어 규격, 스펙에 대해 알게 된 점도 많다. 특히나 ES5에서 ES6 (정확히는 ES 2015이다.)으로 넘어오면서 달라진게 많아졌다고 한다. 가장 중요한 3가지에 대해 설명하자면 먼저 let, const 키워드가 추가되었다. 기존의 변수는 함수 scope를 가진 var 키워드를 이용하여 선언하였는데 block scope를 가진 let과 const 키워드를 추가한 것이다. 기존에는 상수형 키워드가 없어 CONST_TEST와 같이 대문자로 상수임을 표시했다면, ES 6부터 const 키워드가 추가되어 값의 변경을 통제할 수 있게 되었다. 모던 자바스크립트 딥다이브에서도 배웠었는데, 기존의 var 키워드가 함수 레벨 스코프이다 보니, 다른 언어와 달리 스코프가 달리 적용되면서 단점이 있었는데 이젠 블록 레벨 스코프인 let과 const를 쓰면서 달라졌다.

 

두번째로 arrow 문법을 지원한다. arrow 문법을 통해 익숙해지면 편하고 간결해진 코드를 작성할 수 있다. 세번째로 this의 동작이 달라졌다. ES5같은 경우 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다. 하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this를 사용하여도 아무 값이 나오지 않는다. 이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하여 사용하였는데, ES6에서는 더 이상 그럴 필요가 없다. ES6에서의 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다. 화살표 함수를 쓰면 함수가 선언된 스코프에 자동 바인딩이 된다.

var obj = {
  value: 10,
  // 메소드 호출
  show: function () {
    console.log(this.value); // 10
    // 함수 호출
    function show_01 () {
      console.log(this.value); // undefined
    }
    show_01();
    // 화살표 함수
    function show_02 = () => {
      console.log(this.value); // 10
    }
    show_02();
  }
}
obj.show();