TIL_30_with Wecode 020 JavaScript about [es6] arrow function

🎅 ES6 = ECMA Script 2015
ES는 ECMA Script의 줄임말입니다. ECMA Script는 JavaScript를 표준화 시키려고 탄생했습니다.(ECMAScript (or ES) is a scripting-language specification standardized by Ecma International)
🧜‍♂️ arrow function

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

이름이 없는 함수의 기본적인 표현입니다.
ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았습니다.
그리고 =>(arrow) 가 추가되었습니다.
이름이 있는 함수를 만들 때는 아래와 같습니다.

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

getName() //호출할 때. 둘 다 같음

사실 function(함수)는 변수에 저장할 수 있는 하나의 식입니다.
그래서 ES5 일 때도 마찬가지로 변수에 저장할 수 있었습니다.

//ES5
//Function Declaration
function getName() {}
//ES5
//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; 
//리턴 생략, 리턴 될 값만 써야 함!

🧜‍♂️ Assignment
이번 assignment는 자동채점이 아닙니다. 작성해서 제출하면 채점해드리겠습니다.
1. 왼쪽 코드창에서 function을 사용한 함수표현법을 ES6 표현을 바꿔주세요.
2. 왼쪽 코드창에서 ES6의 함수 표현을 function 키워드를 사용해서 바꿔주세요.

// function 사용
function welcome(name){
  return "안녕하세요" + name
}
// 아래에서 변환해주세요!
const welcome = name => {
  return "안녕하세요" + name
}
welcome("지은이");
// ES6
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}
// 아래에서 변환해주세요!
function handleBio(nickname, bio) {
  const user = {
    nickname : nickname,
    bio : bio,
  } 
  return user;
}