ES6 문법

DevSeong2·2021년 3월 29일

TIL

목록 보기

2/5

ES6

ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다.
ECMA스크립트 위키백과

ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공하는 명세서📃.
ES6(ES2015) = ECMAScript를 줄여 부르는 ES + 여섯 번째 버전

ES6 문법

템플릿, 백틱(`)

[before]
문자열과 문자열 또는 변수와 연결하려면 병합 연산자(+)를 사용
var str1 = "hello";
var str2 = "react";
var combined = str1 + ' ' + str2;

[after]
백틱(\`)으로 문자열을 표현할 수 있으며 특수 기호 $를 사용해서 변수 또는 식 포함
const str1 = "hello";
const str2 = "react";
const combined = `${str1} ${str2};`

> hello react

전개 연산자(Spread Operator)

[before]
배열의 일부 요소만 잘라내거나 연결하려면 배열 인덱스와 함께 배열 내장 함수들을 사용
var arr1 = ['SUN', 'MON'];
var arr2 = ['TUE', 'WED', 'THD'];
var combined = arr1.concat(arr2); // 또는 [].concat(arr1, arr2);

[after]
전개 연산자(...)를 사용해 나열형 자료를 추출하거나 연결
const arr1 = ['SUN', 'MON'];
const arr2 = ['TUE', 'WED', 'THD'];
const combined = [...arr1, ...arr2];

> ['SUN', 'MON', 'TUE', 'WED', 'THD']

가변 변수와 불변 변수

[before]
변수를 선언할 수 있는 키워드가 var (함수 레벨 스코프)
var str = 'hi';

[after]
블록 레벨 스코프
let - 읽거나 수정 가능(가변 변수)
const - 읽기만 가능(불변 변수)
let num1 = 1;
num1 = 2; // OK
const num2 = 3; 
// num2 = 4; ERROR

클래스(Class)

[before]
prototype으로 클래스를 표현. 함수를 생성자 형태로 선언한 다음 prototype 객체에 할당
function shape(x, y) { this.name = 'Shape'; this.move(x, y); }
Shape.create = function(x, y) { return new Shape(x, y); };
Shape.prototype.move = function(x, y) { this.x = x; this.y = y; };

[after]
class 키워드로 클래스를 정의
class Shape {
    static create(x, y) { return new Shape(x, y); }
    constructor(x, y) { this.move(x, y); }
    move(x, y) { this.x = x; this.y = y; }
}

화살표 함수(Arrow Function)

[before]
function 함수명() { content }; // 함수 선언식
var 함수명 = function() { content }; // 함수 표현식
function add(a, b) {
    return a + b;
}
var add = function(a, b) { // 익명 함수
    return a + b;
}

[after]
화살표 함수르 사용해 익명 함수를 선언하여 변수에 대입
let add = (a, b) => {
    return a + b;
};
let add = (a, b) => a + b;

객체 확장/구조 분해

객체 확장
[before]
객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당
var x = 0;
var y = 0;
var coord = { x: x, y: y };

[after]
변수 선언 형식이 간편
const x = 0;
const y = 0;
let coord = { x, y };

구조 분해
[before]
일일이 변수를 생성하고 값을 할당
var list = [0, 1];
var item1 = list[0];
var item2 = list[1];


[after]
선언과 동시에 할당
const list = [0, 1];
const [item1, item2] = list;

Import/Export 라이브러리 의존성 관리

[before]
script 엘리먼트의 선언 순서가 중요
<script src="a.js"></script>	// var total = 100;
<script src="b.js"></script>	// var total = 200;
<script>
  getTotal(); // 200
</script>

[after]
import 외부에서 모듈 가져오기
export 모듈을 외부로 내보내기
export const total = 100;	// a.js

import { total } from './a.js';	// total.js

forEach(), map(), reduce()

forEach(), map()
[before]
for문을 이용해 분리하여 객체에 담아 반환
function parse(url) {
    var queryStr = url.substr(1);
    var temp = url.split('&');
    var result = {};
    for(var i = 0; i < temp.length; i++) {
        var contents = temp[i].split('=');
        var key = contents[0];
        var value = contents[1];
        result[key] = value;
    }
    return result;
}

[after]
반복문의 인덱스와 배열의 크기를 저장하는 과정 생략
function parse(url) {
    const queryStr = url.substr(1);
    const temp = queryStr.split('&');
    let result = {};
    temp.forEach((temp) => {
        const [key, value] = temp.split('=');
        result[key] = value;
    });
    return result;
}

불변 변수만을 사용하려면 map() 함수 사용
각 배열 요소를 정의된 함수를 통해 반환한 결괏값들로 새 배열을 반환
function parse(url) {
    const queryStr = url.substr(1);
    const temp = queryStr.split('&');
    const result = temp.map((temp) => {
        const [key, value] = temp.split('=');
        result[key] = value;
    });
    return result;
}

reduce()
배열을 객체로 변환
function sum(numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

비동기 함수

비동기 처리란 작업 시간이 많이 필요한 작업을 처리하는 중 다른 작업들이 대기하고 있다면 다른 작업을 먼저 처리하고 원래 작업을 수행하는 방식이다.

[before]
계단모양으로 쌓이는 콜백 함수(콜백 지옥)
function work1(onDone){
    setTimeout(() => onDone('작업1 완료'),100);  //0.1초 후 실행
}
function work2(onDone){
    setTimeout(() => onDone('작업2 완료'),200);  //0.2초 후 실행
}
function work3(onDone){
    setTimeout(() => onDone('작업3 완료'),300);  //0.3초 후 실행
}
function urgentWork(){
    console.log('긴급 작업')
}
work1(function(msg1){
  console.log('done after 100ms:'+ msg1);
  work2(function(msg2){
    console.log('done after 300ms:'+ msg2);
    work3(function(msg3){
      console.log('done after 600ms:'+ msg3);
    });
  });
});
urgentWork();

[after]
콜백 지옥을 해결할 수 있는 비동기 함수 표현법
const work1 = () =>
  new Promise((resolve) => {
    setTimeout(() => resolve('작업1 완료'), 100);
  });
const work2 = () =>
  new Promise((resolve) => {
    setTimeout(() => resolve('작업2 완료'), 200);
  });
const work3 = () =>
  new Promise((resolve) => {
    setTimeout(() => resolve('작업3 완료'), 300);
  });
const urgentWork = () => {
  console.log('긴급 작업');
}
const nextWorkOnDone = (msg1) => {
  console.log('done after 100ms:' + msg1);
  return work2();
};
work1()
  .then(nextWorkOnDone) 
  .then((msg) => {  	
    console.log('done after 100ms:' + msg1)
    return work2();
  })
  
  .then((msg2) => {
    console.log('done after 300ms:' + msg2)
    return work3();
  })
  
  .then((msg3) =>{
    console.log('done after 600ms:' + msg3);
  });
urgentWork();