[JavaScript] es6 문법 정리

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

 

변수 선언 방식

이전 var로만 선언 하던 방식에서 let과 const가 추가되어서 예상하지 못한 오류가 발생하는 것을 막을 수 있게 되었다.

• let: 변경될 수 있는 변수에 대해서 선언할 수 있으며 재선언 및 재할당이 가능하다.
• const: 변경될 수 없는 변수에 대해서 선언할 수 있으며 재선언 및 재할당이 불가능하다.

 

템플릿 문자열(리터럴)

기존에는 문자열을 합치기 위해서 더하기(+) 연산자를 사용하였지만, 백틱( ` )을 사용하여 문자열 안에 변수와 연산식을 혼합하여 사용할 수 있게 되었습니다.
표현하고자 하는 데이터는 $ 기호와 {}를 통해서 표기하며 간단한 연산도 가능합니다.

//es5
var username = req.body.username
if ( !username ) {
    throw "'username' must required. Your input: " + username  + "."
}

//es6
let  = req.body
if ( !username ) {
    throw `'username' must required. Your input: $.`
}

 

반복문 (for ... of)

es5에서 for ... in이나 forEach처럼 반복문을 좀 더 간편하게 사용하려는 시도는 있었지만 효율적이지 않았습니다.
(둘다 사용을 권장하지는 않음)
es6에서는 이런 아쉬움을 덜어내 줄 수 있도록 for ... of가 추가 되었습니다.

let array = ['a', 'b', 'c']
for(let i in array){
    console.log(i)   //0, 1, 2
}

for(let i of array){
    console.log(i)  //a, b, c
}

 

기본값 매개변수

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2)); 	// 10

console.log(multiply(5)); 	// 5

 

화살표 함수

화살표 함수를 활용하여 기존 함수보다 함수를 짧고 효율적으로 표현할 수 있습니다.

const test = [
    {
        num: 1,
        data: 'one',
    },
    {
        num: 2,
        data: 'two',
    },
    {
        num: 3,
        data: 'thiree',
    },
    {
        num: 4,
        data: 'four',
    }
];

위와 같은 배열이 있다고 했을 때 es5와 es6는 각각 아래와 같이 표현됩니다.

//es5
const result = test.filter(function(e){
    return e.num > 2;
});
 
console.log(result);
// [ { num: 3, data: 'three' }, { num: 4, data: 'four' } ]



//es6
const arrowReulst = test.filter((e) => e.num > 2);
 
console.log(arrowReulst);
// [ { num: 3, data: 'three' }, { num: 4, data: 'four' } ]

 

전개구문 연산자

spread 연산자(...)는 특정 객체 또는 배열의 값을 다른 객체나 배열로 복제하거나 옮길 때 사용합니다. 
배열이나 객체, 문자열을 ...과 함께 사용하면서 결합하기에 매우 수월해졌습니다.

let years = [2001, 2010,2015, 2018];
let yearsCp = [2000, ...years, 2020];
 
console.log(yearsCp);
// [ 2000, 2001, 2010, 2015, 2018, 2020 ]
 
let koreanHistory = {
    liberate : 1945,
    625: 1950
};
 
let history = {
    worldWar1: 1914,
    worldWar2: 1945,
    ... koreanHistory
}
 
console.log(history);
// { '625': 1950, worldWar1: 1914, worldWar2: 1945, liberate: 1945 }

 

클래스

es5에서 어떤 함수를 Class처럼 사용하려면 함수를 Class처럼 만들고 prototype을 활용해야 했지만, es6부터는 객체지향형 프로그래밍 언어들이 지원하던 Class를 javascript에서도 사용할 수 있게 되었습니다.

• 클래스라는 기능은 1개의 영역 안에 다양한 함수, 변수 등을 집어넣고 사용할 수 있게 해주는 기능힙니다.
• 클래스는 new 연산자를 통해서 생성할 수 있으며, 호이스팅이 되지 않습니다.
• 클래스에서 함수는 function을 제거하고 선언 합니다.
• 클래스에서 static 함수는 enw로 생성된 변수에서 접근하는 것이 아니라 클래스에서 바로 접근해야 합니다.
• 클래스는 다른 클래스를 상속 받아서 기존 클래스의 기능을 이어받을 수 있습니다.

//es5
 
function Animal() {
    this.type = 'chosic';
    this.tail = false;
}
 
Animal.prototype.setType = function (type) {
    this.type = type;
}
 
Animal.prototype.getType = function () {
    return this.type;
}
 
// es6
 
class Ani {
    constructor(type,tail){
        // 생성자 지원
        this.type = type;
        this.tail = tail;
    }
 
    cry(value = 'Woof Woof'){
        // 메소드 지원
        console.log(value);
    }
 
    static instance(){
        // static 함수도 지원
        console.log('instance!!');
    }
}
 
let dog = new Ani('Dog',true);
console.log(dog);
// Ani { type: 'Dog', tail: true }
 
dog.cry('woof');
// woof
 
Ani.instance();
// instance!!
 
// 상속도 지원
class Cat extends Ani{
    constructor(type,tail,color){
        super(type,tail);
        this.color = color;
    }
 
    cry(value = 'Meow Meow'){
        // 메소드 오버라이딩도 지원
        console.log(value);
    }
}
 
let cat = new Cat('Cat', true, 'yellow');
console.log(cat);
// Cat { type: 'Cat', tail: true, color: 'yellow' }
cat.cry();
// Meow Meow

 

Promise

싱글쓰레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해왔다.
덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 사용되는 경우가 많아지면 에러, 예외처리가 어렵다는 것과 중첩으로 인한 복잡도가 증가하는 것이 단점으로 드러났습니다.
크게 이 두 가지의 단점을 해결하기위해 프로미스가 예전부터 라이브러리로 생겨났고, 이것을 ES6에서는 언어적 차원에서 지원하게 되어 Async와 Await를 활용해서 promise then을 쓸 때 보다 세련되게 작성할 수 있게 되었습니다.

function resolvePromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('done');
        }, 2000);
    })
}
 
async function getPromise1(){
    const result = await resolvePromise();
    console.log(result);
    // 2초 경과 후 done 
    await resolvePromise();
    console.log(result);
    // 2초 경과 후 done 
    await resolvePromise();
    console.log(result);
    // 2초 경과 후 done 
    await resolvePromise();
    console.log(result);
    // 2초 경과 후 done 
    await resolvePromise();
    console.log(result);
    // 2초 경과 후 done 
}
 
getPromise1();

 

Map & Set

es6 부터는 JavaScript에서도 Map과 Set을 지원합니다.
쉽게 말해서 Map을 Java의 HashMap, Python의 Dictionary와 같은 자료 구조입니다.
key : value의 형식으로 저장되며, key값을 사용하여 해당 key에 맞는 value값을 가져올 수 있습니다.
map은 키-값 쌍의 자료구조이기 때문에 얼핏 보면 map과 object가 동일한 것 처럼 보일 수 있는데, 엄연히 둘은 다릅니다.

//Map

let map = new Map([['id','test']]);
// map 선언 ( 앞이 key, 뒤가 value가 된다 )
map.set('testId','test');
// map에 key와 value 추가 ( 역시 앞이 key, 뒤가 value가 된다 )
 
console.log(map);
// Map { 'id' => 'test', 'testId' => 'test' }
 
console.log(map.get('testId'));
// test
// key에 해당하는 value 출력
 
console.log(map.size);
// 2
// map 크기 출력
 
console.log(map.has('testId'));
// true
// map에 특정 key가 있는지 확인
 
console.log(map.entries());
// [Map Iterator] { [ 'id', 'test' ], [ 'testId', 'test' ] }
// map안의 모든 요소를 key, value 형태의 array로 집어넣은 iterator 반환
 
console.log(map.keys());
// [Map Iterator] { 'id', 'testId' }
// map안의 모든 key를 반환
 
console.log(map.values());
// [Map Iterator] { 'test', 'test' }
// map안의 모든 value를 반환
 
console.log(map.delete('testId'));
// true
// map 안에서 특정 key에 해당하는 key-value쌍 삭제
 
console.log(map.size);
// 1
map.clear();
// map안의 모든 값 삭제
console.log(map.size);
// 0

 

//Set

const set = new Set([1,1,1,1,1,1,1,2,4,4,4,3,3,3]);
// set 선언
set.add(4);
set.add(5);
// set에 값 추가
console.log(set);
// Set { 1, 2, 4, 3, 5 }
console.log(set.size);
// 5 
 
// Set은 중복을 허용하지 않는다
 
set.delete(5);
// Set에서 특정 값 삭제
console.log(set.size);
// 4
set.clear();
// Set의 모든 값 삭제
console.log(set.size);
// 0