Zenn
🦎

JSの３つの原則 〜JSの関数を学び直す〜

2023/02/18に公開
JavaScript
JavaScript
tech

はじめまして、なべくらです。今回は、フロントエンド向け学習動画配信サイト『Frontend Masters』のJavascript hard parts v2のコースを観ながらJSの仕組みについて学び直したので、忘れないうちにここでまとめておきます✏️✨

JSの３つの原則

JSのコードの実行の裏には以下の3つの仕組みが存在しています。

  • 実行スレッド…JSのコードを実行していく機能のこと。JSは単一でスレッド１行ずつコードが実行される。
  • メモリ…文字列や配列などのデータを保存して、後で使用できるようにする機能。コードですら保存でき、保存したコードの塊のことを関数と呼ぶ。
  • コールスタック…現在実行している箇所を追跡し続ける仕組みのこと。

関数について

保存する関数のコードは関数名と（）をつけて書き、後で実行をすることができます。渡す値のラベル（プレースホルダー）はParameter（日本語で何というんだろう🤔）と呼ばれ、実際に渡ってきた値はArgument(引数)と呼ばれます。以下がその例です。

function testFunction (testString) { return `${testString} is a argument`}

この関数が実行される時、実行コンテキストという物が作成され、コールスタックに関数が追加されます。

実行コンテキスト…関数コードを実行するために作成される環境のこと。先ほど挙げた実行スレッドとメモリの２つの特徴をもっている。実行コンテキスト内のメモリには関数内で使用する値が入っており、単一の実行スレッドでメモリの値を呼び出しつつ、コードの実行が進んでいく。

コールスタック…現在実行している場所を追跡する仕組み。関数を実行する際にこのコールスタックに関数コンテキストが追加され、実行が終わるとコールスタックからその関数コンテキストが取り除かれることで、コールスタックの最上部にあるものが、現在実行中の関数であると判断できる。一番下にはグローバルコンテキストが入る。

例えば、以下のようなコードの場合

function makeShoutMessage (message) { 
  return `${message}!!!!!!!!`
}

function makeComment (text) { 
  return makeShoutMessage(`${text} is a word used to call out`)
}

makeComment('Hello')

実行コンテキストのイメージ

一番初めに空のコールスタックにグローバルコンテキストが入れられます。makeComment関数が呼び出された際にコールスタックにmakeCommentの関数コンテキストが追加され、さらにmakeCommentの中で呼ばれているmakeShoutMessageの関数コンテキストが追加されます。一番上のmakeShoutMessageの実行が終わると、コールスタックの一番上にあったmakeShoutMessageが取り除かれ、makeCommentの関数コンテキストが最上部に。その後、makeCommentが実行され終わると、再度グローバルコンテキストが最上部になります。

コールスタックの様子
コールスタックの様子

ちなみにコールスタックはChromeのデベロッパーツールのSourcesで確認することができます。

高階関数(関数を扱う関数)

関数の引数に関数を渡すこともでき、そういった関数を引数や戻り値として扱う関数のことを高階関数と、高階関数に引数として渡される方の関数をコールバック関数と呼びます。以下のコードをご覧ください。

function makeShoutMessage (message) { 
  return `${message}!!!!!!!!`
}

function makePushyCommentWithDecoration (text, decorationFunction) { 
  const pushyComment = `${text}, ${text}, ${text}`
  return decorationFunction(pushyComment)
}

makePushyCommentWithDecoration('It is test', makeShoutMessage)

実行コンテキストイメージ

上記コードの場合、makePushyCommentWithDecorationが高階関数、引数として渡されたmakeShoutMessageがコールバック関数です。コールバック関数と高階関数を使用することで、美しいコードを書く原則の一つであるDRY（Don't Repeat Yourself：何度も同じコードを書かないようにすること）を維持することができます。

おわりに

今までなんとなくで書いていた関数の裏でさまざまなJSの仕組みが動いていたんですね👀知らないことだらけで目から鱗でした。この仕組みを知ったからといって明日からバリバリコードが書けるかと言われると、そうでは無いですが、JSの不可解な挙動に出会った時の考えの助けにはなりそうです。

クロージャーとクラスとプロトタイプについてはまたの機会にまとめたいと思います。
ここまで読んでいただきありがとうございましたー🙋‍♀️

Discussion