[JS] 화살표 함수 => Fat Arrow Function

MDN

PoiemaWeb

---

1.  모든 화살표 함수는 익명함수이다.
2.  화살표 함수는 자신의 this값을 정의하지 않는다.
3.  생성자를 사용할 수 없다. new 연산자가 사용이 불가능하다.

//ES5
var funcStructure = function(s){
	return s;
};

//ES6
let funStructure = s => s;

Function과 () 생략

// Parameter 가 없을시 - 소괄호 생략 불가

// ES5
let insideOfDoc = function docLog(){
	console.log(document);
};

let insiedOfDoc = () => {console.log(document);};

// Parameter 가 한개일시 - 소괄호 생략 가능

// ES5
function greeting(yourName){
	return 'Hello, ' + yourName + '\n How ya doin?';
}

// ES6
let greeting = yourName => {
	return 'Hello, ' + yourName + '\n How ya doin?';
}

// Parameter 가 두개 이상 - 소괄호 생략 불가

// ES5
function adder(num1, num2){
	return num1 + num2;
}

// ES6
let addr = (num1, num2) =>{
	return num1+num2;
}

return, 중괄호 생략

// 명령문이 한 줄로만 작성된 경우에 한하며 중괄호도 함께 생략해주어야한다.
// 두 줄 부터는 생략이 불가능하다.

//ES5
function func( l, w){
	return l * w;
}

//ES6

let func = (l, w) => l*w;

익명함수

//ES5
setTimeout(function(){
	console.log('Hello');
}, 3000};

//ES6
setTimeout(()=>console.log('Hello'); , 3000);

정적인 this - Lexical this

화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 렉시컬 스코프와 유사하다.

화살표 함수의 this는 보통의 함수와 다르게 동작한다.
Regular function은 호출 시에 this 가 동적으로 결정된다면, arrow function은 생성 당시 this 가 정적으로 결정된다.
자신이 위치한 상위 스코프를 this 로 binding한다. 즉, 화살표 함수의 this를 알기위해서는 생성 됬을 시 화살표 함수의 상위 스코프를 참고하면 된다.
이러한 this가 정적으로 결정되는 특성으로 인해 화살표함수는 call, apply, bind메소드를 사용 할 수 없다.

---

 

 

 

 

---

화살표 함수를 지양해야 하는경우

메소드

화살표 함수로 메소드를 정의하는것은 피해야한다.

// Bad
const person = {
	name : 'Lee',
    sayHi: () => console.log(`Hi ${this.name}`);
};

person.sayHi(); // Hi undefined

이 예제의 경우, 메소드로 정의한 화살표 함수 내부의 this는 메소드를 호출한 객체를 가르키지 않고 상위컨택스트인 window를 가르킨다. 따라서 위의 경우 화살표 함수로 메소드를 정의하는 것은 바람직하지 않다.

// Good

const person = {
	name : 'Lee',
    sayHi() { // === sayHi: function() {  -> ES6의 축약 메소드 표현
    	console.log(`Hi ${this.name}`);
    }
};

 

prototype

화살표 함수로 정의된 메소드를 prototype에 할당하는 경우에도 동일한 문제가 발생한다.

// Bad
const person = {
	name : 'Lee',
};

Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);

person.sayHi(); //Hi undefined

//Good

const persont = {
	name : 'Lee',
};

Object.prototype.sayHi = function(){
	console.log(`Hi ${this.name}`);
};

person.sayHi(); // Hi Lee

생성자 함수

생성자 함수는 함수로 사용할 수 없다.
생성자 함수는 prototype 프로퍼티를 가지며 prototype프로퍼티가 가리키는 프로토 타입 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

const Foo = () => {};

// 화살표 함수는 prototype 프로퍼티가 없다
console.log(Foo.hasOwnProperty('prototype')); // false

const foo = new Foo(); // TypeError: Foo is not a constructor

 

addEventListener 함수의 콜백 함수

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면, this가 상위 컨택스트인 전역 window를 가리킨다.

//Bad
var button = document.getElementById('myButton');

button.addEventListener('click',() =>{
	console.log(this === window); //true
    this.innerHTML = 'Clicked button';
});

따라서 addEventListner 함수의 콜백 함수 내에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수를 사용하여야 한다. 일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스터에 바인딩된 요소를 가르킨다.

// Good
var button = document.getElementById('myButton');

button.addEventListener('click', function(){
	console.log(this === button); // =>true
    this.innerHTML = 'Clicked button';
});