【JavaScript】ドットが三つのやつって何？

2020年9月23日 2022年6月15日

どーも！

たかぽんです！

今回はJavaScriptでよく見かけるドットが三つ続いて書かれているもの...について解説をしていきます！

初見だと意味不明ですが、そんなに難しくはないので、是非しっかりと理解しておきましょう！

ドットが三つのやつって何？

さて、まず、ドットが三つ続くものを、スプレッド構文と言います。

JavaScriptの公式ページでは以下のように紹介されていますね。

スプレッド構文について

すごい端的に言うと、配列とか、オブジェクトを展開して扱えます！

言葉じゃ伝わらないので、簡単に例を...!

const array1 = ['a', 'b', 'c', 'd']

function display(a,b,c,d){
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
}

console.log('--- displayメソッドにそのまま配列を渡す')
display(array1);

console.log('--- displayメソッドに...展開した値を渡す')
display(...array1);

上記のように、配列にa,b,c,dという文字をそれぞれ入れて用意します。

そして、引数に4つの値を取り、それを表示するだけのメソッドを定義し、メソッドに対してその配列を渡してみます。

すると、出力は以下のようになります。

--- displayメソッドにそのまま配列を渡す
[ 'a', 'b', 'c', 'd' ]
undefined
undefined
undefined
--- displayメソッドに...展開した値を渡す
a
b
c
d

まず、前半部分の解説ですが、"array1"に入れている物は配列一つです。

それを渡すわけなので、もちろん、第一引数としてdisplayメソッドのaにその配列が渡されます。

しかし、第二引数以降はなにも渡されないため、undefinedとなっているのがわかります。（jsでは引数の数があっていなくてもエラーは出ず、undefinedと定義されます)

では、この配列の値をいい感じに引数に渡したい！と言うケースがあった場合...

この時に"ドットが三つ"のスプレッド構文で記述することができるんです！

結果をみていただければわかると思いますが...

"...array1"として引数に渡してあげると、いい感じに配列の中身を展開して渡すことができます。

つまり、配列の第一要素を第一引数に、第二要素を第二引数に....といった具合に渡すことができるんですね。

これは、配列の中身を展開して、その値を引数として渡しているんですが、例えば展開したものをまた別の配列として定義してあげると...

console.log('--- 配列の中でarray1を展開')
console.log([...array1]);

console.log('--- array1を展開したもの')
console.log(...array1);

// 出力
--- 配列の中でarray1を展開
[ 'a', 'b', 'c', 'd' ]
--- array1を展開したもの
a b c d

上記のように配列の"[]"中でarray1を展開させると、array1と全く同じ配列になります。

面白いですね。

さらに、展開した中身だけみようとすると、配列の要素がスペース区切りで入っていました...!

ただし...展開したものをそのまま変数等に入れたり...なんてことはできなさそうでした。

const hoge = ...array1; // error

また、公式にあるとおり、オブジェクトでも展開することができます。

ただし、オブジェクトでは直接展開したものをlog出しはできませんでした...

const obj1={ a: 1, b: 2, c: 3 };

console.log('--- オブジェクトをオブジェクトの中で展開して中身を表示')
const obj2 = { ...obj1 };
console.log(obj2);

// 以下はエラーが出ます。
// console.log('--- obj1を展開')
// console.log(...obj1);

// 出力
--- オブジェクトをオブジェクトの中で展開して中身を表示
{ a: 1, b: 2, c: 3 }

obj1の中身を展開してそれを新しいオブジェクト"{}"の中身に指定してあげると、全く同じオブジェクトができますね。

つまりオブジェクトのコピーができたり...

あとは、object1の中身と他の要素を付け足して、新しいobjectを作ったり...

console.log('--- obj1の中身と新しいキーで新しいobj3を作成')
const obj3 = { ...obj1, hoge:100 };
console.log(obj3);

// 出力
--- obj1の中身と新しいキーで新しいobj3を作成
{ a: 1, b: 2, c: 3, hoge: 100 }

することもできます。

上記の操作は配列でも可能です。

このように、配列やオブジェクトの結合や、一部も付け加えて新しい配列を作りたい！といった場合や、引数がたくさんあるメソッドに対して、配列のそれぞれの要素の値を渡す際...などに使えそうです。

最後に、上記のプログラムは一通り以下に書いてあるので、実際に試して触ってみてください。

Javascript スプレッド構文を触ってみる！