[Javascript] ES6 문법 정리 (대표 9가지) + Babel

ES6

기존에 jQuery를 활용한 ES5 문법에서 최신 트렌드에 맞게 ES6 문법을 공부해보도록 하자.

 

- ES6란?

ECMAScript 2015로도 알려진 ES6는 ECMAScript 표준의 가장 최신 버전이다.

ES6는 새로운 언어 기능이 포함된 주요 업데이트이다.

+

2015년은 ES5(2009)이래로 진행한 첫 메이저 업데이트가 승인된 해

최신 Front-End Framwork인 React, Angular, Vue에서 권고하는 언어 형식

ES5에 비해 문법이 간결해서 익숙해지면 코딩을 훨씬 편하게 할 수 있음

 

- ES6의 대표적인 문법

• const and let
• Arrow Function
• Template Literals
• Default parameters
• Array and object destructing
• Import and export
• Promises
• Rest parameter and Spread operator
• Classes

 

- const and let

const는 변수 선언을 위한 새로운 키워드 이다. 변경 불가능한 변수를 선언할 때 사용한다. 변수를 재할당하지 않으려면 항상 상수를 사용하는 것이 좋다.

 

let은 새로운 값을 가질 수도 있고 재할당할 수도 있는 변경 가능한 변수가 생성된다.

 

let과 const는 동일하게 블럭 범위라는 점이 있다. 즉, 변수는 범위 내에서만 사용할 수 있다.

 

- Arrow functions(화살표 함수) 

function myFunc(item) {
	retrun item;
	}
//ES5

const myFunc = (item) => {
	return `${item}`;
    };
//ES6

const myFunc = (item) => `${item}`;
//ES6

화살표 함수를 map, filter, reduce 등 내장 함수와 함께 사용할 수 있다. ES6를 사용하면 더 짧고 스마트한 코드를 작성할 수 있다.

 

- Template Literals(템플릿 리터럴)

템플릿 리터럴을 사용하면 문자열을 연결하기 위해서 더하기 연산자를 사용할 필요가 없으며 백틱(`)을 사용하여 문자열 내에서 변수를 사용할 수 있습니다.

function myFunc(name) {
	return 'hi' + name;
    }
//ES5

const myFunc = (name) => {
	return `hi ${name}`;
};
//ES6

 

- Default parameters(기본 매개 변수)

매개 변수를 쓰지 않은 경우 매개 변수가 이미 기본값에 정의되어 있으므로 정의되지 않은 오류가 반환되지 않는다.

const myFunc = (name, age = 26) => {
	return `hi ${age} 의 ${name}`;
};

console.log(myFunc('태양');
//출력 => hi 26의 태양

함수의 두번째 매개 변수를 놓쳤더라도 값을 반환한다.

 

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

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

// ES5 문법
const Who = {
	famillyName: '오',
	name: '태양',
};

let famillyName = Who.famillyName;
let name = Who.name;

console.log(famillyName);
console.log(name);

// ES6 문법
const Who = {
	famillyName: '오',
	name: '태양',
};

let { famillyName, name } = Who;

console.log(famillyName);
console.log(name);

속성 이름과 동일하지 않은 변수를 할당하면 undefined가 반환된다. 항상 속성의 이름과 동일하게 변수 이름을 지정해야 하고 변수의 이름을 바꾸려면 콜론을 (:)대신 사용할 수 있다.

 

객체의 경우 중괄호, 배열의 경우 대괄호를 사용한다.

 

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

JavaScript MVC 프레임워크에 익숙한 경우, 대부분의 경우 import 및 export를 사용하여 구성요소를 처리한다.

export를 사용하면 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있고 그 모듈을 사용하기 위해 가져올 수 있다.

export default function default(name) {
	return `hi ${name}`;
}
//defaultComponent.js

import default from './defaultComponent.js';

console.log(default('태양'));
//homeComponent.js

둘 이상의 모듈을 가져오려면 중괄호를 사용한다.

 

- Promises(프로미스)

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

 

JS 비동기 처리 방식 3가지부터 살펴보자.

# Callback

비동기를 호출하는 함수를 호출하면서, 콜백 함수라는 인자를 넣어 함수의 결과물을 필요로 하는 뒤의 로직을 구성할 수 있다. 가독성이 좋지 않고 간단하게 동작하는 함수도 콜백 함수가 여러 개가 필요하다. 이를 개선하기 위해서 Promise가 도입되었다.

 

#Promise

기존의 onSuccess, onError는 각각 resolve와 reject로 대체되었다. then은 resolve가 호출되어 값을 넘기고, catch는 reject가 호출되어 값을 넘긴다. 함수의 동작은 resolve이면, then을 reject이면 catch를 동작한다.

 

#Async & Await

Promise chaining을 계속하다보면, 결국 callback hell 처럼 가독성이 점차 떨어진다. 이를 보완하고자, promise를 간결하게 동기적으로 실행되는 것처럼 보이게 한 API가 async & await이다.

function fetchUser() {
  return new Promise((resolve, reject) => {
		resolve(`태양`);
  });
}

const user = fetchUser();
user.then(user => console.log(user));
//Promise방식

async function fetchUser() {
  return `태양`;
}

const user = fetchUser();
user.then(data => console.log(data));
//async 사용

코드 블록이 자동으로 promise로 변환되어 동작한다.

 

Promise의 예시 :

const myPromise = () => {
	return new Promise((resolve, reject) => {
    	resolve('Promise가 동작');
        });
    };
 
 console.log(myPromise());
 //Promise{<resolved>: "Promise가 동작"}

데이터를 가져온 후 함수를 실행하려면 Promise를 사용한다. Promise는 두 개의 매개 변수를 사용하며 resolve 및 reject 예상 오류를 처리할 수 있다.

 

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

Rest parameter는 배열의 인수를 가져오고 새 배열을 반환하는데 사용한다.

Spread operator는 Rest parameter와 구문이 동일하지만 인수뿐만 아니라 배열 자체를 가진다.

 

- Classes(클래스)

class는 객체 지향 프로그래밍(OOP)의 핵심이다. 코드를 더욱 안전하게 캡슐화할 수 있다.

class를 만들려면 class 키워드 뒤에 두 개의 중괄호가 있는 class 이름을 사용한다.

class myClass {
	constructor(name, age) {
    	this.name = name;
        this.age = age;
       	}
    }
    
const user = new myClass('태양', 26);

extends 키워드를 사용해 확장할 수 있다.

 

참고자료 : 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

[JavaScript] 자주 사용하는 ES6 문법 정리

 

-Babel

• 구 버전의 브라우저 중에서는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요
• ES6의 문법을 각 브라우저의 호환 가능한 ES5로 변환하는 컴파일러