Web Design Leaves

オブジェクトのキーに変数を使う

前述の通り、ドット演算子を使用する場合、プロパティ名（キー）に変数を使用することができません。

以下のように、キーに変数名を入れると展開された変数ではなく、変数名がそのまま入ってしまいます。

var myValue = "値のサンプル";
var myKey = "variable_key";
var myObj = {myKey: myValue};
console.log(myObj);  //Object { myKey: "値のサンプル" } 

キーに変数を使う場合は、以下のように一度オブジェクトを定義して、[] 演算子を使ってキーに変数を指定します。

var myValue = "値のサンプル";
var myKey = "variable_key"
var myObj = {};
myObj[myKey] = myValue;
console.log(myObj);  //Object { variable_key: "値のサンプル"

ES2015(ES6) 以降の場合、以下のように定義する際に [ ] を使ってキーの変数を指定すれば問題なく変数が展開されます。※但し、この方法は IE11 では使えません（エラーになります caniuse ES6）。

var myValue = "値のサンプル";
var myKey = "variable_key";
var myObj = {[myKey]: myValue};
console.log(myObj);  //Object { variable_key: "値のサンプル" }

配列のメソッド

• join(): 配列の全ての要素を文字列に変換し連結
• reverse(): 配列の要素の順番を逆にする
• sort(): 配列の要素をソートする
• concat(): 配列に要素を追加して、新たな配列を生成
• slice() : 配列の一部を切り出した新しい配列（スライス）を返す
• splice() : 配列から要素を削除したり、配列に要素を挿入したり置換する
• push() : 配列の最後に1個または複数の要素を付加
• pop(): 配列の最後の要素を取り除く
• shift() : 先頭にある要素を取り除き、その取り除いた要素を返す
• unshift() : 配列の先頭に1個または複数の要素を付加し、元の要素を後ろにずらす
• toString(): 個々の要素を文字列に変換し、カンマで区切ったリストを出力
• indexOf(): ある値が配列内で最初に見つかった要素のインデックスを返す
• includes(): 特定の要素が配列に含まれているかどうかを真偽値で返す
• filter()：配列の内容を特定の条件で絞り込み、条件に合致する要素から成る新たな配列を返す
• find()：配列の内容を特定の条件で絞り込み、条件に合致する最初の要素を返す（ES6）
• fill()：配列中の開始位置から終了位置までの要素を固定値で設定
• map(): 配列の各要素に対してコールバック関数を呼び出し、結果を含む配列を返す
• forEach(): 配列の各要素に対してコールバック関数を呼び出し実行する
• reduce(): 配列の各要素に対してコールバック関数を実行して単一の結果（累積値）を返す
• for of 文: メソッドではなく制御命令。配列などの iterable オブジェクトに対して反復処理を実行

Array.join()メソッド

配列の全ての要素を文字列に変換し連結するときに使用します。区切り文字を引数に指定することも可能で、指定しない場合はカンマが区切り文字として使われます。

array.join()
array.join(separator)

join() メソッドは、array の各要素を文字列に変換し、 separator で指定された区切り文字を各要素間に挿入しながらそれらの文字列を連結し、その結果の文字列を返します。join() メソッドの逆方向の処理（文字列を配列要素に分割する場合）は、String オブジェクトの split() メソッドを使用します。もし、多数のばらばらなデータから文字列を生成する場合は、すべてのデータを + を使って連結するよりも、それらのデータを 配列に格納してから join() メソッドを利用したほうが、通常高速になります。

引数 separator

配列の要素を区切るために使用する文字あるいは文字列を指定します。 この引数を指定しなかった場合は、カンマが区切り文字として使用されます。 もし、セパレータを挟みたくなければ、引数に空文字を渡します。

戻り値

array の各要素を文字列に変換し、separator で指定された区切り文字を各要素間に挿入して、 それらの文字列を連結したもの。

var a = [1,2,3];
var s1 = a.join();
var s2 = a.join("");
console.log(s1);  //1,2,3
console.log(s2);  //123

Array.reverse()メソッド

配列の要素の順番を逆にするときに使用します。要素を並べ替えて新しい配列を生成するのではなく、既存の配列の中で並べ替えます。

array.reverse()

reverse() メソッドは、配列の要素を逆順に並べ替えるメソッドです。 新たに配列を生成せずに、指定されたarrayの要素を逆順に並べ替えます。 array への参照が複数ある場合、配列要素の新しい順序はすべての参照に反映されます。

戻り値

その配列自身を返す

var a = ['a', 'b', 'c'];
var b = a.reverse();
//aとbはどちらも ['c','b','a']	

Array.sort()メソッド

配列の要素をソートするときに使用します。reverse() メソッド同様新しい配列を生成するのではなく、既存の配列の中でソートするだけです。

array.sort()
array.sort(orderfunc)

引数 orderfunc

ソート順を指示する関数（比較関数）を指定

引数を指定せずに sort() メソッドを呼び出すと、アルファベット順にソートされます（厳密には文字エンコーディングにより順序が決まります）。 各要素は、必要に応じて文字列に変換されて、大小が比較されます。 アルファベット順以外のソート方法を使用したい場合は、比較関数を指定して、2つの値を比較し、両者の大小関係を示す値を返すようにする必要があります。 この比較関数は2つの引数を取り、これらの引数を a と b とすると、以下のようにします。

• 「a が b より小さい」と判定される場合は、ゼロより小さな値を返す。
  その結果、b の前に a が来るように整列する。
• 「a と b が等しい」と判定される場合は、ゼロを返す。
• 「a が b がより大きい」と判定される場合は、ゼロより大きな値を返す。

戻り値

その配列自身を返す

var n = [4, 8, 15, 16, 23, 42];
n.sort();
console.log(n);
//n は [15, 16, 23, 4, 42, 8]　
//数値を正しくソートできないので比較関数を指定する。

n.sort(function(a,b){
  if(a < b)return -1;
  //先頭の引数を2番目の引数より前にする場合,返す値をゼロより小さな値にする
  if(a > b)return 1;
  //先頭の引数を2番目の引数より後ろにする場合,返す値をゼロより大さな値にする
  return 0;
  //２つの値が同じ場合,返す値をゼロする
});
console.log(n);
//[ 4, 8, 15, 16, 23, 42 ]

//上記は以下のように書き換えられる。
n.sort(function(a,b){
  return a < b ? -1 : 1;
})

//または、下記のように簡単に書き換えられる。
n.sort(function(a,b){
  return a-b;
  //a-bの値によりソートされる
});
//a-bが正の値の場合：a（先頭の引数）はb（2番目の引数）の後ろへ
//a-bが負の値の場合：a（先頭の引数）はb（2番目の引数）の前へ

上記の関数は数値をソートしますが、今度は文字列をソートできません。単純な値を持つ配列をソートできる関数を作るには以下のようにします。

var m = ['aa', 'bb', 'a', 4, 8, 15, 16, 23, 42];

m.sort(function(a,b){
  if(a === b){
    return 0;
  }
  if(typeof a === typeof b){
    return a < b ? -1 : 1;
  }
  return typeof a < typeof b ? -1 : 1;
});

console.log(m);
//m は[4, 8, 15, 16, 23, 42, 'a', 'aa', 'bb']

もし大文字小文字の区別をつけたくない場合は、比較関数において実際の比較の前にオペランドを小文字に変換しておきます。

Array.concat()メソッド

配列に要素を追加して、新たな配列を生成します。

array.concat(value,...)

concat() メソッドを使うと、引数の各値を array に連結した新しい配列を返してくれます。 配列は新たに作成されるので、元の配列は影響を受けません。

引数 value,...

array に連結する値(複数可)

戻り値

引数の各値を array の後ろに連結した新しい配列を返します

var a = [1,2,3];

var b = a.concat(4,5);
//bは[1,2,3,4,5]

var c = a.concat([4,5]);
//cは[1,2,3,4,5]

var d = a.concat([4,5],[6,7]);
//dは[1,2,3,4,5,6,7]

var e = a.concat(4,[5,[6,7]]);
//eは[1,2,3,4,5,[6,7]]

var f = a.concat("four", true, false);
//fは[1,2,3,"four",true,false]

Array.slice() メソッド

配列の一部を切り出した新しい配列（スライス）を返します。

array.slice(start,end)

slice() メソッドは、array の一部を切り出した新しい配列を返します。 新しい配列には元の配列の start 番めから end-1 番めの要素が含まれます。 endが指定されない場合は、返される配列には start から配列の最後までの要素がすべて含まれます。 このメソッドは元の配列には影響を与えません。 もし、start の値が array.length と等しいか、より大きかった場合、空の配列が返されます。 配列から切り出した要素を元の配列から取り除きたい場合は、Array.splice() メソッドを使います。

引数 start

切り出す部分の最初のインデックス（最初は0）。 この値が負の場合は、配列の最後から数えたインデックスを表すことになります。 つまり、-1は最後の要素のインデックスを表し、 -2は最後から2番目の要素のインデックスを表します。省略した場合は 0（インデックス 0 から開始）。

引数 end

切り出す部分の最後のインデックス（この要素は含まれない）。 指定されない場合は、start から配列の最後まですべての要素が含まれます。 負の場合は、配列の最後から数えたインデックスを表すことになります。省略した場合は最後 (array.length) までを取り出します。

戻り値

array の start から end までの要素を含んだ新しい配列を返します。

var a = ["A", "B", "C", "D", "E"];

var a1 = a.slice(0,3);  //[ "A", "B", "C" ]
var a2 = a.slice(3);  //[ "D", "E" ]
var a3 = a.slice(1, -1);  //[ "B", "C", "D" ]
var a4 = a.slice(-3, -2);	 //[ "C" ] 

call() を使って slice メソッドを引数なしで呼び出すことで、配列のようなオブジェクトを新しい配列に変換することができます。

以下は配列のようなオブジェクト arguments から新しい配列を生成する関数の例です。

function list_args() {
  return Array.prototype.slice.call(arguments);
}
 console.log(list_args('a','b', 3));  // ["a", "b", 3]  

document.querySelectorAll() はセレクタにマッチする全ての要素の NodeList（配列のようなオブジェクト）を返しますが、以下のようにすれば配列に変換することができます。マッチする要素がない場合は空の配列を返します。

Array.prototype.slice.call(document.querySelectorAll(セレクタ) || []);

以下はクラス foo の要素全てを取得した NodeList を配列に変換して変数 foos に格納して、配列のメソッド forEach を使って要素のテキストを出力する例です。

let foos =  Array.prototype.slice.call(document.querySelectorAll('.foo') || []);

foos.forEach(function(elem) {
  console.log(elem.textContent);
});

以下のように変数に入れずにつなげて記述することもできます。

Array.prototype.slice.call(document.querySelectorAll('.foo') || []).forEach(function(elem) { console.log(elem.textContent); }) ;

Array.splice() メソッド

配列から要素を削除したり、配列に要素を挿入したりする汎用的メソッドです（削除と挿入を同時に実行も可能）。slice() や concat() と異なり、新たな配列を生成しません。

array.splice(start, deleteCount, value, ...)

splice() メソッドは start から0個以上の要素を取り除き、引数で指定された0個以上の値で置き換えます(start も含まれます)。 挿入、削除が行われたインデックスよりも後ろにある配列の要素は、要素が連続して並ぶように適宜移動されます。

引数 start

挿入または削除を開始する位置。

引数 deleteCount

start も含めた削除する要素の数。 省略した場合、splice() は start から配列の最後までのすべての要素を削除します。

引数 value, ...

array の start から始まる場所に挿入したい0個以上の値（要素）。

戻り値

arrayから削除された要素を含んだ配列。

var a = [1,2,3,4,5,6,7,8];
var a1 = a.splice(4);
console.log(a);  //[1,2,3,4]
console.log(a1);  //[5,6,7,8]

var a2 = a.splice(1,2);
console.log(a);  //[1,4]
console.log(a2);  //[2,3]

最初の2つの引数は削除の指定をするものです。その後に引数が指定された場合は、1番目の引数で指定された位置に挿入する要素になります。

var a = ['a', 'b', 'c'];
var r = a.splice(1, 1, 'apple', 'orange');
//a は["a""apple","orange","c"]
//r は ["b"]

