JS: Object Basics

JavaScript object is a collection of key/value pairs.

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

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

• Property key is a string type or symbol type. [see JS: Symbol Tutorial]
• Property value can be any type. [see JS: Value Types]

Each object automatically inherit parent object's properties.

JavaScript objects are used for 2 purposes:

• As a data structure of list of key/value pairs. (for example, JSON)
• For Object Oriented Programing, where objects is a bundle of data and methods (functions).

Creating Object

The literal expression to create a object has this syntax:

{name_1:val_1, name_2:val_2, …}

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

Access Property

2 syntax to access property:

• bracket notation: object[property_key]
• dot notation: object.property_key

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

// Accessing property, bracket notation
nn["cat"] // 19

// Accessing property, dot notation
nn.cat // 19

[see JS: Property Dot Notation / Bracket Notation]

Adding Properties

Create a empty object, then add some properties:

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

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

Change a Property's Value

const obj =  {"1": "a", "2": "c"};

obj["2"] = "b";

console.log( obj); // { '1': 'a', '2': 'b' }

Delete a Property

To delete a property, use the operator delete.

const nn = {"cat":19, "dog":20, "rabbit":25};
delete nn["cat"]; // delete a property
console.log(nn); // { dog: 20, rabbit: 25 }

Loop-Thru Object's Properties

Object.getOwnPropertyNames(obj) return all property names as a array, then use forEach to loop thru them.

Object.keys(obj) return all enumerable property names as array, then use forEach to loop thru them.

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

// loop thru object's own properties, including non-enumarable properties
Object.getOwnPropertyNames(nn).forEach( ((x) => { console.log(x, nn[x]); }) );

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

Note: each JavaScript property has “attributes”, and one of them is enumerable. Its value is true or false. Which property will show in a loop construct dependes on this value, and the loop construct.

[see JS: Property Attributes, writable, enumerable, configurable]

To loop thru a object's enumerable properties and its inherited enumerable properties, use for (var x in object) {…}. The x will be the value of each property in the loop body.

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

// loop thru a object's enumerable properties and its inherited enumerable properties
for (const x in nn) {
    console.log(x);     // prints each key
    console.log(nn[x]); // prints each value
}

Note: JavaScript object has inherihance. [see JS: Prototype and Inheritance]

Note: when properties is looped thru, order is not guaranteed, but usually, older property comes first, and object's own property comes before inherited property.

For more about looping thru properties, see: JS: Access Property

Get All Keys of Object

Object.keys(obj) → Return a array of property names that are obj's own properties, and their “enumerable” attributes are true.

const j = {"a":19, "c":20, "b":25};
console.log( Object.keys(j) ); // prints [ 'a', 'c', 'b' ]

• JS: Check Property Existence
• JS: Access Property

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 JS: Understand JS Array])

// Key/Value, with one value being array:
const x = {"a":19, "b":20, "c":[3,4]};
console.log( x["c"][0]); // prints 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}; // the y is array
console.log( x["c"][0] ); // prints 3

The syntax for accessing elements can be chained.

// syntax for accesing array/hash can be chained
console.log(
 {"a":19, "b":20, "c":[3,4]}["c"][0]
);
 // prints 3

Following is another example of JavaScript object. This is a JSON format.

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

JSON is essentially a (nested) JavaScript object (including array) where the leaf values are string or number.

Object and Methods

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

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

Define Method

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

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

// calling the method
const y = j.m(3);

console.log(y);                 // prints 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 declare a parameter in definition and passing a argument in 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 obj = {"p1":3};

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

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

console.log( obj === obj.p2() );   // true

// returns true because p2 is a function that returns 「this」, which is obj

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

JavaScript Object Model

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

For detail, see: JS: Object Overview

Browser Console Object Syntax Error?

see JS: Browser JS Console Object Syntax Error