JS: Object (basics)

What is JavaScript Object Datatype

JavaScript object is a collection of key-and-value pairs.

Each key-and-value pair of a object is called property. 〔see Property Overview〕

• Properties are ordered in a special way. 〔see Order of Properties〕
• Property values can be changed, anytime. (unless protected via Property Attributes.)
• Property can be added or removed, anytime. (unless 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-and-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

Read Property

const jj = { cat: 19, dog: 20 };
// access property, dot notation
console.log(jj.cat);
// 19

const jj = { cat: 19, dog: 20 };
// access property, bracket notation
console.log(jj["cat"]);
// 19

• JS: Property Dot Notation vs Bracket Notation

Add Property

// create a object
const jj = {};

// add property
jj.aa = 3;
jj.bb = 4;

console.log(jj);
// { aa: 3, bb: 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 JS: Array (overview)〕)

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

Example of key-and-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 :