前のページへ
JavaScript
次のページへ
node.js


分割代入 (Destructuring assignment)

初回公開:2018/09/23
最終更新:未

【 目次 】

分割代入とは

node.jsのModulesを調べていてJavaScriptの見慣れない構文に出くわした。

const { PI } = Math;

これは

const PI = Math.PI;

を意味しているらしい。

ES2015(ES6)の構文で分割代入 (Destructuring assignment)と呼ばれているようだ。 Destructuring assignmentを直訳すると非構造化割り当て。

サンプルコード

サンプルコードのみを以下に示す。

配列

簡単な例

var [a,b]=[1,2];

console.log("a=",a); // a=1
console.log("b=",b); // b=2

複雑な例

var [, a, , b, ...rest] = [1, 2, 3, 4, 5, 6, 7];

console.log("a=", a); // 2
console.log("b=", b); // 4
console.log("rest=", JSON.stringify(rest)); // [5,6,7]

変数のスワップ

var a = 1, b = 3;
[a, b] = [b, a]

console.log("a=", a); // a= 3
console.log("b=", b); // b= 1

変数のスワップ(3変数の入れ替え)

var a = 1, b = 3, c = 5;
[a, b, c] = [b, c, a]

console.log("a=", a); // a= 3
console.log("b=", b); // b= 5
console.log("c=", c); // c= 1

デフォルト値の設定

var [a = "default_a", b = "default_b", c = "default_c"] = [1, , 3];

console.log("a=", a); // a= 1
console.log("b=", b); // b= default_b
console.log("c=", c); // c= 3

連想配列(オブジェクト)

簡単な例

const { PI } = Math;
console.log(PI); // 3.141592653589793

異なる名前を持つ変数への代入

const { PI: pai } = Math;

console.log("pai=", pai); // pai= 3.141592653589793

()が必要な例

var a,b;
({ a, b } = { a: 10, b: 20 });

console.log("a=", a); // a= 10
console.log("b=", b); // b= 20

{a, b} はブロックと解釈されてしまうため2行目の()が無いとエラーになる。

以下のコードなら()が無くてもエラーは発生しない。

var { a, b } = { a: 10, b: 20 };

複雑な例

var { b: x, e: y, ...rest } = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 };

console.log("x=", x); // x= 2
console.log("y=", y); // y= 5
console.log("rest=", JSON.stringify(rest)); // rest= {"a":1,"c":3,"d":4,"f":6,"g":7}

デフォルト値の設定 連想配列版

var { a = "default_a", b = "default_b" } = { b: 3 };

console.log("a=", a); // a= default_a
console.log("b=", b); // b= 3

デフォルト値の設定 連想配列版(異なる名前の変数に代入)

var { a: x = "default_a", b: y = "default_b" } = { b: 3 };

console.log("x=", x); // a= default_a
console.log("y=", y); // b= 3

応用

ネスト

配列に連想配列をネスト
[a, { key1: x, key2: y }] = [123, { key1: "value1", key2: "value2" }];

console.log("a=", a); // a= 123
console.log("x=", x); // x= value1
console.log("y=", y); // y= value2
連想配列に配列をネスト
({ key1: x, key2: [, y] } = { key1: "value1", key2: [2, 3] });

console.log("x=", x); // x= value1
console.log("y=", y); // y= 3

別モジュールより値を取得

var [b, a] = require('./sub_module');

console.log("a=", a); // a= 20
console.log("b=", b); // b= 10

サブモジュール sub_module.js

module.exports = [10, 20];

別モジュールより値を取得(連想配列版)

メインモジュール

var { b, a } = require('./sub_module');

console.log("a=", a); // a= 10
console.log("b=", b); // b= 20

サブモジュール sub_module.js

module.exports.a = 10;
module.exports.b = 20;

関数の引数に分割代入構文を指定

function func1([x = 2, y]) {
    return x + y;
}
console.log(func1([, 20])); // 22

function func2({ a: x = "default_a", b: y = "default_b" }) {
    return x + y;
}
console.log(func2({ b: 3 })); // default_a3
ページのトップへ戻る