回答編集履歴

「Undefined 型と Null 型」の説明が ES6 に準拠したものではなかった為、修正

2016/05/04 14:16

投稿

think49

スコア18164

test CHANGED Viewed

@@ -338,41 +338,37 @@
-この節は私の個人的な考え(イメージ)なので戯言とでも思って読んでください(前述の通り、私は初心者にイメージで語るべきではないと考えている為、この節は非初心者向けです)。
-Undefined 型は未定義ですが、Null 型は処理が終わった後に定義するという意味で「定義済(処理済)」と考える事も出来ます。
+ECMAScript 6 では `undefined`, `null` 値を次のように定義しています。
-```JavaScript
+- [4.3.10 undefined value – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-undefined-value)
-(function () {
+- [4.3.12 null value – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-null-value)
-  console.log(a); // undefined (未定義)
+> **4.3.10 undefined 値**
-  var a = null;   // 存在しないを表す値として null を定義する
-  console.log(a); // null (定義済)
-}());
+>
+> 変数に値が割り当てられる前に使われるプリミティブ値。
-```
+>
+> **4.3.12 null 値**
+>
+> 任意のオブジェクト値が意図的に存在しないことを表すプリミティブ値。
-- `getElementById` は存在しない id を指定した場合、対象の要素を探し、存在しない事を確認してから返り値を既定値(初期値)の undefined から null に変更して返します。
+`getElementById` は存在しない id を指定した場合、対象のオブジェクト(要素ノード)が存在しない事を表す `null` を返します。
-- `document.onclick` は初期値が `null` ですが、`onclick` プロパティを定義したという意味で `null` を代入していると考えられます。(ただし、この考えはちょっと苦しいとも考えています。「プロパティは定義済だが、プロパティ値は未定義のはず」と考える事も可能です。)
-実際のところ、`null` は**Object 型が存在しない時に返す値**とする方が自然なのかもしれません。
-`NodeList` 等の配列的性質を持つオブジェクトを除き、私の知る範囲ではオブジェクトが存在しない時に `null` を返しています。
+`document.onclick` は初期値としてオブジェクト(イベントハンドラ関数)が存在しない事を表す `null` を持ちます。
+**(2016/05/04 23:15 追記)** この節には別の説明を書いていましたが、ES6 で適切な説明があった為、修正しました。)
@@ -386,6 +382,8 @@
 - 2016/05/04 22:38 Symbol 型が増えた事による typeof 演算子による Object 型の判定方法の複雑化について説明&コード追記
+- 2016/05/04 23:15 「Undefined 型と Null 型」の説明が ES6 に準拠したものではなかった為、修正
 Re: a_yanyan さん

Symbol 型が増えた事による typeof 演算子による Object 型の判定方法の複雑化について説明&コード追記

2016/05/04 14:16

投稿

think49

スコア18164

test CHANGED Viewed

@@ -134,9 +134,83 @@
+```JavaScript
+/**
+ * get-type.js
+ *
+ * @version 1.0.2
+ * @author think49
+ * @url https://gist.github.com/862085
+ * @license http://www.opensource.org/licenses/mit-license.php (The MIT License)
+ */
+function getType (value) {
+  var type, typeofValue;
-ところが、このコードは ES6 で Symbol 型が増えた途端に破綻しました。
+  if (value === null) { // Null Type
+    return 'Null';
+  }
+  typeofValue = typeof value;
+  switch (typeofValue) {
+    case 'undefined': // Undefined Type
+    case 'boolean':   // Boolean Type
+    case 'number':    // Number Type
+    case 'string':    // String Type
+      type = typeofValue.charAt(0).toUpperCase() + typeofValue.slice(1);
+      break;
+    case 'object':    // Object Type (native and does not implement [[Call]])
+    case 'function':  // Object Type (native or host and does implement [[Call]])
+    default:          // Object Type (host and does not implement [[Call]])
+      type = 'Object';
+      break;
+  }
+  return type;
+}
+```
-ES5 当時には `typeof` 演算子は "symbol" を返した場合に Object 型と判定する動作が正しい為、**Symbol 型に対してObject 型と判定してしまう**のです。
+ES5 当時には `typeof` 演算子が "symbol" を返した場合、それを「Object Type (host and does not implement [[Call]])」と見なして Object 型と判定する動作が正しい動作でした。
+ところが、ES6 で Symbol 型が増えた事によって `"symbol"` という新しく定義済文字列が出来た為、**上記コードは ES6 準拠の実装において Symbol 型を Object 型と判定してしまいます**。
 新しい型が増える度にコードを修正するいたちごっこには付き合ってられませんので `ToObject` で Object 型に変換して変換前と照合する事にしました。
