【学習メモ】JavaScriptコードレシピ集 その1

株式会社ICSというフロントエンドに強い会社の方2名が著者の本です。
コードレシピ集という本のタイトル通り、JavaScriptで「〜をしたい」ときの、コードサンプルがES2015以降の文法で278個用意されています。
冒頭や 「JavaScriptコードレシピ集」を執筆しました！ - ICS MEDIA でも書かれている通り、最初からステップバイステップで学んでいくにも、気になった項目や調べたい項目をリファレンス的に使うのもOKという構成内容です。

自分の場合は、超初心者というわけではないのですが、jQuery は分かるけれどピュアな JavaScript に関してはそこそこ分からないので、一から学びたいというのもあり最初からステップバイステップで読んで実際にエディタとブラウザ上で試していく方法で読み進めています。
この本を買った目的でもあるのですが、著者がフロントエンド界隈でも有名で情報を発信し続けている方々なので、その人が書いている内容なら間違いないというか、これまでこの書き方でOKなのかな？のような JavaScript の書き方のある程度「正解」を求めて購入しました。

またいつもの通りにこれまで知らなかったこと、勉強になったことを中心にメモしていきます。
GitHubにリポジトリ も作ったので、そちらにも残せるようにしています。

Chapter 1 JavaScriptの基礎

009 ふたつの値を比較したい（比較演算子）

構文	意味
値1 == 値2	値1と値2が等しいかどうか
値1 === 値2	値1と値2が等しく、型も同じかどうか
値1 != 値2	値1と値2が等しくないかどうか
値1 !== 値2	値1と値2が等しくない、または型が異なるかどうか

基本的な所と思うのですが、なんとなく == より === のほうが良い、という認識だったのですが、型が同じかそうでないかで使い分ける、その上でミス少なくするように === を使うほうがよい。

console.log(10 == '10');  // true
console.log(10 === '10'); // false
console.log(20 != '20');  // false
console.log(20 !== '20'); // true

010 複合代入演算子を使いたい

let a = 10;
let b = 20;
a += b;         // a = a + b と同じ意味
console.log(a); // 結果: 30

let c = '鈴木';
let d = '一郎';
c += d;         // c = c + d と同じ意味
console.log(c); // 結果: '鈴木一郎'

用語を知らなかったのですが a += b; のような演算子を複合代入演算子というのですね。

012 アロー関数（=>）で関数を定義したい

引数が1個の場合は () を省略できます。次の関数は、引数1を受け取り、「a+2」の結果を返します。引数が0個か、2個以上のときは省略できません。1個のときのみ省略できます。

// 関数の宣言
const myFunction1 = (a) => {
  return a + 2;
};

// 関数の宣言（カッコを省略）
const myFunction2 = a => {
  return a + 2;
}

// アロー関数内の処理が1行のときは、{}とreturnを省略できる
const myFunction3 = (a) => a + 2;
console.log(myFunction3(10)); // 結果: 12

013 関数に渡す値の初期値を設定したい

これも用語を覚えれてない

関数の引数では、「値＝初期値」とすることで初期値を定義できます。 初期値が設定されている引数は省略可能で、省略された場合は初期値が使われます。「デフォルト引数」といいます。

/**
 * 税込みの値段を返す関数
 * @param price 価格
 * @param tax 税率
 */
function calcFunction(price, tax = 0.08) {
  const result = price + price * tax;
  return result;
}

// tax の引数を省略すると、初期値の0.08が使用される
const result1 = calcFunction(100);
console.log(result1); // 結果: 108

// tax の引数を指定すると、その値が使用される
const result2 = calcFunction(100, 0.1);
console.log(result2); // 結果: 110

定義コメントの @param というのは、こういう引数定義のときに使われるのですね。

014 関数に任意の数の引数を渡したい

/**
 * 引数の合計値を返す関数
 * @param price
 * @returns {number}
 */
function calcSum(...prices) {
  let result = 0;
  for (const value of prices) {
    result += value;
  }
  return result;
}

// 引数が2個の場合
const result3 = calcSum(10, 20);
console.log(result3); // 結果: 30

// 引数が3個の場合
const result4 = calcSum(10, 20, 30);
console.log(result4); // 結果: 60

016 条件に応じて処理を分けたい（switch文）

switchの式は厳密な等価

switch 式ほぼほぼ見たことも使ったこともないのですが、ということを知らなかったです。

// 文字列の'100'
const myValue = '100';

switch (myValue) {
  case 100:
    // 文字列の'100'ではないので実行されない
    console.log('数字の100です');
    break;
  default:
    console.log('数字の100ではありません');
    break;
}

019 反復処理をスキップしたい

これ知らなかったです。for でも while でも使える。if をネストせずにコードの見通しを良く処理を行える。

for (let index = 0; index < 10; index++) {
  if (index % 2 === 0) {
    // index が偶数（2で割った余りが0）の場合は、これ以降の処理はスキップされる。
    continue;
  }

  // 奇数のみが出力される
  console.log(index);
}

// ループが終了したら実行される
console.log('ループ終了');

---

Chapter1 までみてみて（全部でChapter 19まであるのでこのペースでいくと大変。。）、まずは基礎的な内容なので、そこまでつまずかずに読み進められました。
初見の発見もいい意味であまりなくそれでも説明が丁寧なので、半年くらいから勉強してきたことが少しずつ身になっていて理解度の向上につながる印象もありそこはうれしく感じます。

内容とは全く関係ないですが、本のコードを手打ちしているので分厚い本の割に本を折りやすい？（置いて読みやすい）のがいいです。