メインコンテンツまでスキップ

「ES2018」タグの記事が2件件あります

全てのタグを見る

`Promise.prototype.finally`

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

Promise.prototype.finally を使用すると、Promise が 完了（成功または失敗が確定）した際に呼び出されるコールバックを登録できます。

ページに表示するデータを取得したいと想像してください。そして、リクエストが開始された際にローディングスピナーを表示し、リクエストが完了した際にスピナーを非表示にします。問題が発生した場合には、代わりにエラーメッセージを表示します。

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

オブジェクトの残余プロパティとスプレッドプロパティ

· 約3分
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' }