ES6 공부
let
- javascript ES5에서는 function-level scope를 갖기 때문에 함수 내에서 선언된 변수만 외부에서 참조할 수 없고, 블록 내에서 선언된 변수는 제한이 없기 때문에 전역에 선언된 변수와 이름이 중복되면 그 값을 재할당 해버려서 의도치 않은 변수 값 변경이 발생할 문제가 있다.
- let으로 변수를 선언하면 block-level scope를 갖기 때문에 전역 변수와 이름이 같더라도 전역 변수를 참조할 수 없다.
- let은 중복 선언시 SyntaxError가 발생한다.
var, let 의 호이스팅 비교
- 호이스팅이란 var 선언문이나 function 선언문을 해당 스코프의 선두로 옮기는 것을 말한다.(암묵적으로)
- var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 함께 이뤄지기 때문에 할당 단계를 거치지 않고 선두에서 호출을 하더라도 에러가 발생하지 않는다. => undefined로 초기화
- let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
- 스코프에 변수가 등록되고, 일시적 사각지대(Temporal Dead Zone)를 지나서 변수 선언문에 도달했을 때 초기화가 이뤄진다. => 초기화 이전에 선두에서 변수를 호출한다면 ReferenceError가 발생한다.
Arrow function
- 함수표현식에서 사용한다.
- 일반함수, 생성자함수에서는 사용하지 않는다.
Arrow function 사용하면 안되는 경우
- 메소드 정의
- 프로토타입 메소드
- 생성자 함수
- addEventListener 함수의 콜백 함수(this는 window가 된다. => click 이벤트일 경우, e.currentarget으로 함수를 호출한 자신을 호출할 수 있지만 this로 자기 자신을 호출해야 한다면.. Arrow function을 쓰지 않도록 한다. )
arguments -> rest 파라미터
- 가변 인자 함수를 구현함.
- arguments은 가변인자 개수 지정을 가능하게 하는 순회가능한 유사 배열 객체이다.
- ES6에는 argumnets가 없고 rest 파라미터를 사용한다.
rest 파라미터
- Spread(…)연산자를 사용하여 파라미터를 작성한 형태
- 분리된 요소들을 함수 내부에서 배열로 전달 받을 수 있음(순차적으로)
- 반드시 마지막 파라미터(인수).(안그럼 syntaxError)`
Spread(…) 연산자
- 개별 요소로 분리한다.
- 이터러블(순서를 가지고 순회할 수 있는 객체)에 Spread 연산자를 붙이면 개별 요소로 펴진다(?)
- 배열을 함수의 인자로 전달하려고 할때 사용한다.
- 인수는 자유롭게 (마지막이 아니여도) 사용할 수 있다.
일반함수의 this
- function 키워드를 이용하여 생성한 일반 함수
- 생성자함수의 this는 생성된 객체.
- 콜백함수, 내부함수의 this는 window.
Arrow function의 this
- 자신을 포함하는 외부 scope에서 this를 계승받는다.
- 그것을 Lexical this라고 함.