🙋 목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자.

1. ES6 = ECMA Script 2015

---

🙌 ES는 ECMA Script의 줄임말이다. ES6는 자바스크립트를 표준화 시키기 위해 만들어졌다.

자바스크립트의 역사가 점점 깊어지고, 문법의 보완이 필요하면서 버전별로 문법을 확장시키고 브라우저도 자바스크립트의 특정 버전을 지원하기 하기 위해서 ES가 명세를 확정해 왔다고한다.

즉, ES는 자바스크립트를 표준화, 규격화하기 위해 만들어진 것이다.

지금은 ES10 버전까지 나왔다. 주로 사용되는 것은 ES6인데, 6는 버전 이름이고 ES 2015라고도 한다. 1~2년 전까지만 해도 ES6를 사용하는 사람은 많지 않았지만, 지금은 너무나 많은 사람들이 쓰고 있다. 이세상은 너무나 빠르게 변화한다.🚀

ES6를 많이 활용하면 좋다고 한다. 요즘 ES7을 사용하는 개발자들도 점차 늘어나고 있다.

ES6를 공부하다보면, 정말 편리한 함수들과 처음보는 문법들도 많이 생겨났다는 것을 느낄 수 있다. 그래서 공부가 필요하다. 여러가지 공부들 중 오늘은 arrow function이다.

//ES5
function() {}

//ES6
() => {}

이름없는 함수, anonymous function을 확인해 볼 수 있는데 ES6는 function이라는 키워드가 빠지고 소괄호만 남았다. 그리고 => 가 추가되었다.

//ES5
function getName() {}

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

호출할 때는

getName()

ES6는 함수를 getName 이라는 변수에 저장했다.

사실 함수는 변수에 저장할 수 있다.

그래서 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) => {}

리턴하는 함수는 만들어보면

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

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

함수가 실행 내용이 딱히 없이 리턴만 한다면 {중괄호} 생략이 가능하다.

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

위에서 보는 것처럼 {중괄호}와 리턴이 생략될 경우, arrow function 뒤에는 리턴될 "값"만 쓰면 된다.

• 🎯또 다른 예제

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

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

2. Assignment

---

• function 키워드를 사용하여 표현된 welcome 함수를, 화살표 함수 표현으로 바꾸자.
• 이후, 화살표 함수로 표현된 handleBio 함수를, function 키워드를 사용하여 표현된 함수로 바꾸자.

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

// 응답: Arrow Function을 활용하여 변환
const welcome = (name) => "안녕하세요" + name;

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

// 응답: Named Function을 활용하여 변환
const handleBio = function(nickname, bio) {
  const user = {
    nickname : nickname,
    bio : bio,
  }
  return user;
}