JS레플릿 27.[es6]arrow function

Assignment

1. function 키워드를 사용하여 표현된 welcome 함수를, 화살표 함수 표현으로 바꿔주세요.
2. 이후, 화살표 함수로 표현된 handleBio 함수를, function 키워드를 사용하여 표현된 함수로 바꿔주세요.

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

결과

// function 사용
function welcome(name){
  return "안녕하세요" + name
}
// 아래에서 변환해주세요!
const welcome = name => {
  return "안녕하세요" + name;
}

// ES6
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}
// 아래에서 변환해주세요!
function handleBio(nickname, bio){
  const user = {
    nickname,
    bio
  }
  return user;
}

Today I Learn

1. ES6 = ECMA Script 2015

ES = ECMA Script.
ECMA Script: Ecma International이 JavaScript를 표준화, 규격화하는 언어 명세.
(ECMAScript is a scripting-language specification standardized by Ecma International)

현재는 ES10 버전까지 나왔고, 주로 쓰이는 것은 ES6입니다.
6: 버전, 다른 이름: ES 2015(2015년에 ES6버전이 최종으로 나왔다는 의미)

이름이 없는 함수:

//ES5
function() {}

//ES6
() => {}

이름이 있는 함수:

//ES5
function getName() {}

//ES6: 함수를 getName 이라는 변수에 저장
const getName = () => {}

//ES5: 함수를 getName 이라는 변수에 저장
//Function Expression
const getName = function() {}

하나의 인자를 받은 이름이 있는 함수:

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

//ES6: 인자가 하나일 때는 소괄호 생략이 가능합니다.
const getName = (name) => {}
const getName = name => {}

두 개의 인자를 받은 이름이 있는 함수:

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

//ES6: 인자가 두 개일 때는 생략할 수 없습니다.
const getName = (name, age) => {};

return 하는 함수:

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

만약 함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호는 생략가능합니다.

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

중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 하며
다른 코드가 들어가면 안됩니다.

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

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