Javascript ES6: スプレッド構文（演算子）とレスト構文（パラメータ）の使い方まとめ：Spread Operator & Rest Operator

Javascript ES6のスプレッド構文（演算子）（Spread Operator)と、レスト構文（Rest Operator)の使い方についてまとめました。

Javascriptのスプレッド構文（演算子）Spread Operatorの使い方

定義：配列やオブジェクトの値（value)とプロパティをコピーするのがスプレッド構文です。配列とオブジェクトは参照型（reference types)のためスプレッド構文が役に立つ場面が多いです。

配列をスプレッド構文（演算子）（Spread Operator)で取り出す方法

Udemy講座にあった例文を少しアレンジして、スプレッド構文を使用した場合とスプレッド構文を使用しなかった場合、配列を取り出そうとするとconsoleでの結果がどのように違うのか試してみました。

const numbersA = [1, 2, 3];
const newNumbersA = [...numbersA, 4];

console.log(newNumbersA);

const numbersB = [1, 2, 3];
const newNumbersB = [numbersB, 4];

console.log(newNumbersB);

スプレッド構文を使用したnewNumberAをコンソールで見ると[1,2,3,4]という結果になります。配列numbersAの値がそのまま綺麗にコピーされて、その値の最後に4を加えた新しい配列newNumbersAが一つ新しく出来上がっています。

★スプレッド構文を使うと、新しい配列の中に、元々の配列の値と追加した値が綺麗に収まります。

スプレッド構文を使用しないnewNumberBをコンソールで見ると[[1,2,3],4]という結果になります。newNumbersBの中にnumbersBの配列ごと入ってしまっている状態です。

オブジェクトをスプレッド構文（演算子）（Spread Operator)で取り出す方法

const person = {
  name: 'Max'
};

const newPerson = {
  ...person,
    age: 28
};

console.log(newPerson);

オブジェクトpersonの中身を全てコピーしてきた...personを含むnewPersonをconsoleで書き出すと、

[object Object] {
  age: 28,
  name: "Max"
}

となります。

参照⇒mozilla.orgスプレッド構文

レスト構文（パラメータ）（Rest Operator）の使い方（引数として使う）

レスト構文は、functionの引数のリストを配列にマージするために使います。

const filter = (...args) => {
  return args.filter(el => el ===1);
}

console.log(filter(1,2,3))

エレメント=1のみ(el ===1)取り出すfilter()を使用しているので、consoleでの結果は[1]となります。

引数が一つなので、アロー関数の省略した書き方（{return}を省略する）でも同じ結果が出るか試してみました。

const filter = (...args) =>  args.filter(el => el ===1);


console.log(filter(1,2,3))

consoleでの結果は同様に[1]です。

現在学習中の教材：Udemy: React -The Complete Guide(incl Hooks, React Router, Redux) by maximilian Schwarzmuller

Section2: Refreshing Next Generation Javascript (Optional)

16~23 Javascriptの復習（ES6, ES7, 知っておくべきこと）

Section3: Understanding the Base Features & Syntax

24~25: Module Introduction ~ The Build Workflow

★このブログの内容はSec2.Lec17 The Spread & Rest Operatorについてです。

【私も学習中のUdemy講座の公式HPはこちら⇒】世界最大級のオンライン学習サイトUdemy