JavaScript型変換の豆知識

皆さん、こんにちは。ProgLearn; 編集部です。

今回はJavaScriptの型変換についてお話しします。

JavaScriptを学習している皆さんは、JavaScriptの型変換がかなり柔軟にできることに驚くのではないでしょうか。

整数型、少数型、文字型、文字列型… そんな宣言は一切不要です。

数字？文字？そんなの関係ねえ！

それなので、こんな書き方をしても許容されてしまうわけです。

// id は 整数を代入

function convertIdToKey(id){
    if(typeof id !== "string") id = "m" + id;
    return id;
}

...え！変数idって整数が入ってるのに、文字列型になってるやん！

はい、なっちゃうんです。

寛大な言語、JavaScriptなのです。

なんでこんなことが可能なの？

そして、ここからこぼれ話。

では、なぜこのようなことが可能なのか。

実は、JavaScriptでは”+”がキャストの役割を担っているのです！！！！

何を言っているのか、わからないですよね。

つまり、こういうことができるのです。

var i = 1;
var j = "1";

console.log(i + j);
//"11"

console.log(i + +j);
//2

えーーー！？って感じですよね。可読性が落ちますが、このように+をキャストとして利用しているコードはよく見かけるそうです。

特にinput要素をHTMLから取得するとき。数字で取得したとしても、String型で戻ってくるらしいんですね。

そういう時にいちいちparseIntとかを使わずに、単に+をつける。そっちの方が楽ですよね。

真偽値に変換するには…

型変換のところでもう一つ。

!true のように 変数の前に「!」をつけると、反対の審議型で返してくれます。この場合はfalseですね。

つまり!!true は反対の反対なので、単純にtrueを返してくれます。

つまりですよ、

!!”test” のような書き方をすると

戻り値は trueなのです！！！

このようにJavaScriptには不思議な書き方がまだまだたくさんあります。そしてこの不思議な書き方を書いてあるコードが結構あったりします。

ぜひ探してみてください！