[Node.js] 2.1 알아둬야 할 자바스크립트 - ES2015+

1. const, let

- 공통점 : 블록 스코프를 가진다. (var는 함수 스코프를 가지므로 블록과 상관없이 변수에 접근 가능)
- 차이점 : const는 상수로 한 번 값을 할당하면 다른 값을 할당할 수 없다. 따라서 기본적으로 변수 선언할땐 const를 사용하고, 다른 값을 대입해야 하는 상황이 생기면 let을 사용한다.

2. 템플릭 문자열

- 일반 문자열과 달리 따옴표가 아닌 백틱(`)으로 감싼다.
- ${변수} 형식으로 변수를 문자열 안에 넣을 수 있다.

const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num3} 더하기 ${num4}는 '${result2}'`
console.log(string2)  // 1 더하기 2는 '3'

 

3. 객체 리터럴

- 객체란, js에서 데이터를 표현하는 방식 중 하나로 key, value 쌍으로 구성된다.
- 객체 리터럴이란, key:value 형식의 데이터를 직접 입력하는 방법이다.
- 바뀐 객체 리터럴
   1) 객체의 메서드에 함수를 연결할때 더는 콜론(:)과 function을 붙이지 않아도 됨 예) sayJS
   2) 속성명과 변수명이 동일한 경우, 한 번만 써도 되는 걸로 바뀜 예) sayNode
   3) 객체 리터럴 안에서 동적 속성 선언 가능 예) ES6

// 기존 코드(oldObject 객체에 동적으로 속성을 추가하고 있음)
var sayNode = function() {
  console.log('Node');
};
var es = 'ES';
var oldObject = {
  sayJS: function() {
    console.log('JS')
  },
  sayNode : sayNode,
}
oldObject[es+6] = 'Fantastic'
oldObject.sayNode();
oldObject.sayJS();
console.log(oldObject.ES6)

// 바뀐 객체 리터럴을 적용한 코드
const newObject = {
  sayJS() {
    console.log('JS')
  },
  sayNode,
  [es + 6] : 'Fantastic',
};
newObject.sayNode();
newObject.sayJS();
console.log(newObject.ES6)

 

4. 화살표 함수

- 함수 선언시 function 대신 화살표 기호(=>)를 사용한다.
- 함수를 변수에 대입하면 재사용이 가능하다.
- 기존 함수과 다른 점은 this 바인드 방식이다. 화살표 함수로 this를 쓰면 상위 스코프의 this를 그대로 물려받을 수 있다.

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

const not2 = (x) => !x;

console.log(add2(1, 2));  // 3
console.log(not2(1));	  // false

 

5. 구조 분해 할당

- 구조 분해 할당을 사용하면 객체, 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.
- 객체 구조 분해 할당

// 객체 속성을 같은 이름의 변수에 대입하는 기존 방식의 코드
var candyMachine1 = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy: function() {
    this.status.count--;
    return this.status.count;
  },
};
var getCandy = candyMachine1.getCandy;
var count = candyMachine1.status.count;

// 객체 구조 분해 할당을 이용한 코드
const candyMachine = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy() {
    this.status.count--;
    return this.status.count;
  },
};
const { getCandy, status: { count } } = candyMachine;

- 배열 구조 분해 할당

// 기존의 배열 원소 할당 방식
var array1 = ['nodejs', {}, 10, true];
var node = array1[0];  // nodejs
var obj = array1[1];   // {}
var bool = array1[3];  // true

// 배열 구조 분해 할당 코드
const array2 = ['nodejs', {}, 10, true];
const [node2, obj2, , bool2] = array2;
console.log(bool2)  // true

 

6. 클래스 (🧐)

- 클래스 문법이 추가되긴 하였으나 여전히 프로토타입 기반으로 동작한다.
- 프로토타입이란?

 

 

7. 프로미스 (🧐)

- 프로미스란 실행은 바로 하되, 결괏값은 나중에 받는 객체다.
- 결과값은 실행이 완료된 후 then이나 catch 메서드를 통해 받는다.
- 더 많은 설명은 프로미스란? 게시글에서 확인할 수 있다.

const condition = true;
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve('성공');
  }
  else {
    reject('실패');
  }
});

promise
  .then((message) => {
    console.log(message);   // 성공(resolve)한 경우 실행
  })
  .catch((error) => {
    console.error(error);   // 실패(reject)한 경우 실행
  })
  .finally(() => {          // 끝나고 무조건 실행
    console.log('무조건')
  });

 

8. async / await (🧐)

- 비동기 위주 프로그래밍에 사용한다.
- 더 많은 설명은 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 (error) {
    console.error(error)
  } 
}

└ 함수 선언부를 async function으로 교체하고 프로미스(Users.findOne) 앞에 await를 붙였다. 이제 함수는 해당 프로미스가 resolve될 때까지 기다린 뒤 다음 로직(user 변수 초기화)으로 넘어간다.

9. Map / Set

- 자료구조 중 하나다.
- Map은 객체와 유사하나, 속성명으로 문자열이 아닌 값(객체나 숫자)도 사용 가능하다. ( + size 메서드로 속성의 수를 쉽게 알 수 있다.)
- Set은 배열과 유사하나, 중복을 허용하지 않는다.

10. 널 병합 / 옵셔널 체이닝 (🧐)

- 널 병합 연산자(??) : 주로 || 연산자 대용으로 사용된다.
- 옵셔널 체이닝 연산자(?) : null이나 undefined의 속성을 조회하는 경우, 에러가 발생하는 것을 막는다.