要素を削除しない（挿入のみの）場合は2番目の引数（削除する要素の個数）を0にします。

var a = [1,2,3,4,5];
a.splice(2,0,'a','b');	//[]が返され、aは[1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3);	//['a','b']が返され、aは[1,2,[1,2],3,3,4,5]
//splice()メソッドでは concat() と異なり、
//配列要素を展開しないでそのまま（配列そのものを）挿入します。

Array.push() メソッド

配列の最後に1個または複数の要素を付加し、付加した後の配列の長さを返します。

array.push(value, ...)

push() メソッドは引数を順番に array の最後に付け加えます。このメソッドは、新しい配列を作らずに、直接 array を書き換えます。 また、配列は展開されず、そのまま追加されます。 push() メソッドと、対になっている pop() メソッドを使うと、先入れあと出し(FILO)というスタックの機能を提供します。

引数 value,...

arrayの最後に付け加える値(複数可)

戻り値

配列の新しいサイズ

var a = ['a', 'b', 'c'];
var b = ['x', 'y', 'z'];
var c = a.push(b, true);
//a は['a', 'b', 'c',['x', 'y', 'z'], true]
//c は5	

Array.pop() メソッド

配列の最後の要素を取り除き、その要素を返します。

array.pop()

pop() メソッドは array の最後の要素を取り除き、配列の大きさを１つ小さくし、取り除いた要素を返します。pop と push の２つのメソッドを使うと配列をスタックのように利用できます。

戻り値

array の最後の要素。配列が空だった場合は undefined を返す。

var stack = [];
stack.push(1,2);
//stack：[1,2] になり、2（サイズ）が返される

stack.pop();
//stack：[1] になり、2（最後の要素）が返される

stack.push([4,5]);
//stack：[1,[4,5]] になり、2（サイズ）が返される

stack.pop();
//stack：[1] になり、[4,5]（最後の要素）が返される

Array.shift() メソッド

配列の先頭の要素を削除し、削除した要素の値を返し、削除されて空になった場所へ後続の要素をずらします。

array.shift()

戻り値

取り除いた要素（このメソッドを実行する前の先頭の要素）

shift() メソッドは array の先頭にある要素を取り除き、その取り除いた要素を返します。 その際、残った要素すべてを前にずらし、空いた空間を埋めます。 shift() メソッドは新しい配列を生成せずに、直接 array を書き換えます。 shift() メソッドは Array.pop() メソッドに似ていますが、最後の要素ではなく、最初の要素を操作するという点が異なり、 一般的に pop メソッドよりも遅い。

var a = ['a', 'b', 'c'];
var c = a.shift();

console.log(a);  //['b', 'c']
console.log(c);  // a

Array.unshift() メソッド

配列の先頭に1個または複数の要素を付加し、既存の配列要素をより大きいインデックス番号のほうへシフトさせて、 付加した後の配列の長さを返します。

array.unshift(value, ...)

unshift() メソッドは元の要素を後ろにずらして array の先頭に引数を挿入します。unshift() メソッドの最初の引数は、 array のインデックス0の要素になります。そして、2番目の引数はインデックス1の要素になり、3番目以降も同様になります。 unshift() メソッドは新しい配列を生成せずに、直接 array を書き換えます。

引数 value, ...

array の先頭に挿入したい1個以上の値

戻り値

array の新しい大きさ

var a = ['a', 'b', 'c'];
var r = a.unshift('#', '@');

console.log(a);  //['#', '@', 'a', 'b', 'c']
console.log(r);  // 5（サイズ）

toString()メソッド

配列を指定して toString() メソッドを実行すると、必要に応じて各要素の toString() メソッドを呼び出し、 個々の要素を文字列に変換し、カンマで区切ったリストを出力します。（出力されたリストには角括弧（[]）などの配列の区切り記号は含まれません。）引数を指定しないで join() メソッドを呼び出した場合も、同じ文字列が返されます。

[1,3,5].toString();
//'1,3,5'が出力される
["a", "b", "c"].toString();
//'a,b,c'が出力される
[1,[2,'c']].toString()
//'1,2,c'が出力される

indexOf() メソッド

指定された値を配列で検索します。メソッドは、最初に見つかった要素のインデックスを返します。指定された値が見つからない場合は -1 を返します。

var index = array.indexOf(searchElement[, fromIndex]);

searchElement

array 内で検索される値（配列要素）。（必須）

fromIndex

検索の開始位置を示す配列インデックス。 fromIndex を省略すると、検索はインデックス 0 から開始されます（配列全体が検索されます）。

戻り値

searchElement が配列内で最初に見つかった要素のインデックス。searchElement が見つからなかった場合は -1。

引数に与えられた配列要素は === 演算子のような厳密等価で searchElement と比較されます。

var array = [2, 5, 9];
var index = array.indexOf(2);
console.log(index);  // index は 0
index = array.indexOf(7);
console.log(index);  // index は -1  

Array.includes() メソッド

includes() メソッドは引数に指定された特定の要素が配列に含まれているかどうかを真偽値（true または false）で返します。

String（文字列）にも includes() メソッドがあり、文字列に指定した値が含まれているかどうかを真偽値で返し、使い方はほぼ同じです。

文字列や文字を比較する場合、大文字と小文字を区別します。また、false は 0 と同じとはみなされません。

arr.includes(valueToFind[, fromIndex])

valueToFind

array 内で検索する値。（必須）

fromIndex

検索の開始位置を示す配列インデックス。 デフォルトは 0（配列全体が検索されます）。

戻り値

指定した値（valueToFind）が配列に含まれていれば true を、含まれていなければ false を返します。

var array = [1, 2, 3, 'apple', 'banana'];

console.log(array.includes(2)); //true
console.log(array.includes(2,2)); // false
console.log(array.includes('app')); // false
console.log(array.includes('apple')); //true

//文字列
var string = 'JavaScript';
console.log(string.includes('av')); //true
console.log(string.includes('av', 4)); //false
console.log(string.includes('j')); //false

Array.filter() メソッド

filter() メソッドは配列内の全ての要素をコールバック関数で評価し、指定した条件に合致する要素から成る新たな配列を返します。

var newArray = array.filter(callback [, thisArg])

引数 callback

配列の各要素に対して実行するコールバック関数。この関数が true を返した要素が新しい配列として生成され、false を返した要素は除外されます。この関数には以下の三つの引数が与えられます。

• element： 配列内の現在の要素
• index：配列内の現在の要素のインデックス
• array：filter() メソッドを実行している配列

引数 thisArg

callback を実行するときに this として使用するオブジェクト（オプション）

戻り値

コールバック関数が true を返した要素からなる新しい配列。一つの要素も条件に一致しなかった場合は、空の配列が返されます。

以下は 100 未満の値を持つ要素を取り除いた配列を生成する例です。

var array = [120, 78, 9, 273, 33];
var filtered = array.filter(function(value) {
  return value > 100;
});
console.log(filtered);  //Array [ 120, 273 ]   

以下は、コールバック関数を別途定義して、偶数の要素のみを抽出する例です。

var array = [0, 3, 6, 9, 11, 24];
function isEven(value) {
  return value % 2 === 0;
}
var filtered = array.filter(isEven);
console.log(filtered); //Array(3) [ 0, 6, 24 ]

以下は、検索条件で配列の絞り込みをしています。関数 filterNames() には、検索する文字（query）と対象の配列（array）を引数として渡し、検索文字列が含まれている要素の配列を返します。

var fruits = ['apple', 'pineapple', 'orange', 'strawberry', 'blueberry'];
var fish = ['Tuna', 'Yellow Tail', 'Red Snapper', 'Squid'] ;

function filterNames(query, array) {
  return array.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterNames('apple', fruits)); //Array [ "apple", "pineapple" ]
console.log(filterNames('na', fish)); // Array [ "Tuna", "Red Snapper" ]  

以下は、第2引数（thisArg）のオブジェクトを指定する例です。

配列の値とオブジェクトのプロパティ名を比較して、同じ値があれば抽出してその配列を返す例です。

var fruitsArray = ['apple', 'pineapple', 'orange', 'strawberry', 'blueberry'];  //配列
var fruitsObject = {melon:'$10.00', apple:'$3.00', blueberry:'$5.00'};  //オブジェクト

var commonFruits = fruitsArray.filter(function(value){
  //for in 文　オブジェクトに含まれるプロパティを順に取り出す
  for( var prop in this ) {
    //オブジェクトのプロパティ名と配列の値を比較
    if( prop === value ) return value;
  }
}, fruitsObject) // 第2引数に this として使用するオブジェクトを指定

console.log(commonFruits); //Array [ "apple", "blueberry" ]

条件に合致する最初の要素を取得するには ES6 で導入された find() が使えます。

Array.fill() メソッド

fill() メソッドは、配列中の開始位置から終了位置までの要素を固定値で設定します（同じ値で埋めます）。

array.fill(value[, start[, end]])

引数 value

配列に設定する値

引数 start（オプション）

開始する位置。既定値は 0

引数 end（オプション）

終了する位置。既定値は this.length。length は配列の一番大きな添字より1大きい値です。

戻り値

変更された配列（配列自身を変更します）。

var array1 = [1,2,3];
array1.fill(4);
console.log(array1); // [4, 4, 4]

var array2 = ['a', 'b', 'c'];
array2.fill('x', 1);
console.log(array2); // ["a", "x", "x"]

var array3 = [0,1,2,3,4,5];
array3.fill(7, 2, 4);
//終了位置は含まれない
console.log(array3); // [0, 1, 7, 7, 4, 5]

//0 で埋めた5つの要素の配列を生成
var array4 = Array(5).fill(0);
console.log(array4); //  [0, 0, 0, 0, 0]

以下は要素を3つ持つ配列を生成して全てに undefined を設定する例です。

単純に Array(3) としても同じような気がしますが、Array(3) は空のスロットが3つあり、undefinedで 埋められているわけではありません。

var a = Array(3).fill()

console.log(a.length);  //3
console.log(a);   //  [undefined, undefined, undefined]
console.log(a[0]);  //undefined

var b = Array(3);

console.log(b.length);  //3
console.log(b);   //   [empty × 3] 空のスロットが3つ
console.log(b[0]);  //undefined アクセスすると undefined が返る

Array.map() メソッド

map() メソッドは与えられたコールバック関数を配列の順番通りに、各要素に対して呼び出し、その結果から新しい配列を生成します。

var newArray = array.map(callback [, thisArg])

引数 callback

配列の各要素に対して実行するコールバック関数。各要素に対してこの関数を実行して、その結果を新しい配列として返します。この関数には以下の三つの引数が与えられます。

• value：現在処理中の要素の値
• index：現在処理中の要素の配列内におけるインデックス
• array：map() メソッドを実行している配列

引数 thisArg

callback を実行するときに this として使用するオブジェクト（オプション）

戻り値

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列。

以下は、文字列（単語）からなる配列を、コールバック関数でその文字数による新しい配列を作成する例です。

var fruits = ["pineapple","grape","melon", "strawberry"];
var lengths = fruits.map(function(fruit) {
  return fruit.length;
});
console.log(lengths); //Array(4) [ 9, 5, 5, 10 ]

以下は、配列の要素の各文字列を大文字に変換した新しい配列を作成する例です。

var fruits = ['apple', 'grape', 'melon']
var upperCaseArray = fruits.map(function(value) {
  return value.toUpperCase();
});
console.log(upperCaseArray) // Array(3) [ "APPLE", "GRAPE", "MELON" ]

以下は、数値からなる配列をコールバック関数で、その値の２乗の要素の新しい配列を作成する例です。

var numbers = [1,2,3];
var squares = numbers.map(function( value ) {
  //配列の各要素の二乗の計算
  return value * value;
});
console.log(squares);  //Array(3) [ 1, 4, 9 ]

上記を配列の for 文を使って書くと以下のようになり、同じ結果が得られます。

但し、map() を使ったほうが簡単で記述も簡潔になります。また、for 文は結果を返してくれませんが、map() は結果の配列を返してくれます。

var numbers = [1,2,3];
var squares = [];
var value;

