JS - ES6 / TIL - 5

ES6

ES(ECMA Script)는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것

ES6의 기능

• const and let
• Arrow functions(화살표 함수)
• Template Literals(템플릿 리터럴)
• Default parameters(기본 매개 변수)
• Array and object destructing(배열 및 객체 비구조화)
• Import and export(가져오기 및 내보내기)
• Promises(프로미스)
• Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
• Classes(클래스)

function myFunc(name) {
	return '안녕 ' + name;
}

console.log(myFunc('지홍'));  //ES5 표기

---

const myFunc = (name) => {
  return '안녕 ' + name;
}

console.log(myFunc('지홍')) //ES6 표기

---

const myFunc = (name) => '안녕 ' + name;

console.log(myFunc('지홍')) //ES6 표기

중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 함.

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

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

const hi = (first, family) => first + family;

---

문제 1 : function 키워드를 사용하여 표현된 welcome 함수를, 화살표 함수 표현으로 바꿔주세요. 

Function -> Arrow

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

const welcome = (name) => "안녕하세요" + name;

문제 2 : 화살표 함수로 표현된 handleBio 함수를, function 키워드를 사용하여 표현된 함수로 바꿔주세요. 

Arrow -> Function

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

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

ES6 - Template literals

String을 작성할 때 따옴표를 사용했었지만,   back tick으로 감쌀 수 있다.

const name = '김개발';
const name = `김개발`;

back tick 으로 감싸면 그 안에 변수를 넣어서 표현가능.

const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;

변수를 사용하려면 ${} 으로 변수를 감싸줘야 한다.

const name = '주지홍';

/*const hi =`안녕하세요. 저는 ${name} 입니다.`*/ //ES6

/*const hi = '안녕하세요. 저는 ' + name + ' 입니다.'*/ //ES5

개행처리 관련 부분

/*let detail = '자세히\n'+'보아야\n'+'이쁘다';*/ //ES5

/*let detail = `자세히 
보아야
이쁘다`;*/ //ES6

ES6 - string method

const email = 'jujihong2@gmail.com';

console.log(email.startsWith('ju')); // true
console.log(email.endsWith('com')); //true
console.log(email.includes('@gmail')); //true

특정문자열 반복 메서드
'#'.repeat(10); // ##########

ES6 - 문제

문제 1 : handleEdit 함수를 구현해 주세요.

nickname, interests 라는 두 string을 인자로 받습니다.

nickname은 유저의 닉네임을, interests 는 유저의 관심사를 의미합니다.

interests 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(,)를 이용합니다.

nickname 과 interests 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리

하기 위해서 Object에 이 정보를 담아서 관리할 겁니다.

예를 들어 입력 값이 nickname = "뚜비" , interests = "방탈출,테니스,멍 때리

기" 라고 했을 때

아래와 같은 Object를 리턴하도록 구현해 주세요.


interests 는 배열입니다.

interests 를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.

const handleEdit = (nickname, interests) => {
  const myProfile = {};
  myProfile.nickname = nickname;
  myProfile.interests = interests.split(",");
  myProfile.bio = `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`
  return myProfile;
}