ES6의 특징

ES란 무엇일까?

ECMAScript란 ECMA라는 기관이 만든 script언어라고 한다.
참고)ECMA기관이란?
그래서 ES는 자바스크립트의 표준규격을 의미한다. 그리고 ES뒤의 숫자는 자바스크립트의 기능을 추가하거나 변경점이 있다는 버전을 의미한다.

ES6가 왜?

ES6는 2015년에 발표되었는데 그 당시 추가된 기능이나 개념이 매우 중요하기 때문에 꼭 알아야한다!

ES6의 특징

1. 템플릿 리터럴(Template Literals)
2. 화살표함수
3. let과 const
4. 기본 매개 변수(Default Parameters)
5. 비구조화 할당(구조 분해 할당)
6. 스프레드 연산자(Spread Operator)
7. 모듈(Modules)
8. for...of 문
9. 프로미스(Promise)
10. 클래스(Classes)

1. 템플릿 리터럴(Template Literals)

ES6 이전에는 문자열을 입력할 때는 아래와 같이 입력했어야 했다.

const first = '철수';
const last = '김';
const name = 'My name is ' + last + ' ' + first;

띄어쓰기를 하려면 ' '를 적어줘야 하는등 번거로웠지만 템플릿 리터럴의 등장으로 백틱( ` )을 이용하여 아래의 코드처럼 간단하게 처리가 되었다.

const name = `My name is ${last} ${first}`

2. 화살표함수

화살표함수는 함수(function)를 간단하게 만들 수 있는 방식이다. 그리고 return 키워드 없이도 식을 계산한 값이 반환된다.

함수 선언식
function sum(a,b) {
  return a+b;
}

화살표함수로 변환
const sum = (a,b) => a+b;

3. let 과 const

let은 중복 선언 불가능, 재할당이 가능하다.
const는 중복 선언 불가능, 재할당도 불가능하다.

const aaa = '철수';
const aaa = '짱구'; // 중복선언 불가능
aaa = '훈이'; // 재할당 불가능

------------------------------------------

let bbb = '미영';
let bbb = '미진'; // 중복선언 불가능
bbb = '맹구'; // 재할당 가능

4. 기본 매개 변수(Default Parameters)

기본 매개 변수는 함수에 인자를 넘길 때, 기본값을 설정할 수 있다.

function sum(a,b=2) {
  return a+b;
}

sum(1) // 3

위 와같이 sum이라는 함수의 b라는 매개변수에 2라는 기본값을 설정해놓으면 sum(1)과 같이 a의 인자만 넘겨도 기본값이 있기 때문에 1+2로 계산되어 3이라는 결과값이 반환된다.

5. 비구조화 할당(구조 분해 할당)

비구조화 할당은 객체와 배열에서 속성 혹은 값을 분해하여 분해한 값을 변수에 각각 담아 사용하는 문법이다.

객체
const obj = {
    a : 'cat',
    b : 'dog',
    c : 'bird'
}

const { a, b, c } = obj;

console.log(a); // 'cat'
console.log(b); // 'dog'
console.log(c); // 'bird'

배열
const arr = [ 'cat', 'dog', 'bird' ];

const [ q, w, e ] = arr;

console.log(q); // 'cat'
console.log(w); // 'dog'
console.log(e); // 'bird'

6. 스프레드 연산자(Speread Operator)

스프레드 연산자는 객체나 배열의 값을 하나 하나 옮기거나 복사할 때 사용한다.

배열
const arr = ['철수', '짱구', '훈이'];

console.log(...arr); // '철수' '짱구' '훈이'

객체
const obj = {
    a : '철수',
    b : '짱구',
    c : '훈이'
}

const obj2 = {
    ... obj,
    d: '맹구'
}

console.log(obj2); // {a: '철수', b: '짱구', c: '훈이', d: '맹구'}

7. 모듈(Modules)

ES6 이전에는 모듈에 대한 표준이 없었고 require를 통해 다른 파일의 코드를 불러오거나 외부 라이브러리를 불러 왔다. 하지만 ES6에서 import로 불러오고 export로 내보낼 수 있다.

먼저 import를 이용하기 전에 package.json에서 "type": "module"을 적어줘야 한다.

// Node.js의 프레임워크인 express를 import 해오는 방법
import express from "express";

8. for...of 문

for..of 문은 반복가능한 객체(Array,Map,String,Set 등등.....)들을 반복하는 문법이다.

const arr = [1,2,3,4,5]

for(let x of arr) {
  console.log(x)
}

// 1
// 2
// 3
// 4
// 5

9. 프로미스(Promises)

프로미ㅣ스는 자바스크립트의 비동기 처리에 사용되는 개체이다.
그리고 프로미스는 성공하면 then()의 코드를, 실패하면 catch()의 코드를 실행하는 함수이다.

const promises = new Promise(); // 프로미스 사용

promises.then( ()=> {
 // 프로미스가 성공했을 때의 코드1
}).then( ()=> {
 // 프로미스가 성공했을 때의 코드2
}).catch( ()=> {
 // 프로미스가 실패했을 때의 코드
})

그리고 Promise에는 세가지의 상태가 있는데
Pending(대기) : 비동기 처리 결과 기다리는 중
Fulfilled(이행) : 비동기 처리가 정상적으로 끝났고 결과값을 가지고 있다.
Rejected(거부) : 비동기 처리가 비정상적으로 끝났음

10. 클래스(Classes)

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해서 변수와 메소드를 정의 하는 일종의 틀이다.

클래스(Class) 선언
class 클래스이름 {
	constructor() {
    	this.속성명 = 값;
    }
    
    메서드이름() {
    
    }
}

const 이름 = new 클래스이름()

//
new 클래스이름() : new 연산자와 생성자 함수를 사용해서 새로운 객체를 생성해서 변수에 저장하였다.

메서드이름() {} : 클래스 안에서 메서드(함수)를 만들 수 있다.

constructor : new에 의해 자동으로 호출된다.

참고한 사이트
https://share-factory.tistory.com/19
https://ngio.co.kr/10309
https://benggri.tistory.com/52
https://ingryong.tistory.com/entry/JavaScript-ES6-%ED%94%84%EB%A1%9C%EB%AF%B8%EC%8A%A4Promise
https://ossam5.tistory.com/160