[JAVASCRIPT] 화살표 (=>) 함수

💡 화살표 함수(Arrow function) 

: function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수 선언 가능

let sum = function sum(a,b) {
	return a + b;
};

위 함수를 아래 함수로 축약할 수 있다.

let sum = (a,b) => a + b;

 

💛 화살표 함수 특징

화살표 함수에는 'this' 가 없다.

- 일반 함수 : 함수가 어떻게 호출되었는지에 따라 this가 될 객체가 동적으로 결정됨.

- 화살표 함수 : this가 동적으로 결정되는 것이 아니라 정적으로 결정됨.

                        즉 언제나 상위 영역의 this를 가리키게 되어 있음.

var a = {
	name : "kim"
	call : function() { 
    	setTimeout(function() {
        	console.log(this.name);
		}, 1000);
	}        
}

a.call()

console에 undefined 뜸! 왜냐하면 call로 함수를 호출한 후 setTimeout이 실행된 상황인데

call 안에는 name 변수가 없기 때문이다.

var a = {
	name : "kim"
	call : function() { 
    	setTimeout(() => {
        	console.log(this.name);
		}, 1000);
	}        
}

a.call()

this는 정적으로 상위 영역에 있는 값을 접근해서 가져오기 때문에 콘솔창에 kim이 뜸. 

=> call, apply, bind 메소드 사용 불가능 

 

💛 화살표 함수 사용할 수 없는 경우

1) 생성자 함수

const A = () => {};

console.log(a.hasOwnProperty('prototype')); //false

const a = new A(); //불가능

prototype 프로퍼티를 가지고 있지 않기때문에 constructor를 사용하는 생성자 함수로는 사용 불가능

 

2) 메소드

var a = {
	name : "kim"
	call : () => console.log(this.name)    
}

a.call()

당연히 kim이 출력될거라고 생각하지만 화살표 함수는 그 상위 영역의 객체 window를 가져오기 때문에 

undefined가 출력된다. 따라서 메소드로 사용하는 것은 바람직 하지 않다. 

 

3) addEventListner

var button = document.getElementById('a');

button.addEventListener('click', () => {
	console.log(this);
});

callback을 자신의 this로 바인딩하기 때문에 상위 영역을 가져오는 화살표 함수는 사용 불가능 

 

💛 화살표 함수 기본 문법

//매개변수 지정 방법
()	=> {} //매개변수가 없을 경우
x	=> {} //매개변수가 한 개인 경우, () 생략 가능
(x,y) 	=> {} //매개변수가 여러 개인 경우, () 생략 가능 x

x => { return x*x } 
x => x * x //한줄의 구문이라면 {}, return 생략 가능

() => { return {a:1}; }
() => ({a:1}) //의 표현과 동일. 객체 반환 시 () 반드시 써야 함. 

() => {
	const x = 10;
    	return x*x;
};