magazine off

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

投稿日 : 2021年4月6日(火曜日)

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

 

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

 

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

 

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

 

レスト構文

 

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

 

 

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

 

はじめにどちらも同じ演算子「...」を利用する為混乱するかもしれないので初めに簡単に違いを説明すると。スプレッド構文レスト構文展開集約だと個人的には考えていますです。 これを踏まえた上...
【JavaScript】「スプレッド構文」と「レスト構文」について - Qiita - Qiita

 

でも実は、関数に複数を沢山突っ込んでも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、最初の引数が得られる
}

 

残余引数構文により、不定数の引数を配列として表すことができます。
残余引数 - JavaScript | MDN - developer.mozilla.org

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

 

スプレッド構文

 

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

 

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

 

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']

 

こんにちは。また転職しますので、以前仕事で使っていたアカウントから切り離して新しいアカウントからこれを書いています。(なので現在フォロワー0からの再出発!)この記事は10日ほど前に私が Dev.to で投稿したものと同じ内容な...
今すぐ使いたいスプレッド構文、"Three-dots" Tip 集 - Qiita - Qiita

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

 

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

 

まとめ

 

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

 

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

 

 

Categories

Recent Posts

The 9 best live show twitter feeds to follow

 20 ways country song ringtones are compl…

投稿日 : 2015年12月19日(土曜日)

Javascriptで画面サイズを取得する

  画面サイズを取得する関数 //画面サイズを取得する functi…

投稿日 : 2017年5月7日(日曜日)

JINSが自分の顔の形に似合うメガネを教えてくれるAIを開発したらしいので紹介

   JINSというメガネ屋さんは日本では結構有名ですよね。 &nb…

投稿日 : 2021年9月26日(日曜日)

Railsのコンソール上でdbの値を更新する

  irb(main):029:0> User.where(:email …

投稿日 : 2018年12月20日(木曜日)