Category: JavaScript

概要 ES6以前は、JavaScriptの変数はvarで宣言することのみが可能でした。ES6以降はletとconstを加えて、3種類で変数を宣言することが可能となりました。本記事では、これらを使って宣言した変数が関数スコープとブロックスコープでどのような違いがあるかを記載します。 関数スコープ 関数内でvarを使用して宣言した変数は、関数外で使用するとエラーとなります。 ブロックスコープ ifやfor等のブロック内でvarを使用して宣言した変数は、ブロック外で使用してもエラーとならず、そのまま使用することができてしまいます。 letやconstを使用した場合 ES6以降で登場したletやconstを使用することで上記のような関数スコープとブロックスコープの差をなくすことができます。※ 本記事ではletとconstの違いは触れません。簡単にいうと上書きできるかできないかです。 関数スコープ ブロックスコープ 参考 The Difference Between Function and Block Scope in

概要 本記事では、JavaScriptにおける比較演算子の==と===の違い、および変数の型をチェックする方法を記載します。 ==と===の違い ==と===の違いとしては、簡単に言うと===の方が値だけでなく型まで含めて等しいかをチェックするのに対して、==では暗黙的な型変換により型を合わせた上で等しいかをチェックするという部分になります。下記に具体例を記載します。 また、別の記事で記載しておりますがJavaScriptの暗黙的な型変換は少し特殊な変換がなされるため、==を使用した場合には想定外にtrueに判定される時があります。 暗黙的な型変換についての詳細はこちらを参照。 したがって、JavaScriptのロジックにおける比較演算子は===を使用して厳格にすることが推奨されます。ただし、上記のような仕様を理解して上で==を使用するのは全く問題ないと思います。 型のチェック方法 JavaScriptの型をチェックする1つの方法は、typeofを使用することで、変数の型を返すのでそれを元にチェックすることができます。もう1つは、instanceofを使用することで、変数が指定する型と等しいかをチェックすることができます。それ以外にも型によって使えるものがあったり、typeofとinstanceofが使えるかも異なるので下記を参考にしてください。 String Number Array Function Object Nullとundefined Boolean Error Date Symbol まとめ

概要 JavaScriptの型変換には、暗黙的と明示的があります。具体的には、Number(value)のような関数が明示的な変換にあたります。暗黙的な変換は、異なる型をオペランドでつなぐ処理でどちらかの型に合わせるように変換するようなものとなります。例えば、Stringは数値を期待されるような場合にはNumber型に変換されます。なので、JavaScriptでは型の不正による予期せぬエラーはほとんどの場合で回避されます。 ===と==の違い ===を使って比較すると、暗黙的な変換はせずに型も含めた比較になります。逆に==の比較では、必要に応じて暗黙的な変換をした上で比較を行います。実際に比較をしてどのようになるかは、下記のテーブル表が参考になります。https://dorey.github.io/JavaScript-Equality-Table/ StringとNumber オペランドによりStringからNumberに暗黙的に変換される処理は、Number関数で変換するのと同じプロセスになります。Number関数は、数字を含むStringであれば正しく変換されますが、数字ではない文字列である場合は、NaN(not a number)を返します。Stringに明示的に変換する場合にはString関数を使用します。 オペランドが-, *, /, %の場合には、Stringは暗黙的にNumberに変換されますが、+の場合にはNumberがStringに変換されるような挙動となります。 Boolean型と空文字列をNumberに変換すると下記のようになります。 Boolean Booean型の変換では、下記の値がJavaScriptではfalseとなります。ちなみに、ifやelse ifの比較や||,&&の演算子があると必要に応じて暗黙的の変換が行われます。 逆に下記がtrueに変換されるものとなります。 Object(Array含む) Object型は、暗黙的な変換では[object Object]という文字列に変換されます。Object型はtoString()を継承しており、暗黙的な変換ではこれが呼び出されます。なので、ObjectのtoString関数を上書きすることで、適切な文字列を返すようにすることができます。また、数値への変換の場合には、valueOf()を継承することで変換時に呼び出されるようにもできます。

概要 本記事ではJavaScriptにおける値型(Value Types)と参照型(Reference Types)の違いを簡単に整理します。 値型(Value Types) Number,Boolean,String,null,undefined,Symbolはプリミティブ型であり関数へは全て値型で渡されます。ここでのポイントは、Stringが値型で渡させるということとなります。他の言語では、Stringは一般的に参照型である場合が多いですが、JavaScriptでは値型なので注意が必要となります。値型で関数(fucntion)に渡させると、関数の中での変更は影響しないような挙動となります。下記が簡単な例です。 参照型(Reference Types) Object,Array,Functionの型は、参照型で渡さます。ちなみに、ArrayやFunctionも大きく捉えるとObjectに含まれると考えられます。参照型で関数(fucntion)に渡させると、関数の中での変更は呼び出し元の変数にも影響するような挙動となります。下記が簡単な例です。 まとめ JavaScriptでは明示的に型を宣言しないので、他の言語ほど型を意識しないことが多いですがいわゆる値型と参照型での動作の違いが出てくるので、考慮した上で実装する必要はあります。 参考 Understand Value and Reference Types in　JavaScripthttps://www.zsoltnagy.eu/understand-value-and-reference-types-in-javascript/ Value

概要 本記事は、JavaScriptにおけるプリミティブ型にはどのようなものがあるかを整理したものとなります。 プリミティブ型とは プリミティブ型とは、プログラミング言語の仕様に用意されている最も基本的なデータ型となります。 JavaScriptにおけるプリミティブ型 JavaScriptにおけるプリミティブ型には、下記の種類があります。 Boolean type Null type Undefined type Number type String type Symbol type Boolean type

概要 本記事では、JavaScriptのコンセプトであるコールスタックについて整理します。 コールスタックとは コールスタックは、JavaScirptを実行するインタプリタ（WebブラウザのJavaScriptインタプリタなど）が複数の関数を呼び出すスクリプト内の場所を追跡するためのメカニズムです。 JavaScriptの実行は、基本的にはシングルスレッドによるヒープと単一のスタック呼び出しから構成されます。 基本原則は以下となります 1. シングルスレッド。つまり、一度に一つのことしかできないということ。 2. コード実行は同期的。 3. 関数呼び出しは一時メモリを占有するスタックフレームを作成。 4. LIFO – 後入れ先出しデータ構造として機能。 処理の流れ スクリプトが関数を呼び出すと、インタプリタはそれを呼び出しスタックに追加してから、その関数の実行を開始します。 ↓ その関数によって呼び出されたすべての関数は、さらに呼び出しスタックに追加され、それらの呼び出しに到達した場所で実行されます。