본문으로 건너뛰기

"ES2018" 태그로 연결된 2개 게시물개의 게시물이 있습니다.

모든 태그 보기

`Promise.prototype.finally`

· 약 2분
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Promise.prototype.finally는 프로미스가 _정산_될 때(즉, 완료 또는 거부됨)에 호출될 콜백을 등록할 수 있도록 합니다.

페이지에 표시할 데이터를 가져오고 싶다고 상상해보세요. 그리고 요청이 시작될 때 로딩 스피너를 표시하고 요청이 완료되면 숨기고 싶습니다. 문제가 발생하면 대신 오류 메시지를 표시합니다.

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text;
      hideLoadingSpinner();
    })
    .catch((error) => {
      element.textContent = error.message;
      hideLoadingSpinner();
    });
};

객체 나머지 및 펼침 속성

· 약 2분
Mathias Bynens ([@mathias](https://twitter.com/mathias))

_객체 나머지 및 펼침 속성_을 논의하기 전에, 기억을 되살리고 매우 유사한 기능을 상기해봅시다.

ES2015 배열 나머지 및 펼침 요소​

익숙한 ECMAScript 2015는 배열 구조 분해 할당을 위한 _나머지 요소_와 배열 리터럴을 위한 _펼침 요소_를 도입했습니다.

// 배열 구조 분해 할당을 위한 나머지 요소:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// 배열 리터럴을 위한 펼침 요소:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: 객체 나머지 및 펼침 속성 🆕​

그렇다면 새로워진 점은 무엇일까요? 제안서에 따르면 객체 리터럴을 위한 나머지 및 펼침 속성도 사용할 수 있습니다.

// 객체 구조 분해 할당을 위한 나머지 속성:
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }