TECH I.S.

JavaScript オブジェクト


JavaScriptでは、オブジェクトが全てです。オブジェクトを理解すれば、JavaScriptも理解できます。


JavaScriptでは、ほぼ「全て」がオブジェクトです。

  • ブール値はオブジェクトにすることができます(newキーワードで定義されている場合)。
  • 数値はオブジェクトにすることができます(newキーワードで定義されている場合)。
  • 文字列はオブジェクトにすることができます(newキーワードで定義されている場合)。
  • 日付は常にオブジェクトです。
  • 数学は常にオブジェクトです。
  • 正規表現は常にオブジェクトです。
  • 配列は常にオブジェクトです。
  • 関数は常にオブジェクトです。
  • オブジェクトは常にオブジェクトです。

プリミティブを除くすべてのJavaScript値はオブジェクトです。


JavaScript プリミティブ

プリミティブ値は、プロパティやメソッドを持たない値です。

3.14はプリミティブな値です

プリミティブデータ型は、プリミティブ値を持つデータです。

JavaScriptでは、7 種類のプリミティブデータ型が定義されています。

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

不変

プリミティブ値は不変です(ハードコードされており、変更できません)。 x = 3.14の場合、xの値は変更できますが、3.14 の値は変更できません。
Value Type Comment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull(object)null is always null
undefinedundefinedundefined is always undefined

オブジェクトは変数です

JavaScript変数には、単一の値を含めることができます。

let person = "John Doe";

自分で試してみる»

JavaScript変数には、多くの値を含めることもできます。

オブジェクトも変数です。ただし、オブジェクトには多くの値を含めることができます。

オブジェクトの値は、名前:値のペア(名前と値はコロンで区切られます)として書き込まれます。

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自分で試してみる»

JavaScriptのオブジェクトは名前付きの値のコレクションです。

constを使用してオブジェクトを宣言するのが一般的です。

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自分で試してみる»


オブジェクトのプロパティ

JavaScriptオブジェクトの名前付き値はプロパティと呼ばれます。


Property

Value

firstName John
lastName Doe
age 50
eyeColor blue

名前と値のペアとして記述されたオブジェクトは、次のようになります。

  • PHPの連想配列
  • Pythonの辞書
  • Cのハッシュテーブル
  • Javaのハッシュマップ
  • RubyとPerlのハッシュ

オブジェクトメソッド

メソッドは、オブジェクトに対して実行できるアクションです。

オブジェクトプロパティは、プリミティブ値、他のオブジェクト、および関数のいずれかです。

オブジェクトメソッドは、関数定義を含むオブジェクトプロパティです。


Property

Value

firstName John
lastName Doe
age 50
eyeColor blue
fullName function(){return this.firstName + " " + this.lastName;}

JavaScriptのオブジェクトは、プロパティおよびメソッドと呼ばれる名前付きの値のコンテナです。

メソッドについては、次の章で詳しく説明します。


JavaScriptオブジェクトの作成

JavaScriptを使用すると、独自のオブジェクトを定義および作成できます。

新しいオブジェクトを作成するには、さまざまな方法があります。

  • オブジェクトリテラルを使用して、単一のオブジェクトを作成します。
  • newを使用して単一のオブジェクトを作成します。
  • オブジェクトコンストラクターを定義し、構築された型のオブジェクトを作成します。
  • Object.create()を使用してオブジェクトを作成します。

オブジェクトリテラルの使用

これは、JavaScriptオブジェクトを作成する最も簡単な方法です。

オブジェクトリテラルを使用すると、1つのステートメントでオブジェクトの定義と作成の両方を行うことができます。

オブジェクトリテラルは、中括弧{ }で囲まれた名前:値のペア(age:50など)のリストです。

次の例では、4つのプロパティを持つ新しいJavaScriptオブジェクトを作成します。

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自分で試してみる»

スペースと改行は重要ではありません。オブジェクト定義は複数行にまたがることができます:

const person = {   firstName: "John",   lastName: "Doe",   age: 50,   eyeColor: "blue" };

自分で試してみる»

この例では、空のJavaScriptオブジェクトを作成し、4 つのプロパティを追加します。

const person = {}; person.firstName = "John"; person.lastName = "Doe"; person.age = 50; person.eyeColor = "blue";

自分で試してみる»


JavaScript newの使用

次の例では、new Object()を使用して新しいJavaScriptオブジェクトを作成し、4つのプロパティを追加します。

const person = new Object(); person.firstName = "John"; person.lastName = "Doe"; person.age = 50; person.eyeColor = "blue";

自分で試してみる»

上記の例は、全く同じことを行います。
ただし、new Object()を使用する必要はありません。
読みやすさ、単純さ、および実行速度のために、オブジェクトリテラルメソッドを使用します。


JavaScriptオブジェクトは変更可能です

オブジェクトは変更可能です。オブジェクトは値ではなく参照によってアドレス指定されます。

personがオブジェクトの場合、次のステートメントはpersonのコピーを作成しません。

const x = person;  // personのコピーは作成されません。

オブジェクトxは人のコピーではありません。それは人です。xとpersonはどちらも同じオブジェクトです。

xとpersonは同じオブジェクトであるため、xを変更するとpersonも変更されます。

const person = {   firstName:"John",   lastName:"Doe",   age:50, eyeColor:"blue" } const x = person; x.age = 10;      // x.ageとperson.ageの両方を変更する。

自分で試してみる»



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細