10.Javascript 화살표 함수(arrow function)

01. 화살표 함수(arrow function)이란?

함수(function)을 보다 간결하게 작성할 수 있는 방법.

 

 

02. 화살표 함수(arrow function)로 변경하는 법

function showError(){
	console.log('error');
}

먼저 showError라는 함수를 화살표 함수로 변경을 하면

 

let showError = () => {
	console.log('error');
}

이렇게 사용이 가능하다.

함수의 이름을 변수로 선언한 뒤에 매개 변수와 실행문장 사이에 => 화살표를 넣어준다.

 

 

다음으로 매개 변수가 있는 함수이다.

const sayHello = function(name){
	const msg = `Hello, ${name}`;
	console.log(msg);
}

 

이렇게 변수로 선언된 함수 표현식을 화살표 함수로 변경을 하면

const sayHello = (name) => {
	const msg = `Hello, ${name}`;
	console.log(msg);
}

function 글자는 사라지면서 매개 변수는 그대로 있는다.

그리고 변수와 실행문장 사이에 => 화살표를 넣어준다.

 

 

마지막으로 매개 변수가 2개이고, return을 받는 함수이다.

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

 

먼저 function 글자를 없애준다.

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

 

그리고 return값이 result 값과 같기 때문에 return을 생략해준다.

const add = (num1, num2) =>{
	const result = num1 + num2;
};

 

마지막으로 문장이 한 줄일 경우 변수 선언을 지우고 { }를 생략하여 한 줄로 처리해 준다.

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