概要

javascript内でオブジェクトを生成する方法を試してみます。

オブジェクトの生成の方法は、次のとおりです。

①オブジェクトリテラルを使って生成
②newキーワードを使って生成
③Object.create()を使って生成

③の方法はECMAScript5の言語仕様に則ってプログラミングする場合に有効です。

オブジェクトリテラル

オブジェクトリテラルを使った生成を試してみます。
変数を宣言し、その変数に対して、新規のオブジェクトを生成し、代入します。

オブジェクトリテラルは、中括弧を使い、内部には「プロパティ名」と「値」をペアでカンマ区切りで記述します。
プロパティ名と値はコロンで区切ります。

//オブジェクトリテラルによる生成

//空のオブジェクトを生成する
var testobject = {};
console.log(testobject); //出力結果「Object {  }」

//要素を2つ持つオブジェクトを生成する
var testobject2 = {a:10, b:20};
console.log(testobject2); //出力結果「Object { a: 10, b: 20 }」

//オブジェクト内の要素が他のオブジェクトのデータを扱う場合
var testobject3 = {c:testobject2.a, d:testobject2.b};
console.log(testobject3); //出力結果「Object { c: 10, d: 20 }」

リテラルを使ったオブジェクトで、プロパティ名に予約語を使う場合は注意が必要です。
ECMAScriptのバージョンによって挙動が変わるので、
各バージョンにより、挙動を確かめてプログラムする必要があります。
一般的にはプロパティ名には予約語ではない文字列を割り当てたほうがプログラミングしやすいかもしれないです。

newキーワードを使った生成

new演算子を使ってオブジェクトを生成します。
new演算子のあとに関数呼び出しを記述して、オブジェクトを生成します。
オブジェクトが生成されるときに必ず実行される関数をコンストラクタと呼び、内部で初期化等の動作をします(各関数によって動作が違うので、詳しくはリファレンスを調べる必要があります)

実際の動きについて、簡単なコードを書いて出力結果を確認してみます。

//newキーワードで生成

//空のオブジェクト生成
var testobj1 = new Object();
console.log(testobj1); //出力結果「Object {  }」

//空の配列オブジェクトを生成
var testobj2 = new Array();
console.log(testobj2); //出力結果「Array []」

//日時を扱うオブジェクトを生成
var testobj3 = new Date();
console.log(testobj3); //出力結果「Date 2018-11-14T12:30:02.403Z」

概要

javascriptのオブジェクトについての概要です。

・オブジェクトは複合型のデータ型になります。
・複数のデータをまとめて保持し、読み書きが可能です。
・データをプロパティとして呼ぶこともある。
・プロパティは原則、文字列として指定する。
・各プロパティ(文字列)に対し、値をマッピングする。
・マッピングしたものには呼び名がつけられる(ハッシュ、連想配列等)

・オブジェクトは、文字列、数値、真偽値(true/false)、null、undefined以外の値になる。
・オブジェクトは可変の振る舞いをする。(値を参照で操作する)

・オブジェクトの操作は、生成、プロパティへの値の代入、読み出し、削除など。
・同名のプロパティはNG。
・プロパティは「名前と値」の組み合わせ。その他「プロパティ属性」という値を持つ。
・プロパティ属性は「書き込み可」「列挙可」「再定義可」がある。

・オブジェクトはオブジェクト属性を持つ。「プロトタイプ」「クラス」「拡張可フラグ」
・オブジェクトは大きく3種類あり、「ネイティブオブジェクト」「ホストオブジェクト」「ユーザ定義オブジェクト」
・プロパティは大きく2種類あり、「独自プロパティ」「継承プロパティ」

javascriptのオブジェクトの特徴

オブジェクト自身のプロパティの他、ほかのオブジェクトのプロパティも「継承」することができる。
継承の対象となるオブジェクトをプロトタイプと呼びます。

オブジェクトの詳細な挙動について

javascriptのプログラムをより深く正確にする為には、
オブジェクトについての理解を深める必要があります。

オブジェクトの詳細な挙動は、一つ一つこのブログで掘り下げて、できるだけサンプルプログラムを書いて、挙動を確かめながら記事化していきます。

概要

javascriptの文についてまとめます。

文はまず、式文と宣言文があり、式文は何らかの処理を書くことで作用します。
宣言文は変数や関数を宣言し定義するための文です。

また、実行順序を変更したり制御する為の制御文もあります。
制御文には以下のようなものがあります。
・条件文
if
swich
・ループ文
for
while
・ジャンプ文
break
return
throw

式文

もっとも簡単な文で、変数の代入や、インクリメント、デクリメント、オブジェクトのプロパティ削除のdeleteなども式文として使われます。

複合文

