Javascript built-in data structure - Object

/
javascriptfundamentals

This tutorial is a part of the Learn everything about Javascript in one course.

What is Javascript object?

Object is the backbone data structure of Javasscript because of its usefulness in describing a real life object. By definition, Javascript object:

  • is made of key: value pair(s), middled by a colon :.
  • can have multiple pairs, separated by comma ,.
  • key is unique.
  • if a value is data (number, string, object ...), its key is called property.
  • if a value is a function, its key is called method.
object.js
// What is Javascript object?
const myObject = { 'a': 1 , 'b': 'c', 'd-e': [1, 2] } // an literal object
/*               ^  ^   ^ ^  ^    ^    ^          ^ ^
                 |  |   | |  |    |    |          | |
                 |  |   | |  |    |    ------------ |
                 |  |   | |  key  |         |       |
                 |  |   | |  'b'  |       3rd key:value pair
                 |  |   | |       |                 |
                 |  |   | |       value             |
                 |  |   | |       'c'               |
                 |  |   | |                         |
                 |  |   | comma separates pairs     |
                 |  |   |                           |
                 |  -----                           |
                 |    |                             |
                 |  1st key:value pair              |
                 |                                  |
                 open curly bracket                 close curly bracket
*/
console.log(myObject) // { a: 1, b: 'c', 'd-e': [ 1, 2 ] }

Object is a powerful way to represent real life object

You only need 2 things to represemt any real life object in Javascript:

  • What it is (property)
  • What can it do (method)
object.js
// Object is a powerful way to represent real life object
// example of a car represented by Javascript object
const car1 = {
  make: 'Tesla',
  model: 'Model X',
  year: 2020,
  isElectric: true,
  rangeMiles: 351,
  honk: () => 'beep beep!',
  selfIntroduce: () => {
    console.log(car1.honk())
    return `Hi, I am a ${car1.year} ${car1.make} ${car1.model}!`
  },
}
console.log(car1.isElectric) // true
console.log(car1.rangeMiles) // 351
console.log(car1.selfIntroduce())
// beep beep!
// Hi, I am a 2020 Tesla Model X!

// nested object
const car2 = {
  make: 'Tesla',
  parts: {
    headlight: {
      price: '$530'
    },
    'front-bumper': {
      price: '$270'
    },
  }
}
console.log(car2)
// {
//   make: 'Tesla',
//   parts: { headlight: { price: '$530' }, 'front-bumper': { price: '$270' } }
// }

Access/invoke (read/run) object property/method

Syntax read object property object.property or object['property']

Syntax run object method object.method()

object.js
// Read object property
const car3 = {
  make: 'Tesla',
  model: 'Model 3',
  year: 2020,
  parts: {
    headlight: {
      price: '$530'
    },
    'front-bumper': {
      price: '$270'
    },
  },
  selfDrive: () => 'Self driving activated!'
}
console.log(car3.model) // Model 3
console.log(car3.parts) // { headlight: { price: '$530' }, 'front-bumper': { price: '$270' } }
console.log(car3.parts.headlight.price) // $530, nested object property
console.log(car3.parts['front-bumper'].price) // $270, notice the second way to access property

// Run object method
console.log(car3.selfDrive()) // Self driving activated!


// access undefined property will return undefined
console.log(car3.color) // undefined

// access undefined method will crash the program
// un-comment following line will crash the program
// console.log(car3.honk()) // TypeError: car3.honk is not a function

Add new and update object property/method

Just like declaring new/updating variable or function, only difference is they belong to the object.

object.js
const car4 = {
  name: 'Bumblebee',
  honk: () => console.log(`it's Bumblebee`)
}

// Update object property
car4.name = 'Optimus Prime'
console.log(car4) // { name: 'Optimus Prime' }

// Update object method
car4.honk = () => console.log(`it's Optimus Prime`)
car4.honk() // it's Optimus Prime

// Add new object property
car4.heightFeet = 4
console.log(car4) // { name: 'Optimus Prime', honk: [Function], heightFeet: 4 }

// Add new object method
car4.transform = () => console.log(`blink, I've turned to humanoid form`)
car4.transform() // blink, I've turned to humanoid form

Delete object property/method

Syntax to delete object property delete object.propertyName.

Syntax to delete object method delete object.methodName.

delete in syntax is called delete operator.

object.js
const car5 = {
  name: 'Bumblebee',
  honk: () => console.log(`it's Bumblebee`)
}

// delete object property
console.log(car5) // { name: 'Bumblebee', honk: [Function: honk] }
console.log(delete car5.name) // true, return true if successful
console.log(car5) // { honk: [Function: honk] }

// delete object method
console.log(delete car5.honk) // true
console.log(car5) // {}, empty object

Check if object has a property or method

Often times we need to check to see if an object has a property or method. This can be done by simply accessing object property/method name.

Syntax object.propertyName or object.methodName. If object does not have given property/method, undefined will be returned.

object.js
// Check if object has a property or method
const car6 = {
  name: 'Bumblebee',
  honk: () => console.log(`it's Bumblebee`)
}
console.log(car6.model) // undefined, object does not have property or method called model

Method chaining means running method of returned object

Syntax object.method1().method2()

Method chaining is quickhand to run a series of methods. It's important to note that next chained method is a method of an object returned by the prior method.

object.js
// Method chaining means running method of returned object
const myObj = {
  method1: () => {
    console.log('running method1')
    return { // return an object which has method2
      method2: () => console.log('running nested object method2')
    }
  }
}
// the two following lines
const myObj2 = myObj.method1() // running method1
myObj2.method2() // running nested object method2
// are equivalent to
myObj.method1().method2() // method chaining
// running method1
// running nested object method2

In Javascript, object without method is JSON data

Data is encoded to string before sending back and forth in the internet. JSON (JavaScript Object Notation) is a standard format to do so.

In Javascript, object data structure without any methods is compliant with JSON data structure. To turn JSON object to string and back, we can use global object JSON methods.

Convert JSON object to string, JSON.stringify()

Syntax JSON.stringify(object)

Wrong, do not use! object.toString(). This method always gives '[object Object]' string.

object.js
// Convert object to string, JSON.stringify()
const car8 = {
  name: 'Bumblebee',
  age: 201,
}
console.log(JSON.stringify(car8)) // '{"name":"Bumblebee","age":201}'
console.log(car8.toString()) // [object Object], wrong! do not use

Convert a string to an object, JSON.parse()

Syntax JSON.parse(object)

object.js
// Convert object to string, JSON.stringify()
const strObject = '{"name":"Bumblebee","age":201}'
const convertedStr = JSON.parse(strObject)
console.log(convertedStr) // { name: 'Bumblebee', age: 201 }

// if object string is malformed, JSON.parse() will crash the program
// un-comment to see error
// console.log(JSON.parse('{"name":"Bumblebee","age":201,f}')) // SyntaxError: Unexpected token f in JSON at position 30

Summary

  • Javascript Object is a powerful data structure to represent real-life objects.
  • Object comprise of key:value pairs, separated by comma ,.
  • Object without method is compliant with JSON data structure.