javascript入門/演算子編

javascript入門/演算子編

  • このエントリーをはてなブックマークに追加

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

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

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

目次

計算を行う

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

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

%

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

10 % 3;
=> 「1」を返します

++

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

var a = 1;
a++;
document.write(a);
=> 「2」が表示されます

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

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);
=> 「3」が表示されます。

+=

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

var a = 5;
a += 1;
=> 6を返します。

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

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

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);
=> 「Hello, hotty」と表示されます。

// 数字(Number型)とも連結できます。
var a = "value: "
var result = a + 1000;
document.write(result);
=> 「value: 1000」と表示されます。

条件に関する演算子

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

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

==, ===

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

var a = "10";

10 == a;
Boolean(10 == a);
// あまり意識することはありませんがこういう書き方は Boolean関数の省略形です。
=> "true"を返します。

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

10 === +a;
=> 値も型も一致するので"true"を返します。
このとき変数aはnumber型へキャストされています。

!=, !==

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

>, >=, <, <=

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

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

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

!

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

!true;
=> "false"を返します。

!false;
=> "true"を返します。

!0;
=> "false"を返します。

!"hotty";
=> "true"を返します。

var a = 1;
!(a > 1);
=> "false"を返します。

&&

ANDです。

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;
=> aが1なので"true"です。

条件演算子: ? :

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

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

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

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

型を調べる

typeof演算子: typeof

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

typeof "a";
=> "string"を返します。

typeof 1;
=> "number" を返します。

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

delete演算子: delete

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

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;
=> "5"(string)

var a = "5";
b = + a;
=> 5(number)

単項-演算子: –

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

var a = "5";
b = - a;
=> -5(number)

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

そのほかの演算子

カンマ演算子: ,

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

a = 1, b = 5, c = 10;
document.write(a + b + c);
=> 「16」を返します。

ビット単位の処理を行う

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

最後に

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

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

hotty(システムエンジニア)

よく「不真面目」だの「ふざけている」だの悪い印象をばかり持たれますが誤解です。

関連するSONICMOOVのサービス

システムエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
システムエンジニア募集中!

新着の記事

mautic is open source marketing automation