[JavaScript] ES6 문법

ES6(ECMAScript6)는?

ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전
새로운 언어 기능이 포함된 주요 업데이트

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

1. let, const 키워드

• 재선언 불가 재할당 가능한 let 변수 선언 키워드와 변경 불가능한 상수 선언 키원드 const가 추가되었다. 두 키워드 동일하게 범위 내에서만 사용 가능한 블럭 스코프를 가지고 있다.
• 기존 var 키워드만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다.

2. 템플릿 리터럴

• 문자열을 연결하기 위해 더하기(+) 연산자를 사용할 필요는 없으며, 백틱(`)을 사용하여 문자열 내에서 변수를 사용할 수도 있습니다.
• ${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.

// ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;

// ES6
let str1 = ', ';
let str2 = 'World!';
let str3 = `Hello ${str1} ${str2}`;

3. 객체 리터럴

• 이전 보다 훨씬 간결해진 코드로 객체를 선언할 수 있다.
• 메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 된다.
• 함수명이 겹치는 경우에는 한 번만 쓸 수 있다.
• 객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text + 1]과 같이 선언했어야 했는데, ES6부터는 객체 안에서 바로 속성으로 사용할 수 있다.

const myFn = function() {
  console.log('myFn');
};
const text = 'TEXT';
const obj = {
  inside() {
    console.log('객체 안에 바로 함수를 선언');
  },
  myFn,
  [text + 1]: '하나몬'
};
obj.inside(); // 출력값: 객체 안에 바로 함수를 선언
obj.myFn(); // 출력값: myFn
console.log(obj.TEXT1); // 출력값: 하나몬

4. 화살표 함수

• 함수 표현식을 화살표 함수로 표현할 수도 있다.
• 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
• 만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
• return문에서 소괄호는 사용가능하다.

// ES5
function plusFn(a, b) { 
  return a + b; 
} 
// ES6
// 함수 표현식 - 화살표 함수
const plusFn = (a, b) => {
  return a + b;
}
// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (a, b) => a + b;

5. 구조 분해 할당

• 객체나 배열에서 사용하며, 값을 해체한 후, 개별 값을 변수에 새로 할당 할 때 더 쉽게 할당할 수 있다.
• 참고: 속성 이름과 동일하지 않은 변수를 할당하면 undefined가 반환 = 항상 속성의 이름과 동일하게 변수 이름을 지정해야 한다.

// ES5 문법
const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let famillyName = contacts.famillyName;
let name = contacts.name;
let myAge = contacts.age;

console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22

// ES6 문법
const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let { famillyName, name, age } = contacts;

console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22

// 배열에서 Spread 사용
const arr = [1, 2, 3];
const [one, two, three] = arr;
one // 1
two // 2
three // 3
// 객체에서 Spread 사용
const obj = {
 firstName: '하나',
 lastName: '몬'
};
const { firstName, lastName } = obj;
firstName // 하나
lastName // 몬

6. 기본 매개 변수

• 매개 변수를 쓰지 않은 경우 매개 변수가 이미 기본값에 정의되어 있으므로 정의되지 않은 오류가 반환되지 않는다.
• 기본 매개 변수를 사용하면 정의되지 않은 매개 변수가 반환되지 않고 매개 변수 할당을 잊어버렸을 때 해당 값이 사용된다. -> 오류를 미리 처리

const myFunc = (name, age) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 undefined살 이니?

const myFunc = (name, age = 22) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 22살 이니?

7. 가져오기 및 내보내기(Import and export)

• JavaScript 응용프로그램에서 import 및 export를 사용하면 성능이 향상된다.
• export를 사용하면 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있다. 그리고 그 모듈을 컴포넌트에 사용하기 위해 import를 사용한다.

// ES6
export default function detail(name, age) {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}

import detail from './detailComponent';
console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!

import { detail, userProfile, getPosts } from './detailComponent';
console.log(detail('영희', 20));
console.log(userProfile);
console.log(getPosts);

8. 프로미스(Promises)

• API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있다.
• Promise를 반환
• Promise는 두 개의 매개 변수를 사용하며 resolve및 reject 예상 오류를 처리 할 수 있다
• 참고 : fetch 함수는 Promise 자체를 반환

const myPromise = () => {
	return new Promise((resolve, reject) => {
		resolve('안녕하세요 Promise가 성공적으로 실행했습니다');
	});
};

cosole.log(myPromise());
// Promise {<resolved>: "안녕하세요 Promise가 성공적으로 실행했습니다"}

9. 나머지 매개 변수 및 확산 연산자(Rest parameter and Spread operator)

• Rest parameter : 배열의 인수를 가져오고 새 배열을 반환하는데 사용
• Spread operator : 인수뿐만 아니라 배열 자체를 가진다. for 반복문이나 다른 메서드를 사용하는 대신 Spread operator를 사용하여 배열의 값을 가져올 수 있다.

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];

// 비구조화를 이용한 값을 얻기
const [ val1, val2, val3, ...rest ] = arr;

const Func = (restOfArr) => {
	return restOfArr.filter((item) => {return item}).join(" ");
};

console.log(Func(rest)); // 안녕 지수 어떻게 지내니?


const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];

const Func = (...anArray) => {
	return anArray;
};

console.log(Func(arr));
// 출력 => ["영희", 20, "열성적인 자바스크립트", "안녕", "지수", "어떻게 지내니?"]