🟨JavaScript objects

collections of properties and values (the "nouns")

So far, we have:

• done some stuff with basic data values called primitives

• assigned those primitives to locations called variables

• done things to those variables with operators

• done even more things to variables with functions

Now, we take it to another level with objects:

• which encapsulate data in pairs called keys and values

  • the key describes the value

  • the value acts as the data point

    • could consist of a primitive, another object or even a function

We call a function that lives inside an object property, a method!

Some (abstract and concrete) examples of objects:

// the simplest object has an empty set of curly braces
const emptyObject = {}

// the simplest non-empty object has a key and some value
const oneKeyObject = {
    name: "Jon"
}

// objects can have properties which hold values of any data type: 
const complexObject = {
    key1 : "Hello",
    key2 : "Hey", 
    anotherKey : 42, 
    someOtherKey : true, 
    nestedObject : { 
        nestedObjectKey: true
    },
    method: function() {
        return "Surprise!"
    }
}

// example of an object used "in real life": 
const person = {
    name : "Jon", 
    age : 100, 
    retired : false, 
    hobbies : ["travel", "languages", "sports"], 
    getAge : function() {
        return this.age
    }
}

We can gather from the above that:

• the object has keys separated by commas

• keys can have names similar to variables

  • but with no declaration keywords (i.e. const, let,var)

More abstractly:

keyword anObject = {
    aKey1 : aValue1, 
    aKey2 : aValue2,
    ...
}

Recall that objects copy by reference :

• when we copy an object and we change the original...

  • ... we also make the same changes in the copy!

  • ... because variables store references to the object

    • ...and not the object itself

Accessing object properties

Let's look at our abstract example of a complex object, with an additional key:

const complexObject = {
    key1 : "Hello",
    key2 : "Hey", 
    anotherKey : 42, 
    someOtherKey : true, 
    nestedObject : { 
        nestedObjectKey: true
    },
    method: function() {
        return "Surprise!"
    }
    "multi-word key" : "yes we can do this too"
}

To access an object property, we can use the following notations (whether in a variable or passing it as an argument with console.log):

• dot notation

  • i.e. complexObject.key2 to get "Hey"

• bracket notation

  • i.e. complexObject["multi-word key"] to get "yes we can do this too"

  • this allows the key to have more than one word (however, the key name must use quotation marks) or even with variable names

For nested objects, for whichever notation, we can chain the properties:

const person = {
    name: {
        first: "Mark",
        middle: "James", 
        last: "Park"
    },
    phone: {
        personal: {
            land: '555-111-1234'
            mobile: '555-999-8875'
        },
        work: {
            land: '000-000-0000'
        }
    } 
}  

console.log(person.name.last)
// Park  

console.log(person["name"]["last"])
// Park

console.log(person["phone"]["personal"]["land"])
// '555-111-1234'

This can go down to any number of levels, as both notations are robust but concise!

Removing object properties

We can use the unary delete operator with the object's name and property:

const simpleObject = { 
    key1 : "Hi",
    key2 : 100,
    key3 : false
}

delete simpleObject.key2

console.log(simpleObject.key2)
// undefined

console.log(simpleObject)
// { key1 : "Hi", key3 : false }

To delete multiple properties at a time, we can use destructuring! In the next example, suppose we wish to remove key1 and key2:

const simpleObject = { 
    key1 : "Hi",
    key2 : 100,
    key3 : false,
    key4 : null
}

const { key1, key2, ...simplerObject } = simpleObject

console.log(simplerObject)
// { key3 : false, key4 : null }

We would thus specify the properties that we wish to remove. Then, we use the spread operator to create a new object. Although this does not change the original object, it gives us an object with the removed properties.

Checking object properties : hasOwnProperty() and in

To check if a property name exists in an object, we can use a simple built-in method called hasOwnProperty():

const simpleObject = { 
    key1 : "Hi",
    key2 : 100,
    key3 : false,
    key4 : null
}

console.log(simpleObject.hasOwnProperty("key1"))
// true

console.log(simpleObject.hasOwnProperty("key5"))
// false

We can also use the inoperator if hasOwnProperty()is too long:

const simpleObject = { 
    key1 : "Hi",
    key2 : 100,
    key3 : false,
    key4 : null
}

console.log("key1" in simpleObject)
// true

console.log("key5" in simpleObject)
// false

Optional chaining operator

We can use the optional chaining operator (a question mark, ?, after the property name) to avoid worrying about whether or not an object or a property exists:

const simpleObject = { 
    key1 : "Hi",
    key2 : 100,
    key3 : false,
    key4 : null
}

console.log(simpleObject.key5?.name)
// undefined

console.log(simpleObject?.key5)
// undefined

In the case above, key5as a property does not exist but will not throw an error. Instead, it will return undefinedwhich we can handle accordingly.

Destructuring properties from nested objects

We can access the value of a "nested property within a property" (key2a and key2b in the example below) using a special destructuring syntax:

const complexObject = {
    key1 : "Hi", 
    key2 : {
        key2a : "2A",
        key2b : "2B"
    }
}

const { key2 : { key2a }} = complexObject
console.log(key2a)
// 2A

const { key2 : { key2a, key2b }} = complexObject
console.log(key2a, key2b)
// 2A 2B