JavaScriptの小技集

テンプレート文字列

const name = "hoge";
const age = "30";

const message =  "私は" + name + "です。" + age + "歳です。"

const message2 = `私は${hoge}です。${age}歳です。`

message2がテンプレート文字列を使ったもの。
見やすく、コーディングしやすくなっている。

アロー関数

従来

const func1 = function(str) {
  return str;
}

アロー関数

const func2 = (str) =>{
  return str;
}

分割代入

オブジェクト

const ob = {
  name: "hoge",
  age: "30",
};

const { name, age } = ob;
const message = `私は${name}です。${age}歳です。`

配列にも使える！

配列の場合は、名前が決まってないから順番でうけとる。

const array_ = [ "hoge", 30 ];
const [ name, age ] = array_;
const message = `私は${name}です。${age}歳です。`

デフォルト値

関数の引数を空欄にしてもデフォルト値が設定されているので、"Hello, who!"と出力される。

const sayHello = ( name = "who" ) => console.log(`Hello, ${name}!!`);
sayHello();

スプレッド構文

配列の展開

配列の中身を順番に開くみたいなイメージ。

const arr = [1, 2];

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

まとめる

配列のコピー、結合

map, filterの使い方

論理演算子の意味