1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScriptでよく見る「... 変数」とは

Posted at

JavaScript(およびTypeScript)で↓のようなコードを見ることが多いと思います。

const user = { id: 1, name: 'Taro', age: 25, genfer: 'male' };
const _user = { ...user }; // ←この「...」の部分

この文法を知っていないと見ただけでは分からないと思うので、まとめていきます。

結論、2つのパターンがあります。

パターン1. スプレッド構文

オブジェクトや配列を展開するために使います。多くの場合、オブジェクトや配列の参照元から切り離し、コピーを作成する目的で使われます。オブジェクト、配列の参照がコピーされる挙動について詳しく説明しだすと長くなるのでここでは割愛しますが、簡単に言うと以下のようなことが起こってしまいます。

const user = { id: 1, name: 'Taro', age: 25, genfer: 'male' };
const person = user; // userオブジェクトの参照ごとperson変数に入れてしまっている
user.name = 'Jiro'; // ここでuserオブジェクトのnameを変更
console.log(person); // 元となるオブジェクトの変更が適応され、「name : 'Jiro'」と出てしまう

ここで使用するのがスプレッド構文です。「... オブジェクト」と表記することで、そのオブジェクトを展開し、参照元から切り離して別のオブジェクトとしてコピーできます

const user = { id: 1, name: 'Taro', age: 25, genfer: 'male' };
const person = { ...user }; // userオブジェクトを展開し、オブジェクトのコピーを作り、personに代入
user.name = 'Jiro'; // ここでuserオブジェクトのnameを変更
console.log(person); // 元のオブジェクトからは独立しているので「name : 'Taro'」と出る

※ ↓ちなみに、配列でも同様の挙動を取ります。

const numbers = [1, 2, 3, 4, 5];
const a = numbers;
const b = [...numbers];
numbers[0] = 100;
console.log(a); // [100, 2, 3, 4, 5] ← 0番目が100になっている
console.log(b); // [1, 2, 3, 4, 5]

パターン2. レスト構文

こちらはスプレッド構文とは少し異なり、値を凝縮するイメージです。
分割代入の際、任意のプロパティのキー名を抽出した後、残り全部を一気に代入することができます。

const user = { id: 1, name: 'Taro', age: 30, gender: 'male' };
const { id, ...rest } = user; // ここで「...rest」という形でid以外のすべてをオブジェクトで取得している
console.log(id); // 1 ←「id」だけが取り出されている
console.log(rest); // {name: 'Taro', age: 30, gender: 'male'} ← id以外の残り(= rest)が取得されている

あまり意味はないですが、↓のようにするとすべて取得されます。

const user = { id: 1, name: 'Taro', age: 30, gender: 'male' };
const { ...person } = user;
console.log(person); // { id: 1, name: 'Taro', age: 30, gender: 'male' }

また、↓すべてプロパティを抽出し切ってから残りを取得しようとすると空オブジェクトが取得されます。

const user = { id: 1, name: 'Taro', age: 30, gender: 'male' };
const { id, name, age, gender, ...person } = user;
console.log(person); // {}

※なお、↓配列でも同様の挙動となります。

const letters = ['', '', '', '', '', '', '', '', '', ''];
const [a, b, c, ...rest] = letters;
console.log(a); // あ
console.log(b); // い
console.log(c); // う
console.log(rest); // ["え", "お", "か", "き", "く", "け", "こ"]

以上、...の意味でした。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?