【JavaScript】分割代入の使い方について基礎を分かりやすく解説します

この記事では、JavaScriptの分割代入の基本的な使い方をわかりやすく解説します。

JavaScriptの分割代入は、オブジェクトや配列から値を取り出して、それを変数に代入するために使用します。

分割代入を使用することで、より簡潔で可読性の高いコードを書くことができます。

分割代入の使い方

ここからは分割代入の使い方を用途に分けて解説します。

オブジェクトの分割代入

分割代入を使ってオブジェクトのプロパティを取得する例を挙げます。

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

// 分割代入を使ってpersonオブジェクトからnameとageを取り出す
const { name, age } = person;

console.log(name); // 'John'
console.log(age); // 30

この例では、constキーワードを使って、personオブジェクトからnameとageを取り出して、それぞれnameとageという名前の変数に代入しています。

このように、{ }で変数名を囲んで、オブジェクトのプロパティ名と同じ名前の変数を作成することができます。

配列の分割代入

オブジェクトではなく配列から値を取り出す場合は、以下のように記述します。

const numbers = [1, 2, 3, 4, 5];

// 分割代入を使って配列から最初の2つの要素を取り出す
const [first, second] = numbers;

console.log(first); // 1
console.log(second); // 2

constキーワードを使って、numbers配列から最初の2つの要素を取り出して、それぞれfirstとsecondという名前の変数に代入しています。

このように、[ ]で変数名を囲んで、配列のインデックスに対応した変数を作成することができます。

オブジェクトのネストした値を取り出す分割代入

オブジェクトや配列のネストした値も分割代入で取り出すこともできます。

以下は、オブジェクトのネストした値を取り出すコードです。

const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};

// 分割代入を使ってpersonオブジェクトからcityとcountryを取り出す
const { address: { city, country } } = person;

console.log(city); // 'Tokyo'
console.log(country); // 'Japan'

constキーワードを使って、personオブジェクトのaddressプロパティからcityとcountryを取り出して、それぞれcityとcountryという名前の変数に代入しています。

このように、{ }の中にネストしたオブジェクトのプロパティ名を書くことで、ネストしたオブジェクトの値を取り出すことができます。

配列のネストした値を取り出す分割代入

オブジェクト同様に配列でもネスト値を取り出すことができます。

const numbers = [1, 2, [3, 4], 5];

// 分割代入を使ってnumbers配列からネストした値を取り出す
const [first, second, [third, fourth], fifth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4
console.log(fifth); // 5

この例では、constキーワードを使って、numbers配列からネストした値を取り出して、それぞれfirst、second、third、fourth、fifthという名前の変数に代入しています。

[ ]の中に記述することで、ネストした配列のインデックスに対応した変数を作成することができます。

分割代入によるデフォルト値の代入

分割代入を使って、オブジェクトや配列から取り出した値をデフォルト値を指定して変数に代入することができます。

// デフォルト値を指定したオブジェクトの分割代入
const { name = 'Anonymous', age = 0 } = {};

console.log(name); // 'Anonymous'
console.log(age); // 0

// デフォルト値を指定した配列の分割代入
const [first = 0, second = 0, third = 0] = [1, 2];

console.log(first); // 1
console.log(second); // 2
console.log(third); // 0

上の例では、オブジェクトと配列からそれぞれ値を取り出して、デフォルト値を指定しています。

オブジェクトの場合は、nameとageに対してそれぞれ'Anonymous'と0というデフォルト値を指定しています。

空のオブジェクトを渡しているため、デフォルト値が返ってきます。

配列の場合は、firstとsecondには値があるので、その値が返されます。

一方で、thirdには値がないので、0というデフォルト値が指定されます。

分割代入を関数で使用する

分割代入は、関数の引数で使うこともできます。

function printProfile({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const profile = {
  name: 'Taro',
  age: 20,
  gender: 'male'
};

printProfile(profile); // Name: Taro, Age: 20

上の例では、printProfile関数の引数にprofileオブジェクトを渡しています。

関数の中で分割代入を使って、profileオブジェクトからnameとageを取り出しています。

このように、関数の引数にオブジェクトを渡すときに、分割代入を使うことで、引数から必要な値を簡単に取り出すことができます。

分割代入で取り出した値に別名をつける

分割代入では、取り出したオブジェクトや配列の要素に別名をつけることができます。

const person = {
  name: 'Taro',
  age: 20,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};

// オブジェクトのプロパティに別名をつける場合
const { name: fullName, age: yearsOld } = person;
console.log(fullName); // 'Taro'
console.log(yearsOld); // 20

// ネストしたオブジェクトのプロパティに別名をつける場合
const { address: { city: capital } } = person;
console.log(capital); // 'Tokyo'

上の例では、nameとageにそれぞれ別名をつけ、fullNameとyearsOldという変数に代入しています。

分割代入に名前を付ける場合は、コロン:を使って別名を指定します。

オブジェクトと配列の残り部分を全て格納する（スプレッド構文）

... を使用すると指定されなかった残り部分を全て格納することができます。

const person = {
   name: 'Taro',
   age: 20,
   gender: 'male'
}
  
const {age, ...rest} = person
  
console.log(age)     // 20
console.log(rest)  // {name: "Taro", gender: "male"}

上の例では、personというオブジェクトがあり、そのオブジェクトには、name、age、genderという3つのプロパティがあります。

age以外のプロパティは... （スプレッド構文）を使用することで、1つにまとめて格納することができます。

配列の場合も、オブジェクトと同様に分割代入とスプレッド構文を使用することができます。

まとめ

この記事では、JavaScriptの分割代入の基本的な使い方について解説しました。

分割代入はオブジェクトや配列から値を取り出して、簡単に変数に代入することができます。

1. デフォルト値の指定
2. 別名をつける
3. スプレッド構文の使用

こちらについても紹介しました。

JavaScriptを学び始めたばかりの方や、スキルを磨きたい方に向けて、当ブログではこちらのUdemy講座をおすすめしています。

Udemyでは、JavaScriptの基本から応用まで学ぶことができる講座が豊富に揃っています。

その中でもこちらの講座は非常に分かりやすく、おすすめしています。

よかったらぜひチェックしてみてください。

最後まで読んでいただきありがとうございました。