分割代入とは
分割代入とは、配列とオブジェクトの要素に対して、変数として追えるようにしたものです。
オブジェクトによく使われるので、そちらの方をメインに書いていきます。
例えば、以下のようなオブジェクトがあるとします。
const person = {
artistName: "Heachan",
age: 24,
officeName: "SM Entertainment",
realName: {
firstName: "Lee",
lastName: "Donghyuck",
},//オブジェクトの中にオブジェクトを配置
sayHi: (words) => {
console.log(words);
},//オブジェクトの中に関数を配置
};
軽く解説しておくと(超基本ですが)、オブジェクトは{ }の中にkey:value(鍵:それを結ぶ値)があり、この中では値、数値、オブジェクト、関数を配置しています。
ちなみにこの方は私が推している韓国アイドルです。sayHi()はいくら払えばしてくれるのでしょうかね。
これの要素を指定したい時、
console.log(person.age)//->24
console.log(person.realName.firstName)//->"Lee"
console.log(person.sayHi("Shima~~!!"));//"Shima~~!!"
このように指定するのですが、2個目のようにネストされているものは分かりずらいですよね。
そこで、valueをオブジェクトの外からでもアクセスできるようにしたのが分割代入です
const { age, artistName } = person;
左にアクセスしたいkey=age,artistNameを指定し、右に元のオブジェクト=personを指定すると、
console.log(age);//->24
console.log(artistName);//->Heachan
なんと！personと書かずにアクセスできるようになりました〜
同様に、ネストされたオブジェクトと関数も、
const {
realName: { firstName },//ネストされているものはkeyに注意
sayHi,
} = person;
console.log(firstName);//->Lee
console.log(sayHi("Shima~~!!"));//->"Shima~~!!"
簡単にアクセスすることができるようになりました。
あれ？ ageとか他のものと名前被らない...?
そう思った方も多いはず。そこで、keyの名前を別のものに変えることができます。（参照を渡しているだけです）
const { age: hisAge, artistName: hisName } = person;
console.log(hisAge); //->24
console.log(hisName); //->Heachan
console.log(age); //->error
//別名にしたら別名で呼び出す必要がある。
このように、key:別の名前にしています。ただ、注意点として、呼び出したいときは元の名前にならないように注意しましょう。
また、以下のようにネストされたオブジェクトと間違えないように気をつけましょう。
const {
realName: { firstName: hisFirstName },
//一つ目の:はオブジェクトにたいするkey,二つ目は別名を指定
sayHi: IWantHisVoice,
} = person;
console.log(hisFirstName);
console.log(IWantHisVoice("Shima~~!!"));
関数と組み合わせて使用する
アロー関数と組み合わせても使えます。関数名はfuncObjとしました。
const funcObj = () => { }
アロー関数の引数の部分に利用したいkeyと使用する時に使う別名を入れていきます。
const funcObj = ({
age: hisAge,
artistName: hisName,
realName: { firstName: hisFirstName },
}) => { }
上でやったことですね。そこから、関数で実行したいことを入れていきます。
const funcObj = ({
age: hisAge,
artistName: hisName,
realName: { firstName: hisFirstName },
}) => {
console.log(hisAge);
console.log(hisName);
console.log(hisFirstName);
};
あとは、関数を呼び出したいときにどのオブジェクトに対して分割代入するかを入れるだけです。
funcObj(person)
//->24
//->Heachan
//->Lee
オブジェクトの中身があるとややこしいので簡潔に書くとこんな感じです。
const funcObj = ({ 利用したいオブジェクトのkey
}) => {実行したい内容};
funcObj(実行する元のオブジェクト)
restパラメータの利用
オブジェクトの中身全部入れたいけど書くの面倒だな...て思った時、ありますよね。
そんな時役立つのがrestパラメータとスプレッド構文です。
restパラメータは、関数の引数を無限に指定できます。
例えば(1,2,3,4)があり、その総和を求めるとき、
function SUM(...args) {//引数を無限に取る
let total = 0;
for (arg of args) {//無限の引数一つ一つに対して操作
total += arg;
}
return total;
}
console.log(SUM(1,2,3,4));//->10
とすることで引数を無限に取れます
また、引数を事前に指定しておくと、残りのものをとってくれます。
function SUM(a ,b ,...args) {//引数を無限に取る
let total = 0;
for (arg of args) {//無限の引数一つ一つに対して操作
total += arg; //ここでは3+4
}
total += a + b; //ここで7+1+2
return total;
}
console.log(SUM(1,2,3,4));//->10
配列の要素を全て出してくれるものはスプレッド構文と呼ばれます。
const array1 = [1, 2, 3, 4];
console.log(...array1);//1 2 3 4
これを利用していきます。以下のコードの時、オブジェクトにはofficeNameとsayHiが残っていました。
const funcObj = ({
age: hisAge,
artistName: hisName,
realName: { firstName: hisFirstName },
}) => {
console.log(hisAge); //->24
console.log(hisName); //->Heachan
console.log(hisFirstName); //->Lee
};
そこで、この中のkeyの指定に...etcを入れ、出力してみると...
const funcObj = ({
age: hisAge,
artistName: hisName,
realName: { firstName: hisFirstName },
...etc
}) => {
console.log(etc);
};
funcObj(person)
//->officeName: "SM Entertainment", sayHi: function}
となり、残りのオブジェクトが出てきました。使いたい時は
console.log(etc.officeName);//->SM Entertainment
とでもしてください。
Shima~~!!なんて妄想を考えていた自分が馬鹿らしいです。
ご覧いただきありがとうございました。