JavaScript:未宣言・var・letの変数の挙動の違い

JavaScriptにおける変数の宣言方法は、constを除くと以下の4つがあります。

・未宣言

のように、値が代入された時点で変数が宣言されたものとみなされる。

・var

のように、var句により変数を宣言する。

・var(巻き上げ)

のように値が代入された後にvarにより変数が宣言された場合、変数が宣言された後に値が代入されたものとみなされる。
この例では、以下と同価とみなされる。

・let

のように、var句により変数を宣言する。
ES6のバージョン以降でサポートされている。

これらの宣言方法の違いにより、非Strictモードの場合に以下の挙動の違いが生じます。
(varの巻き上げについては、巻き上げしなかった場合と同じです)

なお、Strictモードの場合は、varやletやconstを用いて宣言をせずに変数に値を代入した場合にReferenceErrorで異常終了するようになります。


以下、挙動を確認するためのサンプルコードです。
(Node.jsで確認します)

それぞれの変数で以下を確認します。

・var1

ブロック外で宣言した変数をブロック内でも宣言。
ブロック内の変更がブロック外に影響するなら、ブロックを出た時点で変数が書き変わる。

・var2

ブロック内でのみ変数を宣言。
ブロック内の変更がブロック外に影響するなら、ブロックを出た時点で参照不可になる。

・var3

関数内でのみ変数を宣言。 関数内の変更が関数外に影響するなら、関数を出た時点で参照不可になる。

【テストコード(未宣言)】

・test.js

【実行結果(未宣言)】

【テストコード(var)】

・test.js

【実行結果(var)】

【テストコード(var巻き上げ)】

・test.js

【実行結果(var巻き上げ)】

【テストコード(let)】

・test.js

【実行結果(let)】


いかがでしたでしょうか。

この記事では、JavaScriptの変数宣言の違いによる挙動の違いをまとめてみました。
色々と書きましたが、現在の実務ではletを使うのが無難です。
letであれば、Javaの変数と同じような感覚で使うことができます。

JavaScript:String型かNumber型かわからない変数をNumber型に置き換えるコード

JavaScriptは動的型付けを採用した言語であるため、実行するまで変数の型が分からない状態になります。
この特徴により、数値計算を行う時を以下のような問題を引き起こすことがあります。

・加算を行うつもりが文字列結合になってしまう

(例えば、100 + “100” は “100100”になる)

・計算結果がNaNになってしまう

(例えば、カンマ等を含むString型をNumber()でNumber型に変換しようとした場合)

・桁が途中で落ちてしまう

(例えば、カンマ等を含むString型をparseInt()でNumber型に変換しようとした場合)

これらの問題は、計算に使おうと思っていた変数がString型であり、そのString型を正しくNumber型に変換できていないことに起因します。

これらの問題は、以下のようなコードにより変数をNumber型に正しく変換することで、回避することができます。

【コード】

【サンプルの実行結果】

・inputが整数のNumber型

・inputが小数のNumber型

・inputが整数のString型

・inputが小数のString型

・inputがカンマを含むのString型

【解説】

・Number型に含まれる文字は”0-9″と”.”のみなので、それ以外の文字はreplace関数により削除する。
・replace関数は変数がString型でないと使用できないので、変数を事前にtoString関数によりString型に変換する(変換する代わりに型を判定する分岐を入れて処理を分けても良い)。


今回も、実務の中で問題になったケースを記事にしました。
JavaScriptは動的型付けを採用した言語であるがゆえに、Javaのような静的型付けでは気を付ける必要がない点にも気を付けてコーディングする必要があります。

JavaScript:二次元配列(多次元配列)になる場合の長さの判定

JavaScriptで多次元配列を作るためにはpushを使用します。
また、配列の長さを調べるにはArray.lengthを使用します。

ここで、pushの方法により、Array.lengthの使い方が異なってくるので、注意が必要です。
(使い方を間違えると、undefinedが出力されます)

正しい使い方は下記の画像の通りです。

1回目のpushでは、二次元目の配列をそのままpushしています。
この場合、二次元目の配列には名前が無いので、「array1[0].length」とする必要があります。

2回目のpushでは、二次元目の配列をオブジェクト化した上でpushしています。
この場合、二次元目の配列は、「array2」という名前のオブジェクトの要素にぶら下がっているような形になるので、「array1[1].array2.length」とする必要があります。


今回は、実務の中で混乱したことを記事にしてみました。
言われてみれば何てことのないことですが、JavaScriptは動的型付けを採用している言語であり、実行前に型の相違を見つけることが困難であるため、想定した型と異なることによるundefinedに悩まされやすいです。

JSONを整形するNode.jsのサンプルコード

JSONフォーマットはプログラムで読み込むことができるデータ構造であり、人間が読むのにも適しています。
しかし、人間が読む場合、適切にインデントが入っていないと読みにくいです。

そこで、JSONフォーマットを整形するサンプルコードを紹介します。
このサンプルコードはNode.jsを入れることで動かすことができます。
サンプルコードと同じディレクトリに”hoge.json”のファイル名でJSONファイル(UTF-8)を格納し、サンプルコードを実行すると、同じディレクトリに”hoge_shaped.json”の名前で整形済みJSONファイルが出力されます。
(JSONフォーマットの詳細については、以前の記事を参照して下さい)

【サンプルコード】

・json_shaping.js

【サンプル実行結果】

・hoge.json

・実行コマンド

・hoge_shaped.json


いかがでしたでしょうか。

このようなコードは元々趣味で使っていたのですが、実務でも使う機会が出てきたので、記事として公開してみました。
何かの助けになれば幸いです。

ChromeからJavaScriptを実行する

Chromeのデベロッパーツールの機能の一つであるConsoleでは、任意のJavaScriptを実行することができます。
コマンドプロンプトでDOSコマンドを実行するような感覚でJavaScriptを実行することができるので、JavaScriptの仕様のちょっとした確認を行いたい場合に便利です。

【手順】

1.Chromeを立ち上げる。

2.F12でデベロッパーツールを立ち上げる。

(「その他ツール」→「デベロッパーツール」、Ctrl+Shift+Iでも可)

3.「Console」タブをクリックする。

4.任意のJavaScriptを記述し、実行する。

(Shift+Enterで改行、Enterで実行)


また、Consoleで実行するJavaScriptにより、現在開いているページに影響を与えることもできます。
例えば、MDNのJavaScriptチュートリアルのトップページにアクセスし、下記コードを実行すると、ページの文字列置換(’JavaScript’を’[JavaScript]’に置換)を行うことができます。


いかがでしたでしょうか。

JavaScriptの動作は予想が難しいものが少なくないため、Consoleでの実行確認の使用頻度は高いです。
JavaScriptでの業務を行うのであれば、Consoleでの実行確認の方法は早めに覚えておきたいです。