複合文とは文ブロック

{

}

で囲んで記述される文です。
文ブロックは末尾にセミコロンを記述しません。

宣言文

var
function
等の宣言する文が宣言文です。
変数の宣言と関数の宣言を行います。

var

変数を明示的に宣言する文です。

function

関数を明示的に宣言する文です。
javascriptの関数は、次のように宣言する方法

function test() {

}

や、次のように関数を変数に代入する式もあります。

var ftest = function test() {

}

//呼び出す時
ftest();

条件文

指定された式の値に応じて、他の文を実行したり、処理を分岐したりします。
条件文は「if文」や「if else」、「switch文」などあります。

if文

javascriptが条件を判定して、処理を分岐する文です。

if else文

if文と組み合わせて書きます。
これまで何度もサンプルコードを書いてきましたので、詳しい内容は割愛します。

switch文

ある一つの判定要素に対し、条件分岐が多数ある場合に用いる書き方です。
簡単なサンプルを書きます。

var test = 10;

swicth(test) {
	case 1:
		//処理A
		break;
	case 5:
		//処理B
		break;
	case 10:
		//処理C
		break;
	case 15:
		//処理D
		break;
	default:
		//処理E
		break;
}

上記の場合、変数testの値を判定し、処理Cが実行されます。
処理後のbreakを書かなければ、そのまま次の処理(上記の場合は処理D)が実行されます。

if else文のelseを連続的に書くよりは、この書き方のほうが処理のみとおしが立ちやすくなります。

ループ文 – while

とある条件が真の間、処理を繰り返すループです。

ループ文 – do while

とある条件が真の間、処理を繰り返すループです。
while文との違いは、最初の1回目は条件の真偽に関係なく、必ず実行されます。

ループ文 – for

カウンタ変数を持ち、そのカウンタの条件が真の間は処理を繰り返すループです。

ループ文 – for inf

オブジェクトに対して、オブジェクトのプロパティを巡回する時に書きます。

for (var test in testobject) {
	console.log(testobject[test]);
}

のように書きます。
オブジェクトについて深く理解する必要があるので、オブジェクトとプロパティについては、別途堀さげて書きます。

ジャンプ文

ループの処理中に、条件や状態により、処理をジャンプする場合に書きます。
breakやcontinueを使います。

ラベル文

先頭に識別子を書き、その後にコロンを書き、最後に文を記述します。

testlabel:while(1) {
	//ループ内の処理
	
	//ラベルを利用して、ループ処理を実行
	continue testlabel;
}

上記の例はラベル「testlabel」を宣言し、その後のwhileループを割り当てています。
ループ処理内のtestlabelの文が実行されると、ラベルしたwhileが実行されます。
上記のサンプルは極端な例ですが、ラベルの行でジャンプするイメージになります。

break文

ループ処理中に、処理をとめてループを抜ける時に書きます。

continue文

ループ処理中に、continue文より後の処理は実行せず、またループの最初から処理を開始する時に書きます。
一般的には条件文の後に、指定条件の場合にcontinue文を書くケースが多いです。

return文

関数内の処理が完了し、関数を抜けて結果を返す処理として書きます。

throw文

ある例外的な条件やエラーが発生したことを示すシグナルのことです。
次のようにループの処理中に、例外を強制発動することができます。

for (var i=0; i<10; i++) {
	//例外が発生した場合にスローする
	throw new Error("Err");
}

try catch finally文

java言語とよく似ていますが、プログラム中の処理を試み、
例外が発生した場合は、処理をcatchし、全ての処理後にfinallyを実行する文です。

with文

実用性は低いですが、オブジェクトが入れ子になっている場合や、
多数のオブジェクトのプロパティに何度もアクセスする場合に使います。

use strict文

ECMAScript5で導入された指示子です。
この指示子が書かれたプログラムは、厳密なコードであることが要求され、
プログラムもまた厳密に書きます。(とは言っても常に正確に記述することは基本です)

概要

一般的にプログラムを書いていると、よく使用するカンマですが、
javascriptではカンマも演算子と解釈するケースがあります。

セパレータとしてのカンマと、演算子としてのカンマがあります。

また、C言語やC++でもカンマ演算子はあります。
言語のできた順からするとCやC++のほうが先になります。
(C言語は1972年頃、C++は1983年頃、javascriptは1995年頃)

カンマ演算子の挙動

カンマ演算子は、左被演算子を評価して、その値を捨て、右被演算子を評価する動きになります。

演算子の実行例

実際にこの演算子について、コーディングして動作を確かめてみます。

//セパレータとしてのカンマ(変数の宣言なので、カンマ演算子では無い)
var x = 10, y = 20, z = 30;

