ES6에 추가된 메이저한 변화들 간략하게 정리
export와 import로 코드를 모듈화하기 쉬워짐
프로미스 문법의 등장
클래스와 상속 개념의 등장
let과 const의 등장
`` 템플릿리터럴의 등장으로 문자열 삽입이 쉬워짐
객체를 구조분해할당 할수 있게 됨
이터러블한 제너레이터 객체와 함수 생성 가능
맵과 셋이 들어오게 됨!
Intl API로 문자열, 숫자, 날짜를 전달할 수 있게 됨. 다국어 페이지 제작이 쉬워짐
화살표 함수가 생김!
화살표 함수는 함수를 줄여서 쓰게 해주는 고마운 애다.
앞부분을 떼어낼 수 있는 것은 물론이고 짧은 함수 작성시 중괄호, 대괄호를 생략할 수 있고 리턴이 한줄일 경우 리턴조차 생략할 수 있다.
짧으면 코드의 양 자체도 줄어들지만 개발자가 보기에 눈이 덜 아프면서 직관적이라는 장점도 있다. 코드를 읽고 파악하는데에 가독성은 중요한 요소이다.
이건 this에 관한 칼럼도 읽어야 이해가 가는데 자바스크립트에서의 this는 위치나 생성방법에 따라서 값이 동적으로 바뀐다. 그치만 화살표함수는 일반 함수와 다르게 생성시의 환경을 기억하고 this의 값을 고정해버린다.
https://velog.io/@matt2550/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%84%B0%EC%8A%A4-22-this
렉시컬환경과 비슷하다. this가 어디를 참조하는지 잘 모르겠는 경우에 화살표 함수를 쓰면 좋다.
es6이전까지는 고차함수 마지막에 바인딩을 고정할 수 있는 인자를 넣어 this의 값을 고정시켜야 했지만, 화살표함수의 등장으로 고민하지 않고 그냥 일반 함수 대신에 사용하면 자동으로 적용된다.
this : 상위객체의 this를 참조형태로 가지고 있는 것 뿐이다.
prototype : 프로토타입 객체가 없어서 생성자함수가 될 순 없다.
arguments : 상위객체의 arguments를 참조형태로 가지고 있는 것 뿐이다.
스스로 값을 가지고 있는게 아니기 때문에 상위 객체가 호출되어서 오류가 난다.
이벤트리스너는 기본적으로 콜백을 자신의 this로 바인딩한다. 그래서 콜백(핸들러)을 화살표 함수로 선언한다면, 설계된 로직상 바인딩 자체가 일어날 수 없게 된다.
함수가 뭘 가져오는지, 화살표함수는 뭘 안가져오는지 각각의 원리와 특징을 알고 있으면 디버깅타임을 줄일 수 있다!