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

Array and object can be nested when each other.

// 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/object 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: function (keyword)

Browser console object syntax error?

• JS: Object Literal Expression SyntaxError: Unexpected token colon