//カンマ演算子としてのカンマ
var ret = (x, y, z);
console.log(ret); //出力結果「30」カンマ区切りの最後の文字列が代入される


//代入処理がされる場合
var ret = x, y, z;
console.log(ret); //出力結果「10」カンマ区切りの最初の文字列が代入される


//加算演算子を含む場合
var ret = (x += 2, y +=3, z += 4);
console.log(ret); //出力結果「34」


//加算演算子を含む場合(括弧をつけない場合)
var ret = x += 2, y +=3, z += 4;
//出力結果は「SyntaxError: unexpected token: '+='」
//javascriptでは、上記の書き方はエラーになる


//インクリメント
var x = 10, y = 20, z = 30;
x++, x++;
console.log(x); //出力結果「12」


//カンマ演算子を二項演算子の左辺に下記、値を代入する
(x, y) = 40;
//出力結果「ReferenceError: invalid assignment left-hand side」
//javascritpの言語仕様としてエラーになる

上記のような結果になります。
「左被演算子を評価して、その値を捨て、右被演算子を評価する」と一言で言っても、括弧の有無で挙動が変わる点に注意が必要です。

概要

あまり見慣れないvoid演算子についてまとめます。

void演算子は単項演算子で、オペランド値を廃棄し未定義値を返す動作をします。

実際の使用場面

void演算子は特殊な利用用途以外では、あまりプログラムしません。

働きとして、戻り値がundefineにならなけれならない場合に使用することが多いです。

概要

typeof演算子についてまとめます。

オペランドは1つのみで演算します。

オペランドの「データ型」(文字列)を返します。

typeof演算子で判定できる値について

typeof演算子は、以下の値を演算(判定)することができます。

undefined
null
true/false
数値
NaN
文字列
関数
ネイティブオブジェクト
ホストオブジェクト

概要

条件演算子は「?:」で記述する演算子です。
一般的にこれは三項演算子と呼ばれ、オペランドを3つ使い演算を行います。
先頭のオペランドの後に「?」を記述し、その後、2つ目のオペランドを記述し、その後「:」に続けて3つ目のオペランドを記述します。

書き方としては、次のようになります。

判定条件 ? 結果1 : 結果2

判定条件がtrueの場合は結果1のオペランドの値を評価し、falseの場合は結果2のオペランドの値を評価します。

三項演算子については、他の言語にもあり、開発時の環境やプログラマによっても意見が分かれるケースがあります。

概要

eval()について、詳しく調べてみます。

eval()は1つの引数を渡します。
引数として文字列を渡し、それ以外の場合はそのままの値を返します。

引数が解釈できない場合はシンタックスエラー例外になります。
解釈できた場合は、引数を評価します。

実行例1

eval()を呼び出すとき、呼び出したコードの環境変数が使われます。

実際にeval()で呼び出されたコードの変数が使われるかどうか、
例えば、次のようなコードを書いてみます。

var x = "123";

console.log(eval("x"));

出力結果は

123

になり、eval()で「x」という変数を呼び出したことになります。

実行例2

eval()の引数内で変数定義や関数定義も可能です。
また、定義した変数に値を代入することもできます。
例えば、次のようなコードを書いてみます。

var y = "abc";

console.log(eval("y='d'"));

出力結果は

d

という結果になります。
出力結果を確認する為に、console.logを行っていますが、便宜上書いているだけです。

実行例3

eval()での関数定義を試してみます。

eval("function abc() { return 'z'; }");

console.log(abc());

出力結果は

z

という結果になります。

概要

javascriptにはソースコード文字列を評価、実行する機能「eval」があります。
このevalはグローバル関数として定義されており、eval()という形で値を評価します。

evalは()内にはいる文字列を評価します。

eval(string)

stringには文字列が入りますが、文字列をそのまま評価するのではなく、動的に評価されます。

簡単に次の例を書いてみます。

console.log(eval("10 + 15"));

出力結果は「25」という結果になります。

では、次のような書き方をするとどうなるか試します。

var test = 30;

console.log(eval(test  + 15));

出力結果は「45」になります。
このように、引数として文字列を渡す場合でも、数値(の式)を渡す場合でも、評価時にjavascriptのコードとして実行される機能をもつことが特徴です。

概要

javascriptは算術演算と代入演算子を組み合わせて使用することができます。
例えば二つのオペランドを「+=」という書き方を使って右辺のオペランドを左辺に代入する時、値を加算して代入することが可能です。

サンプル

次のような例を書いてみて動きを確かめます。

var test = 10;

test += 20;

console.log("test -> " + test);

非常に簡単な例ですが、出力結果は「30」と出力されます。
この時に気をつけなければならないのは、上記の例の場合は2つのオペランドが数値であることです。

