TIL - 10. arrow function

1. arrow function 이란

ES6부터 생긴 함수를 만드는 새로운 표현 ( => 화살표 모양의 기호를 쓴다.)

//ES5
function() {}
//ES6
() => {}

이름이 없는 함수를 만들 때 사용하는 모양

//ES5
function getName() {}
//ES6
const getName = () => {}

이름이 있는 함수를 만들 때 사용하는 모양

1-1. 인자를 받는 경우

//ES5
const getName = function(name) {}
//ES6
const getName = (name) => {}
const getName = name => {}

인자가 하나일 때는 소괄호가 생략 가능하다.

//ES5
const getName = function(name, age) {}
//ES6
const getName = (name, age) => {}

인자가 두 개 이상일 때는 소괄호가 생략이 불가능하다.

1-2. return

//ES5
function getName(name) {
  return name;
}
//ES6
const hi = name => { return name };
const hi = name => name;

• 만약 함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호가 생략가능하다.
• 중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 한다.
  (다른 코드가 들어가면 안됨)

예제

function welcome(name){
  return "안녕하세요" + name
}
// 변환
const welcome = name => "안녕하세요"+ name;

function handleBio(nickname, bio) {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}
//변환
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}