モダンっぽいJavaScriptの文法

関数の宣言

code:function.js

// 通常の関数の書き方

function sum(a, b) {

return a + b;

}

// アロー関数

const sum = (a, b) => { return a + b; }

// 引数が1つしかないときは、カッコを外してもいい，{}の中が1行しかないときは{}を外してもいい

const bai = a => a * 2;

オブジェクトの展開代入（分割代入）

code:destructuring-1.js

const person = {

name: "taro",

age: "24",

height: "174cm",

weight: "74kg",

}

// nameプロパティの値だけを取り出したいとき

const { name } = person

code:destructuring-2.js

// foo関数はオブジェクトを引数にとる

// オブジェクトからa, bプロパティを取り出す

function foo({ a, b }) {

console.log(a, b);

}

foo({ a: 1, b: 2, c: 3 });

配列の展開代入

code:array.js

const fruits = "apple", "lemon";

const a, b = fruits;

console.log(a: ${a}, b: ${b});

// 実行結果：a: apple, b: lemon

配列の展開（スプレッド構文）

code:spread_syntax.js

const fruits = "apple", "grape", "orange";

const print_three_fruits = (first, second, third) => console.log(${first}, ${second}, ${third});

// ...配列の変数名で配列が要素に展開される

print_three_fruits(...fruits);

【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita

配列操作に便利なメソッド

push：配列の末尾に値を追加

fruits.push("lemon");

map：配列から配列を作り出す

find：条件式に合う1つ目の要素を配列の中から取り出す

条件に合う要素が見つかった時に終了する

filter：条件に合う要素のみを取り出して新しい配列を作成する

some:条件を1つでも満たしていればtrue

every：条件をすべて満たしていればtrue

foreach：配列の要素を1つずつ取り出し処理を実行

参考：JavaScript で forEach を使うのは最終手段 - Qiita

Nullish coalescing演算子（??）

ある変数が null または undefined のときに、別の値を代入する

code:nullish.js

const input = userInput ?? 'default';

public.icon

#JavaScript