Arrow Functions (화살표 함수란?)

  JavaScript에서 함수를 선언하는 키워드인 function을 사용하지 않고 => 를 사용하여 함수를 선언하여 익명 함수로 사용한다.

 

선언을 위한 문법은 () => {} 간단하게 화살표 함수를 이용해 정의한 코드는 아래와 같다.

 

const greet = name => { return "Hello " + name + "!"; }
console.log(greet("Eric"));

 

  위의 코드를 더 간단하게 작성하면 아래와 같다. 함수 내부가 한 줄로만 구성된 코드라면 return 을 암묵적으로 수행하기에 return 키워드를 생략할 수 있고 중괄호 역시 마찬가지로 생략이 가능하다. 

const greet = name => "Hello " + name + "!";
console.log(greet("Eric");;

 

  아래 두 줄의 코드는 정리가 잘된 포스트의 코드 일부를 그대로 갖고왔다. 동일한 내용을 수행하는 코드인데 return을 역시 생략할 수 있으나 객체를 반환할 때는 소괄호를 사용해야 한다는 것.

() => { return  { a: 1 }; }
() => ({ a: 1 })

 

  마지막으로 일반 함수와 콜백 함수를 비교해 보는 코드를 보면 아래와 같다.

let numbers = [1, 2, 3, 4, 5];

// 일반함수 사용
function multiplyByTwo(number) {
	return number * 2;
}

let multipliedNumbers = numbers.map(multiplyByTwo);
console.log(multipliedNumbers);

// 화살표함수 사용
const multiplyByTwo = number => number * 2;

let multipliedNumbers = numbers.map(multiplyByTwo);
console.log(multipliedNumbers);

 

Reference site: https://poiemaweb.com/es6-arrow-function#:~:text=%ED%99%94%EC%82%B4%ED%91%9C%20%ED%95%A8%EC%88%98(Arrow%20function)%EB%8A%94,%EA%B8%B0%EB%B3%B8%20%EB%AC%B8%EB%B2%95%EC%9D%80%20%EC%95%84%EB%9E%98%EC%99%80%20%EA%B0%99%EB%8B%A4. 

https://www.learn-js.org/en/Arrow_Functions