演算子

データ型

データ型とは

JavaScriptで使用する値と変数は下記のデータ型のいずれかに属しています。データ型は必要に応じて適したものに自動変更してくれるので普段はあまり意識せずに使用できます。

JavaScriptで使用する値と変数は下データ型というグループのいずれかに属しています。データ型は必要に応じて適したものに自動変更してくれるので普段はあまり意識せずに使用できます。

基本型は変数内に直接値が入ります。 参照型は配列やオブジェクトのようにアドレス先を参照してそこに値を管理しています。

データ型内容
基本型文字列型String「'」「"」で囲まれた値
数値型Number数値(整数と浮動小数点を区別しない)
真偽型Boolean「ture」または「false」
未定義型Undefinde未定義の状態
Null型Null参照型の値が存在しない
参照型オブジェクト型Objectオブジェクト(配列を含む)
関数型Function関数

データ型を調べる:typeof演算子

「typeof演算子」を使うと変数と値のデータ型を調べることができます。 JavaScriptは変数に入る値によって自動的にデータ型が変換されるため変数宣言時にデータ型を宣言しません。 JavaScriptの変数はデータ型というものを持っており、中に入っている値によって自動的に変わります。

undefinedとnullの違い

「undefined」「null」も何もないという意味を持っています。 「undefined」は初期値が定義されていない状態を表します。「null」は何らかの処理により 変数に代入されるはずだった『参照型の値がない』場合を表します。 「null」は参照型の値がないというのがポイントで、データ型を調べると参照型である「object」 と表示されます。つまり「本来オブジェクトが入るはずだったけどありませんでした」の意味で、 「値がない」ということになります。

  • 値「undefined」のデータ型は「undefined」
  • 値「null」のデータ型は「object」

値とtypeofの結果

Chromeの場合、変数に入っている値に対して以下のようなtypeof結果を返します。

データ型 typeof演算子
基本型'メッセージ'/"メッセージ"文字列型 string
100/3.14数値型 number
NaN数値型number
ture/false真偽型boolean
undefinde未定義型lundefinde
nullNull型object
参照型{name:'佐藤'}オブジェクト型 object
[100,200]オブジェクト型object

文字連結型演算子

左辺と右辺の値のデータ型を文字列型に変更した後、文字列同士を連結します。

演算子 名称 内容
文字列連結演算子 文字列同士を連結する

算術演算子

左辺と右辺の値のデータ型を数値型に変更した後、数値同士を計算します。
※加算演算子を除く

演算子 名称 内容
加算演算子 数値同士を足し算した答えをだす
減算演算子 数値同士を引き算した答えをだす
* 乗算演算子 数値同士を掛け算した答えをだす
/ 除算演算子 数値同士を割り算した答えをだす
% 剰余演算子 数値同士を割り算した余りを出す

計算結果がおかしい場合

同じ優先度の場合、文字列連結演算子と算術演算子は左から順に処理されていきます。

console.log("1回目の出力");
console.log("答えは"+4+2);
console.log("答えは"+4-2);v console.log("答えは"+4*2);
console.log("答えは"+4/2);
console.log("答えは"+4%2);

コンソール出力内容

1回目の出力
答えは42
NaN
答えは8
答えは2
答えは0

処理優先度を変える

「()丸カッコ」で囲むことで処理の優先度を上げることができます。 また計算のルールに則り「+」「-」と比較して「*」「/」「%」の方が優先されます。

NaN(Not a Number):計算不可能な式の結果

NaN(Not a Number)は計算不可能な式の結果で使われます。 計算は数値同士で行いますが片方もしくは両方が数値に型変換できない場合はNaNの結果がでます。

同じ優先度の場合、文字列連結演算子と算術袁演算子は左から順に処理されていきます。

手順1 '答えは'+4-2 「+」「-」は同じ優先度なので左から処理
手順2 '答えは'+4-2 数値「4」を文字列型に変更して文字列連結
手順3 '答えは4'-2 文字列連結後の値と数値「2」で引き算
手順4 '答えは4'-2 文字列「答えは4」を数値型に変換する
手順5 '計算結果はNaN 左辺が数値型にならず引き算成立せず

文字列連結演算子の「+」と加算演算子の「+」

JavaScriptでは文字連結演算子も加算演算子も「+」を使います。そのため足し算する際は注意です。 プログラム内部でそのように演算子を使い分けているのか確認してみます。

文字連結演算子として処理する場合:どちらかが文字列型

左辺か右辺のどちらかが文字列型であれば「文字連結演算子」として処理するため「左辺」「右辺」 ともに文字列型に変換します。

加算演算子として処理する場合:どちらも数値型

左辺と右辺のどちらも数値型であれば「加算演算子として処理します。」

加算演算子以外のデータ型変換

加算演算子以外の算術演算子は数値型同士で計算させるものなので「左辺」「右辺」ともに 「数値型」に型変換します。もし数値型に変換できない場合は計算処理ができず結果が「NaN」になります。

【ステップアップ】

※文字列連結演算子と加算演算子の計算結果の違いを比べてみよう!

外部から取得した値はすべて文字列型

データ型を数値型に変換

parselnt(型変換対象変数)

数値型に変換(整数の場合)

parseFloat(型変換対象変数)

数値型に変換(浮動小数点数の場合)

☆返り値:処理の結果得られるもの

・parselntの返り値:数値型の整数
parseFloatの返り値:整数型の浮動小数点数

()内の値を数値型(整数、もしくは浮動小数点数)にして返します。 正負記号(+か-)、数字(0-9)、小数点、指数以外の文字があった場合は、その箇所より前の値を返してそれ以降の文字全てを無視します。文字列の前後に空白があっても構いません。数値型に変換できない値の場合は「NaN」を返します。


テキストボックスから取得した数字を加算させるにはデータ型を数値型に変換しなければいけません。数値型に変換するには「parseInt()」を使用します。もし変換させたい文字列が少数の場合は「parseFloat()」を使用します。


【ステップアップ】

※掛け算と割り算の答えが算出されるJsの仕組みを見てみよう!

【ステップアップ】

※フォントサイズの大きさがボタンのクリックで変化するJsの仕組みを見てみよう!

転職を本気で考えている方向けのプログラミングスクール!【WebCampPRO】