JavaScript: Object Tutorial

By Xah Lee. Date: . Last updated: .

JavaScript object is a collection of key/value pairs.

Each key/value pair of a object is called property. [see Property Overview]

Properties are unordered, and values can be changed anytime, and property can be added or removed, anytime.

Each object automatically inherit parent object's properties.

JavaScript objects are used for 2 purposes:

Create Object

Most easy way is to use Object Literal Expression, like this:

{name_1:val_1, name_2:val_2 etc}

// create a object with 3 properties
const jj = { "cat": 19, "dog": 20, "rabbit": 25 };

Access Property

2 syntax to access property:

// creating a object
const jj = { "cat": 19, "dog": 20, "rabbit": 25 };

// Accessing property, bracket notation
console.log(jj["cat"] === 19);

// Accessing property, dot notation
console.log(jj.cat === 19);

[see Property Dot Notation / Bracket Notation]

Add Property

Create a empty object, then add some properties:

const jj = {}; // creating a object
jj.c1 = 3; // add a property c1
jj.c2 = 4;

console.log(jj);
// { c1: 3, c2: 4 }

Change a Property's Value

const jj = { "a": 1, "b": 2 };
jj.a = 9;
console.log(jj);
// { a: 9, b: 2 }

Delete a Property

To delete a property, use the delete [see “delete” Operator] .

const jj = { "cat": 19, "dog": 20, "rabbit": 25 };
delete jj.cat;
console.log(jj);
// { dog: 20, rabbit: 25 }

Enumerate Object's Properties

const jj = { "a": 19, "c": 20, "b": 25 };

// loop thru object's own enumarable properties
Object.keys(jj).forEach((x) => {
  console.log(x, jj[x]);
});

/* [
prints
a 19
c 20
b 25
] */

See:

Nested Array and Object

Because object's property's value can be any object data type, so you can have any nested array and object. (because array is also a object. [see Understand JS Array])

// Key/Value, with one value being array
const x = { "a": 1, "b": 2, "c": [3, 4] };
console.log(x["c"][0] === 3);

Example of key/value with one value being a variable that eval to array:

const y = [3, 4];
const x = { "a": 19, "b": 20, "c": y };
console.log(x["c"][0] === 3);

The syntax for accessing elements can be chained.

// syntax for accesing array/hash can be chained

console.log({ "a": 1, "b": 2, "c": [3, 4] }["c"][0] === 3);

Following is another example of JavaScript object. This is a JSON format. [see What is JSON] 

// JSON format is basically nested js objects
const myStructure = {
  name: {
    first: "Cat",
    last: "bird",
  },
  age: 19,
  hobbies: ["shopping", "dancing"],
};

Object and Methods

Remember, property names are string type or symbol type. [see Property Key]

Remember, property values can be any type, including any object. (function and array are both objects) [see Object Type]

Define Method

A method is just a property that has value of function.

// create a object
const jj = {};

// create a method named m
jj.m = function (x) {
  return x + 1;
};

// calling the method
console.log(jj.m(3) === 4);

ThisBinding

In JavaScript, when a function is called, it has a associated value called “ThisBinding”.

In function body, the “ThisBinding” is represented by the keyword this.

The purpose of “ThisBinding” is to allow function to implicitly work with a object. (without actually passing a argument in function call.)

When a function is called as a method in the form obj.f(), the value of “thisBinding” is the object obj.

// create a object, with one property p1
const jj = { "p1": 3 };

// make property p2 to be a function, which simply return thisBinding
jj.p2 = function () {
  return this;
};

// show jj
console.log(jj);
// { p1: 3, p2: [Function] }

console.log(jj === jj.p2());
// true because p2 is a function that returns 「this」, which is jj

How this keyword gets its value depends on many things. For detail, see this Binding

JavaScript Object Model

JavaScript object model is very different from Java, Python, Ruby.

For detail, see: Object Overview

Browser Console Object Syntax Error?

JavaScript Object and Inheritance

BUY
ΣJS
JavaScript in Depth