화살표 함수
화살표 함수란 function 키워드 대신에 =>를 사용해서 보다 쉽게 함수를 선언할수 있다.
모든 경우에서 화살표 함수를 사용할수 있는것은 아니다.
1 2 3 4 5 | () => { }; //매개변수가 없을경우 x => { }; //매개변수가 하나일경우 ( 괄호를 생략 가능 ) (x, y) => { }; //매개변수가 두개 이상일 경우 ( 괄호 생략 불가능 ) | cs |
화살표 함수는 익명함수로만 사용할수 있다. 따라서 화살표 함수를 호출하기 위해선 함수 표현식을 사용한다.
1 2 | const calc = x => x * x; console.log(calc(5)); // 25 | cs |
5가 매개변수로 들어가서 5 * 5가 되어 반환되어서 출력된다.
콜백함수로 사용할수도 있다. 이경우 es5보다 함수표현식이 간결 해진다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | // ES5 var arr = [1, 2, 3]; var pow = arr.map(function (x) { // x는 요소값 return x * x; }); console.log(pow); // [ 1, 4, 9 ] // ES6 const arr = [1, 2, 3]; const pow = arr.map(x => x * x); console.log(pow); // [ 1, 4, 9 ] | cs |
this
화살표 함수와 function 키워드로 생성한 일반 함수의 가장 큰 차이는 this
일반 함수의 this는 매번 함수를 정의할때마다 각각의 this가 존재 했습니다.
이것을 해결하기위해 that이나 bind()를 이용해서 문제점을 해결했습니다.
하지만 화살표 함수는 자신의 this객체를 생성하지 않기 때문에 that이나 bind()를 사용하지 않아도
this를 사용할수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // ES5 function foo() { console.log(this); // foo{} setTimeout(function foo2() { console.log(this); // window{} }, 1000); } var f = new foo(); // ES6 function foo() { console.log(this); // foo{} setTimeout(() => { console.log(this) }, 1000); // foo{} } var f = new foo(); | cs |
function 키워드를 사용한 함수에서는 window객체를 반환하는 반면
화살표 함수를 이용한 곳은 foo객체를 반환하는것을 볼수 있다.
화살표 함수를 사용하면 안되는 경우
화살표 함수는 Lexical this를 지원하므로 콜백 함수로 사용하기 편리하다.
하지만 화살표 함수를 사용하는 것이 오히려 혼란을 불러오는경우도 있다
1. 메소드
화살표 함수로 메소드를 정의하는 것은 피해야 한다.
1 2 3 4 5 6 | const person = { name: 'Ko', sayHi: () => console.log(`Hi ${this.name}`) }; person.sayHi(); // Hi undefined | cs |
this는 window객체를 가르키고 있기 때문에 undefined가 출력된다.
기존에 function 키워드를 사용했다면 this는 person객체를 가르키기 때문에 name이 정상적으로 출력된다.
또는 ES6의 축약 메소드 표현을 사용하는 방법도 있다.
1 2 3 4 5 6 7 8 | const person = { name: 'Ko', sayHi() { // seyHi() { === sayHi: function() { console.log(`Hi ${this.name}`); } }; person.sayHi(); // Hi Ko | cs |
2. 생성자 함수
화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼티를 가지며
protorype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한.
하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.
1 2 3 4 5 6 | const Foo = () => {}; // 화살표 함수는 prototype 프로퍼티가 없다 console.log(Foo.hasOwnProperty('prototype')); // false const foo = new Foo(); // TypeError: Foo is not a constructor | cs |
3. addEventListener
addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역객체 window를 가리킨다.
1 2 3 4 5 6 | var button = document.getElementById('myButton'); button.addEventListener('click', () => { console.log(this === window); // => true this.innerHTML = 'Clicked button'; }); | cs |
따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우,
function 키워드로 정의한 일반 함수를 사용하여야 한다.
일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소를 가리킨다.
1 2 3 4 5 6 | var button = document.getElementById('myButton'); button.addEventListener('click', function() { console.log(this === button); // => true this.innerHTML = 'Clicked button'; }); | cs |
'IT > JAVASCRIPT' 카테고리의 다른 글
| ES6 문법 배워보기 (파라미터 기본값, Rest 파라미터, Spread 연산자) (0) | 2019.02.15 |
|---|---|
| ES6 문법 배워보기 (const, let, ``(Template literals)) (0) | 2019.02.08 |
| [javascript] 자바스크립트 전역 객체 (Global Object) (0) | 2019.02.05 |
| querySelector(), querySelectorAll() 자바스크립트 요소접근,선택 (0) | 2019.01.28 |
| 자바스크립트 시계 만들기(현재 시간 가져오기 getDate) (0) | 2019.01.24 |