0歳の俺がモダンJavaScriptを勉強する②

13367 ワード
React スプレッド構文 JavaScript デフォルト値 分割代入 JavaScript テキストリンク

こんにちは！今日もモダンJavaScriptについて学んだことをアウトプットしていきたいと思います！
今日は分割代入、デフォルト値、スプレッド構文についてです。

分割代入

const myProfile = {
  name: 'ジョーダンヘンダーソン',
  age: 31,
 }

 const message = `私の名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`
 console.log(message);

着目すべきはテンプレート文字列の値を呼び出す部分。コレ今回はmyProfileから2つのプロパティを呼び出すだけで済みましたが、設定するプロパティが増え、取得する回数が増えたり、オブジェクト名が長い時とかいちいち記述するのめんどくさいですよね。

そこで分割代入です。

const myProfile = {
  name: 'ジョーダンヘンダーソン',
  age: 31,
 }

 const {name, age} = myProfile;

 const message = `私の名前は${name}です。年齢は${age}歳です。`
 console.log(message);

分割代入を利用することで指定のプロパティを抜き出して、自由に利用することが可能なので便利ですね。記述量も少ないので楽すね。
また、コレは配列でも利用可能です。


const moSarah = ["足が速い",28];
const [character, age] = moSarah;
const message = `彼の特徴は${character}ことです。年齢は${age}歳です。`
console.log(message);

デフォルト値

const sadioMane = (character) => console.log(`あなたは${character}ですね!`);
sadioMane();

これでコンソールを見ると、

と表示されます。では引数の部分を空にして、sadioMane()としたとしましょう。

const sadioMane = (character) => console.log(`あなたは${character}ですね!`);
sadioMane();

JavaScriptは何も値を設定していない場合はundefinedと出力されてしまいます！
こういう時はcharacterの中に初期値として設定したい値を入れることで問題を解決することができます！

const sadioMane = (character　= 'セネガル代表') => console.log(`あなたは${character}ですね!`);
sadioMane();

スプレッド構文

スプレッド(spread)の和訳としては、「伸ばす」「広げる」という意味の動詞らしいです。
名詞　で利用される際は「広がり」という意味になるそうです。

配列の展開

配列の要素を合計する場合を例に見てみましょう。

const ary = [1,2];

const sumAry = (num1, num2) => console.log(num1 + num2);
sumAry(ary[0], ary[1]);

　スプレッド構文を利用
sumAry(...ary);

スプレッド構文を利用すると要素が順番に設定されていくので、記述量が少なくなりますね。
Rubyだとこのような構文がないので（あったらすみません教えてください。）、配列の足し算はinjectメソッドやsumメソッドなんかを利用します！

　## 配列をまとめる

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

const [num1, num2, ...ary2] = ary;
console.log(num1);
console.log(num2);
console.log(ary2);

出力結果

分割代入と組み合わせることで一部の配列をまとめたい時にもスプレッド構文を利用することができます。

配列のコピー、がっちゃんこ

const student1 = ['悠仁', '恵', '野薔薇'];
const studentCopy = [...student1];
console.log(studentCopy);

const student2 = ['棘','真希', 'パンダ'];

const majicStudents = [...student1, ...student2];
console.log(majicStudents);

出力結果

配列の結合はRubyだとpushメソッドとflattenメソッドを利用することで（ちょっとめんどくさいです）処理を行えますが、JavaScriptはスプレッド構文を利用できるので、簡単ですね。

配列のコピーにスプレッド構文なんて利用せんくてもええんちゃうか？と思いました。
ちょっとやってみます。

const students1 = ['悠仁', '恵', '野薔薇'];
const newStudents = students1;
newStudents[0] = '虎杖'
console.log(students1);

newStudentsにstudents1という配列を代入しました。
そして、newStudentsの0番目の要素を書き換えました。
console.logでstudents1の配列を確認しにいくと、なんとnewStudents側で設定した値と同じように設定されてしまいました！！
元の場所を参照されるため、このような影響を受けてしまうんですね！
これを防ぐ為にスプレッド構文を利用するようです。面白い。