for (var i = 0; i < numbers.length; i++){
  value = numbers[i];
  squares.push(value * value);
}
console.log(squares); //Array(3) [ 1, 4, 9 ]

以下は、前述の例をアロー関数（=>）を使って記述した例です。かなり簡潔になります。

var numbers = [1,2,3];
var squares = numbers.map(value => value * value);
console.log(squares);  //Array(3) [ 1, 4, 9 ]

アロー関数とは => (アロー/矢印)を使って関数リテラルを記述します。アロー関数の基本的な書式は以下のようになっています。

(引数,...) => {...関数の本体（処理の記述）...}

以下は、偶数版目の要素（index が奇数の要素）の値を2倍にした配列を作成する例です。index は 0 から始まります。

var result = [1,2,3,4,5].map( function( value, index, array ) {
  //index が奇数の時だけ2倍に（index は0から始まる）
  if( index % 2 === 1 ) {
    return value * 2;
  }else{
    return value;
  }
});
console.log(result);  //Array(5) [ 1, 4, 3, 8, 5 ]

以下は、2 つの配列からオブジェクトの配列を作成する例です。

ES2015 (ES6) 以降（※）では、オブジェクトのキーに変数を入れて展開できるようになっています。その際に、キーは [ ] で囲む必要があります。

var fruits = ['Apple', 'Banana', 'Orange'];
var prices = ['$2.00', '$0.50', '$1.25'];
var fruitPrices = fruits.map(function(value, i){
  //オブジェクトのキーに変数を使う場合は、[ ] で囲む
  return   {[value]: prices[i]};
});
console.log(fruitPrices);
//Array(3) [ {…}, {…}, {…} ]
//Object { Apple: "$2.00" }
//Object { Banana: "$0.50" }
//Object { Orange: "$1.25" }  

※ IE11 は ES2015 (ES6) に対応していません。（caniuse ES6）

そのため、IE11 で上記を実行すると「SCRIPT1028: Expected identifier, string or number」というエラーになります。

IE11 に対応するには、以下のようにします。（参考：オブジェクトのキーに変数を使う）

var fruits = ['Apple', 'Banana', 'Orange'];
var prices = ['$2.00', '$0.50', '$1.25'];
var fruitPrices = fruits.map(function(value, i){
  var obj = {};  //オブジェクトを定義
  obj[value] = prices[i];  //[] 演算子を使ってキーに変数を指定
  return  obj;
});
console.log(fruitPrices);
//Array(3) [ {…}, {…}, {…} ]
//Object { Apple: "$2.00" }
//Object { Banana: "$0.50" }
//Object { Orange: "$1.25" } 

Array.forEach() メソッド

forEach() メソッドは、与えられたコールバック関数（callback）を、配列の各要素に対して一度ずつ実行します。

array.forEach(callback[, thisArg])

引数 callback

配列の各要素に対して昇順で呼び出して実行するコールバック関数。すでに削除されたインデックスや、まだ値が代入されていないインデックスに対しては呼び出されません。この関数には以下の三つの引数が与えられます。

• value：現在処理中の要素の値
• index：現在処理中の要素の配列内におけるインデックス
• array：forEach() メソッドを実行している配列

引数 thisArg

callback を実行するときに this として使用するオブジェクト（オプション）。

戻り値

undefined

forEach() は呼び出された配列を変化させません。（コールバック関数の第3引数を使えば変更することもできます）

for 文に似ていますが、処理を中断する break や continue は使えません（エラーになります）。

以下は、コールバック関数の第1引数を使って、配列の要素の値を出力する例です。

var fruits = ["apple", "melon", "orange", "grape"];

fruits.forEach(function(val) {
  console.log(val);
});
/* 以下が出力されます。*/
//apple
//melon
//orange
//grape 

以下は、前述の例とほぼ同じですが、配列の要素がオブジェクトの場合の例です。値がオブジェクトなので、そのキーを指定して値を取得しています。

var fruits = [
  {name: "apple", price: "$1.00"},
  {name: "melon", price: "$5.00"},
  {name: "orange", price: "$2.00"},
  {name: "grape", price: "$3.00"},
];

fruits.forEach(function(val) {
  console.log(val.name + " : " + val.price);
});
/* 以下が出力されます。*/
//apple : $1.00
//melon : $5.00
//orange : $2.00
//grape : $3.00

以下は、配列 items の要素をコピーして、コピーした配列 copy の要素を出力する例です。

var items = ['item1', 'item2', 'item3'];
var copy = [];

items.forEach(function(item){
  copy.push(item)
});

copy.forEach(function(val){
  console.log(val);
});
/* 以下が出力されます。*/
//item1
//item2
//item3

以下は、偶数のインデックスの場合（奇数の要素の場合）、値を2倍にする例です。この例の場合、コールバックの第3引数（array）を使って、その配列自体の要素を変更しています。（インデックスは0から始まります）

var numbers = [1,2,3,4,5];
numbers.forEach(function(number, index, array) {
  if(index % 2 === 0) {
    number = number * 2;
  }
  array[index] = number;
});

numbers.forEach(function(number) {
  console.log(number);  //元の配列の内容を確認
});
/* 以下が出力されます。*/
//2
//2
//6
//4
//10

Array.reduce() メソッド

reduce() は配列の各要素に対してコールバック関数を実行して単一の結果（累積値）を返します。

array.reduce(callback( accumulator, currentValue, index, array ), initialValue)

引数 callback

配列の各要素に対して実行される関数。この関数には以下の4つの引数が与えられます。

• accumulator：コールバック関数の演算結果を累積する変数のようなもの
• currentValue：現在処理されている配列の要素（の値）
• index：（オプション）現在処理中の要素のインデックス。initialValue が指定された場合は 0 から、そうでない場合は 1 から開始
• array：（オプション）reduce() が呼び出された配列

引数 initialValue

（オプション）accumulator の初期値（コールバック関数の最初の呼び出しで使用する値）。initialValue を省略すると、配列の最初の要素が accumulator の初期値として使用されます。また、空の配列に対して reduce() を呼び出した際に initialValue が指定されていないと TypeError が発生します。

戻り値

accumulator と配列の各要素を順番にコールバック関数へ渡して処理した結果（累積値）。配列やオブジェクトなども可。

以下は reduce() を使って配列の全ての要素を加算した値を返す例です。

var result = [1, 2, 3, 4, 5].reduce(function(accumulator, currentValue, index) {
  return accumulator + currentValue
})

console.log(result);  //15

第2引数の initialValue が省略されているので、コールバック関数の最初の呼び出しでは、accumulator の値は配列の最初の要素 1 が、currentValue は配列の2番めの要素 2 になります。

2回めの呼び出しでは、accumulator には前回の演算 accumulator + currentValue の結果の 3 が、currentValue は配列の3番めの要素 3 になります。

以下は initialValue を指定して、配列の全ての要素を加算した値を返す例です。

var result2 = [1, 2, 3, 4, 5].reduce(function(accumulator, currentValue, index) {
  return accumulator + currentValue
}, 10)

console.log(result2); //25

以下は reduce() を使って渡された配列内の最大値を返す例です。

var max = [7, 6, 23, 5, 1].reduce(function(x, y) {
  return x > y ? x : y;
});

console.log(max); //23

//関数にした場合の例
function my_max(array) {
  return array.reduce(function(x, y) {
    return x > y ? x : y;
  });
}

console.log(my_max([7, 6, 23, 5, 1]));  //23

以下はオブジェクトの配列に含まれた値を加算する例です。各要素の値は arry[n].val で取得できます。

この場合、initialValue を指定しないと最初の要素（オブジェクト）が accumulator の初期値として使用され、数値として正しく処理できないため、第2引数の initialValue（初期値）を指定する必要があります（以下では変数に入れていますが、直接 0 を指定しても同じです）。

var arry = [{val:1}, {val:2}, {val:3}]; //オブジェクトの配列
var initialValue = 0; //初期値を指定

var result = arry.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue.val   //オブジェクトのプロパティ .val を加算
}, initialValue);

console.log(result);  // 6

以下はオブジェクトの配列 memebers からメールアドレス（email）だけの配列を作成する例です。

initialValue（初期値）に空の配列 [ ] を指定しているので1回目の呼び出し（ループ）での accumulator の値は [ ] になります。

コールバック関数では concat() を使って配列に要素を追加しています。

var memebers = [
  { name: 'Foo', email: 'foo@example.com'},
  { name: 'Bar', email: 'bar@example.com'},
  { name: 'Buz', email: 'buz@eexample.com'}
]

var emails = memebers.reduce((accumulator, currentValue) => {
  //concat() で配列に要素を追加
  return accumulator.concat(currentValue.email);
},[])  //initialValue に空の配列を指定

console.log(emails);
// ["foo@example.com", "bar@example.com", "buz@eexample.com"]

for of 文

for of 文は ES6 (ES2015) で導入された制御命令で、配列などの iterable オブジェクトに対して反復処理を実行することができます。

参考：MDN for...of / イテレーターとジェネレーター

以下が構文です。

for (variable of iterable) {
  statement
}

iterable に指定した配列などの要素を1つずつ variable に取り出して処理を繰り返し実行します。

variable

任意の変数（名）。反復処理の際に、iterable の要素の値がこの変数に割り当てられます。variable は const, let, var で宣言することができます。

iterable

反復処理を行う対象の配列などの反復可能なプロパティを持つオブジェクト

以下は配列 array1 の値をコンソールに出力する例です。

var array1 = ['apple', 'banana', 'orange'];

//配列の各要素を反復処理
for (var value of array1) {
  console.log(value);
}

//出力結果
apple
banana
orange

文字列も iterable オブジェクトなので、for of 文を使うことができます。

const bar = 'bar';

//文字列の各要素を反復処理
for (let value of bar) {
  console.log(value);
}

//出力結果
b
a
r

以下は querySelectorAll() で取得した .bar の NodeList の各要素を出力する例です。querySelectorAll() で取得した NodeList も iterable オブジェクトです。

<div class="bar">Div</div>
<h3 class="bar">Heading</h3>
<p class="bar">Paragraph</p>

<script>
//クラス bar の要素（NodeList）を取得
var nodeList =document.querySelectorAll('.bar');

for (var elem of nodeList) {
  console.log(elem);
}
</script>

<!-- 以下が出力結果
<div class="bar">Div</div>
<h3 class="bar">Heading</h3>
<p class="bar">Paragraph</p>
-->

for of 文と for in 文

for of 文は反復処理を行う対象のオブジェクト（iterable オブジェクト）が定義している順序で値を反復処理しますが、for in 文はそのオブジェクトの列挙可能なプロパティのみを順序不定で出力します。

以下は前述の NodeList を for in 文を使って同様の処理を実行した場合です。

<div class="bar">Div</div>
<h3 class="bar">Heading</h3>
<p class="bar">Paragraph</p>

<script>
//クラス bar の要素（NodeList）を取得
var nodeList =document.querySelectorAll('.bar');

//for in 文
for (var elem in nodeList) {
  console.log(elem);
}
</script>

<!-- 出力結果（列挙可能なプロパティが出力される）
0  //値は出力されずインデックスのみ
1
2
length //NodeList のプロパティ
item   //NodeList のメソッド（以下同じ）
entries
forEach
keys
values
-->

グローバルオブジェクト

Global オブジェクトは直接使用されることがなく、new 演算子では作成できませんし、配下のメソッドを呼び出すこともできません。グローバルオブジェクトは、グローバル変数やグローバル関数を管理するためのオブジェクトと言うことができます。

JavaScript インタプリタが起動すると、JavaScript コードを実行する前にグローバルオブジェクトが生成されます。グローバルオブジェクトのプロパティは、グローバル変数になります。言い換えると、グローバル変数を宣言することは、グローバルオブジェクトのプロパティを定義することになります。

グローバル変数・グローバル関数とは、トップレベルの（関数の中ではない）変数・関数のことです。

JavaScript インタプリタはグローバルオブジェクトを初期化し、グローバルオブジェクトのプロパティや関数を参照するようにします。

これらのグローバル変数・グローバル関数は Global.xxx ではなく、単に変数名、関数名を記述して参照することができます。

変数名
関数名（引数）

console.log(isFinite(Infinity));  //false
console.log(parseInt("123xyg"));  //123

