화살표 함수
(let, const 는 var 을 거의 완벽하게 대체한다.
하지만 화살표 함수는 function을 완벽하게 대체할 수는 없다.
화살표 함수의 좋은점 : 더 간결해 질 수 있다.)
(위와 같이 중괄호 다음에 바로 리턴이 나오는 경우, add 3 혹은 add 4 와 같이 return 과 중괄호를 생략할 수 있다.
소괄호로 한 번 묶어서 리턴 값이 헷갈리지 않도록 할 수 있다.
또한 위의 not1이라는 함수도 not2 처럼 바꿀 수가 있다.
또한 이경우 매개변수가 하나인데 이경우 ()를 생략하여 not2처럼 사용 할 수 있다.)
const obj = (x,y)=>{
return {x,y}; // 객체 리턴 (원래는 x:x, y:y 임, es6부터 생략 가능)
}
위 경우를 생략하는 경우 아래와 같다
const obj=(x,y)=>{x,y};
문제가 되는 점 : {} 안의 것이 뭔지 자바스크립트 엔진이 해석하지 못한다. {}가 함수의 body 인지 아니면 객체의 리터럴을 의미하는 건지 혼동한다.
따라서 이경우
const obj=(x,y)=>({x,y});
위처럼 객체의 리터럴을 리턴하는 경우에만 () 소괄호 가 필수이다.
(function 에서는 this를 따로 가지지만 화살표 함수는 부모의 this 를 물려 받는다.)
(위에서 this는 부모를 가리키고 있지만 내부 함수로 들어오면 자기 자신을 가리킨다. 일단 결과를 보면 아래와 같다.)
- 반면 console.log 의 that.name을 this.name 으로 바꿔서 실행한 결과는 다음과 같다.
(function에서 this는 부모 function이 아닌 자기 자신을가지기 때문에 this.name 필드가 없어서 못찾고 있는 모습이다.)
- 화살표 함수의 경우
(화살표 함수의 경우 자기만의 this를 가지지 않고 무조건 부모 function의 this를 그대로 물려 받는다. 아래는 코드와 실행 결과이다.)
(this.friends 의 this와 this.name 의 this 모두 부모 function을 가리키기 때문에 결과가 위와 같아 나온다.)
- 대표적인 예시
=> 이 경우 버튼에 적혀 있는 텍스트가 console 로 나온다.
=> 이 경우는 동작하지 않는다. this가 이곳의 this가 아니라 바깥의 this 가 된다.
=> 화살표 함수를 써서 동작하게 하려면 위와 같이 e를 매개변수로 줘서 위와 같이 해야한다.
