javascript入門／演算子編

hotty

2014.12.02

システムエンジニア

hottyです。
javascript入門シリーズも今回で3回目になりました。

第1回目 javascript入門／配列編
第2回目 javascript入門／正規表現編

今回はjavascriptの演算子を紹介します。
早速ですが用途ごとに逆引き形式でjavascript演算子の解説を行っていこうと思います。

計算を行う

算術演算子: +, -, *, /, %, ++, —

算術演算子とは数字の計算に使用される演算子です。
四則演算の解説についてはそのまんまなので省略します。

%

% は割り算を行った結果の「余り」を求めるときに使います。
割り切れる場合は結果は0となります。

10 % 3;
<span style="color: #0000ff">=&gt; 「1」を返します</span>

1 2	10 % 3; <span style="color: #0000ff">=> 「1」を返します</span>

++

++ はインクリメントです。
インクリメントとは、「1」増えるという意味です。

var a = 1;
a++;
document.write(a);
<span style="color: #0000ff">=&gt; 「2」が表示されます</span>

var a = 1;

a++;

document.write(a);

=> 「2」が表示されます

++ の位置は右でも左でも構いませんが返り値が異なります。

var a = 1;
a++;
<span style="color: #0000ff">=&gt; 「1」が足される前の値を返します。従って返り値は「1」です。</span>

++a;
<span style="color: #0000ff">=&gt; 「1」が足された後の値を返します。従って返り値は「2」です。</span>

var a = 1;

a++;

=> 「1」が足される前の値を返します。従って返り値は「1」です。

++a;

=> 「1」が足された後の値を返します。従って返り値は「2」です。

--

-- はデクリメントです。
デクリメントとは、「1」引くという意味です。使用例はインクリメントと同じなので省略します。やはり位置によって返り値が異なります。
こういう演算の対象（オペランドといいます）が1つしかないような演算子は「単項演算子」と呼ばれています。

変数に値を割り当てる

代入演算子: =, +=, -=, *=, /=, %=

代入演算子は javascriptの変数に値を割り当てるために使用されます。

+

var a = 1;
var b = 2;
var c = a + b;
document.write(c);
<span style="color: #0000ff">=&gt; 「3」が表示されます。</span>

var a = 1;

var b = 2;

var c = a + b;

document.write(c);

=> 「3」が表示されます。

+=

見ての通り算術演算子とセットになった代入演算子です。
「自身に足す」という意味です。

var a = 5;
a += 1;
<span style="color: #0000ff">=&gt; 6を返します。</span>

var a = 5;

a += 1;

=> 6を返します。

つまり、
a = a + 5;
という意味ですね。

「-=, *=, /=, %=」も「+=」とまったく同じ要領です。

a -= 1; <span style="color: green">//=&gt; 「a = a - 1;」と同じです。</span>
a *= 1; <span style="color: green">//=&gt; 「a = a * 1;」と同じです。</span>
a /= 1; <span style="color: green">//=&gt; 「a = a / 1;」と同じです。</span>
a %= 1; <span style="color: green">//=&gt; 「a = a % 1;」と同じです。</span>

a -= 1; //=> 「a = a - 1;」と同じです。

a *= 1; //=> 「a = a * 1;」と同じです。

a /= 1; //=> 「a = a / 1;」と同じです。

a %= 1; //=> 「a = a % 1;」と同じです。

文字列を連結する

文字列演算子: +

算術演算子である + ですが、文字と文字をつなぐ文字列演算子でもあります。

var name  = "hotty";
var greet = "Hello, " + name;
document.write(greet);
<span style="color: #0000ff">=&gt; 「Hello, hotty」と表示されます。</span>

<span style="color: green">// 数字(Number型)とも連結できます。</span>
var a = "value: "
var result = a + 1000;
document.write(result);
<span style="color: #0000ff">=&gt; 「value: 1000」と表示されます。</span>

var name = "hotty";

var greet = "Hello, " + name;

document.write(greet);

=> 「Hello, hotty」と表示されます。

// 数字(Number型)とも連結できます。

var a = "value: "

var result = a + 1000;

document.write(result);

=> 「value: 1000」と表示されます。

条件に関する演算子

比較演算子: ==, ===, !=, !==, >, >=, <, <=

比較演算子は、変数や値を比較し等しいかそうでないか調べるために使用されます。

==, ===

等しいかをチェックします。
等しければ”true”、等しくなければ”false”を返します。
=== は型もチェックします。

var a = "10";

10 == a;
<span style="font-size: smaller">Boolean(10 == a);
<span style="color: green">// あまり意識することはありませんがこういう書き方は Boolean関数の省略形です。</span></span>
<span style="color: #0000ff">=&gt; "true"を返します。</span>

10 === a;
<span style="color: #0000ff">=&gt; 型が違うので"false"を返します。</span>

10 === +a;
<span style="color: #0000ff">=&gt; 値も型も一致するので"true"を返します。
このとき変数aはnumber型へキャストされています。</span>

var a = "10";

10 == a;

Boolean(10 == a);

// あまり意識することはありませんがこういう書き方は Boolean関数の省略形です。

=> "true"を返します。

10 === a;

=> 型が違うので"false"を返します。

10 === +a;

