[JS] デフォルト引数でtrue/falseを使う時の注意点

JavaScriptの関数でデフォルト引数を実現するには通常下記のようにする。

var1 = var1 || “デフォルト引数”;

例:

<html>
<head>
<title>[JS] 関数のデフォルト引数</title>
<script type=”text/javascript”>

function default_param1(var1)
{
v1 = var1 || “デフォルト引数”;
document.write(“引数:["+ var1 +"] 結果:["+ v1 +"]<br><br>\n”);
}

</script>
</head>

<body>
default_param1()<br>
<script type=”text/javascript”>default_param1()</script>

default_param1(“引数設定”)<br>
<script type=”text/javascript”>default_param1(“引数設定”)</script>

</body>
</html>

結果:

default_param1()
引数:[undefined] 結果:[デフォルト引数]

default_param1(“引数設定”)
引数:[引数設定] 結果:[引数設定]

しかしデフォルト引数をtrueにすると使えなくなる。
例:

<html>
<head>
<title>[JS] 関数のデフォルト引数</title>
<script type=”text/javascript”>

function default_param2(var2)
{
// デフォルト引数をtrueにしたい
v2 = var2 || true;
document.write(“引数:["+ var2 +"] 結果:["+ v2 +"]<br><br>\n”);
}

</script>
</head>

<body>
デフォルト引数をtrueにしたい<br><br>

default_param2()<br>
<script type=”text/javascript”>default_param2()</script>

default_param2(true)<br>
<script type=”text/javascript”>default_param2(true)</script>

default_param2(false)  // trueになる<br>
<script type=”text/javascript”>default_param2(false)</script>

</body>
</html>

結果:

デフォルト引数をtrueにしたい

default_param2()
引数:[undefined] 結果:[true]

default_param2(true)
引数:[true] 結果:[true]

default_param2(false) // trueになる
引数:[false] 結果:[true]

falseだと引数が存在すると見られるようだ(当たり前といえば当たり前)。

なのでこの方法だと、trueではなくfalseをデフォルト引数にしないとダメみたい。

例:

<html>
<head>
<title>[JS] 関数のデフォルト引数</title>
<script type=”text/javascript”>

function default_param3(var3)
{
// デフォルト引数をfalseに変更
v3 = var3 || false;
document.write(“引数:["+ var3 +"] 結果:["+ v3 +"]<br><br>\n”);
}

</script>
</head>

<body>
デフォルト引数をfalseに変更<br><br>

default_param3()<br>
<script type=”text/javascript”>default_param3()</script>

default_param3(true)<br>
<script type=”text/javascript”>default_param3(true)</script>

default_param3(false)<br>
<script type=”text/javascript”>default_param3(false)</script>

</body>
</html>

結果:

デフォルト引数をfalseに変更

default_param3()
引数:[undefined] 結果:[false]

default_param3(true)
引数:[true] 結果:[true]

default_param3(false)
引数:[false] 結果:[false]

引数なしの場合のundefinedは空文字「”"」ではなくnull判定すればいいみたい。
例:

<html>
<head>
<title>[JS] 関数の引数の確認</title>
<script type=”text/javascript”>

function default_param4(var4)
{
if(var4 == “”)
document.write(“var4:空文字<br>\n”);
if(var4 == null)
document.write(“var4:null<br>\n”);
if(var4 == undefined)
document.write(“var4:undefined<br>\n”);
}

</script>
</head>

<body>
引数の確認<br><br>
default_param4()<br><br>
<script type=”text/javascript”>default_param4()</script>

</body>
</html>

結果:

引数の確認

default_param4()

var4:null
var4:undefined

コメントする

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

%s に接続中

フォロー

Get every new post delivered to your Inbox.