グローバル変数・グローバル関数は、自分で定義することができますが、以下のようなデフォルトのグローバル変数・グローバル関数を提供しています。

トップレベルコード（関数の一部ではないコード）では、JavaScript の this キーワードを使ってグローバルオブジェクトを参照できます。

クライアントサイド JavaScript では、グローバルオブジェクトを参照する window という変数が存在します。言い換えると、ブラウザ上では window オブジェクトがグローバルオブジェクトになります。

クライアントサイド JavaScript では、既に window が存在するので必要はありませんが、トップレベルコードの this キーワードがグローバルオブジェクトを参照するので、次のようにすればどんな環境でも変数 global で、グローバルオブジェクトを参照できます。

var global = this;

console.log(global); //Window

Object オブジェクト

Object オブジェクト（Object クラス）は、JavaScript の全てのオブジェクトの基本オブジェクトで、それ自身をインスタンス化できるだけでなく、他のオブジェクトに対してオブジェクトの共通な性質・機能を提供する役割を担っています。（Object クラスは JavaScript の全てのクラスの基底クラスと言えます）

組み込みオブジェクトも、ユーザー定義オブジェクトも、オブジェクトと名前の付くものは全て Object オブジェクトで定義されたプロパティやメソッドを利用することができます。

個々のプロパティやメソッドについては「Object のプロパティとメソッド」を参照ください。

名称と役割は Java の Object クラスに似ていますが、継承の仕組みは Java とは異なり、プロトタイプ継承です。

以下のように Object.prototype オブジェクトに追加したプロパティは、任意のオブジェクトから読み取りアクセス可能になります。但し、これは説明のための例で、実際には影響が広範囲になるためこのようなことはしません。他のプラグインなどと名前の衝突が起きる可能性があります。

Object.prototype.foo = "foo";
var date = new Date();
console.log(date.foo);  //foo
console.log("str".foo);  //foo
console.log((55).foo);  //foo

匿名オブジェクト

Object オブジェクトを直接インスタンス化することで、ユーザーが独自のオブジェクトを定義することができます。

var obj = new Object();
//または
var obj = {}; //オブジェクトリテラル

このようなオブジェクトのことを、独自のオブジェクト名を持たないことから、匿名オブジェクト（無名オブジェクト）と呼ぶことがあります。

オブジェクトの生成やプロパティへのアクセスについては、「オブジェクトの生成」「プロパティへのアクセス」を参照ください。

String オブジェクト

String オブジェクトは、文字列型の値を扱うためのラッパーオブジェクトで、文字列の抽出や検索、加工等を行うための機能を提供します。

以下のように new 演算子で明示的にオブジェクトを生成することができますが、

var str = new String("Hello");

通常はリテラル表現を使って以下のように記述します。（基本データ型を new 演算子でインスタンス化するのは避ける）

var str = "Hello";
//または var str = 'Hello';

String オブジェクトのメソッド

String オブジェクトのメソッドには以下のようなものがあります。

String.indexOf() メソッド

文字列を検索し、その最初の文字の場所（位置）を返します。

string.indexOf(substring)
string.indexOf(substring, start)

引数 substring

string 内で検索するサブストリング。

引数 start

string 内で検索を開始する位置を示す省略可能な整数引数。 有効な値は0（文字列内の先頭の文字）から string.length-1（文字列内の末尾の文字）までの値。 この引数を省略した場合は、文字列内の先頭の文字から検索。

戻り値

string で指定された start 位置から最初に見つけた substring の位置。見つからなかった場合は、-1が返される。

String.indexOf() は、文字列の先頭から終わりまでのサブストリングを検索します。 文字列内の start の位置が指定されない場合は文字列の先頭から開始。 サブストリングが見つかったら、String.indexOf() は文字列で最初に見つかったサブストリングの最初の文字の位置を返します。 文字列内の文字の位置は0から始まる数値。文字列にサブストリングが見つからなければ、String.indexOf() は -1 を返します。

var str = 'JavaScript';
var pos = str.indexOf('a');
console.log(pos);  // 1

pos = str.indexOf('a', 3);
console.log(pos);  //3

pos = str.indexOf('s');
console.log(pos);  // -1（大文字・小文字は区別される）

pos = str.indexOf('S');
console.log(pos); // 4

String.lastIndexOf() メソッド

文字列を後方から検索しその最初の文字の場所（位置）を返します。

string.lastIndexOf(substring)
string.lastIndexOf(substring, start)

引数 substring

string内で検索するサブストリング

引数 start

string 内で検索を開始する位置を示す省略可能な整数引数。 有効な値は0（文字列内の先頭の文字）から string.length-1（文字列内の末尾の文字）までの値。 この引数を省略した場合は、文字列内の末尾の文字から検索。

戻り値

string 内で指定された start 位置から最後に見つけた substring の位置。何も見つからなかった場合は-1が返されます。

var str = 'JavaScript';
var pos = str.lastIndexOf('a');
console.log(pos);  // 3

pos = str.lastIndexOf('a', 1);
console.log(pos);  //1

pos = str.lastIndexOf('i');
console.log(pos);  // 7

pos = str.lastIndexOf('S');
console.log(pos); // 4

String.charAt() メソッド

文字列から n 番めの文字を取得します。

string.charAt(pos)

引数 pos

string から獲得する文字のインデックス

戻り値

string の pos 番めの文字

String.charAt() メソッドは文字列 string の pos 番めの文字を返します。 文字列の先頭文字のインデックスは0です。指定された値が 0 から string.length-1 の範囲にない場合は、空の文字列が返されます。 JavaScript は文字列型以外の文字データ型を持たないので（char 型はないので）、長さ1の文字列が返されます。

var name = 'Thomas';
var initial = name.charAt(0);
console.log(initial); // 'T'

String.slice() メソッド

文字列の一部を抜き出し新しい文字列を生成します。

string.slice(start, end)

引数 start

スライスが開始する文字列のインデックス。 マイナス値の場合は、この引数は文字列の終端からの位置を表す。 つまり、-1は最後の文字を表し、-2は最後から2番目の文字、といった具合。

引数 end

スライスの終端の直後の文字インデックス。 これが指定されないと、スライスには文字列の先頭から終端までのすべての文字が含まれる。 この引数がマイナス値の場合は、文字列の終端からの位置を表す。

戻り値

先頭からのすべての文字を含む新しい文字列（ただし終端の文字は含まない）

slice() メソッドは、文字列のスライスまたはサブストリングを返します。このメソッドは、文字列を変更しません。 文字列メソッドである slice()、substring() そして substr() は、すべて文字列の指定された部分を返します。 slice() メソッドはマイナス値の引数を受け付けるので、substring() メソッドよりも柔軟です。

var text = 'This is a "sample" text.';

var a = text.slice(10);
console.log(a); //"sample" text.

var b = text.slice(0,3);
console.log(b); //Thi

var c = text.slice(-5);
console.log(c); //text.

var d = text.slice(17, 24);
console.log(d); // " text.

String.substring() メソッド

String.substring() メソッドは string 中の指定されたサブストリングを返します。substring() メソッドは、sliceと 同じですが、パラメータに負の値を指定することができません。substring() を使わなければならない理由はないので、 代わりに slice() を使えば良いでしょう。

substring(from, to)

引数 from

string 内で指定されたサブストリングの先頭文字の位置を示す整数。from の値は 0 から string.length-1 までの値でなければなりません。

引数 to

string 内で指定されたサブストリングの最終文字の位置より1だけ大きい整数（省略可）。to の値は 1 から string.length までの値でなければなりません。

戻り値

長さが to-from の新文字列。この新文字列は、string の from から to-1 までの文字で構成されます。

var text = 'This is a "sample" text.';

var a = text.substring(10);
console.log(a); //"sample" text.

var b = text.substring(0,3);
console.log(b); //Thi

var c = text.substring(-5); //負の値は指定不可
console.log(c); //This is a "sample" text.　

var d = text.substring(17, 24);
console.log(d); // " text.

String.substr() メソッド

指定の位置から指定の文字数分だけ抜き出します。

string.substr(start, length)

引数 start

サブストリングの開始位置。この引数がマイナス値の場合、文字列の終端からの位置を示します。つまり、-1は最後の文字を示し、-2は終端から2番目の文字を示します。

引数 length

サブストリングに含まれる文字の数。この引数が省略されると、返されるサブストリングには文字列の先頭から終端までのすべての文字が含まれます。

戻り値

（start が指定する文字を含む）文字列の先頭部分から length 文字までのコピー。length が指定されていない場合は、文字列の終端までのコピー。

substr() メソッドは、文字列のサブストリングを抽出して返します。このメソッドは string を変更しません。 substr() メソッドは、必要なサブストリングを文字位置と length で表します。このメソッドは、substring() や２つの文字位置でサブストリングを指定する slice() の代替として利用できます。

var text = 'This is a "sample" text.';

var a = text.substr(10);
console.log(a); //"sample" text.

var b = text.substr(0,3);
console.log(b); //Thi

var c = text.substr(-5); //
console.log(c); //text.　

var d = text.substr(17, 4);
console.log(d); // " te

String.split() メソッド

指定された separator で文字列を分割し、サブストリングの配列を返します。

string.split(separator, limit);

引数 separator

string を分割する文字、文字列または正規表現。区切り文字を指定しなかった場合は、要素が１つだけで、 その要素が元の文字列のままという配列が返されます。また、 separator に空文字("")を指定した場合、生成される配列は 文字列を1文字ずつ分解したものなります。

引数 limit

最大いくつの部分文字列に分割するかを指定。省略可能。

戻り値

string をs eparator で分割したサブストリングの配列

split() メソッドは指定された文字列を分割し、サブストリングの配列を返します。 指定された separator を検出するたびに、そこで文字列を分割しサブストリングを作成します。区切り文字（文字列）はサブストリングには含まれません。 g フラグは無視されます。 String.split( )メソッドの逆の操作をするのは、Array.join() メソッドです。

var digits = '0123456789';
var a = digits.split('', 5);
console.log(a); //['0', '1', '2', '3', '4']

var ip = '192.168.3.1';
var b = ip.split('.');
console.log(b); // ['192', '168', '3', '1']

var c = '|a|b|c|'.split('|');
console.log(c); //['', 'a', 'b', 'c', '']

var text = 'Java, 	PHP   ,C++';
var d = text.split(/\s*,\s*/);
console.log(d); //['Java', 'PHP', 'C++'];

//但し、キャプチャグループ由来の文字列は生成される配列に含まれるので注意。
var text = 'Java, 	PHP   ,C++';
var e = text.split(/\s*(,)\s*/);
console.log(e); //['Java', ',',  'PHP',  ',', 'C++'];

String.toLowerCase() メソッド

文字列を小文字に変換して、その結果を新しい文字（コピー）として返します。

string.toLowerCase()

戻り値

すべての大文字を小文字に変換したstringのコピー

var string = "JavaScript and PHP";
console.log(string.toLowerCase()); //javascript and php

String.toUpperCase() メソッド

文字列を大文字に変換して、その結果を新しい文字（コピー）として返します。

string.toUpperCase()

戻り値

すべての小文字を大文字に変換したstringのコピー

var string = "JavaScript and PHP";
console.log(string.toUpperCase()); //JAVASCRIPT AND PHP

String.charCodeAt() メソッド

指定した位置の文字コードを取得します。

string.charCodeAt(pos)

引数 pos

エンコーディングが返される文字のインデックス。

戻り値

string 内の pos 番目の文字の Unicode エンコーディング。このリターン値は 0 から 65535 までの16ビットの整数。

charCodeAt() メソッドは、文字そのものを返す charAt() と違って、特定の場所の文字エンコーディング（エンコードの値）を整数で返します。 Unicode エンコーディングから文字列を作成する方法については、String.fromCharCode() を参照。

var name = 'Thomas';
var initial = name.charCodeAt(0);

console.log(initial); //84
console.log("日本語".charCodeAt(2)); //35486

var str = "日本語";
var cc = "";
for(var i = 0; i < str.length; i ++) {
  if(i == str.length -1) {
    cc += str.charCodeAt(i);
  }else{
    cc += str.charCodeAt(i) + ",";
  }
}
console.log(cc);  //26085,26412,35486

