JavaScript ES6

const, let

const와 let은 블록 스코프이며 호이스팅 문제들을 해결해주고 코드 관리 수월

const : 한번 값을 할당하면 다른 값으로 할당 불가, 재선언 불가, const로 선언한 변수는 상수

let : 재할당 가능, let으로 선언한 변수 재선언은 불가

` ` 백틱

${변수} 형식으로 + 없이 문자열 넣을 수 있음

const String1 = num1 + '더하기' + num2 + '는 \'' + result + '\'';

const String2 = `${num1}더하기$[num2}는 '${result}'`;

String2 가 백틱을 사용해서 가독성 좋아짐

객체 리터럴

- 객체의 메서드에 함수를 연결할 때 콜론: 과 function을 붙이지 않아도 된다.

- 속성명과 변수명이 동일한 경우 한 번만 써도 된다. >> 코드 중복 피함

- 객체의 속성명은 동적으로 생성가능 [es + 1]

화살표 함수 (arrow function)

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

내부에 return문 밖에 없으면 return 생략가능

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

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

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

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

function not(x){
	return !x;
}

const not = x => !x;

function과 this 바인드 방식이 다름

구조분해 할당

객체와 배열로부터 속성이나 요소를 쉽게 가져올 수 있다.

const arr = ['node', {}, 1, true];
const [node, obj, , bool] = arr;

객체안의 속성을 찾아 변수와 매칭, 단 함수의 this가 달라질 수 있음

bind 함수를 사용하면 this 원래대로 바꿔줄 수 있다.

클래스

클래스 문법 추가되었다. 그래도 프로토타입 기반으로 동작함

프로미스 (Promise)

콜백 대신 프로미스 기반으로 재구성 >> 콜백 지옥 현상 극복

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

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

then, catch에서 다시 다른 then, catch를 부를 수 있다.

function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: '.' });
    })
    .then((user) => {
    })
    .catch(err => {
      console.error(err);
    });
}

new promise를 return 해야 다음 then에서 받을 수 있다.

에러도 catch로 한번에 처리 가능

promise를 사용하려면 메서드가 promise 방식을 지원해야함

Promise.all([promise1, promise2])
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

위 처럼 여러번 중첩한 promise 가능

async/await

비동기 프로그래밍에 유용

promise를 사용한 코드를 더 깔끔하게 줄여준다.

async function findAndSaveUser(Users) {
  try {
    let user = await Users.findOne({});
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({ gender: '.' });
  } catch (error) {
    console.error(error);
  }
}

async는 함수에, await는 promise 앞에 붙여준다.

try~catch 문으로 promise가 reject 될 경우 에러처리 하는 부분을 넣어줘야 한다.

(async () => {
  for await (promise of [promise1, promise2]) {
    console.log(promise);
  }
})();

for await of 를 이용해서 promise 배열 순회 가능

저작자표시