では、この数値が文字列だった場合、どのような動きになるか試してみます。

var test = '10';

test += '20';

console.log("test -> " + test);

先ほどの例とほとんど同様のコードですが、出力結果は「1020」となります。
代入するタイミングの算術演算子(加算演算子)が、文字列同士を結合する働きをした為です。

代入演算子の種類

代入演算子には、上記の加算演算子の他に、次のような種類があります。

//加算代入演算子
+=

//減算代入演算子
-=

//乗算代入演算子
*=

//除算代入演算子
/=

//剰余代入演算子
%=

//左シフト代入演算子
<<=

//右シフト代入演算子(符号有り)
>>=

//0埋め右シフト代入演算子(符号無し)
>>>=

//ビットごとのAND代入演算子
&=

//ビットごとのOR代入演算子
|=

//ビットごとのXOR代入演算子
^=

それぞれの代入演算子に記載している「=」の前の演算子の性質を持ち、その演算結果を左にあるオペランドに代入する。という働きになります。

概要

javascriptの代入演算子についてです。
これは読んで字のごとく、変数に値を代入する為の演算子で、
これまでのサンプルで当たり前のように使ってきました。

動作について

代入演算子は「=」と記載し、左のオペランドに対し、右のオペランドを代入します。
左側のオペランドは変数、オブジェクトのプロパティです。
右側のオペランドは任意の値(型も任意)です。

代入時に複数の変数に代入することも可能です。

var test;
var test2;

test = test2 = 10;

上記のようにコードを書くと、変数testとtest2にそれぞれ10が入ります。

概要

論理否定演算子は

!

で表す単項演算子になります。
一つのオペランドに対して演算を行います。
論理否定演算子が返す値はtrueかfalseのどちらかになります。
通常はif文などの条件式について、条件を反転させた結果を判定する場合に使われます。

概要

論理和演算子は、2つのオペンランドのうち、一方または両方がtrueになる場合に式全体でtrueを返す演算子です。

式の評価順について

論理和演算子の式の評価は、左側にあるオペランドを評価し、その結果がtrueの場合には右側のオペランドは評価しません。

この性質を利用して関数などの引数のデフォルト値の設定等に使われる場合があります。

function f (a)
{
    //引数aがnullの場合、変数tに1を代入する(デフォルトとして使用)
    var t = a || 1;
}

ただし上記の例の場合、引数aの値の取り扱い方については、意図しない挙動のプログラムになるので、注意が必要です。
javascriptの値として、文字列、数値の他、引数がnull、undefined、NaN等の場合に注意してプログラムする必要があります。

概要

javascriptの論理演算子についてまとめます。

まずは論理積演算子についてです。

論理積演算子は条件式で「&&」と記述して判定します。
条件式の中で2つのオペランドを記述し、それぞれのオペランドがtrueになる場合に式全体でtrueを返します。

また、どちらかのオペランドがfalseになる場合は、他方がtrueでも式全体ではfalseを返します。

実例

簡単な例を書きます。

var testa = 10;
var testb = 20;

//条件式1
if (testa == 10 && testb == 20) {
    console.log(true);
} else {
    console.log(false);
}
//結果、trueと出力される

var testc = 30;
var testd = 40;

//条件式1
if (testc == 10 && testd == 40) {
    console.log(true);
} else {
    console.log(false);
}
//結果、falseと出力される

上記の場合、条件式1のほうは、if文の中の条件式が2つのオペランドともtrueになるので、式全体でtrueを返します。
また、条件式2のほうは、最初のオペランドがfalseになる為、式全体でもfalseを返します。

javascriptは全ての値に対してtrue/falseの評価をすることができます。

falseに評価されるものはnull、undefined、0、-0、NaN、””(空白文字)等です。

式の評価順について

この論理積演算子を考える時、オペランドの左側から判定されています。
この動きをもう少し詳しく調べると、まず左側のオペランドが判定されて、次に右側のオペランドが判定されます。

左側のオペランドがfalseの場合は、式全体としてfalseをすぐに返し、右側のオペランドは評価されない動きをします。

概要

instanceof演算子について調べます。
instanceof演算子はオブジェクトがクラスのインスタンスかどうかを判定します。
インスタンスの場合はtrueを返します。

比較する2つのオペランドは、左側はオブジェクト、右側はクラスを指定しなければならないです。

左側のオペランドがオブジェクトではない場合はfalseを返します。
右側のオペランドがクラス(関数)ではない場合は例外が発生します。

javascriptのプロトタイプチェーンという考え方が重要になってきますが、それについては別に調べて記事化します。

概要

javascriptのプログラムではあまり見かけない演算子ですが、in演算子についてまとめます。

