覚えとくと便利な分割代入

TypeScript 2022年7月21日

はじめに

この記事では関数の引数でオブジェクトを受け取った際の便利な手法である、分割代入について説明します。

分割代入とは

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

MDNからの引用です

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

実際に分割代入を用いたコードを書いてみます。

async function createUser(props: {name: string, age: number, description: string}) {
	const {name, age, description} = {...props}
    hoge(name, age, description)
}

// 呼び出し
await createUser({name: "yupix", age: 100, description: "Hello World"})

// 呼び出し方法その2
const name = "yupix"
const age = 100
const description = "HelloWorld"

await createUser({name, age, description})

仮に分割代入を使わなかった場合の例も書いてみます

async function createUser(props: {name: string, age: number, description: string}) {
	hoge(props.name, props.age, props.description)
}

// 呼び出し
await createUser({name: "yupix", age: 100, description: "Hello World"})

// 呼び出し方法その2
const name = "yupix"
const age = 100
const description = "HelloWorld"

await createUser({name, age, description})

このようにprops. を先頭につける必要があり、手間が掛かります。

最後に

分割代入はとても便利なので是非とも使っていきたいものです。それではまた!

タグ

yupix

yupix(ゆぴ)と申します。趣味でプログラミングをたしなんでいます。Pythonが一番好きで何の役にも立たないものとかを作ったりしてます。