=> 値も型も一致するので"true"を返します。

このとき変数aはnumber型へキャストされています。

!=, !==

等しくないかをチェックします。
等しくなければ”true”、等しければ”false”を返します。
!== は型もチェックします。

>, >=, <, <=

値が大きいか小さいかの判定です。

論理演算子: !, &&, ||

論理演算子は、論理を決定するために使用されます。

!

if (!a) { } のようなif文をご覧になったことはないでしょうか。!は真偽値を反転させる単項演算です。

!true;
<span style="color: #0000ff">=&gt; "false"を返します。</span>

!false;
<span style="color: #0000ff">=&gt; "true"を返します。</span>

!0;
<span style="color: #0000ff">=&gt; "false"を返します。</span>

!"hotty";
<span style="color: #0000ff">=&gt; "true"を返します。</span>

var a = 1;
!(a &gt; 1);
<span style="color: #0000ff">=&gt; "false"を返します。</span>

!true;

=> "false"を返します。

!false;

=> "true"を返します。

!0;

=> "false"を返します。

!"hotty";

=> "true"を返します。

var a = 1;

!(a > 1);

=> "false"を返します。

&&

ANDです。

var a = 1;
var b = 2;
a === 1 &amp;&amp; b === 1;
<span style="color: #0000ff">=&gt; aは1ですが bが1ではないので"false"です。</span>

var a = 1;

var b = 2;

a === 1 && b === 1;

=> aは1ですが bが1ではないので"false"です。

||

ORです。

var a = 1;
var b = 2;
a === 1 || b === 1;
<span style="color: #0000ff">=&gt; aが1なので"true"です。</span>

var a = 1;

var b = 2;

a === 1 || b === 1;

=> aが1なので"true"です。

条件演算子: ? :

「? :」は条件演算子です。3項演算子とも呼ばれます。書式は以下のようになります。

【条件式】 ? 【条件式がtrueだった時の処理】 : 【条件式がfalseだった時の処理】 ;

1	【条件式】 ? 【条件式がtrueだった時の処理】 : 【条件式がfalseだった時の処理】 ;

【条件式】をまず評価してその真偽により行う処理が分岐します。1行if文に近いです。ただしその返り値は分岐した後の処理となります。したがって以下のように書くことができます。

var a = null;
b = (a === null) ? 0 : a ;
<span style="color:green">// 変数aがnullなら変数bは0となり、そうでなければ変数bは変数aの値となります。</span>

var a = null;

b = (a === null) ? 0 : a ;

// 変数aがnullなら変数bは0となり、そうでなければ変数bは変数aの値となります。

型を調べる

typeof演算子: typeof

「typeof」は型を調べる演算子です。

typeof "a";
<span style="color: #0000ff">=&gt; "string"を返します。</span>

typeof 1;
<span style="color: #0000ff">=&gt; "number" を返します。</span>

typeof "a";

=> "string"を返します。

typeof 1;

=> "number" を返します。

オブジェクトからプロパティを削除する

delete演算子: delete

「delete」はオブジェクトからプロパティを削除するための演算子です。

var object = {name: "hotty", hp:50, mp:30, status:"BAD"};
delete object.mp;
<span style="color: #0000ff">=&gt; Object {name: "hotty", hp: 50, status: "BAD"}</span>

var object = {name: "hotty", hp:50, mp:30, status:"BAD"};

delete object.mp;

=> Object {name: "hotty", hp: 50, status: "BAD"}

変数を数に変換する

単項+演算子: +

「+」は変数を数に変換するために使用されます。

var a = "5";
b = a;
<span style="color: #0000ff">=&gt; "5"(string)</span>

var a = "5";
b = + a;
<span style="color: #0000ff">=&gt; 5(number)</span>

var a = "5";

b = a;

=> "5"(string)

var a = "5";

b = + a;

=> 5(number)

単項-演算子: –

「-」も同様に変数を数に変換するために使用されます。こちらはキャストされる際に正と負が逆になります。

var a = "5";
b = - a;
<span style="color: #0000ff">=&gt; -5(number)</span>

-"10";  // もちろんオペランドが変数である必要はありません。
<span style="color: #0000ff">=&gt; -10(number)</span>

var a = "5";

b = - a;

=> -5(number)

-"10"; // もちろんオペランドが変数である必要はありません。

=> -10(number)

そのほかの演算子

カンマ演算子: ,

「,」はカンマ演算子と呼ばれる演算子です。用途は式を連続で書きたいときに使います。

a = 1, b = 5, c = 10;
document.write(a + b + c);
<span style="color: #0000ff">=&gt; 「16」を返します。</span>

a = 1, b = 5, c = 10;

document.write(a + b + c);

=> 「16」を返します。

ビット単位の処理を行う

ビット演算子については初心者にはハードルが高いしそれなりに文量があるので次回の記事で扱います。

最後に

「javascript 正規表現」でググると私の書いた記事が上から2番目（2014年11月26日現在）ヒットしますね。社内ブログの中でも上位のPV数らしいです。でも、みなさんがあまり”いいね”や”ツイート”をしてくれないのでこのシリーズもう終わりになるかもしれません。みなさんが”いいね”や”ツイート”をしてくれたら続けられます。|ω･`)ﾁﾗｯ