DEV Community

Cover image for JavaScript Fundamentals: Objects
Astrodevil
Astrodevil

Posted on • Updated on • Originally published at mranand.com

JavaScript Fundamentals: Objects

Today is the 13th day of my #100DaysOfCode journey with JavaScript.

I write about my learnings in an explained way through my blogs and socials. If you want to join me on the learning journey, make sure to follow my blogs and social and share yours too. Let's learn together!🫱🏼‍🫲🏼

This Article is a part of the JavaScript Fundamentals series.

Objects

In JavaScript, almost "everything" is an object. JavaScript objects start with an open curly-brace { and end with a closed curly brace }. It contains key-value pairs in between these braces.

const team = {
    name: "India",
    wins: 91,
    inFinals: true,
};
Enter fullscreen mode Exit fullscreen mode

In above object team, we have three keys: name, wins and inFinals. The value associated with name is "India", with wins is 86 and with inFinals is true.

Example: Let's create an object representing a pizza order! In the order object, add the following three keys with values accordingly:

pizzas - Any number greater than zero.

extraCheese - A boolean. Either true or false.

deliveryInstructions - Any string of instructions.

const order = {
    pizzas: 5,
    extraCheese: true,
    deliveryInstructions: "Keep it medium",
};
Enter fullscreen mode Exit fullscreen mode

Retrieve Values

Now we will retrieve values from object. From the given code, If we wanted to retrieve the name of the team, we can do this in two ways:

const team = {
    name: "India",
    wins: 91,
    inFinals: true,
};
Enter fullscreen mode Exit fullscreen mode
console.log( team.name ); // India
console.log( team['name'] ); // India
Enter fullscreen mode Exit fullscreen mode

Brackets [] or . property accessor operator can be used, similar to arrays!

Array of Objects

Now, we will see what happens if we put objects inside arrays and vice versa.

Let's take our team example again:

const team = {
    name: "India",
    wins: 91,
    inFinals: true,
};
Enter fullscreen mode Exit fullscreen mode

What if we have multiple teams:

const teams = [India, Australia, England];
for(let i = 0; i < teams.length; i++) {
    console.log(teams[i].name); 
}
Enter fullscreen mode Exit fullscreen mode

This example loops over each team and logs out the name of each team.

Example: Given an array of pizza orders, return the total number of pizzas ordered. The orders are an array of objects, each with pizzas key inside.

function numberOfPizzas(orders) {
    let total = 0;
    for(let i = 0; i < orders.length; i++) {
        total += orders[i].pizzas;
    }
    return total;
}
Enter fullscreen mode Exit fullscreen mode

Enumerated Types

When numbers are defined, code is easier to read and maintain. Consider the following instance:

const card = {
    suit: 1,
    value: 5
}
Enter fullscreen mode Exit fullscreen mode

Spades, Clubs, Hearts, and Diamond cards are suits.

What is the suit of this card? We are aware that the value is 1, but what does that actually mean? Let's define CARD_SUITS:

const CARD_SUITS = {
    DIAMONDS: 0,
    HEARTS: 1,
    SPADES: 2,
    CLUBS: 3
}
Enter fullscreen mode Exit fullscreen mode

We can identify our card suit by using this object:

const card = {
    suit: CARD_SUITS.HEARTS,
    value: 5
}
Enter fullscreen mode Exit fullscreen mode

It only needs to be changed once in CARD_SUITS if we ever wish to change which suit belongs to which value. This type of object is commonly referred to as an Enumeration.

Example: Let's create an enumeration like CARD_SUITS above. Our enumeration will be named ORDER_TYPES and describe the different types of orders that are possible in our system. The first type should be PIZZA, with a value of 0. After that, create at least 2 more options of your choice!

const ORDER_TYPES = {
    PIZZA: 0,
    WINGS: 1,
    SALAD: 2,
}
Enter fullscreen mode Exit fullscreen mode

Importing Files

Let's import the ORDER_TYPES we just created into numberOfPizzas.js.

We can use require to pull in the exports from orderType.js:

const ORDER_TYPES = require('./orderTypes');
Enter fullscreen mode Exit fullscreen mode

Example: Modify the numberOfPizzas function to only count pizzas when the order.type is equal to ORDER_TYPES.PIZZA.

// orderTypes.js

const ORDER_TYPES = {
    PIZZA: 0,
    WINGS: 1,
    SALAD: 2,
}
Enter fullscreen mode Exit fullscreen mode
// numberOfPizzas.js

const ORDER_TYPES = require('./orderTypes');

function numberOfPizzas(orders) {
    let total = 0;
    for(let i = 0; i < orders.length; i++) {
        if (orders[i].type === ORDER_TYPES.PIZZA) {
            total += orders[i].pizzas;
        }
    }
    return total;
}
Enter fullscreen mode Exit fullscreen mode

Number of Keys

There are a few approaches to obtaining every key in an object. To iterate across all properties, we can use the in operator:

const object = { a: 1, b: 2, c: 3 } 
for(let key in object) {
    console.log(key);
}
Enter fullscreen mode Exit fullscreen mode

After 3 iterations this will log a, b and c which are the keys of object. We can use some methods on object that will return an array of that data.

const object = { a: 1, b: 2, c: 3 } 
console.log( Object.keys(object) ); // ['a', 'b', 'c']
console.log( Object.values(object) ); // [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

Example: Given an object, find the number of keys inside the object. Return this number.

function numberOfKeys(object) {
    return Object.keys(object).length;
}
Enter fullscreen mode Exit fullscreen mode

Edit Object Values

We can also edit values in an object.

const person = {
    name: "Sohan",
    age: 21
}

person.name = "Rohan";
person["age"] = 40;

console.log( person.name ); // Rohan
console.log( person.age ); // 40
Enter fullscreen mode Exit fullscreen mode

In retrieval, we can use the . or [] notation. We can also remove keys completly.

const person = { 
    name: "Tom"
}

delete person.name;

console.log( person.name ); // undefined
Enter fullscreen mode Exit fullscreen mode

Modify Object

In JavaScript, objects are passed by reference. We can write functions to modify objects.

function modify(object) {
    object.message = "Hello World";
}
Enter fullscreen mode Exit fullscreen mode

Let's create an object and pass it to the above function:

const store = {
    name: "Star Eleven" 
}

modify(store);

console.log(store.message); // Hello World
Enter fullscreen mode Exit fullscreen mode

The object argument within the modify method is referencing the same memory as the store. Passing by reference is defined as this.

The object gets updated everywhere it is referenced when it is updated using the modify function.

Conclusion

Ending with an extra bit of information about JavaScript...

A JavaScript object is a state-and-behaviour-containing entity (properties and method). Examples include a car, pen, bicycle, chair, glass, keyboard, and monitor. JavaScript is an object-based language. In JavaScript, everything is an object. JavaScript relies on templates rather than classes. To obtain the object in this case, no class is created. But we deliberately make objects.

It is always a good idea to be careful about modifying objects directly! The function is modifying something outside of its scope, potentially leading to unexpected consequences!

Today I learned about Objects in JavaScript.

If You ❤️ My Content! Connect Me on Twitter or Supports Me By Buying Me A Coffee☕

Top comments (0)