String.fromCharCode()メソッド

文字コードの並びから文字列を作成する静的なメソッド

String.fromCharCode(c1, c2, ...)

引数 c1, c2, ...

生成する文字列の文字の Unicode エンコーディングを表す0以上の整数。

戻り値

指定の文字を含む新しい文字列。

この静的なメソッドによって、文字個別の Unicode エンコーディングの数値を指定して新しい文字列を生成することがでます。 静的なメソッドである fromCharCode() は、String() コンストラクタのプロパティであり、文字列や String オブジェクトのメソッドではありません。 逆に String.charCodeAt() は、文字列の各文字のエンコーディングの取得を可能にするインスタンスメソッドです。

var s = String.fromCharCode(104, 101, 108, 108, 111);
console.log(s); //hello

console.log(String.fromCharCode(26085,26412,35486));  //日本語

String.anchor()メソッド

HTMLアンカーを文字列に追加します。

string.anchor(name)

引数 name

HTML<a>タグの name 属性の値。生成するアンカーの名前になります。

戻り値

HTMLの<a name="name">タグと</a>タグで囲まれた文字列のコピー。

var str = "some strings";
console.log(str.anchor("test"));
//<a name="test">some strings</a>

String.link() メソッド

文字列へハイパーテキストリンクを追加します。

string.link(href)

引数 href

文字列に追加するハイパーテキストのリンク先を示すURL。この文字列引数は、HTMLの<a>タグの href 属性になります。

戻り値

<a href="href">と</a>で囲まれた string のコピー。

var str = "Google";
console.log(str.link("http://google.com"));
//<a href="http://google.com">Google</a> 

String.sub()メソッド

<sub>で表された添え字にします。

string.sub()

戻り値

_とで囲まれた string のコピー。

var str = "Google";
console.log(str.sub());
//<sub>Google</sub>

String.sup()メソッド　

文字列を<sup>を使ってスーパースクリプトにします。

string.sup()

戻り値

^とタグで囲まれた string のコピー。

var str = "Google";
console.log(str.sup());
//<sup>Google</sup>

String.concat() メソッド

複数の文字列を連結し、新しい文字列を返します。

string.concat(value, ...) 

引数 value, ...

文字列に連結する１つまたは複数の値。

戻り値

引数を連結した新しい文字列。

文字列の連結は + 演算子を使ったほうが便利なので、このメソッドはほとんど使われません。 concat()メソッドは、必要に応じて引数をそれぞれ文字列に変換して、順番に文字列の終端に追加し、その結果の連結した文字を返します。 文字列そのものは変更されません。

var str = 'J'.concat('a', 'va');
console.log(str); //Java

String.length プロパティ

文字列の長さ

string.length

String.length プロパティは、指定された string の文字数を示す整数です。文字列 string の最後の文字のインデックスは、string.length-1 になります。

console.log("JavaScript".length); //10

String.trim() メソッド

trim() メソッドは、文字列の両端の空白を削除します。この空白には、空白文字（スペースやタブ、ノーブレークスペースなど）とすべての改行文字（LF や CR など）を含みます。（Javascript1.8.1より実装）

string.trim()

戻り値

呼び出し元の文字列の両端から空白を取り除いた新しい文字列。

trim() メソッドは両端の空白を取り除いた文字列を返します。trim() はその文字列自身の値には影響を与えません。

var str = '   foo  ';
console.log(str.trim()); // 'foo'

ブラウザがこのメソッドを実装していない場合は、正規表現を使って以下のようにすることもできます。（行頭の一回以上連続する空白文字、または行末の一回以上連続する空白文字を空文字に置き換えます）

string.replace(/^\s+|\s+$/g,'');

jQuery では $.trim() メソッドが用意されています。

Number オブジェクト

Number オブジェクトは、数値型（number）の値を扱うためのラッパーオブジェクトです。数値の整形の機能や最大値・最小値など特別な値を表す読み取り専用のプロパティ（定数）があります。

Number オブジェクトは、以下のように new 演算子で明示的に生成することもできますが、

var num = new Number(1234);

通常はリテラル表現を使って以下のように記述します。（基本データ型を new 演算子でインスタンス化するのは避ける）

var num = 1234;

以下は、Number オブジェクトで利用可能なメンバ（プロパティ・メソッド）です。

Number.toExponential() メソッド

数値を指数表現で文字列に変換します。

ｎumber.toExponential(fractionDigits)

引数 fractionDigits

小数点以下の桁数を指定するパラメータで、0から 20の数値で指定でき、省略可能。

戻り値

指数表現に変換された文字列

console.log(Math.PI);  //Math.PI は円周率
//3.141592653589793（数値）

console.log(Math.PI.toExponential());
//3.141592653589793e+0（文字列）
console.log(Math.PI.toExponential(0));
//3e+0
console.log(Math.PI.toExponential(2));
//3.14e+0
console.log(Math.PI.toExponential(7));
//3.1415927e+0
console.log(Math.PI.toExponential(20));
//3.14159265358979311600e+0   

Number.toFixed() メソッド

数値を小数点表示で文字列に変換します（固定小数点表記を用いてフォーマット）。値は四捨五入されます。

number.toFixed(fractionDigits)

引数 fractionDigits

小数点以下の桁数を指定するパラメータで、0から 20の数値で指定でき、省略可能。

戻り値

変換された文字列

console.log(Math.PI);  //Math.PI は円周率
//3.141592653589793（数値）

console.log(Math.PI.toFixed());
//3（文字列）
console.log(Math.PI.toFixed(0));
//3
console.log(Math.PI.toFixed(2));
//3.14
console.log(Math.PI.toFixed(7));
//3.1415927
console.log(Math.PI.toFixed(20));
//3.14159265358979311600

console.log(1.26.toFixed(1));
//1.3
console.log(1.24.toFixed(1));
//1.2

Number.toPrecision() メソッド

指定された精度（桁数）で表した文字列を返します。値は四捨五入されます。

number.toPrecision(precision)

引数 precision

有効桁数を指定するパラメータで、1から21までの数値で指定できます。

戻り値

変換された文字列

console.log(Math.PI);  //Math.PI は円周率
//3.141592653589793（数値）

console.log(Math.PI.toPrecision());
//3.141592653589793（文字列）

console.log(Math.PI.toPrecision(2));
//3.1（2桁）
console.log(Math.PI.toPrecision(7));
//3.141593（7桁）
console.log(Math.PI.toPrecision(20));
//3.1415926535897931160（20桁）

console.log(1.26.toPrecision(2));
//1.3
console.log(1.24.toPrecision(2));
//1.2

Number.toString() メソッド

数値から文字列（n 進数の値）への変換

number.toString(radix)

引数 radix

省略可能な引数。数値の変換で使用する底。2から36までの整数を指定。 この引数を指定しなかった場合は、10（進数）と見なされます。 このパラメータは、整数を変換する際に使われるのが一般的ですが、整数以外でも利用可能です。

戻り値

指定された数値に相当する文字列

Number オブジェクトの toString() メソッドは、Number オブジェクトを、指定された radix の数値に相当する文字列に変換します。 radix を指定しなかった場合は、10（進数）と見なされます。

var num = 255;

console.log(num.toString());
//255
console.log(num.toString(2));
//11111111
console.log(num.toString(8));
//377
console.log(num.toString(16));
//ff

Number.NaN

Number.NaN は、何らかの演算の結果や関数の実行結果が数値以外の値（Not-a-Numberの略）になったという意味を表す特殊な値です。parseInt() や parseFloat() から NaN が返された場合、これは指定された文字列の解析に失敗したことを意味します。通常数値を返す何らかの関数でエラーが発生したときに、エラーの発生を通知するために Number.NaN が使われます。

JavaScript は Number.NaN を NaN として出力します。NaN はすべての数値と等しくならないため、NaN であるかどうかを調べる場合は、isNaN() 関数を使用します。

Math オブジェクト

Math オブジェクトは数学演算の機能を提供します。

Math オブジェクトが提供するメンバは、全て静的メソッド・プロパティになります。以下の形式で Math オブジェクトが提供するメンバにアクセスします。

Math.プロパティ名
Math.メソッド名（引数）

また、Math オブジェクトは new 演算子でインスタンス化することはできません。

以下は Math オブジェクトで利用可能なメンバの一部です。

Math.random()

0 以上 1 未満の範囲で疑似乱数を返します。

var rand = Math.random();

0以上10未満のランダムな整数（0～9）を取得する例。最小値が 0 で最大値だけ指定する場合は、最大値より1多い値を指定します。

var rand = Math.floor( Math.random() * 10 );

min から max までの整数の乱数を返す関数の例

function getRandom(min, max) {
  return Math.floor( Math.random() * (max - min + 1) ) + min;
}

重複のない整数の乱数を生成して配列に格納して返す関数の例。この関数は引数 count の数だけ乱数を発生させます。

function generate_randomx(count) {
  //生成した乱数を格納する配列を初期化
  var generated = new Array();
  //生成した乱数を格納している配列の長さ（生成した乱数の数）
  var generatedCount = generated.length;
  //パラメータ count の数だけ Math.random()で乱数を発生
  for(var i = 0 ; i < count; i++){
    var candidate = Math.floor(Math.random() * count);
    //今まで生成された乱数と同じ場合は再度乱数を発生
    for(var j = 0; j < generatedCount; j++) {
      if(candidate == generated[j]){
        candidate = Math.floor(Math.random() * count);
        j= -1;
      }
    }
    generated[i] = candidate;
    generatedCount++;
  }
  return generated;
}

console.log(generate_randomx(10));
//例 Array [0,2,9,6,3,5,4,7,1,8 ]

浮動小数点数型の誤差

JavaScript で小数の計算をすると誤差が発生することがあります。

console.log(0.1 + 0.2);
//0.30000000000000004

この誤差は10進数の「小数」を2進数に正しく変換できないために発生するようです。

この問題を回避するには以下のような方法があるようです。

• bignumber.js や math.js などの「数値計算ライブラリ」を使用
• 浮動小数点を10の累乗をかけて整数にして計算し、その値を10の累乗で割って浮動小数点数型に戻す
• 必要な桁数の位置で四捨五入する

以下は回避策の使用例です。

var val1 = 1.2345  - 0.5;
console.log(val1);
//0.7344999999999999

//10の累乗をかけて整数に
var val2 = (1.2345 * 10 *10 *10 *10 - 0.5 * 10 *10 *10 *10) / (10 *10 *10 *10);
console.log(val2);
//0.7345

//10000をかけて整数に
var val3 = (1.2345 * 10000 - 0.5 * 10000) / 10000;
console.log(val3);
//0.7345

// val1 を toPrecision で（四捨五入）有効桁数4桁の文字列にして、parseFloatで再度数値に変換
console.log(parseFloat(val1.toPrecision(4)));
//0.7345

// val1 を toFixed で（四捨五入）小数点数以下4桁の文字列にして、parseFloatで再度数値に変換
console.log(parseFloat(val1.toFixed(4)));
//0.7345 

Date オブジェクト

Date オブジェクトにはリテラル表現がないので、オブジェクトの生成には必ずコンストラクタを使用します。Date オブジェクトを生成するには、次の４つの方法があります。

new Date();
new Date(value);
new Date(datestring);
new Date(year, month, day, hours, minutes, seconds, ms);

引数を指定しなかった場合は、現在の日付と時刻で Date オブジェクトが生成されます。

数字の引数(value)を１つだけ指定した場合、引数で指定した数字（1970年1月1日0:00 UTC からのミリ秒数を表す整数値）が新しいオブジェクトの時間(ミリ秒)になります。この時間は、getTime()メソッドが返して来る時間です。

日付を表す文字列の引数(datestring)を１つだけ指定した場合、引数で指定した日付と時刻が新しいオブジェクトの日付時刻になります。このときの引数は、Date.parse()メソッドで変換できる形式でなければなりません。但し、ブラウザごとに動作が異なり一貫性がないため、Date コンストラクタで日付文字列を解釈しないように推奨されています。

4つ目の場合は、2個から7個までの引数を取ることができます。year と month 以外はオプションです。

