ES2015 以降の ECMAScript の変更

from: 基礎から学ぶ React / React Hooks

let は変更可能、const は変更不可

データ型

シンボル : ES2015 で追加された一意で不変な値

巨大な整数 : ES2020 から追加された任意精度の整数

code:テンプレートリテラル

const str = Hello ${name}!;

Nullish coalescing Operator (ES2020) : valueOrNull ?? "デフォルト値"

valueOrNull が null が undefined だと "デフォルト値" が返される

アロー関数式 (ES2015)

code:アロー関数式

(param1, param2) => { return value }

引数の変更 (ES2015)

code:引数周り

// デフォルト引数

(width = 3, height= 3) => { return width * height; }

// 可変長引数

(a, b, ...rest) => { console.log(rest) }

// 引数の分割代入

const sampleFunc = ({ message }) => console.log(message);

// 利用

sampleFunc({ name: "太郎", message: "こんにちは" });

for...of 文 (ES2015)

反復可能オブジェクトに対して、定義した順番で値を反復処理する

code:for-of

const items = "太郎", "加奈子", "一郎";

for (let item of items) { console.log(item) }

配列のスプレッド構文 (ES2015)

code:スプレッド構文

const arr1 = 1, 2, 3;

const arr2 = 4, 5, 6;

const joinedArray = ...arr1, ...arr2;

配列の分割代入 (ES2015)

code:分割代入

const personalInfo = "太郎", 20, "元気", "会社員";

const name, age, ...rest = personalInfo;

オブジェクトの省略記法 (ES2015)

code:省略記法

const color = "red";

const redColorObject = { color }; // { color: color } と同じ

オブジェクトのスプレッド構文とレスト構文 (ES2015)

code:例

const obj1 = { a: 1, b: 2 };

const obj2 = { c: 3, d: 4 };

// スプレッド構文でマージ

const obj3 = { ...obj1, ...obj2 };

// 取り出し

const { a, b, ...rest } = obj3;

ECMAScript のモジュール (ES2015)

Promise (ES2015)

Async functions (ES2017)