in演算子は左側の値が右側のオブジェクトのプロパティであればtrueを返します。

演算子の使用上のルール

この演算子を使うには、下記のようなルールがあります。
・左側のオペランドは文字列
・右側のオペランドはオブジェクト

実例1

試しに、次のような例を書いてみます。

//オブジェクト
var testobject = {
	aaa: "test1",
	bbb: "test2",
	ccc: true
};

console.log("aaa" in testobject);
console.log("bbb" in testobject);
console.log("ddd" in testobject);

この場合の結果は、

true
true
false

になります。
オブジェクト「testobject 」に対し、aaaとbbbはプロパティとして存在しますが、dddは存在しない為、falseになります。

実例2

では、オブジェクト中身を変えて、次のような例を試してみます。

//オブジェクト
var testobject2 = [
	10,
	20,
	30
];

console.log("aaa" in testobject2);
console.log(10 in testobject2);
console.log("10" in testobject2);
console.log("11" in testobject2);

この場合の結果は、

false
false
false
false

になりました。
一見すると2つ目の演算結果はtrueになりそうですが、正確には「プロパティが存在するかどうか」が判定基準になるので、全てfalseになりました。

実例3

では、次のような場合はどうなるか、試してみます。

var testobject3 = [10, 11, 12];

console.log("0" in testobject3);
console.log(1 in testobject3);
console.log(3 in testobject3);

この場合の結果は、

true
true
false

になります。
オブジェクトtestobject3は要素の内容だけが書かれていますが、プロパティは明示的に書いていないものの、配列のN番目という判定がされています。
また、2番目の「1」のin演算子については、判定時に文字列の「”1″」として変換されて演算がされるので注意が必要です。

等値演算子についてまとめます。

2つのオペランドを比較し、等しい場合はtrue、等しくない場合はfalseを返します。
等値演算子は同様の演算子として、同値演算子があります。

それぞれの特徴を以下にまとめます。

■等値演算子
・オペランドを比較する際、型変換が行われ値が比較される
・コードは「==」という記述になる
・比較の際、反対の結果を得るには「!=」というコードになる
・オペランドが同じ型の場合は、値が同一かを判定し、等しければtrueを返す
・型が異なる場合は同じ型に変換してから判定する
・どちらか一方がnullの場合、等しいと判定する
・どちらか一方がundefinedの場合、等しいと判定する
・どちらか一方がtrueの場合、1に変換してから比較される
・どちらか一方がfalseの場合、1に変換してから比較される
・どちらか一方がオブジェクトの場合、オブジェクトを基本型に変換して比較される

■同値演算子
・厳密に型まだ考慮して比較される
・型が違う場合は等しくない(false)が返る
・コードは「===」という記述になる
・比較の際、反対の結果を得るには「!==」というコードになる
・オペランドがnull同士の場合、等しいと判定する
・オペランドがundefinedの場合、等しいと判定する
・両方の値が論理値(true)か論理値(false)であれば等しいと判定する
・NaNがオペランドのどちらかにある場合は等しくないと判定する
・NaNがオペランドの両方ある場合も等しくないと判定する
・両方の値が数値の場合で、同じ値である場合は等しいと判定する
・両方の値が数値の場合で、片方が0の場合も等しいと判定する
・両方の値が同じオブジェクトや配列または関数の場合、等しいと判定する
・異なるオブジェクトを参照している場合は等しくないと判定する

関係演算子とは、2つの値の関係を判定し、その判定結果によって真偽(trueまたはfalse)を返します。
関係演算子の返す値は論理値になります。

関係演算子の種類は「等値演算子」「不等演算子」「同値演算子」「比較演算子」「in演算子」「instanceof演算子」等があります。

詳しくは一つ一つブログ記事化していきます。

概要

単項算術演算子は、一つのオペランドに対して処理を行う。

具体的には「+」「-」「++」(インクリメント)「–」(デクリメント)等があります。
全て右結合性があり、演算の優先順位が高く処理されます。

単項+

オペランドを数値に変換し、変換した値を返します。

単項-

オペランドを数値に変換します。
変換結果の符合を反転します。

インクリメント++

オペランドをインクリメントします。
オペランドは「変数」「配列の要素」「オブジェクトプロパティ」等の左辺値である必要があります。

また、他の言語と同様に「前置」と「後置」により処理が変わります。

前置の場合は、オペランドをインクリメントし、インクリメント後の値が評価結果になります。
後置の場合は、オペランドをインクリメントし、インクリメント前の評価結果になります。

デクリメント++

オペランドとして左辺値をとします。
オペランドを数値に変換し、数値から1を減算します。
インクリメントと同様に前置と後置による処理の違いがあります。