Date を複数の引数を伴ってコンストラクタとして呼び出された場合、値が範囲より大きくても (month 値に 13 を与えたり、minute 値に 90 を与える等)、調整された値になります。つまり、new Date(2016, 13, 1) は、new Date(2017, 1, 1) と等しくなるように調整され、両者とも 2017-02-01 の日付を生成します (month は 0 を起点とします)。

現在の日付の設定

引数なしで Date オブジェクトのインスタンスを作成すると、年、月、日、時、分、秒、およびミリ秒を含む現在の日付と時刻を表す値が返されます。

以下は日付をインスタンス化して mm/dd/yyyy の形式で表示する方法の例です。

var date = new Date();

var month = date.getMonth() + 1;
// getMonth() 「月」(0-11) を返す
var day = date.getDate();
var year = date.getFullYear()

console.log(month + "/" + day + "/" + year);   

特定の日付の設定

コンストラクターに日付文字列を渡すことによって、特定の日付を設定できます。この文字列は Date.parse() メソッドで変換できる形式でなければなりません。

var date = new Date('9/7/1982');
console.log(date);
//Date 1982-09-07T04:00:00.000Z
//"Z" は UTC 時刻を表します。 

コンストラクターに「年、月、日、時間、分、秒、ミリ秒」を渡しても特定の日付を設定できます。月は1月を 0 とし、12月を 11 とする整数で指定します。基点が0であることに注意。

var date = new Date(1982, 8, 7, 18, 33, 40);
console.log(date);
//Date 1982-09-07T22:33:40.000Z

var date2 = new Date(1982, 8);
console.log(date2);
//Date 1982-09-01T04:00:00.000Z

UTC 協定世界時

Universal Time Coordinated の略で協定世界時と訳されます。原子時計を元に人工的に調整しています。GMT グリニッジ標準時とほぼ同じ。

// 現在のタイムスタンプを取得
const now = Date.now();
console.log(now); //1674000197707

// Dateオブジェクトを使って現在の日付を取得
const nowDate = Date(Date.now());
console.log(nowDate) //Wed Jan 18 2013 09:03:17 GMT+0900 (日本標準時)

// 現在のタイムスタンプを取得
const now1 = Date.now();
const now2 = new Date().getTime();

console.log(now1);  //1674000708657
console.log(now2);  //1674000708657
console.log(now1===now2);  //true

日付と時刻の計算

日、月、および年の加算と除算

Date オブジェクトの getXXX メソッドと setXXX メソッドを使用して、特定の日付と時刻を設定することができます。

以下は日付を前日の日付に設定する例です。

var date = new Date("1/1/2000");
var dayOfMonth =date.getDate();
date.setDate(dayOfMonth - 1);

console.log(date);
//Date 1999-12-31T05:00:00.000Z

以下のように記述することもできます。

var date = new Date("1/1/2000");
date.setDate(date.getDate() - 1);

特定の要素に対する加算・減算の結果が有効範囲を超えてしまっても、Date オブジェクトは正しい日付に自動的に換算してくれます。この性質を利用すると、「来月の0日目」は Date オブジェクトでは「今月の最終日」となるので、その月の最終日を簡単に求めることができます。

var date = new Date(2017, 2, 3);
console.log(date.toLocaleString());
//2017/3/3 0:00:00

date.setMonth(date.getMonth() + 1);
date.setDate(0);

console.log(date.toLocaleString());
//2017/3/31 0:00:00

以下は、翌月の最初の日から 1 日を減算することで日付を月の最後の日に設定する例です。

var date = new Date("5/1/2015")
date.setMonth(date.getMonth() + 1);
date.setDate (date.getDate() - 1);

console.log(date.toLocaleString());
//2015/5/31 0:00:00

曜日の操作

getDay メソッドは、0 (日曜日) ～ 6 (土曜日) の数値として曜日を取得します。（getDate メソッドは、1～31 の数値として日付を取得）

米国の Daylight Saving Time（夏時間）は3月の第2日曜日の2:00am から始まりますが、以下はその年の夏時間の始まる日付を取得する例です。

var date = new Date();
date.setHours(2, 0, 0, 0);

//3月1日に設定します
date.setDate(1);
date.setMonth(2);

//日曜日を探します
//設定されている日が日曜日でない場合は、日付を１ずつ増やします
var sunday = 0;
while(date.getDay() != sunday) {
    date.setDate(date.getDate() + 1);
}

//第2日曜日なので日付を1週間（7日）増やします
date.setDate(date.getDate() + 7);

console.log(date.toLocaleString());
//2017/3/12 1:00:00 

以下は、年と月を渡すと、その月の最初の金曜日の日付を返す関数の例です。

function get1stFriday(year, month) {
  var date = new Date(year, month-1);
  date.setHours(0, 0, 0, 0);
  var sunday = 5;
  while(date.getDay() != sunday) {
      date.setDate(date.getDate() + 1);
  }
  return date.toLocaleString();
}

console.log(get1stFriday(2017,3));
//2017/3/3 0:00:00 

経過時間（日付・時刻の差分）の計算

経過時間を計算するためには、getTime メソッドを使用して開始時間と終了時間を設定し、差分を求めます。getTime メソッドは、経過ミリ秒を返します。

以下は2017年1月1日から現在まで何日が経過しているかを求める例です。ミリ秒数を日数に変換するには、値を 86,400,000 (1000 ミリ秒 x 60 秒 x 60 分 x 24 時間) で除算します。

var date1 = new Date(2017,0,1);
var date2 = new Date();

var diff_msec = date2.getTime() - date1.getTime();
var diff_days = Math.floor(diff_msec/(1000 * 60 * 60 * 24));
console.log(diff_days);

年齢の計算

現在の年から誕生年を減算し、現在の年の誕生日がまだ来ていない場合はさらに 1 を減算します。

var birthday = new Date("9/7/1982");
var today = new Date();
var age = today.getFullYear() - birthday.getFullYear();

//誕生日の年を今年に設定します
birthday.setFullYear(today.getFullYear());

//今日の日付と比較して誕生日がまだきていない場合は１を引きます
if (today < birthday) {
  age--;
}
console.log(age);

//以下は上記を関数にした例です。
function getAge(year, month, day) {
  var birthday = new Date(year, month, day);
  var today = new Date();
  var age = today.getFullYear() - birthday.getFullYear();
  birthday.setFullYear(today.getFullYear());
  if (today < birthday) {
    age--;
  }
  return age;
}
console.log(getAge(1982, 9, 7));

また、年齢は以下の方法でも取得できます。

(今日の日付 - 誕生日の日付)/10000
//小数点以下切捨て

上記を利用した年齢を取得する関数の例です。getMonth() メソッドの返す値は 0-11 なので取得した値に1を加えています。

function getAge(year, month, day) {
  var birthday = year * 10000 + month * 100  + day;
  var date = new Date();
  today = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
  var age = Math.floor((today　- birthday)/10000);
  return age;
}
console.log(getAge(1982, 9, 7));    

以下は、設立年月日から現在何年経過しているかを求める関数の例です。前述の年齢を求める関数とほぼ同じですが、引数には8桁の年月日の数値を取ります。

function getYears(establish_date) {
  var today = new Date();
  today = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
  return (Math.floor((today - establish_date) / 10000));
}

console.log(getYears(19820907));

日付の比較

JavaScript の日付を比較するときに、演算子の両側の日付が同じオブジェクトを参照している場合にだけ == 演算子が true を返します。 そのため、2 つの別々の Date オブジェクトが同じ日付に設定されている場合、date1 == date2 は false を返します。 また、時刻なしで日付だけで設定された Date オブジェクトは、その日付の午前 0 時に初期化されます。

var date1 = new Date(2017, 3, 4);
var date2 = new Date(2017, 3, 4);
console.log(date1 == date2);  //false
console.log(date1.getTime() == date2.getTime());  //true

引数 /Arguments オブジェクト

関数の引数

JavaScript は引数のデータ型をチェックしないので引数のデータ型を知りたい場合は、typeof 演算子を使って自分でチェックする必要があります。必要に応じて、引数の型が間違っている場合には例外をスローするようにします。（参考：例外処理）

var square = function(x){
  if(typeof x !== 'number'){
    throw new Error("引数は数値でなければなりません");
  }
  return x * x;
}

try {
  square("three");
} catch(e) {
  document.writeln ("Error Message: " + e.message);
} 

また JavaScript は引数の個数もチェックしません。必要な個数より多かった場合、余分な値は無視され、少なかった場合はその部分の値は未定義値とみなされます。

var square = function(x){
  return x * x;
}

console.log(square());    //NaN（乗算しているので NaN）
console.log(square(3));   //9
console.log(square(3,7)); //9（7は無視される）

但し、多かった引数は切り捨てられるわけではなく、内部的には「引数情報」の一つとして保持され後から利用できる状態になっています。この「引数情報」を管理するのが Argument オブジェクトで、関数を定義する本体部分でのみ利用できる特別なオブジェクトです。

省略可能な引数

引数の数をチェックしないということは、JavaScript では全ての引数を省略可能であるということになります。但し多くの場合、引数が省略されると正しく動作しないことになります。

そこで、引数が省略された場合（もしくは null/undefined が指定された場合）に、省略された引数に適切なデフォルト値が設定されるようにする必要があります。

また、省略可能な引数を持つ関数を定義する場合、省略可能な引数は引数リストの最後に記述する必要があります。

以下は第1引数にオブジェクトを、第2引数に配列を受け取り、オブジェクトのプロパティ名を指定された配列に格納する関数の例です。第2引数が省略された場合、空の配列を生成するようにしています。

var o1 = {x:0, y:1, z:2};
var o2 = {a:3, b:4};

function copyPropNamesToArray(obj, arry){
  //未定義値またはnullの場合は、空の配列を生成。
  arry = arry || [];	//if(!arry) arry = []; と同じ

  for(var prop in obj) arry.push(prop);
  return arry;
}

var result = copyPropNamesToArray(o1);	//引数を省略
document.write(result, "<br>");	//x,y,zと表示

result = copyPropNamesToArray(o2, result);
document.write(result);	//x,y,z,a,bと表示

Arguments オブジェクト

arguments は Arguments オブジェクトを参照する特別なプロパティで、関数呼び出しのタイミングで生成され、呼び出し元から与えられた引数の値を保持します。この arguments プロパティを利用することで実際に与えられた引数の数などをチェックすることができます。

• 関数に渡された引数値は arguments[] 配列の要素に格納され、数値インデックスで参照できます。
• Arguments オブジェクトには callee プロパティも存在します。
• Arguments オブジェクトは「配列のような」オブジェクトです。（※）
• 呼び出し時に渡された引数の個数は arguments.length で参照できます。

※ arguments は本物の配列ではなく、「配列のような」オブジェクトです。arguments には length プロパティは存在しますが、 配列のメソッドはいずれも使うことができません。

以下の関数 square は、与えられた引数が１つでない場合に例外をスローするようにしています。arguments.length は実際に関数に渡された引数の個数を表します。

var square = function(x){
  if(arguments.length != 1) {
    throw new Error("引数の数が間違っています： " + arguments.length);
  }
  return x * x;
}

try {
  square(3, 5);
}catch(e) {
  alert(e.message);
}

上記では、単に引数の個数をチェックしているだけですが、引数のデータの型や値の有効範囲などの妥当性をチェックすることもできます。

可変長引数の関数

可変長引数の関数とは、予め引数の個数が決まっていない関数のことです。arguments を利用することで可変長引数の関数を定義することができます。

以下は任意個の引数を受け取って最大の引数値を返す関数の例です。関数に渡された引数値は arguments[] 配列の要素に格納され、数値インデックスで参照できます。

arguments から i 番目の要素を取り出すには、arguments[i] のように記述します。

function max(){
  var m = Number.NEGATIVE_INFINITY;
  for(var i=0; i<arguments.length; i++){
    if(arguments[i] > m) m = arguments[i];
  }
  return m;
}
document.write(max(20, 9999, 108, 333333,77)); //333333と表示

以下は引数に与えられた数値の合計する関数の例です。この例では isNaN を使って取得した要素が数値であるかを確認して、数値でない場合（isNaN が true を返す場合）には例外をスローしています。

