JavaScript関数に引数が渡されているかどうかを判定する方法
JavaScriptの関数に引数が渡されたかどうかを判定したい場合は、デフォルトパラメータ(デフォルト引数)を活用するのが効果的です。
デフォルトパラメータとは
デフォルトパラメータは、ES6(ECMAScript 2015)で導入された機能です。関数の引数が省略された場合や undefined が渡された場合に、あらかじめ指定しておいた初期値が自動的に適用されます。これにより、引数の有無を明示的にチェックしなくても、安全に関数を呼び出せるようになります。
サンプルコード
以下のコードを実行して、実際の動作を確認してみましょう。
<!DOCTYPE html>
<html>
<body>
<script>
function display(arg1 = 'Tutorials', arg2 = 'Learning') {
document.write(arg1 + ' ' + arg2 + "<br>");
}
display('Tutorials', 'Learning');
display('Tutorials');
display();
</script>
</body>
</html>実行結果
Tutorials Learning Tutorials Learning Tutorials Learning
このように、引数を2つ渡した場合も、1つだけ渡した場合も、まったく渡さなかった場合でも、欠けている引数にはデフォルト値が適用されます。そのため、呼び出し側で引数の個数を気にする必要がなくなります。
補足:undefinedとの比較で判定する方法
デフォルトパラメータを使わずに、引数が渡されたかどうかを直接判定したい場合は、引数が undefined かどうかを比較する方法もあります。
function display(arg1) {
if (arg1 === undefined) {
document.write('引数は渡されていません<br>');
} else {
document.write('引数: ' + arg1 + '<br>');
}
}ただし、コードをシンプルに保ちながら初期値を扱える点では、デフォルトパラメータを使う方法が最も推奨されます。
-
JavaScriptオブジェクトの内容を文字列として表示する方法
JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h
-
JavaScriptで関数の実行結果をHTMLとして表示する方法
関数の結果をHTMLとして表示するには?JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス(input type=text)の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h