티스토리 뷰
이 내용은 아래 링크에서 동영상 강의도 같이 보실 수 있습니다.
화살표 함수 ( Arrow function )
ECMA Script 2015에 새로운 익명함수 정의 방법인 화살표 함수가 추가됐습니다.
사용방법은 아래와 같이 기존 함수 선언문법에서 function을 제거하고 괄호 뒤에 => 화살표를 추가해줍니다.
// 매개변수가 없을 경우 () => { ... } // 매개변수가 한개인 경우 소괄호를 생략할 수 있습니다. param => { ... } // 매개변수가 두개 이상인 경우 소괄호를 생략할 수 없습니다. (param1, param2) => { ... } // 함수 내부 코드가 1줄이라면 중괄호도 생략 가능하고 실행 결과를 리턴합니다. param => param + 1
이런 간단한 함수 선언으로 인해 아래와 같이 코드 가독성이 높아졌습니다.
const numbers = [1, 2, 3, 4, 5]; // [2, 3, 4, 5, 6] 출력 console.log(numbers.map(function(number) { return number + 1 })); // 기존 방법 console.log(numbers.map(number => number + 1)); // 화살표 함수
화살표 함수는 간단한 문법 이외에도 this의 동작이 명확해졌습니다.
자바스크립트의 this
함수 안에서의 this
function func() { console.log(this); // window 객체 console.log(this === window); // true } func();
엄격모드에서 함수 안에서의 this
"use strict" function func() { console.log(this); // undefined } func();
메소드 안에서의 this
const object = { func: function() { console.log(this); // object 객체 console.log(this === object); // true } }; object.func();
생성자 실행에서의 this
function SomeObject(name) { this.name = name; console.log(this); // 새로 생성된 객체 ( someObject 혹은 someObject2 ) } const someObject = new SomeObject('someObject'); const someObject2 = new SomeObject('someObject2');
이렇게 함수가 임의로 this를 바인딩하기 때문에 일관성 없는 동작방식으로 개발자에게 많은 혼란을 줬습니다.
화살표 함수는 더이상 임의로 this를 바인딩 하지 않고 상위 스코프의 this를 가져옵니다.
일반 함수와 화살표 함수 비교
- 일반 함수
function Person(name) { this.firstName = name; } Person.prototype.prefixName = function (arr) { // 아래 일반 함수에서 사용하기 위해 that이란 변수 생성 const that = this; return arr.map(function (character) { // 일반 익명 함수에서 this는 window객체이므로 this.firstName === undefined // 따라서 위에서 정의한 that을 사용 return character + ' ' + that.firstName; }); }; const person = new Person('철수'); console.log(person.prefixName(['김', '이']));
function Person(name) { this.firstName = name; } Person.prototype.prefixName = function (arr) { return arr.map( function (character) { return character + ' ' + this.firstName; }.bind(this) // 개발자가 임의로 this바인딩을 변경 ); }; const person = new Person('철수'); console.log(person.prefixName(['김', '이']));
- 화살표 함수
function Person(name) { this.firstName = name; } Person.prototype.prefixName = function (arr) { return arr.map((character) => { // 화살표 함수에서 this는 상위 스코프에서 가져오므로 new 로 생성한 person 객체 // 즉 this.firstName === '철수' return character + ' ' + this.firstName; }); }; const person = new Person('철수'); console.log(person.prefixName(['김', '이']))
화살표 함수를 사용해서는 안되는 경우
화살표 함수는 this를 변경하지 않아 콜백 함수로 사용하기 편합니다. 하지만 편하다는 이유로 무분별하게 사용할 경우 문제가 생깁니다.
- 메소드
const object = { name: 'object name', func: () => { console.log(this.name); } }; object.func();
이와 같은 경우는 ECMA Script 2015에 추가된 "축약 메소드 표현"을 사용하는것으로 해결이 가능합니다.
비효율적인 반복코딩을 줄여줄 수 있는 축약 표현 등은 나중에 한꺼번에 다룰 예정입니다.
const object = { name: 'object name', func() { console.log(this.name); } }; object.func();
- 생성자 함수 및 prototype
화살표 함수는 생성자 함수로 사용할 수 없습니다. 아래 코드는 "Person is not a constructor" 오류를 발생시킵니다.
const Person = (name) => { this.firstName = name; }; const person = new Person('철수');
prototype역시 동일한 문제가 발생합니다. 아래와 같은 코드에서 this.firstName은 undefined입니다.
function Person(name) { this.firstName = name; } Person.prototype.prefixName = (lastName) => { // this.firstName === undefined return this.firstName + ' ' + lastName; }; const person = new Person('철수'); console.log(person.prefixName('김'));
생성자 함수와 prototype는 ECMA Script 2015에 추가된 class문법으로 대체가능합니다. 자세한 class문법 사용방법은 따로 다루고 여기서는 class를 사용한 코드만 보여드리겠습니다.
class Person { constructor(name) { this.firstName = name; } prefixName(lastName) { return this.firstName + ' ' + lastName; } } const person = new Person('철수'); console.log(person.prefixName('김'));
- addEventListener 함수의 콜백 함수
var button = document.getElementById('btn'); button.addEventListener('click', (ev) => { // 넘겨받은 이벤트 객체의 target으로 클릭한 엘리먼트에 접근해야 합니다. console.log(ev.target); });
'수업자료 > ECMA Script' 카테고리의 다른 글
[ECMA Script 2015] 기타 추가된 기능들 (0) | 2018.08.27 |
---|---|
[ECMA Script 2015] 콜백 지옥에서 탈출하는 방법! Generator (0) | 2018.08.20 |
[ECMA Script 2015] 콜백 지옥에서 탈출하는 방법! Promise (1) | 2018.08.16 |
[ECMA Script 2015] Class (0) | 2018.08.13 |
[ECMA Script 2015] ECMA Script와 새로운 변수할당 키워드 let, const 소개 (0) | 2018.07.30 |