ES6 Arrow Function

ES6에서 추가된 화살표함수를 이용하면 코드를 좀 더 짧고, 깔끔하게 작성할 수 있습니다.

 

아래 코드를 참조해 생략 시 주의할 점들을 파악하면 좋을 것 같아요.

 

또한 화살표함수를 이용하면 this 키워드의 binding이 이루어지지 않기 때문에 this를 사용할 때 주의가 필요합니다.

 

// 기본 함수
const sayHello = function () {
  console.log("Hello");
}
sayHello();

// function 키워드를 화살표로 대체할 수 있다.
const sayHelloArrow = () => {
  console.log("Hello Arrow");
};
sayHelloArrow();

// 함수의 내용이 한 문장이라면 다음과 같이 중괄호를 없앨 수 있다.
const sayHelloArrowCompactWhenOneLine = () => console.log("Hello Arrow Compact");
sayHelloArrowCompactWhenOneLine();

// return 문만 필요하다면 return 키워드를 생략한다.
const sayHelloArrowCompactWhenOnlyReturn = () => "hello return compact";
console.log(sayHelloArrowCompactWhenOnlyReturn());

// 만약 객체 리터럴을 리턴하려고 할 경우 소괄호를 이용한다
const sayHelloCompactReturnObject = () => ({ msg: "hello object"});
console.log(sayHelloCompactReturnObject().msg);

// 매개변수가 하나일 때는 소괄호 생략이 가능하다.
const sayHelloSingleParam = name => console.log(`Hello ${name}`);
sayHelloSingleParam("jian");

// 다중 매개변수의 경우 소괄호를 입력해주어야한다.
const sayHelloMultipleParam = (firstName, lastName) => console.log(`Hello ${firstName} ${lastName}`);
sayHelloMultipleParam("jian", "dev");

// 다른 함수의 인자로 넘겨받는 경우
const users = ["Hero", "Human", "Evil"];
const nameLength = users.map(name => name.length);
console.log(nameLength);