- 開発技術
JavaScriptの関数における引数の省略と、undefinedについて
- JavaScript
JavaScriptにおける関数の引数について
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
JavaScriptの関数での引数は、指定を省略することができます。
例えば、このように。func_messageでは引数2つが定義されていますが、呼び出す側が引数を1つだけにしたとしても、問題なく動作します。
|
1 2 3 4 5 6 |
var p1 = "aaa"; func_message(p1); function func_message(prop1, prop2) { alert(prop1 + "\n" + prop2); } |
ですがこの時、上記の例で言えば「prop2」には、undefinedが入ってきています。結果として、alertダイアログには以下のように表示されてしまうでしょう。
aaa
undefined
そこで、引数には「デフォルト値」を指定することができます。
|
1 2 3 4 5 6 |
var p1 = "aaa"; func_message(p1); function func_message(prop1, prop2 = "bbb") { alert(prop1 + "\n" + prop2); } |
これで、表示は以下のようになります。
aaa
bbb
ですが、引数にデフォルト値を指定する方法はIEなど一部のブラウザでは使えません。JavaScriptエラーになってしまいます。これを回避するために、以下のように書くのが安全です。
|
1 2 3 4 5 6 7 8 9 |
var p1 = "aaa"; func_message(p1); function func_message(prop1, prop2) { if (prop2 === undefined) { prop2 = "bbb"; } alert(prop1 + "\n" + prop2); } |
これで、引数をすべて与えない時でも、不用意に「undefined」が現れる現象を回避できるようになりました。
Undefinedとはなにか
「undifined」とは、未定義の状態です。
|
1 2 |
var a = 1; // 1と定義されています var b; // 変数は定義されましたが、内容が指定されていない状態。これがundefinedとなります |
いわゆる「null」とは少し違います。nullは「nullという値が指定された状態」ですが、undifinedはあくまでも「未定義」です。つまり、以下のようなコードを書いても「undifined」になります。
|
1 2 |
var obj = {}; alert(obj.prop); // objはあるけど、propというプロパティは定義されてないのでundefined |
では、今から使おうとする変数やプロパティがundefinedかどうかを調べる方法はあるのでしょうか。
undefinedを調べる方法
（１）「===」を使って比較する
さらっと関数の引数を説明する部分で記述していますが、「===」を使って比較をすることで、undefinedか調べることができます。
|
1 2 |
var x; if (x === undefined) { } // trueになる |
また、void演算子（値を評価してundefinedを返す）を利用して、次のように書くこともできます。
|
1 2 |
var x; if (x === void 0) { } // trueになる |
この「void」は、よくHTMLに使われる「javascript:void(0)」のvoidと同じです。undefinedを返すだけですので、「void 1」と書いても同じですが、慣例的に「void 0」と記述しています。
なお、イコール3つは、「厳密等価演算子」と呼ばれます。左右の値の他に、型も比較して判定をします。ここで、イコール2つにすると、結果が変わってしまいます。
|
1 2 3 4 |
var x = null; var y; if (x == undefined) { } // trueになる if (y == undefined) { } // trueになる |
イコール2つの場合、「nullまたはundefinedであればtrue」を返すのです。どちらでも問題ない場合はよいのですが、undefinedのみをピックアップして対応したい場合は、これではNGになります。
（２）「typeof」を利用する
typeofはデータ型を返してくれます。
|
1 2 |
var x; if (typeof x == "undefined") { } // trueになる |
返り値は「データ型の名前」なので、undefinedは文字列で指定して比較する必要があります。
以上、undefinedを正しく制御して、予期せぬエラーを回避していきましょう。
最後までご覧いただき、ありがとうございました。
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