前回までの演算子で、四則演算の中で「+演算子」だけはオペランドによって動きが変わるという説明を書きました。

+演算子は、オペランドが数値の場合は加算し、文字列の場合は連結を行います。

簡単な例として

var test = 10 + 20;
console.log(test);

上記の場合は、結果が30と出力され、

var test = "10" + "20";
console.log(test);

上記の場合は、1020と出力されます。

上記の場合の他に、片方のオペランドが文字列で、もう片方のオペランドが数値の場合は、数値のオペランドが文字列に型変換できるオペランドの場合は文字列に変換されて連結されます。

オペランドのどちらかがオブジェクトの場合、基本型値への変換アルゴリズムが使われ、基本型値に変換されます。

基本型へ変換された後、片方のオペランドが文字列の場合は、もう片方のオペランドも文字列へ変換され、連結されます。

それ以外の場合は、両方のオペランドを数値に変換して加算処理されます。

javascriptの算術演算子についてまとめます。
基本的な算術演算子は、乗算、除算、剰余、加算、減算です。
その他は単項演算子、ビット演算子があります。

乗算、除算、剰余、加算、減算の中で、加算演算子の「+」は動作が他の演算子とことなります。
演算時のオペランドの型が数値の場合は加算され、文字列の場合は結合されます。

その他の乗算、除算、剰余、減算については、オペランドを数値として変換し演算を行います。
オペランドが数値に変換できない場合に「NaN値」に変換され、演算結果がNaNになります。

除算演算子はオペランド同士を割ります。

オペランドA / オペランドB

の場合はオペランドAをオペランドBで割ります。
このときに結果は浮動小数点数になります。

オペランドBが、0の場合、エラーにはならず結果は無限大になります。
ブラウザのコンソールで試してみると

Infinity

という結果になります。

剰余演算子の場合は、除算演算子と近いですが、演算結果はオペランドAをオペランドBで割った余りが出力されます。
例えば次の例の場合

var test = 100;
console.log(test % 30);

出力結果は「10」になります。
オペランドが浮動小数点数の場合でも、結果は小数点を含む演算結果になっります。

概要

javacriptの演算子には結合性という重要な考え方があるので、
結合性について試してみます。

演算子には結合の方向があり、左から右に演算を結合する場合と、
反対に右から左に結合する場合あります。

また、同じ優先順位の演算子の場合は、実行順を決定する場合に結合性の順で演算がされます。

例えば減算する演算子「-」の場合、値が3つある場合を試してみます。

var test;
test = 100 - 20 - 10;
console.log(test);

上記の結果は、まず100-20が演算され、その後で80-10が演算されます。
これは演算子の結合性が「左から右に結合している」という仕様に則っている為です。

演算子には結合性の仕様により演算される方向があることに注意が必要です。

評価順序

演算子の評価順については、常に左から右に行われます。
例えば式「test = 100 – 20 – 10;」がある場合、まず評価されるのはtestというオペランドで、
次に100、20、10の順序で評価されていきます。

上記の例は固定の数値ですが、100、20、10の各オペランドが変数や関数の場合は、左から順に右に評価されていきます。

上記の式の場合、右辺に対して括弧をつけることで、演算の順序を変更することは可能です。
演算の順を変えることができても、評価の順は変わらないことに注意が必要です。

javascriptの演算子は他のプログラム言語と同様、演算子に優先順位があります。

演算子の優先順位は優先度が高いものから演算され、優先度の低い演算子は最後に演算されます。

簡単な例を書いてみます。

var test = 10 + 20 * 30;
console.log(test);

上記は結果が610になります。
演算子の優先順位が「+」よりも「*」のほうが高い為です。
これを調整するには「()」を使って優先順位を決めることができます。(括弧のほうが演算の優先順位が高くなる為です)

var test = (10 + 20) * 30;
console.log(test);

上記は結果が900になります。
括弧をつけることで計算式の括弧内が先に演算され、30 * 30が後から演算される為です。

プロパティアクセスと呼び出し式は、全ての演算子より優先順位が高くなります。
演算子の優先順位をコントロールするには、括弧を使って意図した演算になるようにプログラムを書きます。

前回の投稿ではオペランドの数について書きました。
今回はオペランドの型についてまとめます。

オペランドは通常、特定の型を示していて、演算子もまた特定の型を返します。

javascriptの演算子はオペランドの型を解釈して演算します。
例えば

var test = "10" + "20";
console.log(test);

という書き方は、結果「1020」を返します。(ここでは数値として加算されないことを確認)

また、次のように書くと

var test = "50" * "60";
console.log(test);

結果は「3000」を返します。
同じ文字列のオペランド(の型)同士の演算でも、演算子によって型の解釈が決定づけられます。

