ES6

ECMAScript란?

ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
ECMAScript 6는 ECMAScript 표준의 가장 최신 버전

ES6의 새로운 기능

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

const and let

let, const는 모두 블럭범위
var사용시 일어나는 호이스팅을 방지
참고 : var, let, const

Arrow functions(화살표 함수)

//es5
let sum = function(a, b) {
  return a + b;
};

//es6
let sum = (a, b) => a + b;

map, reduce, fillter등 내장함수와 사용할 수 있다

//es5
var numbers = [3, 56, 2, 48];
function square(x) {
  return x * x;
}
numbers.map(square);

//es6
numbers.map((x) => {
  return x * x;
});

매개변수가 한개이면 매개변수 괄호를 생략해도 된다

Template Literals(템플릿 리터럴)

백틱(`)을 사용하여 문자열 내에서 변수를 사용할 수도 있다

var a = 5;
var b = 10;

//es5
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

//es6
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

// "Fifteen is 15 and
// not 20."

Default parameters(기본 매개 변수)

기본매개변수를 사용하면 정의되지 않은 매개 변수가 반환되지 않고 매개 변수 할당을 잊어버렸을 때 해당 값이 사용된다

//es5
function multiply(a, b) {
  return a * b
}
multiply(5, 2)  // 10
multiply(5)     // NaN !

//es6
function multiply(a, b = 1) {
  return a*b
}
multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

Array and object destructing(배열 및 객체 비구조화)

비구조화 할당
: 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식

//es5
const animalList = ['CAT', 'DOG', 'HOTDOG'];

const cat = animalList[0];
const dog = animalList[1];
const hotdog = animalList[2];

console.log(cat);
console.log(dog);
console.log(hotdog);

//es6
const [cat1, dog1, hotdog1] = ['CAT', 'DOG', 'HOTDOG'];
console.log(cat1);
console.log(dog1);
console.log(hotdog1);

스프레드 오퍼레이터(Spread Operator)

펼침연산자정도로 볼 수 있다
특정, 객체나 배열의 값을 복제할 때 사용한다

var 새로운객체명 = {...기존객체명};
var 새로운배열명 = [...기존배열명];

var arr = [1,2,3];
var newArr = [...arr];
console.log(newArr);

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

export를 사용하면 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있다
import를 사용하면 우리는 그 모듈을 우리의 컴포넌트에 사용하기 위해 가져올 수 있다

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

//import(2개이상 사용하고 싶다면 중괄호를 넣으면 된다)
import { detail, userProfile, getPosts } from './detailComponent';

Promises(프로미스)

비동기에서 성공과 실패를 분리해서 메서드를 수행한다

비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다
다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

//프로미스 생성
const promise1 = function(param){
  return new Promise(function(resolve,reject){
    if(param){
      resolve("바보");
    }
    else{
      reject("아닌데");
    }
  });
}
//프로미스 실행
promise1(true).then(function(result){
  console.log(result);//바보
},function(err){
  console.log(err);//아닌데
});

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

Rest파라미터는 함수의 매개변수(parameter)를 spread operator로 작성한 형태로 변수이름 앞에 세개의 ...을 붙여서 정의한 매개변수를 의미한다
반드시 마지막 파라미터여야함

function foo(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리하여 연결, 복사에 용이하다.
인수를 자유롭게 사용 가능함

var State = { name: '1', species: 'human'};
State = { ...State, age: 10}; 

console.log(State)// {name: "1", species: "human", age: 10}

// 객체의 프로퍼티를 오버라이드 함으로써 객체가 업데이트 된다.
State = { ...State, name: '2', age: 11}; 
console.log(State); // {name: "2", species: "human", age: 11}

Classes(클래스)

함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우 정의하기 하기 전에 호출(호이스팅)할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다는 점이다

class myClass {
	constructor() {
	
	}
}

new를 사용하여 class 메서드와 속성에 액세스할 수 있다

class myClass {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
}

const user = new myClass('미미', 30);

console.log(user.name); // 미미
console.log(user.age); // 30

다른 class에서 상속하려면 extends 다음에 상속할 class의 이름을 사용한다

class myClass {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	sayHello() {
		console.log(`안녕 ${this.name} 나는 ${this.age}살이야`);
	}
}

// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
	userName() {
		console.log(this.name);
	}
}

const profile = new UserProfile('미미', 30);

profile.sayHello(); // 안녕 미미 나는 30살이야
profile.userName(); // 미미

참고자료
https://github.com/lukehoban/es6features
https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC#rest-parameter-and-spread-operator%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C-%EB%B3%80%EC%88%98-%EB%B0%8F-%ED%99%95%EC%82%B0-%EC%97%B0%EC%82%B0%EC%9E%90