TIL.21 [ES6] Arrow Function

Arrow Function

ES6 = ECMA Script 2015

• ECMA Script의 줄임말을 ES 라 한다.
• 이는 JavaScript 를 표준화시키고 규격화하기 위해 만들어졌다.
• Arrow function 도 ES6 에서 새로 소개된 함수.

Arrow Function 활용

• function 이라는 키워드를 생략하고 =>(arrow)가 추가되었다.
• 함수를 호출할때는 기존 방식으로 같다.

1. 이름없는 함수

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

2. 이름있는 함수

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

3. return 하는 함수

ES5 // 
function hi (text) {
  text += '하세요';
  return text;
}
ES6 // 
const hi = (text) => { 
  text += '하세요';
  return text 
};

4. 실행내용 없이 return 하는 함수

ES5 // 
function getName(name) {
  return name;
}
ES6 // 
const hi = name => { return name };
const hi = name => name; //return, {} 같이 생략!!!
const getFullName = (first, family) => first + family;

Arrow Function 문제

• ES5 <-> ES6 연습하기

// ES5
function welcome(name){
  return "안녕하세요" + name
}

// ES6
const welcome = name => {return "안녕하세요" + name}
//
//
// ES6
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}
// ES5
function handleBio (nickname, bio) {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user
}