JS - ECMAScript(ES)

ESMAScript

• Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어

• 자바스크립트를 표준화하기 위해 만들어졌다

const, let

• 변수 선언 시, 기존 var 에서 const, let 으로 대체할 것이다.

• const, let 은 블록 스코프를 갖는다.
• 블록 스코프 - if, while, for, function 등에서 해당 스코프 내에서만 사용 가능

• const - 한번 대입하면 값의 수정 불가

• let - 대입 한 값을 계속 수정할 수 있음

템플릿 문자열

• 문자열 안에 변수를 넣을 수 있게 되었다

// 기존
var string = num1 + ' + ' + num2 + ' = ' + result;
// 템플릿 문자열
const string = `${num1} + ${num2} = ${result}`;

화살표 함수

function add1(x, y) {
	return x+y;
}

const add2 = (x, y) => x + y;

Promise

• Promise도 ES2015에 도입되었다.

• callback 지옥을 해결하기 위해 도입
• 기존 callback 함수

function findAndSaveUser(Users) {
    Users.findOne({}, (err, user) => { // 첫번째 콜백
        if(err) {
            return console.error(err);
        }
        user.name = 'kim';
        user.save((err) => { // 두번째 콜백
            if(err) {
                return console.error(err);
            }
            Users.findOne({gender: 'm'}, (err, user) => { // 세번째 콜백
                // 생략
            });
        });
    });
}

• Promise 적용

function findAndSaveUser(Users) {
    Users.findOne({})
        .then((user) => {
            user.name = 'kim';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({gender: 'm'});
        })
        .then((user) => {
            // 생략
        })
        .catch(err => {
            console.error(err);
        })
        .finally(() => {
        });
}

• then 은 순차적으로 실행되고, error 는 마지막 catch를 통해 한번에 처리가 가능하다.
• finally 는 성공, 실패 여부 상관없이 무조건 실행되는 메소드로 resolve 값은 바꿀 수 없고 reject 값만 바꿀 수 있다고 한다.
• Promise를 지원하는 함수들에서 사용할 수 있다.
• Promise.all : Promise 여러개를 한번에 실행

async/await

• 비동기 프로그래밍을 할 때 사용

• Promise를 좀 더 깔끔하게 만들어주는 도움을 준다.

• 위의 Promise 코드를 아래와 같이 바꿀 수 있다.

// async function findAndSaveUser(Users) {
const findAndSaveUser = async (Users) { // 위 구문에 화살표 함수 적용
    try{
        let user = await Users.findOne({});
        user.name = 'kim';
        user = await user.save();
        user = await Users.findOne({gender: 'm'});
        // 생략
    } catch(err) {
        console.error(err);
    } 
}

비구조화 할당

• 다음과 같이 변수의 깊숙한 속성까지도 할당이 가능하다

const candyMachine1 = {
    status: {
        name: 'node',
        count: 5,
    },
    getCandy1() {
        return "Hi";
    }
};
 
const { getCandy1, status: { count } } = candyMachine1;

console.log(getCandy1()) // Hi
console.log(count) // 5

객체 리터럴

• 다음과 같은 객체 생성이 가능해짐

var sayNode = function() {
    console.log('Node');
};
 
var es = 'ES';
 
const newObject = {
    sayJS() {
        console.log('JS');
    },
    sayNode,
    [es+6]: 'Fantastic',
};
 
newObject.sayNode();
newObject.sayJS();
console.log(newObject.ES6);