2021年10月18日 JavaScript (JavaScript Primer) 関数の引数と分割代入

分割代入とは

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

プロパティに直接値を代入して、キーと値のように紐づけることが出来るようになります。なぜ、分割代入をするのかというと、直接プロパティにアクセスすることができ簡潔に記述が出来るようになるためです。例えば、user.idとしなくてもidとするだけでuserオブジェクトのuser_idプロパティの値などにアクセス出来るようになるのです。

// 第1引数のオブジェクトから`id`プロパティを変数`id`として定義する。
function printUserId({ id }) {   // オブジェクトリテラルでidを指定することで分割代入を行うことが出来ます。
    console.log(id); // => 42
}
const user = {
    id: 42
};
printUserId(user);

オブジェクトの分割代入を行うメリットは何でしょうか？.
たくさんのデータを引数として渡したい時があります。その時に特定の受け取って良い値を仮引数に分割代入を使って、指定することが出来ます。そのように指定することで、受け取りたくない値を防ぐことができるかつ、受け取りたい値のみを受け取ることが出来ます。

関数の引数に分割代入を使う

関数の引数に分割代入を使うと、コードを簡略化することができます。

配列の場合

関数の仮引数を[]で囲むことによって、実引数に配列を指定すると分割代入ができます。

function print([first, second, ...other]) {
  console.log(first); // => 1
  console.log(second); // => 2
  console.log(...other); // => 3, 4, 5, 6, 7
}
const array = [1, 2, 3, 4, 5, 6, 7];
print(array);

配列の分割代入とRest Parametersの使用例
上記の例では、仮引数として配列を指定しています。「...other」では、Rest parametersを使って、複数の値を実引数として受け取ることが出来ます。実際に値が渡るのは、関数の呼び出し時にprint(array)と値を指定している時です。

オブジェクトの場合

関数の仮引数を{}で囲むことによって、実引数にオブジェクトを指定すると分割代入ができます。

function printUserId({ id }) {
  console.log({id}) // => { id: 42 }
  console.log(id); // => 42
}

const user = {
    id: 42,
    name: "yano",
    age:　25,
    mentalAge: 10,
    status: 'free',
};
const other_user = {
    id: 99,
    name: "mayo",
    age:　15,
    mentalAge:　5,
    status: 'free',
};

// 関数の呼び出し
// 関数の呼び出し時に分割代入が行われる。
printUserId(user);  
printUserId(other_user);

上記の例では、printUserId関数の仮引数を{id}として定義しています。この時点では、分割代入は行われていませんが、実際に関数の呼び出し時に分割代入で{id}に入れたい値を実引数として渡して代入しています。今回は、userオブジェクト{ id: 42, name:"yano",age:25,mentalAge:10,status:free }を代入しており、{id} = { id: 42 }が関数の呼び出し時に行われていることになります。分割代入を行うときに、オブジェクトのどのプロパティを代入するかは、代入したいプロパティ名を変数名として{id}のように指定していきますが、今回はuserオブジェクト全体を代入しています。取り出すときに、(id)と指定のプロパティを指定しているので、idプロパティに対応する値42が出力されます。

仮引数として、{id}を指定している時に分割代入が行われないことによって、さまざまな値を呼び出し時に代入することができます。固定された値のみでとどまらないところがメリットです。

オブジェクトの分割代入

今一度、復習としてオブジェクトの分割代入の例を以下に示します。

// 分割代入
const user = {
  id: 42,
  name: "yano"
};

const { id, name } = user;
console.log({ id, name });  // => { id: 42, name: 'yano' }
console.log({id, name}["id"]) // => 42
console.log({id, name}["name"]) // => yano
console.log(id); // => 42
console.log(name); // => yano
console.log(id, name); // => 42, yano