function sum() {
  var result = 0;
  for(var i = 0; i < arguments.length; i++) {
    var val = arguments[i];
    if(isNaN(val)) {
      throw new Error("値が数値ではありません： " + val);
    }
    result += val;
  }
  return result;
}

try {
  document.write(sum(1,9,15,87));  //112
}catch(e) {
  alert(e.message);
}

callee プロパティ

Arguments オブジェクトには配列要素の他に callee プロパティ(arguments.callee)が定義されています。callee プロパティは現在実行中の関数を参照します。

また、callee プロパティは呼び出された関数そのものへの参照を取得できます。this キーワードは現在実行している関数を参照するものではないので、 関数本体の内部でその関数を参照するには callee プロパティを使用します。

callee プロパティを利用すれば、再帰呼び出しの処理を簡単に記述できます。

以下は与えられた数値 n の階乗を求める関数の例です。

function factorial(n){
  if(n <= 1) return 1;
  return n * arguments.callee(n - 1);
  //return n * factorial(n - 1); でも同じ結果
}

console.log(factorial(5));  //120

return n * arguments.callee(n - 1) の代わりに、return n * factorial(n - 1) としても同じ結果になりますが、関数名（変数名）が変更された場合本体の記述も修正しなければなりません。

また、無名（匿名）関数として記述した場合には、再帰呼び出しするための関数名がないので、callee プロパティを使用する必要があります。

//再帰的に呼び出す無名関数の例
function (n){
  if(n <= 1) return 1;
  return n * arguments.callee(n - 1);
}

引数にオブジェクトを使う

引数の数が増えてくると、引数の順番を間違いやすくなります。そのような場合、引数にオブジェクトを利用するとわかりやすくなります。

引数にオブジェクトを使用することで、引数の順番を気にしないで指定することができますし、名前と値のペアなので引数の意味が明確になります。

以下の例は敢えて引数をオブジェクトにする必要はありませんが、引数にオブジェクトを利用する例です。

また、以下では引数の値が未定義値または null の場合のデフォルトの値（10）を設定しています。

function getArea(args){
  var width = args.width || 10;
  var height = args.height || 10;
  return width * height;
}

alert(getArea({width: 8, height: 12}) );  //96
alert(getArea({height: 50}) );  //500

引数の型

JavaScript は関数の定義時に引数の型を宣言することができません。また、関数に渡された値についても、型のチェックは行われません。必要に応じて、引数の型が間違っている場合には例外をスローするようにします。

以下の関数 flexSum() は任意個の引数を受け取り、各引数について型を調べて数値でない値を受け取った場合は、数値への変換を試みてその合計を返す関数です。数値への変換ができない場合はエラーをスローします。

function flexSum(arg) {
  var total = 0;
  for(var i = 0; i < arguments.length; i++) {
    var element = arguments[i];  //各引数を変数 element に格納
    if(!element) continue;  //null, undefined は無視
    var n;
    switch(typeof element) {  //引数の型により、引数を数値に変換
      case "number":
        n = element;
        break;
      case "object":
        if(element instanceof Array) {  //配列の場合は再帰処理
          n = flexSum.apply(this, element);
        }else{  //配列以外のオブジェクトはvalueOf()で値に変換
          n = element.valueOf();
        }
        break;
      case "string":
        n = parseFloat(element);
        break;
      case "boolean":
        n = NaN;
        break;
    }
    if(typeof n == "number" && !isNaN(n)) {
      total += n;
      //値(n)が数値の場合は total に加算
    }else{
      throw new Error(element + " を数値に変換できません")
    }
  }
  return total;
}
var obj = {a:0, b:2, c:3};
alert(flexSum(obj.b, obj.c, [10,20], "100x")); //135   

データとしての関数

JavaScript の関数はデータとしても扱うことができます。変数に代入したり、オブジェクトのプロパティや配列の要素に格納したり、 他の関数に渡したりすることができます。

以下は function 文による関数 square() の定義です。

function square(x) {
  return x * x ;
}

上記コードは、新たに関数オブジェクトを生成し、square という名前の変数に格納しています。関数の名前は、関数を参照する変数名と考えることができます。関数を別の変数に代入しても、そのまま関数として使用することができます。

function square(x) {
  return x * x ;
}
var a = square(3);  //a は9
//関数を変数に代入:b は square と同じ関数を参照
var b = square;
var c = b(5);	  //c は25

関数をオブジェクトのプロパティに格納した場合、関数ではなく、メソッドと呼びます。

var obj = new Object;
obj.square = function (x){ return x * x;};  //関数リテラル
x = obj.square(11);  //x は121

関数を配列の要素に格納しておけば、関数の名前を指定しなくても関数を呼び出すことができます。

var a = new Array(3);
a[0] = function(x){ return x * x; }  //関数リテラル
a[1] = 20;
a[2] = a[0](a[1]);  //関数の呼び出し
alert(a[2]);  //400

以下は、関数をデータとして利用する例です。関数を引数として、他の関数に渡すことができます。

//簡単な関数を定義して、オブジェクトリテラルに格納
var operators = {
  add: function(x, y) {return x + y;},
  subtract: function(x, y) {return x - y;},
  multiply: function(x, y) {return x * y;},
  divide: function(x, y) {return x / y;},
  max_val: Math.max,  //組み込み関数も利用可能
  min_val: Math.min
}
//以下の関数は演算の名前を引数に受け、該当する演算関数を operators から探して実行
function operate(operator,x,y) {
  if(typeof operators[operator] == "function") {
    return operators[operator](x,y);
  }else{
    throw new Error("不明な演算子です");
  }
}
alert(operate("add", 10,20));  //30
alert(operate("max_val", 100,20));  //100
alert(operate("subtract", 10,20));  //-10
alert(operate("add", "hello" ," universe"));  //hello universe

以下のように、引数に直接匿名関数を指定することもできます。

function operate(func,x,y) {
  if(typeof func == "function") {
    return func(x,y);
  }else{
    throw new Error("不明な演算子です");
  }
}
alert(operate(function(x,y){return x * y; }, 10,20));  //200
alert(operate(function(x,y){return x + y; }, 10,20));  //30
alert(operate(Math.max, 10,20));  //20 

メソッドとしての関数

オブジェクトのプロパティに格納されている関数で、このオブジェクトを介して呼び出される関数のことをメソッドと呼びます。

また、メソッドを呼び出す時に使用したオブジェクトが、メソッドの本体の中で this キーワードの値になります。

var greeting = {  //オブジェクトリテラル
  val1 : "Hello ",
  val2 : "Universe!",
  sayHello : function() {  //メソッド
    alert("Greeting: " + this.val1 + this.val2);
  }
}

greeting.sayHello();  //Greeting: Hello Universe!

メソッドとして使用する関数には、通常の引数とは別に、呼び出す時に指定したオブジェクトという引数（this）が渡されるということになります。

別の言い方をすると、メソッドを呼び出すときに使用したオブジェクトを、メソッド本体の中で this キーワードで参照できます。

console.log(this);  //Window (グローバルオブジェクト)

var func1 = function(){
  console.log(this);
};
func1();  //Window（strict mode では undefined）

function func2(){
  console.log(this);
}
func2(); //Window（strict mode では undefined）

var func3 = function(){ // グローバル関数を定義
  var func3_1 = function(){ // ローカル関数を定義
    console.log(this); //Window（strict mode では undefined）
  };
  func3_1();

  function func3_2(){ // ローカル関数を定義
    console.log(this); //Window（strict mode では undefined）
  }
  func3_2();
};
func3();

var obj = {
    func4: function(){ // メソッド func4を定義
        console.log(this);  //Object
    }
};
obj.func4(); //Object { func4: obj.func4() }

var parent = {}; // オブジェクト parent を定義
parent.child = {}; // parent の中にさらにオブジェクト child を定義
parent.child.func5 = function(){ // child の中にメソッド func5 を定義
    console.log(this); //Object
};
parent.child.func5(); //Object { func5: parent.child.func5() }    

var greeting = {
  val1 : "Hello ",
  val2 : "Universe!",
  sayHello : function() {
    alert("Greeting: " + this.val1 + this.val2);
  }
}

greeting.sayHello();  //Greeting: Hello Universe!

//greeting.sayHelloが参照する関数オブジェクトをグローバル変数 hello に代入
var hello = greeting.sayHello;
//関数内の this の参照先はグローバルオブジェクト（プロパティが未定義）
hello();  //Greeting: undefinedundefined

//グローバルオブジェクト（Window）にプロパティを定義
var val1 = "Global Hello ";
var val2 = "Global Universe!";
hello();  //Greeting: Global Hello Global Universe!

//call(), apply() を利用
hello.call(greeting);  //Greeting: Hello Universe!
hello.apply(greeting);  //Greeting: Hello Universe!

var greeting = {
  val1 : "Hello ",
  val2 : "Universe!",
  sayHello : function() {
    alert("Greeting: " + this.val1 + this.val2);
    this.sayBye();  //this を使って別のメソッドを呼び出す
  },
  sayBye : function() {
    alert("Bye, " + this.val2);
  }
}

greeting.sayHello();
//Greeting: Hello Universe!
//Bye, Universe!

var obj = {
  func: function(){ // メソッド func を定義
    console.log(this);  //Object { func: obj.func() }
    var _func = function(){ // ローカル関数 _func を定義
      console.log(this);  // Window
    };

    _func();
  }
};
obj.func();
// {func: ƒ} (オブジェクト)
// Window (グローバルオブジェクト)  

var obj = {
  func: function(){ // メソッド func を定義
    var _obj = { // ローカルオブジェクト _obj を定義
      _func: function(){ // メソッド _func を定義
        console.log(this); // Object
      }
    };
    _obj._func();
  }
};
obj.func(); // Object { _func: obj.func/_obj._func() }  

アロー関数

アロー関数は ES2015（ES6）から導入された新しい JavaScript の構文の一つです。（IE11 には対応していません。caniuse ES6）

アロー関数を使うと、function 式より短い構文で同様な内容を記述することができます。アロー関数は関数リテラルを簡潔に記述する方法です。

以下が書式（構文）です。

([arg] [, arg]) => {
    statements
}

一見しただけでは何のことだかわかりませんが、以下は関数リテラルとアロー関数で同じ関数を定義した例です。

//関数リテラル
var multiply = function(x, y) {
  return x * y;
}
console.log("3 x 6 = " + multiply(3,6));  //3 x 6 = 18

//アロー関数
var multiply  = (x, y) => {
  return x * y;
};
console.log("3 x 6 = " + multiply(3,6));  //3 x 6 = 18

アロー関数式を使うと、「function」を記述する必要がなく、より短く関数を記述することができます。

(引数,...) => {
  処理の記述
}

また、アロー関数は条件によっては更に簡潔に記述することができます。

関数が１つの文のみであれば { } と return も省略可能

関数が１つの文のみの場合 {} と return が省略可能です。 {} を省略した場合、return を記述するとエラーになります。

var multiply  = (x, y) => {
  return x * y;  //関数が１つの文のみの場合
};

//以下のように記述できます。
var multiply  = (x, y) => x * y;

引数が１つの場合、() を省略可能

引数が１つの場合、引数をくくるカッコ () も省略できます。

var square = function(x) {  //引数が１つの場合
  return x * x;
}
console.log("3 x 3 = " + square(3));  //3 x 3 = 9

//以下のように記述できます。
var square = x => x * x;
console.log("3 x 3 = " + square(3));  //3 x 3 = 9

引数がない場合、() を省略できない

引数が１つの場合は、()を省略できますが、引数をとらない場合は () が必要です。

var hello = function() {    //引数がない場合
  return "Hello Arrow!";
}
console.log(hello());    //Hello Arrow!

//以下のように記述できます。
var hello = () => "Hello Arrow!";
console.log(hello());    //Hello Arrow!

this を束縛しない

以下は「ECMAScript 2015以降のJavaScriptの this を理解する/Web Scratch 」からの引用です。とても詳しく解説されています。

以下はアロー関数で this を使ういくつかの例です。

以下はオブジェクトのメソッドにアロー関数を利用した場合の例です。

