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]

• Property key is a string type or Symbol Type.
• Property value can be any Value Type. (including other objects and Array and Function .)
• Property keys are kept unique. Later additions override previous.

• Property can be added or removed, anytime. (unless protected via Property Attributes.)
• Property values can be changed, anytime. (unless protected via Property Attributes.)
• Properties are ordered in a special way. [see Order of Properties]

Each object may have a parent object. Only one parent. But may have none.

Key lookup will check a object's own property, if none found, will check parent or parent of parent, until found or no more parent. this is called inheritance. [see JS: Prototype and Inheritance]

JavaScript objects are used for 2 purposes:

• As a data store of list of values, looked up by key.
• For Object Oriented Programing, where a object is a bundle of data and functions (known as methods) that work on the data.

Create object

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

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

// quote optional when key names do not contain space
const xx = { cat: 19, dog: 20, rabbit: 25 };

console.log(xx);
// { 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: Dot vs bracket syntax for property access

Add property

// create a object
const jj = {};

// add property
jj.dog = 3;
jj.cat = 4;

console.log(jj);
// { dog: 3, cat: 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 👎

Check property existence

console.log(
 Object.hasOwn({ dog: 1, cat: 1 }, "cat"),
);
// true

console.log(
 Object.hasOwn({ dog: 1, cat: 1 }, "bird"),
);
// false

// example. check if a property exist in parent chain

const xdad = { dog: 3 };
const xson = { puppy: 3 };
Reflect.setPrototypeOf(xson, xdad);

console.log(
 Reflect.has(xson, "dog"),
);
// true

console.log(
 Reflect.has(xson, "puppy"),
);
// true

console.log(
 Reflect.has(xson, "cat") === false,
);
// true

console.log(
 Reflect.has(xson, "toString"),
);
// true

• JS: Check Property Existence

Loop over object's properties

const jj = { dog: 19, cat: 20, bird: 25 };

// loop thru object's own enumarable properties

Object.keys(jj).forEach(
 (x) => {
  console.log(x, jj[x]);
 },
);

// dog 19
// cat 20
// bird 25

• JS: List Properties (to array)

Nested array and object

Array and object can be nested in 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(
 { cat: 1, dog: 2, bird: { crow: 3, parrot: 4 } }.bird.crow,
);
// 3

// example with array
console.log(
 { cat: 1, dog: 2, bird: [3, 4] }["bird"][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

• JS: Define method

Browser console object syntax error?

• JS: Object Literal Expression SyntaxError: Unexpected token colon