@@ -154,7 +228,7 @@
-このコードも `ToObject` の動作次第では破綻しますが、「"undefined", "boolean", "function", "number", "symbol", "string" 以外の文字列は Object 型である」の判定ロジックよりはマシです。
+このコードも `ToObject` の動作次第では破綻しますが、「"undefined", "boolean", "function", "number", "symbol", "string" 以外の文字列は Object 型である」の判定ロジックに修正するよりはマシです。
 ES6 では Object 型を判定する関数として `Object.isObject()` の導入が検討されたようですが、残念ながら見送られました。
@@ -310,6 +384,8 @@
 - 2016/05/04 22:17 typeof 演算子、「存在しない」を表す値、Undefined 型と Null 型の説明追加
+- 2016/05/04 22:38 Symbol 型が増えた事による typeof 演算子による Object 型の判定方法の複雑化について説明&コード追記
 Re: a_yanyan さん

typeof 演算子、「存在しない」を表す、Undefined 型と Null 型の説明追加

2016/05/04 13:39

投稿

think49

スコア18164

test CHANGED Viewed

@@ -38,29 +38,193 @@
+### 型の違い
+「型」を認識しているか確認して認識していないようだったら一通りの型を教えてあげてください。
+JavaScript は「暗黙の型変換」が頻繁に発生する言語なので現在の型を意識しないといろいろとはまります。
+- Undefined 型
+- Null 型
+- Boolean 型
+- String 型
+- Symbol 型 (ES6 規定)
+- Number 型
+- Object 型
+### typeof 演算子
+`typeof` 演算子はその名称から「型を表す文字列を返す演算子」と読み取れますが、実際には型と一致しない文字列を返す場合があります。
+- [12.5.6 The typeof Operator – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-typeof-operator)
 ```JavaScript
-/**
- * 0 の事例
- */
-console.log(Number(''));                        // 0 (空文字を Number 型に変換すると 0 を返す)
-console.log('JavaScript'.lastIndexOf('J', 0));  // 0 (String#lastInddexOf は Number 型の値を返す。String#lastIndexOf の第二引数は Number 型を指定しなければならない。厳密には Number 型を指定しなくても良いが、内部的に Number 型に変換される。)
-console.log([].length);                          // 0 (空の配列の length 値は 0 である)
-console.log(Object.keys({}).length);             // 0 (直属のプロパティを持たないオブジェクトを Object.keys で処理させると length 値が 0 の空の配列を返す)
-console.log(document.querySelectorAll('.hogehoge').length); // 0 (querySelectorAll はマッチしなかった場合空の NodeList (擬似配列) を返す。この NodeList の length 値は 0 である。)
-/**
- * null の事例
+console.log(typeof undefined);    // "undefined"
+console.log(typeof null);         // "object"   (Null型: typeof 演算子は Null 型に対して "object" を返す仕様バグがあります)
+console.log(typeof true);         // "boolean"  (Boolean 型)
+console.log(typeof 1);            // "number"   (Number 型)
+console.log(typeof "sample");     // "string"   (String 型)
+console.log(typeof Symbol());     // "symbol"   (Symbol 型: ES6 既定)
+console.log(typeof {});           // "object"   (Object 型: [[Call]] を持たない一般的なオブジェクト)
+console.log(typeof document);     // "object"   (Object 型: [[Call]] を持たず、標準的な外来のオブジェクト)
+console.log(typeof new Function); // "function" (Object 型: [[Call]] を持つオブジェクト)
+console.log(typeof hoge);         // "hoge"     (Object 型: 非標準で外来の [[Call]]  を持たないオブジェクト。詳細は後述の (*1) を参照。)
+/**
+ * (*1) Object (non-standard exotic and does not implement [[Call]])
+ * typeof 演算子はこのオブジェクトに対して "undefined", "boolean", "function", "number", "symbol", "string" を返してはならない。
+ * つまり、"undefined", "boolean", "function", "number", "symbol", "string" 以外の文字列であれば何を返しても良い。
+ */
+```
+typeof null === 'object' は仕様バグだそうですが、今更修正できないのでそのままになってしまっています。
+- [typeof null === 'object' は ECMAScript 3 の仕様バグ - @think49の日記](http://d.hatena.ne.jp/think49/20120114/1326554107)
+関数に対して "function" を返す動作も困りものですが、一番対処に困るのは「Object (non-standard exotic...)」です。
+このオブジェクトは既定文字列以外の全ての文字列を取りうるので `typeof` 演算子で真面目に Object 型を判定しようとすると「既定文字列以外の全て」を判定する事になります。
+実際に私は ES5 当時にそのようにコーディングしていました。
+- [get-type.js : ECMAScript5 準拠のデータ型を返す](https://gist.github.com/think49/862085/a8146347d959b95832ea6c4c2e82b11c4957c6e8)
+ところが、このコードは ES6 で Symbol 型が増えた途端に破綻しました。
+ES5 当時には `typeof` 演算子は "symbol" を返した場合に Object 型と判定する動作が正しい為、**Symbol 型に対してObject 型と判定してしまう**のです。
+新しい型が増える度にコードを修正するいたちごっこには付き合ってられませんので `ToObject` で Object 型に変換して変換前と照合する事にしました。
+```JavaScript
+if (Object(arg) === arg) { // ToObject で Object 型に変換する
+  console.log(arg + ' は Object 型である');
+}
+```
+このコードも `ToObject` の動作次第では破綻しますが、「"undefined", "boolean", "function", "number", "symbol", "string" 以外の文字列は Object 型である」の判定ロジックよりはマシです。
+ES6 では Object 型を判定する関数として `Object.isObject()` の導入が検討されたようですが、残念ながら見送られました。
+- [7.1.13 ToObject ( argument ) – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-toobject)
+- [19.1.1.1 Object ( [ value ] ) – ECMA-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-object-value)
+### 「存在しない」を表す値
+変数や返り値には既定の型があり、「存在しない事を表す値」は型によって変化します。
+```JavaScript
+/**
+ * Number 型
+ */
+Number('hoge');                       // NaN (Number 型へ変換不可能な場合、NaN (Not a Number)を返す、NaN は Number ではない事を表す)
+''.charCodeAt();                      // NaN (存在しない場所の文字を指定した場合、Unicodeコードポイントは NaN となる)
+'sample'.indexOf('hoge');             // -1 (存在しない index は -1 で表す)
+console.log([].length);               // 0 (空の配列の length 値は 0 である)
+console.log(Object.keys({}).length);  // 0 (直属のプロパティを持たないオブquerySelectorAll は存在しない要素のセレクタを指定した場合、空の NodeList (擬似配列) を返す。この NodeList の length 値は 0 である。)
+/**
+ * String 型
+ */
+[].join();   // "" (対象の文字列が存在しない場合、空文字を返す)
+''.charAt(); // "" (対象の文字列が存在しない場合、空文字を返す)
+/**
+ * Undefined 型
+ */
+(function () {}());       // undefined (return 節がない関数は未定義値を返す)
+var a;                    // undefined (var 宣言の既定値は未定義値である)
+void true;                // undefined (void 演算子は常に undefined を返す)
+document.hoge;            // undefined (プロパティアクセス演算子は存在しないプロパティを指定した場合、undefined を返す)
+/**
+ * Null 型
  */
@@ -78,57 +242,63 @@
+/**
+ * Object 型
+ */
+new Object;         // {} (引数なしで new Object が呼び出された場合、直属のプロパティを持たない空のオブジェクトを返す)
+new function () {}; // {} (this 値を操作せず、prototype も設定しない関数が new 演算子で呼び出された場合、直属のプロパティを持たない空のオブジェクトを返す)
+new Array;          // [] (引数無しで new Array が呼び出された場合、length 値が 0 の空の配列を返す)
+document.querySelectorAll('.hoge'); // [] (querySelectorAll は存在しない要素のセレクタを指定した場合、空の NodeList (擬似配列) を返す)
+```
+### Undefined 型と Null 型
+この節は私の個人的な考え(イメージ)なので戯言とでも思って読んでください(前述の通り、私は初心者にイメージで語るべきではないと考えている為、この節は非初心者向けです)。
+Undefined 型は未定義ですが、Null 型は処理が終わった後に定義するという意味で「定義済(処理済)」と考える事も出来ます。
+```JavaScript
 (function () {
-  function getThisArg () { return this; }
+  console.log(a); // undefined (未定義)
+  var a = null;   // 存在しないを表す値として null を定義する
-  console.log(getThisArg.call(null)); // グローバルオブジェクト (非 Strict Mode で Function#call で第1引数に null が指定された場合の this 値はグローバルオブジェクトである)
+  console.log(a); // null (定義済)
 }());
-(function () {
-  'use strict';
-  function getThisArg () { return this; }
-  console.log(getThisArg.call(null)); // null (Strict Mode で Function#call で第1引数に null が指定された場合の this 値は null である)
-}());
 ```
-実際のところ、これらのコードを見せても理解するのは難しいと思いますので、やはり自分からコードを書いてもらって疑問が生まれた時に質問に答えてあげるのが良いと思います。
+- `getElementById` は存在しない id を指定した場合、対象の要素を探し、存在しない事を確認してから返り値を既定値(初期値)の undefined から null に変更して返します。
-### 型の違い
+- `document.onclick` は初期値が `null` ですが、`onclick` プロパティを定義したという意味で `null` を代入していると考えられます。(ただし、この考えはちょっと苦しいとも考えています。「プロパティは定義済だが、プロパティ値は未定義のはず」と考える事も可能です。)
-「型」を認識しているか確認して認識していないようだったら一通りの型を教えてあげてください。
+実際のところ、`null` は**Object 型が存在しない時に返す値**とする方が自然なのかもしれません。
-JavaScript は「暗黙の型変換」が頻繁に発生する言語なので現在の型を意識しないといろいろとはまります。
+`NodeList` 等の配列的性質を持つオブジェクトを除き、私の知る範囲ではオブジェクトが存在しない時に `null` を返しています。
-- Undefined 型
-- Null 型
-- Boolean 型
-- String 型
-- Symbol 型 (ES6 規定)
-- Number 型
-- Object 型
@@ -138,6 +308,8 @@
 - 2016/05/03 17:02 コード事例を追記
+- 2016/05/04 22:17 typeof 演算子、「存在しない」を表す値、Undefined 型と Null 型の説明追加
 Re: a_yanyan さん

誤字修正

2016/05/04 13:17

投稿

think49

スコア18164

test CHANGED Viewed

@@ -64,7 +64,7 @@
  */
-console.log(document.onclick);                    // null (onclick の規定値は null である)
+console.log(document.onclick);                    // null (onclick の既定値は null である)
 document.onclick = function (event) { console.log(event.type); }; // onclickイベントハンドラを定義する

typo修正

2016/05/04 01:01

投稿

think49

スコア18164

test CHANGED Viewed

@@ -66,7 +66,7 @@
 console.log(document.onclick);                    // null (onclick の規定値は null である)
-document.onclick = function (event) { console.log(event.type); }; // onclickイベントは野良を定義する
+document.onclick = function (event) { console.log(event.type); }; // onclickイベントハンドラを定義する
 document.onclick = null;                          // onclickイベントハンドラを削除するには null を代入する

コード事例を追記

2016/05/04 00:55

投稿

think49

スコア18164

test CHANGED Viewed

@@ -38,6 +38,74 @@
+```JavaScript
+/**
+ * 0 の事例
+ */
+console.log(Number(''));                        // 0 (空文字を Number 型に変換すると 0 を返す)
+console.log('JavaScript'.lastIndexOf('J', 0));  // 0 (String#lastInddexOf は Number 型の値を返す。String#lastIndexOf の第二引数は Number 型を指定しなければならない。厳密には Number 型を指定しなくても良いが、内部的に Number 型に変換される。)
+console.log([].length);                          // 0 (空の配列の length 値は 0 である)
+console.log(Object.keys({}).length);             // 0 (直属のプロパティを持たないオブジェクトを Object.keys で処理させると length 値が 0 の空の配列を返す)
+console.log(document.querySelectorAll('.hogehoge').length); // 0 (querySelectorAll はマッチしなかった場合空の NodeList (擬似配列) を返す。この NodeList の length 値は 0 である。)
+/**
+ * null の事例
+ */
+console.log(document.onclick);                    // null (onclick の規定値は null である)
+document.onclick = function (event) { console.log(event.type); }; // onclickイベントは野良を定義する
+document.onclick = null;                          // onclickイベントハンドラを削除するには null を代入する
+console.log(document.getElementById('hogehoge')); // null (getElementById は存在しない要素を検索した場合、null を返す)
+console.log(/hoge/.exec('test'));                 // null (RegExp#exec はマッチしなかった場合に null を返す)
+console.log('test'.match(/hoge/));                // null (String#match はマッチしなかった場合に null を返す)
+(function () {
+  function getThisArg () { return this; }
+  console.log(getThisArg.call(null)); // グローバルオブジェクト (非 Strict Mode で Function#call で第1引数に null が指定された場合の this 値はグローバルオブジェクトである)
+}());
+(function () {
+  'use strict';
+  function getThisArg () { return this; }
+  console.log(getThisArg.call(null)); // null (Strict Mode で Function#call で第1引数に null が指定された場合の this 値は null である)
+}());
+```
+実際のところ、これらのコードを見せても理解するのは難しいと思いますので、やはり自分からコードを書いてもらって疑問が生まれた時に質問に答えてあげるのが良いと思います。
 ### 型の違い
@@ -64,4 +132,12 @@
+### 更新履歴
+- 2016/05/03 17:02 コード事例を追記
 Re: a_yanyan さん