ES6의 특징

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

var

재선언, 재할당 가능

const

객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수. 특정 이벤트를 실행하는 버튼이나 특정 요소를 정의할 때 사용

재선언, 재할당 불가능

let

변경 가능한 변수. 새로운 값을 가질 수도 있고 재할당도 가능

재선언 불가능

Template Literals(템플릿 리터럴)

문자열을 연결하기 위해 더하기(+) 연산자를 사용할 필요 없이, 백틱을 사용해서 문자열 내에 변수 사용가능

let str = `내 이름은 ${a}이고 ${b+c}에 있어요.` ;

Arrow functions(화살표 함수)

js에서 함수를 정의하는 function 키워드 없이 함수를 만들 수 있고, return 키워드 없이 식을 계산한 값이 자동으로 반환됨.

()안에 함수의 인자가 들어가고 => 오른쪽에 결과를 반환

const myFunc = (name) => `안녕 ${name}`;

객체 리터럴

객체 안에 함수를 사용하는 것이 가능해졌다.

이전보다 간결해진 코드로 객체를 선언하는 것이 가능해졌다.

구조 분해 할당

객체나 배열에서 구조를 분해해서 할당한다.

const arr = [1, 2, 3]
const [one, two, three] = arr

console.log(one) // 1
console.log(two) // 2
console.log(three) // 3

Promise

기존에는 비동기 작업의 사용성 문제가 있었다.

비동기 작업은 여러 작업을 동시에 수행할 수 있는 장점이 있지만, 의존성이 길게 늘어져 있는 비동기 작업들을 처리할 때 어려울 수 있다.

함수 호출을 할 때 다음 작업(콜백 함수)도 넘겨줘야 하기 때문이다.

그래서 나온 Promise

Promise는 비동기 작업의 단위이다.

const promise1 = new Promise((resolve, reject) => {
// 비동기 작업
});

async : 비동기 작업을 만드는 손쉬운 방법

함수를 선언할 때 async를 붙인다.

async 함수의 리턴 값은 무조건 Promise다.

await: Promise가 끝날 때까지 기다려라

이렇게 async와 await를 사용해서

비동기적 작업을 동기적 작업으로 변경한다.

Class

자바스크립트는 프로토타입 기반의 객체지향언어로 클래스 기반의 객체 지향 프로그래밍을 지원하도록 Class 키워드를 도입했다. Class의 도입으로 상속 등의 개념을 적용할 수 있어 더 좋은 가독성을 가진 코드를 만들어낼 수 있게 되었다.

Module

모듈이란 재사용을 위한 코드 조각으로 자세한 사항은 캡슐화를 통해서 감추고, API부분만 외부에 노출하여 코드의 재사용성을 증가시켰다. type에 Module을 추가하고 확장자를 mjs로 변경하여 사용한다.

기존에는 require를 사용했는데 Module을 사용하여 코드의 재사용성을 증가시켰다.

모듈은 모듈 스코프를 가지며, import와 export를 통해 사용한다.