JavaScriptPrimer 改訂２版を読んで

まえがき

JavaScriptPrimer 改訂２版を読んでのまとめ書き（感想）となります。
筆者は、JavaScriptを書いてきてはいましたが、レビューされるような環境がなく、目的の動きにはできるものの可読性やメンテナンス性などにおいては自身の判断でしかない状態で本書を読みました。

よかったところ

• 古いVersionでの記述方法や、当時にはどのような問題があって新しいVersionで機能が追加されたのかを学べること
• サンプルコードが豊富で実際に動かすことができ、疑問の思ったところは手元で試しやすいところ
• Promise/Async/Awaitについて整理できていなかったが、本書では順序立てて説明されていて理解しやすい
  • Promiseはコールバック地獄を解消するため
  • Promiseではthen()の連鎖が長くなり、可読性が悪くなるケース
  • Async/Awaitを使えば、同期処理のように記述でき、またtry-catchで例外処理できてシンプル
  • Async/Awaitの使用が基本的には推奨でありつつも、並列処理のシーンではPromise.all()を使うなど、Promiseも必要であること
• （出力して確認しつつ）期待通り動いてるし良いかという程度でthisを使っていたが、少し深く知れたこと
• todoアプリのハンズオンで、段階的にMVCの構造になっていくまでを体験できるところ

学んだこと

• call/apply/bindによる明示的なthisの指定

function sayHi() {
  console.log(this.name);
}
const person = { name: "Dave" };
const bindSayHi = sayHi.bind(person);
bindSayHi();
sayHi.call(person);
sayHi.apply(person);

• アロー関数のthisは外側のthisをそのまま引き継ぐと覚えておけばよいこと
  • なので、下記のような関数で起こる問題を

      function Person(name) {
        this.name = name;
        setTimeout(function () {
          console.log(this.name); // undefined
        }, 1000);
      }
      
      const user = new Person("Bob");
  

  • アロー関数にすることで解決できる

      function Person(name) {
        this.name = name;
        setTimeout(() => {
          console.log(this.name); // "Bob"
        }, 1000);
      }
      
      const user = new Person("Bob");
  

  • 逆に、下記のようなケースではアロー関数でなく、通常の関数を使う

      const obj = {
        name: "Bob",
        greet: () => {
          console.log(this.name);
        }
      };
      obj.greet(); // undefined
  

• ECMAScript 2022から、Array.prototypeにatメソッドが追加されたこと
  • 配列の末尾を表す際、配列.length - 1のようにせず、配列.at(-1)と簡潔に書けるようになっている

  const arr = [10, 20, 30, 40, 50];
  
  // 従来の方法
  console.log(arr[arr.length - 1]); // 50
  
  // at() メソッドを使う方法
  console.log(arr.at(-1)); // 50
  

難しかったところ

• thisの指すものが様々な要素（クラス、通常の関数、アロー関数、イベント内など）で変わる点がややこしい
  • 使用頻度の高いものなので、適宜本書を参照するなり、MDNを参照するなりで理解を深めていければと思う
• 文字列、Unicodeに関する範囲については、読んでいるときは「なるほど〜」とはなるが、理解しづらく感じる
  • 当範囲と対面した際には本書を参照しつつ、問題解決していければと思う

さいごに

かなりボリュームのある教材と感じました。
すでにある程度Javascriptを書く機会があったので、知っている範囲も多く、またMDNという非常にありがたい資料もあるので、そちらで済んでしまうような部分もあったかもしれません。
しかし、MDNでは複雑に感じた説明も、本書ではより理解しやすく噛み砕かれて記載されているので、過去に読んでなんとなく使っていたものも、より深く知ることができたように思います。
また、自分としては最後にあったtodoアプリを作成するハンズオンで、JavaScriptのコードを書く上での一つの設計例を学べたのは良かったなと感じています。

JavaScriptの初学者の方、また必要な範囲だけを学んでとりあえず動くものを作れてはいるくらいの方（自分のような）は、興味があればぜひ一読されてみることをおすすめいたします。