JS: Object Tutorial

What is JavaScript Object Datatype

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. (After JS2015, some order is guaranteed, but exactly what is a bit complex.)
• Property values can be changed anytime. (unless specifically protected via Property Attributes.)
• Property can be added or removed, anytime. (unless specifically protected via Property Attributes.)

• Property key is a string type or Symbol Type.
• Property value can be any Value Type.

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. (e.g. JSON)
• For Object Oriented Programing, where a object is a bundle of data and functions (aka methods) that work on the data.

Create Object

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

• JS: Object Literal Expression

Access Property

2 syntax to access property:

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

// 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);

• JS: Property Dot Notation vs 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

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

• JS: “delete” Operator

Loop Over 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
*/

• JS: Property Attributes
• JS: Check Property Existence
• JS: Access Property
• JS: List Properties

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 JSON Data Format〕

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

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);

• JS: Define Function

JavaScript Object Model

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

• JS: Object Overview

Browser Console Object Syntax Error?

• JS: Browser Console SyntaxError: Unexpected token :