モダンJavaScriptを学ぶ上で最低限知っておきたい機能

ES2015で追加された記法など、備忘録的にまとめています。
JavaScriptを触ったことが無いぴよぴよエンジニアのメモなので、知識の正確性はだいぶアヤシイです。

用語・機能

テンプレート文字列
文字列と変数を楽に組み合わせて表現できる

// テンプレート文字列を使わない場合
console.log("私の名前は" + name + "です。");

// テンプレート文字列を使った場合
console.log(`私の名前は${name}です。`);

アロー関数
=>を使うことで簡潔に関数を定義できる

// アロー関数を使わない場合
const func1 = function(str) {
　return str;
}

// アロー関数を使った場合
const func2 = (str) => {
　return str;
}

分割代入
配列やオブジェクト内のプロパティの値を楽に取得できる

// こういったオブジェクトがあるとする
const myProfile = {
　name: 太郎,
　age: 20
};

// 分割代入を使わない場合 (テンプレート文字列を使用しています。)
console.log(`私の名前は${myProfile.name}です。年齢は${myProfile.age}です。`);

// 分割代入を使った場合
const {name, age} = myProfile;
console.log(`私の名前は${name}です。年齢は${age}です。`);
-> 指定のプロパティを抜き出しておくことで、その後簡単に使用できる。

デフォルト値
変数を宣言しなかった場合のデフォルト値を定義できる。

// デフォルト値を指定しない場合
const sayHello = (name) => {console.log(`こんにちは${name}さん`)};
sayHello();
-> 引数無しで呼び出すと"こんにちはundefinedさん"と表示されてしまう。

// デフォルト値を指定した場合
const sayHello = (name = "ゲスト") => {console.log(`こんにちは${name}さん`)};
sayHello();
-> 引数無しで呼び出すと"こんにちはゲストさん"と表示させられる。

スプレッド構文 (...)
配列の展開・まとめ・コピーや結合などが可能。

// １．配列の展開
const arr1 = [1, 2, 3];
console.log(arr1);
-> [1, 2, 3]と表示される

console.log(...arr1);
-> 1, 2, 3と表示される(配列の中身が展開)

// ２．配列のまとめ
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...num3] = arr2;
console.log(num3);
-> 3 4 5 が表示される

// ３．配列のコピー、結合
const arr3 = [10, 20];
const arr4 = [30, 40];
const arr5 = [...arr3, ...arr4];
console.log(arr5);
-> [10, 20, 30, 40]が表示される

mapやfilter
配列の処理に使う。

// こういった配列があるとする
const nameArr = ["太郎", "二郎", "三郎"];

// mapを使わない場合 (要素全てを出力したい)
for (index = 0; index < nameArr.length; index++){
　console.log(nameArr[index]);
}

// mapを使った場合
nameArr.map((name) => console.log(name));

// こういった配列があるとする
const numArr = [1, 2, 3, 4, 5];

// filterを活用することで、例えば奇数だけの配列を作成することが可能
const newNumFilter = numArr.filter((num) => {
　return num % 2 === 1;
});
-> [1, 3, 5] が出力される

三項演算子
条件によって処理を分類できる。ES2015以前から存在する記法。

// 条件式 ? trueの場合 : falsの場合
const message = 1 < 0 ? 'trueです' : 'falseです'
console.log(message);
-> falseです が表示される