TIL.21 [ES6] Arrow Function

h986680·2020년 11월 22일
0


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
}


0개의 댓글