이번 주에는
리액트에 처음 입문하여 새로운 개념들을 배우기 시작했다.
JavaScript 기반이나 지금까지는 JS의 내용을 그다지 쓰지 않은 것 같다.
아무래도 다음 주에는 시간을 좀 많이 쏟아서 공부를 해야 할 듯 하다.
이번에 가져온 주제는 ES6이다.
ES란, ECMAScript의 약자이며, 자바스크립트의 표준, 규격을 나타내는 용어이다.
뒤에 숫자는 버전을 뜻하고, ES5는 2009년, ES6는 2015년에 출시되었다.
ES6으로 넘어오며 생긴 차이는
- 변수 선언 방식
ES5에서는 변수 선언시 var를 이용하였다. var는 스크립트 파일이 많아지거나 길어질 경우 개발자가 의도하지 않게 동일한 변수명에 다른 값을 넣어서 시스템에 문제를 발생시킬 수 있는 여지가 있다.
ES6에서는 let과 const가 추가되었다.
let- 일반 변수 생성시 사용, 중복 선언시 Type Error를 발생시킨다. 장점은 잘못된 변수 사용으로 인해 발생하는 오해의 소지를 줄여주기 때문에 정확하게 사용할 수 있다.
const- 상수용 변수로 사용된다. 처음 생성 시 초기값을 지정해주어야 한다.
- 함수 선언 방식
ES5같은 경우 객체내에있는 메소드를 실행시 메소드의 this는 메소드가 선언된 해당 객체를 가리킨다.
하지만 객체안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고있기 떄문에 함수 안에서 this.name , this.age를 하여도 아무 값이 나오지 않는다.
이러한 경우 해결방안으로는 innerInfo.call(this)를 통해 this를 바인딩 시켜주었거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하여 사용하였다.
ES6에서의 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요없이 사용 가능하다 .
또한 ES5의 info : function(){} 처럼 사용하지 않고 바로 info key에게 함수를 선언하여 사용할 수있도록 되어 좀더 간결하게 짤 수 있다.
- 탬플릿 리터럴
ES6로 넘어오면서 ``(백틱 or 억음 부호) 와 ${}를 통해 한줄로 표현가능하며 Single quotation 과 Double quotation을 자유롭게 사용할 수 있게 되었다.
- 객체의 변화
ES5에서는 객체 내부함수에서 의미없는 function keywork를 항상 적어 함수라는 것을 명시해줘야 했으나,
ES6에서는 일반 메서드처럼 name()과 같이 사용할 수 있으며 넣고자 하는 변수와 object의 key가 같다면 변수명만 적어주어도 변수명으로 key:value가 생성된다.
이 외에도 class, 모듈, promise, (비)구조화 할당 등이 있다.
