JavaScript - 화살표 함수

화살표 함수 (arrow function)

구현 방법

1. 변수를 선언하고, 그 위치에 함수를 선언한다.

let add = function(num1, num2) {
    return num1 + num2;
}

2. 함수명 ‘function’을 없애고, 괄호 우측에 화살표를 표시한다.

let add = (num1, num2) => {
    return num1 + num2;
}

주의사항

• 함수 코드에 return문만 있을 때에는 중괄호에서 소괄호로 바꿀 수 있다.

let add = (num1, num2) => (
    num1 + num2;
)

• 함수 코드에 여러 줄의 코드가 있을 경우 소괄호로 바꿀 수 없다.

let add = function(num1, num2) {
    const result = num1 + num2;
    return result;
}

• return이 한 줄이라면 괄호는 생략 가능하다

let add = (num1, num2) => num1 + num2;

• 매개변수가 하나라면 괄호는 생략 가능하다

let sayHello = name => Hello, ${name};

• 매개변수가 없는 함수라면 괄호는 생략 불가능하다

let showError = () => {
    alert('error!');
}

화살표 함수의 this

: 화살표 함수에는 'this'가 없기 때문에 상위 스코프의 this를 참조한다

function BlackDog() {
	this.name = '흰둥이';
    return {
    	name : '검둥이',
        bark : function() {
        	console.log(this.name + ': 멍멍!');
        }
    }
}

const blackDog = new BlackDog();
blackDog.bark();	// 검둥이 : 멍멍!

 메소드로 function()을 사용했을 때에는 name으로 '검둥이'가 나타난다. 일반 함수는 자신이 종속된 객체를 this로 가리키기 때문이다.

function WhiteDog() {
	this.name = '흰둥이';
    return {
    	name : '검둥이',
        bark : () => {
        	console.log(this.name + ': 멍멍!');
        }
    }
}

const whiteDog = new WhiteDog();
whiteDog.bark();	// 흰둥이 : 멍멍!

 메소드로 () =>를 사용했을 때에는 name으로 '흰둥이'가 나타난다. 화살표 함수는 자신이 종속된 인스턴스를 가리키기 때문이다.