16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】「分割代入」について

Last updated at Posted at 2019-09-06

最近paizaで問題を解いていて下のようなコードをずっと書いていました。


const line = '1 2 3';
let a = line.split(' ')[0];
let b = line.split(' ')[1];
let c = line.split(' ')[2];

このコード分割代入を使用するとかなりすっきりします。


const line = '1 2 3';
let [a, b, c] = line.split(' ');

分割代入とは

MDN web docs

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

配列の分割代入

配列の分割代入は冒頭の分割代入と同じで
左辺に配列リテラルのような変数宣言を書き、右辺に配列を書きます。


const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a, b, c);
// 出力 1 2 3

配列数が足りない場合はundefinedとなります。


const arr = [1, 2];
const [a, b, c] = arr;

console.log(a, b, c);
// 出力 1 2 undefined

オブジェクトの分割代入

配列の分割代入と同じで
左辺にオブジェクトリテラルのような変数宣言を書き、右辺にオブジェクトを書きます。


const languages = {
  ja: '日本語',
  en: '英語'
};
const { ja, en } = languages;

console.log(ja, en);
// 出力 日本語 英語

レスト構文と分割代入

レスト構文と組み合わせることによって残りの値を集約することが出来ます。
日本では残余代入と言うようです。

レスト構文に関してはこちら。
【JavaScript】「スプレッド構文」と「レスト構文」について


const arr = [1, 2, 3, 4, 5];
const [a, b, ...c] = arr;

console.log(a, b, c);
// 出力 1 2 [3, 4, 5]
16
14
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
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?