備忘録：スプレッド構文と分割代入

タイトルの通り、スプレッド構文と分割代入を最近知ったのでQiitaの初使用と
併せて書いてみることにした。

##スプレッド構文
MDN
・配列名やオブジェクト名の先頭に__「...」__のスプレッド演算子を付ける。これだけで中身を展開してくれる。

const hobbies = ['Sports', 'Cooking'];
console.log(...hobbies);
// Sports Cooking　が出力される

・slice( )のようなこともやってくれる。

const hobbies = ['Sports', 'Cooking'];
const copiedArray = [...hobbies];

copiedArray.push('soccer');
console.log(hobbies);
// [ 'Sports', 'Cooking' ] hobbiesは元のまま

##分割代入
MDN
他人のGitHubで最初見かけたときは、何やってるのかいまいち理解できなかった。あと分割代入という言葉を
知らなくて、ドキュメントに辿り着くまで少し時間がかかった。Destructuringで検索して見つけることができた。
内容の説明がちと難しいが、配列のインデックスやオブジェクトのプロパティ名に一致するものを対象から
取り出して格納するという流れ。

配列

const hobbies = ['Sports', 'Cooking'];
[first, second] = hobbies;
console.log(first, second);
// Sports Cooking　が出力。配列のインデックスに応じて値が格納されている。

オブジェクト

const person = {
  name: 'beya',
  age: 34,
  greet() {
    console.log('Hi I am ' + this.name);
  }
};

const { name, age } = person;
console.log(name, age);
// beya 34 が出力。プロパティ名が一致し、対象の値が格納されている。

const printName = ({ name }) => {
  console.log(name);
}
printName(person);
// beya が出力。使い方を誤らなければ便利そう。

##react

ちょっとかくところがなかったのでここに追記

/* doesShowはboolean型。先頭に「！」をつけることで
   trueならfalse、falseならtrueにセットしてくれる。*/
this.setState({showPersons: !doesShow});

と初記事はここまで。ソースコードを書くさなか、無意識にCtrl + S で保存する癖が発動……
慣れが必要だと思いました。