ES6

Park Bumsoo·2022년 4월 30일

ECMAScript 6 혹은 ECMAScript 2015 로도 알려져 있으며
Node.js와 React에서 사용하는 문법으로
jQuery를 활용한 ES5 문법 에서 트렌드에 맞게 발전한 문법이다.

기능

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

const and let

const and let
const는 변수 선언을 위한 ES6의 새로운 키워드로
var보다 강력하고 일단 사용되면 변수를 다시 할당할 수 없다.
즉, 객체와 함께 사용할 때를 제외하고는 변경이 불가능한 변수 이다.

let은 새로운 값을 가질 수도 있고 재할당할 수도 있다.
const와 다르게 변경이 가능한 변수선언 방법이다.

Arrow functions

this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
new.target키워드가 없습니다.
일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
생성자(Constructor)로 사용할 수 없습니다.
yield를 화살표 함수 내부에서 사용할 수 없습니다.

Template Literals

템플릿 리터럴 또는 템플릿 문자열은 꽤 멋집니다. 문자열을 연결하기 위해 더하기(+) 연산자를 사용할 필요는 없으며, 백틱을 사용하여 문자열 내에서 변수를 ${변수명} 으로사용할 수도 있다.

Default parameters

매개 변수를 쓰지 않은 경우 매개 변수가 이미 기본값에 정의되어 있으므로 정의되지 않은 오류가 반환되지 않습니다. 따라서 누락된 매개 변수를 사용하여 함수를 실행할 때 기본 매개 변수 t 값을 사용하고 오류를 반환하지 않습니다

Array and object destructing

비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있다.

Import and export

export를 통해 현재 구성요소를 다른 위치에서 import 하여 사용 가능하다.

Promises

Promise는 ES6의 새로운 특징입니다. 비동기 코드를 쓰는 방법입니다. API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있다.

new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(el);
            }, 3000);
          })
          
          //3초뒤 실행