では先ほどの例を変更して、次のように書いてみます。

var test = 30 + 40;
console.log(test);

結果は「70」になります。
ダブルクォートで囲んでいないオペランドの為、数値として解釈され、なおかつ演算子は加算演算子として解釈されました。
一番最初の例では、ダブルクォートで囲んだ場合は文字列として解釈されるので、演算子としては文字列連結として演算されたことになります。

このようにjavascriptには、オペランドの型によって働きが変わる演算子があります。

「<」演算子などはオペランドの型によって、数値の大小比較をしたり、アルファベット順で比較したり、解釈が動的に変化します。

javascriptの演算子について、まとめます。
具体的な演算子の種類についてはリファレンスを確認することをおすすめします。

演算子はオペランドの数が重要になります。
オペランドとは、被演算子と呼ばれ、数式を構成する要素のうち、演算の対象となる値や変数、定数などを指します。

このオペランドの数が2つ必要な時、二項演算子と呼びます。
たとえば下記の加算演算子や乗算演算子の場合はオペランドが2つです。

console.log(10 + 10);
console.log(20 * 20);

二項演算子とは別に、単項演算子と呼ぶ演算子もあります。
一つのオペランドのみで構成され、演算がされるものです。
例えば下記のようなものです。

var test = 10;
console.log(++test);
console.log(-test);
console.log(!test);
console.log(typeof(test));
delete test;

また、二項演算子、単項演算子の他に三項演算子もあります。
これは様々なプログラムのソースコードを見ていると出てくる場合があります。
演算子だけで書くと「? :」ということになりますが、少しわかりづらいので、簡単な例を書きます。(便宜上、コンソールログに出力しています)

var test = 15;

//三項演算子
console.log(( test > 10 ) ? 'over' : 'under');

上記の場合はtestという変数の値を「?」の前の式で判定し、
真の場合は「:」の前のオペランド、
偽の場合は「:」の後のオペランドとして演算されます。

プログラマや開発プロジェクトによって好みが分かれる書き方ですが、1行でシンプルに書けるメリットがあります。

概要

オブジェクト生成式とは、javascript内で新規のオブジェクトを生成して
オブジェクトのプロパティを初期化します。

サンプルコード

具体的には次のように書きます。

new オブジェクト();

上記の「オブジェクト」と記載している箇所は生成したいオブジェクト名を書きます。

空のオブジェクトを生成してみます。

new Object();

これをコンソールログで出力すると、次のようになります。

console.log(new Object());

//出力結果
Object {  }

サンプルコード(その2)

もう一つ例を挙げて書いてみます。
例えばDateオブジェクトを生成する場合は、次のように書くこともできます。

new Date();

また、括弧を省いて書くことも可能です。

new Date;

こちらも同様にコンソールログに出力してみます。

console.log(new Date());

//上記の出力結果
Date 2018-08-17T16:16:52.405Z

console.log(new Date);

//上記の出力結果
Date 2018-08-17T16:16:52.405Z

どちらの書き方も同じオブジェクト生成がされている為、出力結果は同じになります。

オブジェクト生成時に生成したオブジェクトに関連するコンストラクタの挙動が重要になります。

コンストラクタについては別投稿として、改めて調べて書きます。

概要

呼び出し式とは、あまり聞きなれない名前の式ですが、
javascript内で定義された関数を呼び出す時の式です。

具体的には次のようになります。

//Math.maxという関数を呼び出す
Math.max(10, 20, 30);

//自ら定義したsampleという関数を呼び出す
sample(100);

//テスト用配列を定義
var test = [200, 202, 201];
//配列に対しソート関数を呼び出す
test.sort();

上記の例のように関数を呼び出す際の式のことを呼び出し式と呼びます。。

呼び出し式の注意点

呼び出し式が評価される順番は、まず関数が評価され、次に引数式が評価されます。
関数式が呼び出し不可能な場合は例外になります。

呼び出し式の関数を自ら定義した場合は、return文を使うことで関数内部の値を返すことができます。
このreturn文で返された値が呼び出し式の値となります。
もし、定義した関数の中でreturn文を書かないで関数を呼んだ場合はundefinedになります。

//自ら定義したsampleという関数を呼び出す
function sample2(a)
{
	
}
sample2(100);
//結果を確認する為、コンソールに出力する。結果は「undefined」になる
console.log(sample2(100));

メソッド呼び出しについて

呼び出し式がプロパティアクセス式の場合はメソッドが呼び出されます。
メソッド呼び出しの場合、プロパティアクセスの対象となるオブジェクトや配列がthis引数の値になります。
thisの値は関数本体で利用が可能です。

概要

javascriptのオブジェクトのプロパティにアクセスする方法について、試してみます。

