[Node.js] ES2015 이상의 자바스크립트 문법

들어가기 전에

• 노드는 자바스크립트 실행기이므로 자바스크립트의 문법을 반드시 알고 있어야 함
• 자바스크립트 최신 문법 익숙해지기

ES2015(ES6)

• 2015년을 기점으로 매년 자바스크립트 문법의 변경 사항 발표
• 노드 6버전 부터 ES2015 문법 사용 가능

1. const, let

블록 스코프

• 블록 밖에서는 변수에 접근 불가
• 블록의 범위: if, while, for 등의 중괄호({ ... })

var

• 함수 스코프 가짐

const

• 상수: 한 번 값을 할당하면 다른 값 할당 불가
• 초기화할 때 반드시 값을 할당해야 함
• 다른 값을 할당하는 경우가 없는 한, const를 기본적으로 사용하기

2. 템플릿 문자열

• 백틱(`)으로 문자열 감싸기
• 문자열 내에 변수 사용가능
  - 사용 방법: ${변수}
  

3. 객체 리터럴

메서드 축약 표현

• 메서드에 함수 연결할 때, 콜론(:), function 생략 가능

계산된 프로퍼티 이름

• 객체의 속성명 동적 생성 가능

프로퍼티 축약 표현

• 속성명과 변수명이 동일한 경우, 한 번만 작성

ES6에서 추가된 객체 리터럴의 확장 기능

4. 화살표 함수

• function 선언 대신 => 기호로 함수 선언

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

const add = (x, y) => { 
  return x + y;
}

// 화살표 함수 내부에 return문만 있는 경우, return 키워드 생략 가능
const add1 = (x, y) => (x + y);

this 바인딩 방식

const relationship2 = {
  name: 'zero',
  friends: ['nero', 'hero'],
  logFriends() {
    this.friends.forEach(friend => {
      console.log(this.name, friend);
    });
  },
};

• forEach문에서 화살표 함수를 사용함에 따라,
  바깥 스코프(logFriends())의 this를 그대로 사용 가능
  -> 상위 스코프의 this 그대로 물려 받음

5. 구조분해 할당

• 객체나 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있음
• 객체 안의 속성을 찾아서 해당 변수와 매칭

// 객체
const candyMachine = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy() {
    this.status.count--;
    return this.status.count;
  },
};

const { getCandy, status: { count }} = candyMachine;

// 배열
const array = ['nodejs', {}, 10, true];
const [node, obj, , bool] = array;

6. 클래스

• 클래스 문법이 추가되었지만, 다른 언어처럼 클래스 기반이 아닌 프로토타입 기반으로 동작

ES6에서 도입된 클래스 개념

7. 프로미스

• ES6 부터 자바스크립트와 노드의 API들이 콜백 대신 프로미스 기반으로 재구성
• 콜백 지옥 해결
• 실행은 바로 하되 결과값은 나중에 받는 객체
  - 결과값은 실행이 완료된 후, then/catch 메서드를 통해 받음

condition = true;

// 프로미스 객체 생성
// 내부에 resolve, reject를 매개변수로 갖는 콜백 함수 넣기
const promise = new Promise((resolve, reject) => {
  if(condition) {
    resolve('성공');	// then 실행
  } else {
    reject('실패');	// catch 실행
  }
});

promise
  .then((msg) => {
  	console.log(msg);
  })
  .catch((err) => {
    console.error(err);
  })
  .finally(() => {	// 성공/실패 여부와 상관없이 실행
    console.log('무조건');
  });

프로미스 연결하기

• then 이나 catch에서 다시 다른 then/catch로 연결 가능
• new Promise를 return 해야 다음에서 받을 수 있음

promise
  .then((msg) => {
  	return new Promise((resolve, reject) => {
      resolve(msg);
    });
  })
  .then((msg2) => {
    return new Promise((resolve, reject) => {
      resolve(msg2);
    });
  })
  ...

프로미스 여러 개를 한 번에 실행하기

Promise.all([promise1, promise2, ...])
  .then(...

8. async/await

• 노드 7.6 버전부터 지원되는 기능
• 프로미스가 콜백 지옥을 해결했으나, then/catch가 반복되는 코드 구성
• 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄임

// 프로미스를 활용한 기존 코드
function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: 'm' });
    })
    .then((user) => {
      // 생략
    })
  	.catch(err => {
      console.error(err);
    });
}

// async/await 문법 적용
async function findAndSaveUser(Users) {
  try {
    let user = await Users.findOne({});
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({ gender: 'm' });
    // 생략
  } catch(err) {
    console.error(err);
  }
}

• 함수 선언 시, 일반 함수 대신 async function으로 교체
• 프로미스 앞에 await 추가
  - 해당 프로미스가 resolve될 때까지 기다린 뒤 다음 로직으로 넘어감
• 프로미스가 reject된 경우 catch문이 에러 처리