JavaScript

JSのスリードット(...) スプレッド構文とレスト構文の違いを分かりやすく解説!

Reactで開発をしていて。三つのドット(英語ではスリードット)が書かれてるコードがあって、

 

よく分からなかったので調べてみることにした。

 

どうやらスリードット(...)記述法には、

 

スプレッド構文とレスト構文という同じ演算子を使うやり方があるらしいということが分かった。

 

レスト構文

 

レスト構文というのは、関数の引数に複数の値がランダムな数入ってくるのを配列で受け取れる機能があるらしくて、複数の値をまとめるという意味合いで使われるらしい。

 

 

function outputArgs(...args) {
  for(const a of args){
    console.log(a);
  }
}
outputArgs('a', 'b', 'c', 'd');
// 出力 a  b  c  d

 

 

でも実は、関数に複数を沢山突っ込んでもJavaScriptでは受け取れる方法があります。

 

それは、argumentという機能を使うと実現できるんだけれども、

 

var f = function(){
    for(var i = 0; i < arguments.length; ++i){ // 関数実行時に引数として渡されたものは『arguments』で参照できます。
        console.log(arguments[i]);
    }
};
 
// 引数に渡したもの全てをそれぞれ出力します。
f(0);
f(0, 1);
f(0, 1, 2);
f(0, 1, 2, 3);

 

こういう風にすると、arguments[0] とかで引数の一番最初の値を取れます。

 

でも、これだと結構、不便なのです。

 

なぜなら、argumentsは配列ではないので、Arrayの機能が使えないので、従来はArrayに直さなければなりませんでした。

 

 

// 残余引数の登場以前は、"arguments" を普通の配列に変換するには以下のようにしていました。

function f(a, b) {

  let normalArray = Array.prototype.slice.call(arguments)
  // -- or --
  let normalArray = [].slice.call(arguments)
  // -- or --
  let normalArray = Array.from(arguments)

  let first = normalArray.shift()  // OK、最初の引数が得られる
  let first = arguments.shift()    // エラー (arguments は通常の配列ではない)
}

// 残余引数を使ってふつうの配列へのアクセスが得られるようになりました

function f(...args) {
  let normalArray = args
  let first = normalArray.shift() // OK、最初の引数が得られる
}

 

これを、レスト構文では簡単に解決できるようになったんですね。

 

スプレッド構文

 

スプレッド構文とは、スリードット演算子を同じように使いますが、レスト構文とは全然逆でして、

 

レスト構文が複数の値を配列にまとめるのに対して、スプレッド構文は配列の中身を展開します。

 

const arr1 = ['solid', 'bicolor', 'tabby'];
const arr2 = ['calico', 'tortoiseshell'];

//スプレッド構文以前
var conCats = arr1.concat(arr2);
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

//スプレッド構文を使う
const conCats = [...arr1, ...arr2]; 
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

 

このように二つの配列の中身が展開されました、展開されて一つの配列 [] に入りました。

 

これは分かりやすいスプレッド構文の例ですね。

 

まとめ

 

以上が、スプレッド構文と、レスト構文の違いです。

 

簡単に認識を分けておくと、スプレッド構文は配列の中身を展開する、レスト構文は複数の値を配列にまとめるという風に覚えるといいです。

 

 

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-JavaScript

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.