オブジェクトのプロパティ値にアクセスする時、プロパテアクセス式が評価されます。
式が評価されるタイミングで、オブジェクトのプロパティの値か配列の要素として解釈されます。

具体的には「式.識別子」「式[式]」のように書きます。

「式.識別子」の場合は、式がオブジェクト、識別子がプロパティの名前です。

「式[式]」の場合は、式がオブジェクト(配列)になり、括弧で囲った式でプロパティや配列のインデックスを書きます。

オブジェクトのプロパティへアクセスする方法

実際に下記のようなコードを書いて試してみました。

//検証用オブジェクト1
var test = {a:100, b:200};

//オブジェクト内にオブジェクトがある例
var hoge = {c:300, d:{e:400, f:500}};

//オブジェクトプロパティ式
console.log(test.a);
console.log(hoge.d.e);
console.log(hoge.d.f);

//プロパティaにアクセス(このような書き方も動作可能)
console.log(test["a"]);

上記の場合、検証用オブジェクト1というオブジェクトを用意し、
そのオブジェクトに対し、プロパティにアクセスした結果を出力しています。

出力結果は次のようになります。

100
400
500

上記のようにプロパティアクセス式を使う場合は特に問題なく結果が出力されますが、
もしオブジェクトを定義していないものに対してプロパティアクセス式を使った場合、
例外エラーが発生します。

プロパティアクセス式は、まず式を見てから識別子を判別します。

逆に式となるオブジェクトが存在していて、アクセスする要素が無い場合も例外エラーが発生します。

配列の要素へアクセスする方法

オブジェクトとは別に配列にアクセスする場合も試してみます。

配列の要素にアクセスするには括弧を使ってアクセスします。
具体的には以下のように書きます。

//検証用オブジェクト2(配列の場合)
var test2 = [10, 20, 30, 40, [50, 60]];

//配列の2番目の要素にアクセス
console.log(test2[1]);

//配列の5番目の要素の配列の2番目にアクセス
console.log(test2[4][1]);

この場合の結果は次のようになります。

20
60

上記の結果のように、オブジェクト式の後に括弧が連続する場合は、2番目の式を評価して結果を出力します。

要素に他のオブジェクトを持つ場合

下記のように要素内に他の要素を持つオブジェクトに対してプロパティアクセス式を書いた場合について、試してみます。

下記のコードを書いて動作させたところ

//検証用オブジェクト1
var test = {a:100, b:200};

//検証用オブジェクト3(要素に他のオブジェクトを持つ場合)
var test3 = [test, 20, 30, 40, [50, 60]];

//他のオブジェクトのプロパティにアクセス
console.log(test3[0].b);

//他のオブジェクトのプロパティにアクセス(括弧を使用)
console.log(test3[0]["a"]);

出力結果は次のようになります。

200
100

正しくプロパティにアクセスできる場合に値が返り、結果が出力されます。

test3という変数(オブジェクト)に対して1つ目の要素に別オブジェクトがある場合、1つ目の括弧の後に括弧を書いて式を評価します。

上記のように、プロパティにアクセスする際、「.」でアクセスする方法と「[要素名]」でアクセスする方法の2つがあります。

二つのアクセス方法には、一見すると結果に違いはありませんが、
「.」識別子のほうはプロパティ名称が明確にわかっている場合に有効になります。
また、プロパティ名称が予約語の場合や、空白などの場合には「[]」の括弧を使ったプロパティアクセスをします。

javascriptの関数を定義する式のことを関数定義式と呼びます。

関数定義式も関数リテラルと呼ぶこともできます。

これまでに何度もサンプルコードを書いてきましたが、
具体的には、以下のコードのようになります。

var test = function(x) {
	return x * 10;
}

上記の例は無名関数と呼ばれる関数( function(x) の部分)を定義し、変数のtestへ代入しています。

変数のtestは関数として動作します。
例えば test(10) というように呼び出せば100が返ってきます。

上記の関数定義式は一例にすぎず、プログラムの描き方によって関数定義も異なった形で記述します。

概要

前回の投稿は、配列の初期化子について書きましたが、
同様にオブジェクト初期化について調べてみます。

配列の初期化子の書き方と、オブジェクト初期化子の書き方での違いは、
[]
の括弧を使う変わりに、次の中括弧を使います。
{}

サンプル

例えば次のように書きます。

var test = {a:1, b:2}

//呼び出す時は以下のように
console.log(test.a);

オブジェクトリテラルは入れ子にして書くことも可能です。

オブジェクト初期化子の中に式がある場合、初期化子が評価されるタイミングで初期化子の中の式も評価されます。

オブジェクトリテラルのプロパティ名は文字列として解釈されます。