arrow function

arrow function은 es6에서 추가된 새로운 함수 표현방법이다.

1) 이름없는 함수 표현

//ES5 - 일반 함수
function() {}

//ES6 - arrow function 
() => {}

2) 이름이 있는 함수 표현

//ES5 - 일반 함수
function getName() {}

//ES6 - arrow function 
const getName = () => {}

3) 함수 호출

두 함수 모두 동일한 방법으로 호출 할 수 있다.

getName()

4) ES5 함수를 변수에 저장하기

ES6의 arrow function은 함수를 이미 getName이라는 변수에 저장한다.
ES5의 함수도 getName이라는 변수에 저장이 가능하다.

//ES5 - Function Expression
const getName = function() {}

5) 함수에 인자 받기

ES6의 arrow function은 인자가 하나일 때는 소괄호 생략이 가능하며, 인자가 두 개일 때는 괄호를 생략할 수 없다.

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

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

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

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

6) 함수 return

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

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

ES6의 arrow function은 실행내용없이 return만 한다면 return 키워드와 중괄호가 생략가능하다. 화살표 오른쪽에는 리턴될 "값"만 써야 한다.

example 1)

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

example 2)

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;

ECMA Script ?

ES는 ECMA Script의 줄임말로, ECMA Script는 JavaScript를 표준화 시키려고 탄생했다. 현재는 ES10 버전 까지 나왔으며, 현재 주로 쓰이는 것은 ES6이며, ES6은 버전 이름이고 ES 2015라고도 한다.

Assignment

1) ES5 > ES6 로 변환

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

//ES6
const welcome = name => 
{
  return "안녕하세요" + name
};

welcome(name);

1) ES6 > ES5 로 변환

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

handleBio(nickname, bio);

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

handleBio(nickname, bio);