javascriptで「var x ={};」ってどういう意味なのでしょうか。

Question

definePropertiesというメソッドを調べていて、var x ={};なら正常に動作して、var x;だとエラーになって意味がわからず混乱しました。

Answer 1

オブジェクト初期化子ですね
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer

どこでエラーになるか書いてないのでわかりませんが、プロパティアクセスしてるのではと思います

var x = {};
x.aa; // undefinedになる

はエラーにはなりません

var x;
x.aa; // <-ここでエラーになる

Uncaught TypeError: Cannot read property 'aa' of undefined
at <anonymous>:1:3
とエラーになります

Comments

[yamagata_user]

遅くなりすみません！
ありがとうございます。

Answer 2

var xを初期化しています。

var name = 'John';

だと、文字列の定義ですが

var x = {};

だとオブジェクトだよという宣言となります。このオブジェクトを使って、プロパティを設定したりできるというわけで数値型や文字列型と違う点です。

ちなみに、JavaScriptでは関数内のどこでもvarの宣言を書くことができます。

Answer 3

Object.defineProperties

Object.defineProperties とはオブジェクトにプロパティを定義する関数です。

• Object.defineProperties() - JavaScript | MDN

var x = {};
Object.defineProperties(x, {value: {get: function () { return 1; }}});

console.log(x.value); // 1

var x; に変更すると、下記のようにエラーが発生します。

var x;
Object.defineProperties(x, {value: {get: function () { return 1; }}});  // TypeError: Object.defineProperties called on non-object

ここでエラーメッセージを読めば、何が原因かわかります。

エラーメッセージ日本語訳
「型エラー: "オブジェクトではないもの" からObject.definePropertiesが呼び出されました」

変数 x には Undefined 型の値が格納されており、Object.defineProperties は「オブジェクトではないもの(Object 型ではないもの)」にプロパティを定義する事が出来ません。

オブジェクト初期化子

• オブジェクト初期化子 - JavaScript | MDN

{} を「オブジェクト初期化子」と呼び、構文名から「オブジェクトリテラル」と呼ばれることもあります。
新しい構文規則を使うと、先で紹介した getter/setter もオブジェクト初期化子の構文内で定義する事が出来ます。

var x = {get value () { return 1; }};

console.log(x.value); // 1

※ただし、オブジェクト初期化子で configurable, enumerable, writable を定義する事は不可能なので、Object.defineProperties を全く使わなくて済むようになったわけではありません。

jQuery を使っても JavaScript を理解する必要がある

下記スレッドで「jQuery自体がjavascriptがわからないプログラミングのできない人でもwebサイトでいろいろな機能を実現できることを売りにしているように私は感じている」と質問者さんが書かれていましたが、そんなことはありません。

• JavaScript - webサイトを作るときにjQueryではなくjavascriptから書く必要がある要件ってどんな要件でしょうか。(106150)｜teratail

「オブジェクト初期化子」や Object.defineProperties は「jQuery では実現できない JavaScript の基礎となる機能」であり、習得している必要があります。

Re: yamagata_user さん

Comments

[yamagata_user]

遅くなってしまいすみません！
このたびは誠にありがとうございました。

[yamagata_user]

遅くなってしまいすみません！
このたびは誠にありがとうございました。