この例の場合は、アロー関数を使うとオブジェクトのプロパティを参照できません。「Arrow Function自身の外側のスコープにあるもっとも近い関数のthisの値」が存在しないためと思われます。

var objectX = {  //通常の関数
  myProp: 'My Property',
  func: function(){
    console.log(this.myProp);
  }
}
objectX.func();  //My Property オブジェクトのプロパティ

var objectY = {  //アロー関数を利用
  myProp: 'My Property',
  func: () => {
    console.log(this.myProp);
  }
}
objectY.func();  //undefined 取得できない

以下のように、グローバル変数に同じ名前があれば、それを参照します。

var myProp = "Global";  //グローバル変数

var objectY = {  //アロー関数を利用
  myProp: 'My Property',
  func: () => {
    console.log(this.myProp);
  }
}
objectY.func();  //Global

以下は「アロー関数/MDN」の例からの引用です。（少し変更してあります）

function Person(name) {
  this.name = name;
  this.age = 0;

  setInterval(function () {
    // 非 strict モードでは、この関数は  this をグローバルオブジェクトとして定義する。
    // Person() コンストラクタが定義した this とは違う
    this.age++;
    console.log(this.age);  //NaN が毎秒出力される（this を参照できない）
  }, 1000);
}

var p = new Person("Michael");
console.log(p.name);  //Michael
console.log(p.age);  //0

上記の例では console.log(this.age) の出力は「NaN」が毎秒出力されてしまいます。これは、setInterval() に渡される関数は、実行時の呼び出し元オブジェクトがグローバルオブジェクトになるためですが、これを解決するには、以下のような方法があります。

this の値をスコープ内の変数（that）に代入する方法

function Person(name) {
  var that = this;
  that.name = name;
  that.age = 0;

  setInterval(function () {
    that.age++;
    console.log(that.age);  //毎秒数値がカウントアップされる
  }, 1000);
}

var p = new Person("Michael");
console.log(p.name); //Michael
console.log(p.age);  //0

bind() 関数の引数に this を渡して、呼び出し元のオブジェクトをそのオブジェクトに確定する方法

function Person(name) {
  this.name = name;
  this.age = 0;

  setInterval(function () {
    this.age++;
    console.log(this.age);  //毎秒数値がカウントアップされる
  }.bind(this), 1000);  //bind(this) を記述すると this を確定できる
}

var p = new Person("Michael");
console.log(p.name); //Michael
console.log(p.age);  //0

アロー関数を使う方法

アロー関数を使えば、setInterval に渡される関数の this の値は、外部関数の this と同じ値になります。（Arrow Function自身の外側のスコープにあるもっとも近い関数のthisの値）

function Person(name) {
  this.name = name;
  this.age = 0;

  setInterval( () => {  //アロー関数を使用
    this.age++;
    console.log(this.age);  //毎秒数値がカウントアップされる
  }, 1000);
}

var p = new Person("Michael");
console.log(p.name); //Michael
console.log(p.age);  //0

イベントハンドラにアロー関数を利用する場合の注意

以下のようなボタンがある場合、jQuery のクリックイベントを設定する場合の例です。

<button id="foo">Submit</button>

以下のように記述して、ボタンがクリックされるとそのテキスト（Submit）が表示されます。

$("#foo").on('click', function() {
  console.log($(this).text());  //Submit と表示
});

アロー関数を使って以下のように記述すると、想定しているようなテキストは取得できません。

$("#foo").on('click', () => {
  console.log($(this).text()); //想定していないもの（ページ全体のテキスト）が表示される
});

以下のように this の代わりにイベントのプロパティ（e.currentTarget）を使うと解決します。

$("#foo").on('click', (e) => {
  console.log($(e.currentTarget).text());  //Submit と表示
});

jQuery へのコールバックにアロー関数を利用する場合の注意

以下は、jQuery の each() を使用する場合の例です。以下の例の場合、全ての h3 要素のテキストが表示されます。

$('h3').each(function() {
  console.log($(this).text()); // 全ての h3 要素のテキストが表示される
});

以下のようにアロー関数を使うと、イベントハンドラ同様に想定していないテキスト（ページ全体のテキストが h3 要素の数ぶん）が表示されます。

$('h3').each(() => {
  console.log($(this).text());  //想定していないもの（ページ全体のテキスト）が表示される
});

each() の場合、第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が渡されるので、第2引数を利用します。

$('h3').each((index, element) => {
  console.log($(element).text()); // 全ての h3 要素のテキストが表示される
});
  

関数のプロパティとメソッド

関数に対して typeof 演算子をつかうと「function」という文字列が返されますが、関数は特殊なオブジェクトです。そして関数がオブジェクトということは、関数もプロパティやメソッドを持つことができるということになります。

length プロパティ

arguments[] 配列の length プロパティは、関数の本体では、その関数に実際に渡された引数の個数を表します。

関数自身の length プロパティは、関数に引き渡されるはずの引数の個数（引数リストで宣言された引数の個数）になります。

また、Function オブジェクトの length プロパティは、arguments.length プロパティとは異なり、関数の中でも外でも使用することができます。

以下の関数 checkArgs() は、別の関数（以下の例では foo()）から arguments 配列が渡され、arguments.length プロパティ値と Function オブジェクトの length プロパティの値（arguments.callee.length）を比較して、引数の個数をチェックし、個数が異なれば例外をスローします。

function checkArgs(args) {
  var actual = args.length;
  var expected = args.callee.length;
  if(actual != expected) {
    throw new Error("引数の個数が異なります。必要な引数の個数：" + expected +
             " /渡された引数の個数：" + actual);
  }
}

function foo(x,y,z) {
  checkArgs(arguments);
  return x * y * z;
}

foo(2,3,4,5);
//Error: 引数の個数が異なります。必要な引数の個数：3 /渡された引数の個数：4

prototypeプロパティ

どの関数にも、あらかじめ定義されたプロトタイプオブジェクトを参照する prototype プロパティがあります。

自分専用の関数プロパティの定義

Function オブジェクトにプロパティを追加することで、関数の実行を終了した後も値を保持できます。この値は、次に関数が呼び出された時に使うことができます。グローバル変数に値を格納しても同じことができますが、名前の衝突などに配慮しなければならないので、関数の中だけでしか使用しない場合は、 こちらの方が便利です。

//「静的」プロパティ（関数プロパティ）を生成し初期値を設定
//関数宣言のコードは実行より前に処理されるので、関数宣言の前に代入が可能。
uniqueInteger.counter = 0;

//呼び出される度に１ずつ増える異なる整数を返す
//自身の「静的」プロパティを使用して、渡した履歴を保持
function uniqueInteger(){
  return uniqueInteger.counter++;
}

for(var i = 0; i < 10; i++){
  document.write(uniqueInteger());
}
//0123456789 

fun.call(thisArg [, arg1[, arg2[, ...]]])
fun.apply(thisArg [, argsArray])

var foo = {
  name : "foo",
  func : function() {
    console.log(this.name);
  }
}

foo.func();  //foo

var bar = {
  name : "bar"
}

bar.func();  //エラー（TypeError: bar.func is not a function）

foo.func.call(bar);  //bar
foo.func.apply(bar); //bar 

var numbers = [3, 61, 25, 333, 70];

var max = Math.max.apply(null, numbers);
console.log(max);  //333

var min = Math.min.apply(null, numbers);
console.log(min);  //3

function join_args() {
  alert(arguments.join());
}

join_args("a","b","c");  //エラー
//TypeError: arguments.join is not a function

function join_args() {
  alert(Array.prototype.join.call(arguments));
}

join_args("a","b","c");  //a,b,c

var foo = document.getElementsByClassName("foo");
var foo_array = Array.prototype.slice.call(foo);

var foo_first = foo_array.shift();
console.log(foo_first.innerHTML);

スコープチェーン

JavaScript には、グローバルとローカルの 2 つのスコープがあります。関数定義の外部で宣言された変数はグローバル変数になり、プログラム内のどこからでも値の参照や変更を行うことができます。関数定義内で宣言された変数はローカル変数になります。関数の外部のコードからローカル変数にアクセスすることはできません。

スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念のことです。（グローバル・スコープとローカル・スコープ）

グローバルオブジェクト

グローバルオブジェクトとは、グローバル変数やグローバル関数を管理するためのオブジェクトです。グローバル変数を定義するということは、実際にはグローバルオブジェクトのプロパティを定義するということになります。

var a = "Global A";
var b = "Global B";
var c = "Global C";

function outerF() {
  var a = "Local A";
  console.log(b);  //4. Global B（グローバル変数）
  function innerF() {
    var b = "Local B";
    console.log(a);  //5. Local A（outerF の Call オブジェクト）
    console.log(b);  //6. Local B（自身の Call オブジェクト）
    console.log(c);  //7. Global C（グローバル変数）
    console.log(d);  //8. ReferenceError: d is not defined
  }
  innerF();
}

console.log(a);  //1. Global A（グローバル変数）
console.log(b);  //2. Global B（グローバル変数）
console.log(c);  //3. Global C（グローバル変数）

outerF();

クロージャー

クロージャーとは、ローカル変数の状態を保持できる関数（ローカル変数を参照している関数内の関数）のことです。別の言い方をすると、関数自身が定義された環境を、ローカル変数も含めて持ち運ぶことのできる仕組みとも言えます。

以下は簡単なクロージャーの例です。

function closure(n) {
  //外側の関数で変数を定義
  var count = n;
  // 入れ子になった関数を戻り値として返す
  return function() {  // この匿名関数がクロージャ
    //内側の関数から、外側の変数を参照
    return count ++;
  };
}
// closure()を呼び出し、戻り値 (関数オブジェクト) を変数に格納
var myCounter = closure(3);

console.log(myCounter()); // 3
console.log(myCounter()); // 4
console.log(myCounter()); // 5

関数 closure() は、引数 n を受け取り、その値をインクリメントする匿名関数（関数オブジェクト）を戻り値として返します。

通常、関数の中で使用されたローカル変数（この例では count）は、関数の処理が終了した時点で破棄されます。

しかし、この例の場合、関数 closure() から返された匿名関数（変数 myCounter に格納）がローカル変数（count）を参照し続けているので、関数 closure() の終了後もローカル変数（count）は保持され続けます。

内側の関数は、スコープチェーンによって、外側の関数の Call オブジェクトを参照し続けることができます。

この例では、戻り値となる関数が作成された瞬間に、変数オブジェクトの連鎖（スコープチェーン）が作成されます。そのスコープチェーンの中には、関数 closure() の変数オブジェクトも含まれており、ローカル変数 n が格納されています。このスコープチェーンは、作成された関数がプログラム中に生存している間保持されます。これにより、関数 closure() 内で宣言されたローカル変数 n を、クロージャからずっと参照し続けられることになります。

つまり、変数 myCounter に格納された匿名関数の以下のスコープチェーンが、匿名関数が有効である間保持されることになります。

• 匿名関数の Call オブジェクト
• 関数 closure() の Call オブジェクト
• グローバルオブジェクト

上記の例では、クロージャーとして匿名関数（無名関数）を使用しましたが、名前を付けた関数でも同じことが可能です。

function closure(n) {
  //外側の関数で変数を定義
  var count = n;
  function inner() {
    return count ++;
  }
  // 入れ子になった関数を戻り値として返す
  return inner;
}
// closure()を呼び出し、戻り値 (関数オブジェクト) を変数に格納
var myCounter = closure(100);

console.log(myCounter()); // 100
console.log(myCounter()); // 101
console.log(myCounter()); // 102

スコープチェーンは独立したもの

以下のように関数 closure() の実行を複数行った場合、同じローカル変数 count を参照しているにも関わらず、異なる変数を参照しているかのように独立してインクリメントした値を得ます。

function closure(n) {
  var count = n;
  return function() {
    return count ++;
  };
}

var myCounter1 = closure(0);
var myCounter2 = closure(100);

console.log(myCounter1()); // 0
console.log(myCounter2()); // 100
console.log(myCounter1()); // 1
console.log(myCounter2()); // 101

これは Call オブジェクトが関数の呼び出しの度に生成されるためです。それぞれのスコープチェーンは独立したものなので、その中で管理されるローカル変数（count）も独立しているため別物になります。