They're useful in so many applications, and many other data structures build on top of JavaScript arrays and objects. While the language provides a lot of helpful array and object methods, you can take it even a step further using Collect.js.

This article takes you through:

• What is Collect.js?
• How to install Collect.js
• How to Use Collect.js
• Some Collect.js Methods

What Is Collect.js?

The official docs of Collect.js describes it as a "Convenient and dependency free wrapper for working with arrays and objects."

A simpler way to explain this is that Collect.js is a JavaScript library for working with arrays and objects. It provides a layer on top of the built-in functions to make working with them easier.

Collect.js works how Laravel collections (where the inspiration came from) work. It makes it very easy for Laravel developers, when working with JavaScript, to develop as fast as they would if they were using PHP. But this doesn't mean a native JavaScript developer wouldn't find it really helpful, too.

Collect.js is growing gradually, as it currently has over 6k stars on GitHub and about 200k weekly downloads on NPM at the time of this writing.

How to Install Collect.js

To start using Collect.js in your projects, you have to install it first. Like other JavaScript libraries, you can easily install Collect.js using npm or yarn. You can also install it using a CDN. For this tutorial, we will install it using npm like this:

npm i collect.js

After installation, you can import it into the modules where you need it, like this:

import collect from 'collect.js';

And once it has been imported, you can begin making magic with Collect.js.

You can read about other installation methods on the official documentation website.

How to Use Collect.js

After installation and importation, to use Collect.js in your projects you'll need to convert your required data to a Collect.js collection.

A Collect.js collection is a JavaScript object that has functions not natively available to regular JavaScript arrays and objects.

To create a collection, simply use the collect method imported earlier on any array or object. It's that simple – here's an example:

const students = ['John', 'James', 'Ian', 'David'];

const studentsCollection = collect(students);

Now, using an IDE like WebStorm, you can see methods available to the simple collection you just created:

List of available methods

This article does not cover all of these functions, but you can see that you now have more than JavaScript originally offers through Collect.js.

Some Collect.js Methods

To help understand how much Collect.js simplifies common array and object methods, we'll now look at how to use some very useful Collect.js methods.

The average method (or avg)

This method, as you may assume, calculates an average of a collection of numbers. Here's how you use it:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const average = collect(numbers).avg();

console.log(average); // 5.5

In this example, we've create an array of numbers between 1 and 10, inclusive. Then we get the average of these numbers using Collect.js.

To do this in vanilla JavaScript, you would have to first sum the numbers using array.reduce or a loop, then get the length of the original array, and divide the sum by this length. See the below example implementation:

const sum = arr => arr.reduce( ( p, c ) => p + c, 0 );
const size = numbers.length;
const average = sum(numbers) / size;

console.log(average); // 5.5

You can see that it's way easier and more elegant using Collect.js.

You can also use the average method directly on more complex structures like an array of objects. Here's an example where the average score of a class of students, stored in an array of students details with a scores key, is calculated using Collect.js:

const studentsDetails = [
    { name: 'John', score: 40, subject: 'Maths' },
    { name: 'James', score: 70, subject: 'Science' },
    { name: 'Ian', score: 50, subject: 'Maths' },
    { name: 'David', score: 60, subject: 'Science' },
];

const studentsCollection = collect(studentsDetails);
const averageScore = studentsCollection.avg('score');
console.log(averageScore); // 55

Here the average is gotten in a very straightforward approach and takes less effort than doing it in vanilla JavaScript. And it uses the short hand avg instead of the longer average.

The chunk method

This method breaks an array into smaller bits based on a given size. This is a common operation when dealing with JavaScript arrays in real life. A common use case would be in pagination of records.

Using the same studentsDetails array created in the last example, I could break down the collection into groups of two using the chunk method, like this:

const studentsCollection = collect(studentsDetails);
const studentGroups = studentsCollection.chunk(2);

This breaks down the original studentsCollection array into two sub collections that look like this:

Collection {
  items: [
    { name: 'John', score: 40, subject: 'Maths' },
    { name: 'James', score: 70, subject: 'Science' }
  ]
}
Collection {
  items: [
    { name: 'Ian', score: 50, subject: 'Maths' },
    { name: 'David', score: 60, subject: 'Science' }
  ]
}

To achieve a similar result in vanilla JavaScript takes more effort as you would require a loop:

const chunkedArray = [];
for (let i = 0; i < studentsDetails.length; i += 2) {
    const chunk = studentsDetails.slice(i, i + 2);
    chunkedArray.push(chunk);
}

console.log(chunkedArray);

The contains method

You can use this method to check whether some key or value exists in a collection. This function allows you to check regardless of the shape or structure of the data.

For example, to check the existing studentDetails for the subject Physics, you can do this:

const studentsDetailsCollection = collect(studentsDetails);

console.log(studentsDetailsCollection.contains('Physics')); // false

To check if we have a student named Science instead of the subject, we could specify what field to check by passing in the field name as a first parameter before the search value:

const studentsDetailsCollection = collect(studentsDetails);

console.log(studentsDetailsCollection.contains('name', 'Science')); // false

You can even check to see if the collection contains values that match a certain condition. Like to see if any student scored more than 50:

const studentsDetailsCollection = collect(studentsDetails);

console.log(studentsDetailsCollection.contains((value, key) => value.score > 50)); // true

To perform any of these checks in vanilla JavaScript would involve using a loop to check each object in the array. You could also do it using the some method.

The diff method

This method is used to get the difference between two collections. The collections could be plain arrays or array of objects.

const numbers = collect([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const primeNumbers = collect([2, 3, 5, 7]);

console.log(numbers.diff(primeNumbers).all()); // [ 1, 4, 6, 8, 9, 10 ]

Here we get the numbers that are not prime between 1 and 10 inclusive by removing the array of primeNumbers from the array of those numbers using the diff method.

The get method

This method is used to get values from a collection. If the collection was created from an array, it can accept the array index to return the value at that position.

If the collection was created from an object, it can accept a key and return the value for that key. It returns null when no value is found. You can pass in a default value to prevent it from returning null.

Using the numbers collection created in the last example, you can get the first and twelfth elements, and return 10 if it doesn't exist, like this:

const firstNumber = numbers.get(0);
const twelfthNumber = numbers.get(11, 10);

console.log(firstNumber); // 1
console.log(twelfthNumber); // 10

The firstNumber returns 1 as expected, but the twelfthNumber returns 10, instead of returning null or throwing an error. This is very useful when dealing with user inputs and having optional parameters.

The all method

This method has already been used in a few examples, so you can probably guess it's usage already. You use it to get the object or array under the collection.

Using this method on the numbers collection just returns the original array of numbers:

console.log(numbers.all()); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

The groupBy() method

If you have any SQL experience, this method name will sound familiar. It works similarly to the SQL function, too: it groups data in a collection by a given key.

Using this method, we can group the students by the subject offered, like this:

const studentsGroupedBySubject = collect(studentsDetails).groupBy('subject');
console.log(studentsGroupedBySubject.all());

This will create two subcollections for the two subjects, maths and physics.

{
  Maths: Collection { items: [ [Object], [Object] ] },
  Science: Collection { items: [ [Object], [Object] ] }
}

The isEmpty and isNotEmpty methods

The isEmpty method checks is a collection is empty, and the isNotEmpty checks otherwise. These methods help prevent the object spoofing vulnerability.

console.log(numbers.isEmpty()) // false
console.log(numbers.isNotEmpty()) // true

The first and last methods

These method names are as descriptive as they can be. The first method gets the first element of a collection. It can also be used to get the first that matches a condition.

For example, to get the first student that scores more than 40 in the subject maths, you can use the first method like this:

console.log(studentsDetailsCollection.first((student) => student.score > 40 && student.subject === 'Maths'));

The last method is also very similar to the first method. It gets the last element of a collection when called with no condition. When a condition is specified, it gets the last element that matches that condition.

For example, to get the last student that fails maths in the studentsDetailsCollection, use this code:

console.log(studentsDetailsCollection.last((student) => student.score < 40 && student.subject === 'Maths'));

This last example returns undefined as no student fails maths.

To acheive these same results using vanilla JavaScript would involve a loop that checks each element and keeps track of the first and last that match the condition, like this:

const getFirstStudentThatPassesMaths = (studentDetails) => {
    let firstStudentThatPassesMaths = undefined;

    studentDetails.forEach((student) => {
        if (student.subject === 'Maths' && student.score > 40) {
            firstStudentThatPassesMaths = student;
            return false;
        }
    });

    return firstStudentThatPassesMaths;
}

const getLastStudentThatFailsMaths = (studentDetails) => {
    let lastStudentThatFailsMaths = undefined;

    studentDetails.forEach((student) => {
        if (student.subject === 'Maths' && student.score < 40) {
            lastStudentThatFailsMaths = student;
        }
    });

    return lastStudentThatFailsMaths;
}

console.log(getFirstStudentThatPassesMaths(studentsDetails));
console.log(getLastStudentThatFailsMaths(studentsDetails));

See how much simpler the Collect.js implementations are.

The macro method

This method is very useful, as it allows you even extend Collect.js further by adding your own methods. It has the following structure:

collect().macro('functionName', function () {
    // function body
});

Here, functionName is the name of the new function you're adding, and the function body is where your new logic goes.

For example, to assign grades to students using our studentsDetailsCollection, we can create a new method called grade. We can make it a bit more complex and have the function modify the collection by adding the calculated grade to each student object.

collect().macro('grade', function () {
    return this.map(item => {
        if (item.score >= 70) item.grade = 'A';
        else if (item.score >= 60) item.grade = 'B';
        else if (item.score >= 50) item.grade = 'C';
        else if (item.score >= 45) item.grade = 'D';
        else if (item.score >= 40) item.grade = 'E';
        else item.grade = 'F';

        return item;
    });
});

You can then call the method on the collection like any other built-in method like this:

studentsDetailsCollection.grade();

After modification, your collection will look like this:

[
  { name: 'John', score: 40, subject: 'Maths', grade: 'E' },
  { name: 'James', score: 70, subject: 'Science', grade: 'A' },
  { name: 'Ian', score: 50, subject: 'Maths', grade: 'C' },
  { name: 'David', score: 60, subject: 'Science', grade: 'B' }
]

Summary

I hope you now understand how to simplify your JavaScript development using simple Collect.js functions. This article only covers some of the most useful methods, but there are more available. To learn more, refer to the official documentation.

If you have any questions or relevant advice, please get in touch with me.

To read more of my articles or follow my work, you can connect with me on LinkedIn, Twitter, and Github. It’s quick, it’s easy, and it’s free!

Walking into a hardware store, it's not enough to say: "I need a tool". You need to be specific about the type of tool you need.

Each tool type has its particular purpose: A hammer to drive a nail into wood, a paint brush to paint, and a wrench tightens or loosens nuts and bolts.

The same goes for the variables we use to hold data in our code. Regardless of the programming language you use, when building a website or app you'll want to use the appropriate type of variable for a particular purpose. We'll look at basic types and more complex types such as arrays (lists) and objects.

You can also watch the associated video here which walks through the key variable data types.

Basic Data Types

The most common basic data types available in most programming languages include:

numbers: we use this for any data that is numeric or should be worked with as a number for addition or other math operations.

In some programming languages, there are multiple data types for numbers, depending on whether the number is an integer, decimal, or currency, for example.

If we were building a number guessing game, we would hold the guessed number in a numeric data type, like this:

usersGuess = 3

string: we use this for any data that is text. For example, a name or address or message. In most programming languages, strings require quotes. Notice that the text inside of the quotes can include spaces and other special characters.

usersName = "Jack Harkness"

date: we use this for data that is a date or time, such as a birthday.

usersBirthday = April 14, 2001

Boolean: we use this for data that only has the value true or false. In a number guessing game, the user's guess was either correct or it wasn't. There is no other value.

correctGuess = true

For programming languages that are considered to be "strongly typed", such as C# and TypeScript, the data type defines the kind of data that can be assigned to that variable. You'll see an error if you try to put the wrong type of data into a variable.

pageTitle = 'Pet List';    // Variable is a string.

pageTitle = 42;            // Error
                        // Can't put a number into a string variable

With "dynamically typed" languages such as JavaScript and Python, the data type defines the kind of data currently assigned to that variable. That type can change if you put a different type of data into that variable. So the type dynamically changes based on the currently assigned value.

pageTitle = 'Pet List';            // Variable type is a string

pageTitle = 42;                    // Variable type is now a number

Array (List) Data Type

Another important data type in programming is an array, which in some programming languages is called a list.

Let's say we add a feature to our website or app so the user can provide the name of each of their pets. We could hold each name in a separate variable like shown in Figure 1.

Figure 1. Using separate string variables to hold multiple items.

But we'd then have to limit how many pets we could allow based on how many variables we'd defined.

Arrays solve this problem. An array is a collection or set of data items. You can think of an array as a list of items.

The data items in an array are often of the same type, so you may have an array of numbers, of strings, or of dates.

In some programming languages, including C#, TypeScript, JavaScript, and Python, arrays are defined with square brackets: [ ] and each value in the array is separated with commas.

petNames = ["Yoyo", "Vanny", "Cali"]

Here we define an array of strings. Recall that strings must be enclosed in quotation marks.

Figure 2. Using an array to hold multiple items.

With arrays, the user can have an almost limitless number of items, such as names, because we can keep appending to the array.

petNames = ["Yoyo", "Vanny", "Cali", "Ben", "Maki"]

Object Data Type (Custom Data Type)

What about data that represent things in our application? Things like those shown in Figure 3:

• A pet
• A customer
• A product
• Or post, and I actually mean a social media post here, but close enough.

Figure 3. Custom data type (object) examples.

We can hold detailed information about a thing, such as a pet or customer or blog post, in a set of string, number, and date variables. But to keep that set of variables for a particular thing together as one variable, we want a custom data type that describes that thing.

Think of an object as a custom data type that groups a set of related variables for a particular thing.

Let's walk through how to define an object as a custom data type.

Step 1: Identify Properties (Characteristics)

To define an object data type, we first identify the data we want to hold for the object. These are often characteristics of the object, like a pet's name, type, and age. In programming, we call each of these characteristics a property of the object.

Let's look at some examples.

Figure 4. Identify the data to store (or hold) for each object.

For a customer, the properties might be the customer's name, shipping address, and default payment method.

A product may have a product name, description, and a Boolean value defining whether the product is currently in stock.

And for a blog post, we may want to hold the user's name, the post text, and the date.

Each of these are properties of our object.

At this point, we have the list of properties for the object. We want to hold data for each of these properties.

Step 2: Assign a Property Name

Once we have the properties defined, we assign a name to each property as shown in Figure 5.

Figure 5. Define a variable name for each object property.

The names follow the conventions for the programming language you are using. In general, property names cannot have spaces or special characters in them. They are often defined using camel case, with the first letter lower case and each additional word capitalized.

Each property also has a basic data type. petName, customerName, productName, and userName are strings. age is a number, inStock is a Boolean value (true or false), and postDate is a date.

We could keep track of separate variables for each of these pet properties and each of these customer properties and each of these post properties. But we'd end up with lots of unorganized variables.

Let's instead group each set of related properties into an object.

Step 3: Group the Properties for the Object

We group the properties of an object together using object literal syntax. This keeps the data for an object together and makes it easier to work with it as a set.

The syntax used to group the properties depends on the programming language you use. In languages such as JavaScript, TypeScript, and C#, object properties are grouped within curly braces ({ }).

pet = {
    petName: "Yoyo",
    petType: "cat",
    age: 11
}

Figure 6. Group the properties for each object

For each object, the variable on the left of the equal sign is the object variable and represents a specific pet, customer, product, or post. On the right of the equal sign, inside the curly braces, we list each property name, a colon, and the data (often called a value). We separate properties with a comma.

To say that another way, you can think of an object as a collection of name and value pairs. The name is the property name and the value is the data you want to store for that property.

In Figure 6, we defined a pet object with a specific set of properties, and a value for each property. Same with the customer, and so on.

Try It Yourself!

Let's stop here for a moment and think about objects. What's your favorite hobby? If you built a website or an app to support that hobby, what objects might you define?

Maybe you like to bake, so you'd build a recipe app with your favorite recipes. You work with the data for each recipe using an object with properties such as ingredients, recipe steps, baking temperature, and time.

Or say you like sports. You'd track the data for each player using an object with properties such as name, position, and stats. And you'd track the data for each game using another object with properties such as teams and score.

What objects did you define for your hobby?

Wrapping Up

A variable has a data type such as number, string (for text), date, and Boolean (for true or false).

An array stores a set of data items, often of the same type.

An object represents something in the website or app, like a pet, a customer, or a blog post. The object groups related properties holding the data for the object.

Now that you know all about data types, you can create variables of the appropriate type to hold any data you need for your website or app.

If you are self-taught or new to programming and want more information about general programming concepts, check out this course:

[object, object] is the string representation of a JavaScript object data type. You'll understand better as we go further in this article.

There are two main contexts where you'll encounter such an output:

• When you try display an object using the alert() method (most common).
• When you use the toString() method on an object.

Let's take a look at some examples.

What Happens If You Alert an Object in JavaScript?

In this section, you'll see what happens when you use the alert() method to display an object in JavaScript. Here's the code example:

const student = {
  name: "John",
  school: "freeCodeCamp",
};

alert(student)

In the code above, we created an object called student. After using the alert() method to display the object in the browser, we got the output below:

From the image above, instead of having the object and its properties displayed, [object, object] was displayed.

This happens because when you use the alert() method to display an object in JavaScript, you get the string format displayed.

To fix this, you can use the JSON.stringify() method to change the object into a string that can be popped up in the browser using the alert() method. Here's an example:

const student = {
  name: "John",
  school: "freeCodeCamp",
};

alert(JSON.stringify(student));

When you run the code above, you should have the object and its properties displayed – similar to the image below.

What Happens When You Use the toString() Method on an Object in JavaScript?

The toString() method in JavaScript returns the string format of an object. This section will help you understand what happened under the hood in the last section.

When you use the toString() method on an object in JavaScript, you get the string representation – [object, object] – returned.

const student = {
  name: "John",
  school: "freeCodeCamp",
};

console.log(student.toString());
// [object Object]

As you can see in the code above, we used the toString() method on an object called student: student.toString().

When we logged this to the console, we got [object, object].

This effect is exactly what happens when you pop up an object in the browser using the alert() method (as we saw in the last section).

Summary

In this article, we talked about the odd looking [object, object] output in JavaScript.

We got to understand that the output is the string representation of an object data type in JavaScript.

You're most likely going to see such an output when you try to display an object in the browser using the alert() method, or when you use the toString() method on an object.

We also went through some code examples and images to demonstrate how you can see [object, object] in JavaScript.

Happy coding!

For instance, if you need to store three characteristics each for 10 individuals, having 30 variables individually declared can make your program appear less organized.

So you need a way to group values with similar characteristics together to make your code more readable. And in JavaScript, objects work well for this purpose.

Unlike other data types, objects are capable of storing complex values. Because of this, JavaScript relies heavily on them. So it's important that you become familiar with what an object is, how to create one, and how you can use it before going in-depth into learning JavaScript.

This article will introduce you to the basics of objects, object syntax, the different methods of creating objects, how to copy objects and how to iterate over an object.

In order to get the most out of this article, you need to have at least a basic understanding of JavaScript, particularly variables, functions, and data types.

What Are Objects in JavaScript?

An object is a data type that can take in collections of key-value pairs.

A major difference between an object and other data types such as strings and numbers in JavaScript is that an objects can store different types of data as its values. On the other hand, primitive data types such as numbers and strings can store only numbers and strings, respectively, as their values.

The key, also known as the property name, is usually a string. If any other data type is used as a property name other than strings, it would be converted into a string.

You can visualize an object as a multi-purpose shelf containing space for your gadgets and ornaments as well as a storage space for books, and files.

A shelf with several items in it

The most recognizable feature of an object is the brackets which contain the key-value pair.

const emptyObject = {};
console.log(typeof emptyObject); //'object'

The contents of an object can consist of variables, functions, or both. Variables found in objects are properties, while functions are methods. Methods allow the objects to use the properties within them to perform some kind of action.

For example, in the sample code below, object1.user, object1.nationality and object1.profession are all properties of object1 while object1.myBio() is a method:

const object1 = {
    user: "alex",
    nationality: "Nigeria",
    profession: "Software Enginneer",
    myBio() {
        console.log(`My name is ${this.user}. I'm a               ${this.profession} from ${this.nationality}`)
    }
}
console.log(object1.user); //Alex 
console.log(object1.nationality); //Nigeria 
console.log(object1.profession); //Software Engineer 
console.log(object1.myBio()); //My name is alex. I'm a Software Engineer from Nigeria

The keys in the sample code above are user, nationality and profession while their values are the string values that come after the colons. Also, notice the use of the this keyword. The this keyword simply refers to the object itself.

As mentioned earlier in this article, the value of a property can be any data type. In the following sample code, the values are both arrays and objects:

 const object2 = { 
        users: ["Alex", "James", "Mohammed"], 
        professions: { 
            alex: "software engineer", 
            james: "lawyer", 
            mohammed: "technical writer" 
        } 
    }; 
    console.log(object2.users); //['Alex', 'James', 'Mohammed'] 
    console.log(object2.professions); //{alex: 'software engineer', james: 'lawyer', mohammed: 'technical writer'}

How to Access Objects and Create New Object Properties or Methods in JavaScript

There are two ways to access objects: dot notation and bracket notation. In the previous sample code, we used dot notation to access the properties and methods in object1 and object2.

Also, to create new properties and methods after the declaration of an object, you can use either dot notation or bracket notation. You just have to state the new property and give it a value.

For instance, we can add new properties to object2 like this:

object2.ages = [30, 32, 40];
object2["summary"] = `Object2 has ${object2.users.length} users`;
console.log(object2);
/*
{
    "users": [
        "Alex",
        "James",
        "Mohammed"
    ],
    "professions": {
        "alex": "software engineer",
        "james": "lawyer",
        "mohammed": "technical writer"
    },
    "ages": [
        30,
        32,
        40
    ],
    "summary": "Object2 has 3 users"
}
*/

Similarly, you can use either notation to change the value of an object:

object2.users = ["jane", "Williams", "John"];
object2["age"] = [20, 25, 29]
console.log(object2.users); //['jane', 'Williams', 'John']
console.log(object2.ages) //[20, 25, 29

Although dot notation is the most commonly used to access an object's properties and methods, it has some limitations. Let's look at them now.

You Can't Use Values as Property Names with Dot Notation

If you want to use the value of a variable as a property name in your object, you have to use bracket notation and not dot notation. Whether the variable value is defined at runtime or not is irrelevant.

Runtime is a phase of a computer program in which the program is run or executed on a computer system.

For example:

const object3 = {};
const gadget = prompt("enter a gadget type"); 
object3[gadget] = ["jbl", "sony"]; 
console.log(object3) //(respose entered in prompt): ["jbl","sony"] notice that the property name is the value you enter in the reply to the prompt message

If you define the variable value in your code, and you use dot notation to set that value as a property name of your object, dot notation will create a new property with the variable name instead of with the variable value.

const computer = "brands"
object3.computer = ["hp", "dell", "apple"]
console.log(object3.brands); //undefined
console.log(object3.computer)//['hp', 'dell', 'apple']

object3[computer] = ["hp", "dell", "apple"]
console.log(object3.brands) //['hp', 'dell', 'apple']

Notice the omission of quotes within the square brackets. This is because the brackets took in a variable.

You Can't Use Multi-Word Properties with Dot Notation

Where the property name is a multi-word string then dot notation is insufficient. For instance:

object3.users height = [5.6, 5.4, 6.0];
Console.log(object3.users height); //SyntaxError

A syntax error occurs because JavaScript reads the command as object3.users, but the string height is not recognized so it returns a syntax error.

When using dot notation to access objects, the usual rules of declaring a variable apply. This means that if you want to use dot notation to access an object or create a property, the property name must not start with a number, must not include any spaces, and can only include the special characters $ and _.

To avoid this kind of error, you have to use bracket notation. For instance, you can correct the above sample code like this:

object3["users height"] = [5.6, 5.4, 6.0];  
console.log(object3["users height"]); //[5.6, 5.4, 6]

How to Create Objects with the Object Constructor in JavaScript

There are two methods by which you can create an object: an object literal and the object constructor. The objects used so far as samples in this article are object literals. Object literals work well if you want to create a single object.

But if you want to create more than one object, it is always better to use the object constructor. This allows you to avoid unnecessary repetition in your code and also makes it easier to change the properties of your object.

Basically, constructors are functions whose names are usually capitalized. The capitalization of a constructor name does not have any effect on the object. It is only a means of identification.

You can use a constructor to create a new object by calling the constructor with the new keyword. The new keyword will create an instance of an object and bind the this keyword to the new object.

As earlier mentioned in this article, the this keyword is a reference to the object itself.

An example of an object constructor is:

function Profile(name, age, nationality) { 
    this.name = name; 
    this.age = age; 
    this.nationality = nationality; 
    this.bio = function () { 
        console.log(`My name is ${this.name}. I'm ${this.age} years old. I'm from ${this.nationality}`) 
    } 
};

const oladele = new Profile("Oladele", 50, "Nigeria" );
console.log(oladele.bio()); //My name is Oladele. I'm 50 years old. I'm from Nigeria

How to Create Object Copies in JavaScript

Unlike primitive data types such as strings and numbers, assigning an existing object to another variable will not produce a copy of the original but rather a reference in memory.

What this means is that both the original object and subsequent objects created by assigning the original object as a value are referencing the same item in memory.

This means that a change in the value of any of the objects will also cause a change in the others. For example:

let x = 10;
let y = x;
x = 20;
console.log(x); //20
console.log(y); //10

let object4 = { 
    name: "Alex", 
    age: 40 
}; 
let object5 = object4; 
console.log(object5); //{name: 'Alex', age: 40} 
object4.name = "Jane"; 
console.log(object5); //{name: 'Jane', age: 40}
console.log(object4 === object5); //true

To create a copy of an object, you can use the spread operator.

What is the Spread Operator?

The spread operator is represented by three dots ... . You can use the spread operator to copy the values of any iterable including objects.

An iterable is an object which can be looped over or iterated over with the help of a for...loop. Examples of iterables include objects, arrays, sets, strings, and so on.

To use the spread operator, you will have to prefix it to the object you want to copy from. For instance:

let object6 = {...object5}; 
object5.name = "Willaims"; 
console.log(object5); //{name: 'Willaims', age: 40}
console.log(object6); //{name: 'Jane', age: 40}
console.log(object5 === object6); //false

As you can see, unlike in the previous code sample, where a change in the object4 caused a change in object5, the change in object6 did not result in a change in object5.

How to Use the Object.assign() Method

The Object.assign() method copies all enumerable properties of one object into another and then returns the modified object.

The method takes in two parameters. The first parameter is the target object which takes in the properties copied. The second parameter is the source object which has the properties you want to copy. For instance :

let object7  = Object.assign({}, object6); 
console.log(object7); //{name: 'Jane', age: 40}
console.log(object7); //{name: 'Jane', age: 40}

console.log(object6 === object7); //false
object6.age = 60
console.log(object6); //{name: 'Jane', age: 60}
console.log(object7); //{name: 'Jane', age: 40

You can see from the above sample code that a change in the value of the age property of object6 did not cause a change in the vale of the age property of object7.

Note that both the spread operator and the Object.assign() method can only make a shallow copy of an object.

This means that if you have deeply nested objects or arrays in your source object, only the references to such objects are copied into the target object. So a change in the value of any of the deeply nested objects would cause a change in the value of the deeply nested object of the other. For example:

let objectX = {
    name: 'Mary', 
    age: 40,
    gadgets: { 
        brand: ["apple", "sony"]
    }
};

let objectY = {...objectX};
objectY.name = "Bianca";
objectY.gadgets.brand[0] = "hp";
console.log(objectX);
/*
{
    "name": "Mary",
    "age": 40,
    "gadgets": {
        "brand": [
            "hp",
            "sony"
        ]
    }
}
*/ 

console.log(objectY);
/*
{
    "name": "Bianca",
    "age": 40,
    "gadgets": {
        "brand": [
            "hp",
            "sony"
        ]
    }
}
*/

The above sample code performed the following actions:

1. Created an object named objectX.

2. Gave three properties to objectX: name, age and gadgets.

3. Gave the gadgets property of objectX an object as its value.

4. Gave the object value of the gadget property a brand property.

5. Gave the brand property an array as its value.

6. Copied the properties in objectX into objectY with the use of the spread operator.

7. Changed the value of the name property of objectY to Mary.

8. Changed the the first item in the array value of the brand property from apple to hp.

In the sample code, the array value is a deeply nested object. Notice that a change in the value of the name property of objectY did not cause a change in the value of the name property of objectX. But a change in the deeply nested object of objectY caused a similar change in the deeply nested object of objectX .

How to Iterate Over Objects in JavaScript

Use a for...in loop to iterate over an object and to select its properties. The for..in loop syntax is as follows:

for(let key in object) {
    //perform action(s) for each key
}

The key keyword in the syntax above is a parameter for the properties. So you can replace it with any word of your choice. Replace the object keyword with the name of the object you want to iterate over. For example:

let objectZ = {
    name: "Ade",
    Pronuon: "he",
    age: 60
};
for(let property in objectZ) {
    console.log(`${property}: ${objectZ[property]}`)
}
/* 
name: Ade
Pronuon: he
age: 60
*/

Notice the use of bracket notation in the loop to get the values of the property. Using dot notation instead of bracket notation would return undefined.

Conclusion

In JavaScript, objects are probably the most important data type. Programming concepts like Object-Oriented programming work on the principle of leveraging the flexibility of objects to store complex values and their distinct capability of interacting with properties and methods within the object.

This article lays a solid foundation for understanding such advanced concepts by explaining the basics of objects.

But in the case of objects, unfortunately, these methods don't work because objects are not iterable.

This doesn't mean we can't loop through an object – but this means that we can't loop through an object directly the same way we do for an array:

let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅✅✅

for (val of arr) {
  console.log(val); // ✅✅✅
}

let obj = { age: 12, name: "John Doe" };
obj.forEach((val) => console.log(val)); // ❌❌❌

for (val of obj) {
  console.log(val); // ❌❌❌
}

In this article, You'll learn how you can loop through an object in JavaScript. There are two methods you can use - and one of them pre-dates the introduction of ES6.

How to loop through an object in JavaScript with a for…in loop

Before ES6, we relied on the for...in method whenever we wanted to loop through an object.

The for...in loop iterates through properties in the prototype chain. This means that we need to check if the property belongs to the object using hasOwnProperty whenever we loop through an object with the for…in loop:

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

To avoid the stress and difficulty of looping and to use the hasOwnProperty method, ES6 and ES8 introduced object static methods. These convert object properties to arrays, allowing us to use array methods directly.

How to loop through an object in JavaScript with object static methods

An object is made up of properties that have key-value pairs, that is each property always has a corresponding value.

Object static methods let us extract either keys(), values(), or both keys and values as entries() in an array, allowing us to have as much flexibility over them as we do with actual arrays.

We have three object static methods, which are:

• Object.keys()

• Object.values()

• Object.entries()

How to loop through an object in JavaScript with the Object.keys() method

The Object.keys() method was introduced in ES6. It takes the object we want to loop over as an argument and returns an array containing all property names (also known as keys).

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

This now gives us the advantage of applying any array looping method to iterate through the array and retrieve the value of each property:

let genders = Object.keys(population);

genders.forEach((gender) => console.log(gender));

This will return:

"male"
"female"
"others"

We can also use the key to get the value using bracket notation such as population[gender] as seen below:

genders.forEach((gender) => {
  console.log(`There are ${population[gender]} ${gender}`);
})

This will return:

"There are 4 male"
"There are 93 female"
"There are 10 others"

Before we move on, let's use this method to sum all the population by looping through so we know the total population:

const population = {
  male: 4,
  female: 93,
  others: 10
};

let totalPopulation = 0;
let genders = Object.keys(population);

genders.forEach((gender) => {
  totalPopulation += population[gender];
});

console.log(totalPopulation); // 107

How to loop through an object in JavaScript with the Object.values() method

The Object.values() method is very similar to the Object.keys() method and was introduced in ES8. This method takes the Object we want to loop over as an argument and returns an array containing all key values.

const population = {
  male: 4,
  female: 93,
  others: 10
};

let numbers = Object.values(population);

console.log(numbers); // [4,93,10]

This now gives us the advantage of applying any array looping method to iterate through the array and retrieve the value of each property:

let numbers = Object.values(population);

numbers.forEach((number) => console.log(number));

This will return:

4
93
10

We can efficiently perform the total calculation since we can loop through directly:

let totalPopulation = 0;
let numbers = Object.values(population);

numbers.forEach((number) => {
  totalPopulation += number;
});

console.log(totalPopulation); // 107

How to loop through an object in JavaScript with the Object.entries() method

The Object.entries() method was also introduced with ES8. In the basic sense, what it does is that it outputs an array of arrays, whereby each inner array has two elements which are the property and the value.

const population = {
  male: 4,
  female: 93,
  others: 10
};

let populationArr = Object.entries(population);

console.log(populationArr);

This outputs:

[
  ['male', 4]
  ['female', 93]
  ['others', 10]
]

This returns an array of arrays, with each inner array having the [key, value]. You can use any array method to loop through:

for (array of populationArr){
  console.log(array);
}

// Output:
// ['male', 4]
// ['female', 93]
// ['others', 10]

We could decide to destructure the array, so we get the key and value:

for ([key, value] of populationArr){
  console.log(key);
}

You can learn more about how to loop through arrays in this article.

Wrapping up

In this tutorial, you learned that the best way to loop through an object is to use any object static method based on your needs to first convert to an array before looping.

Have fun coding!

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Table of Contents

• Intro

• How to access a prototype’s properties and methods in JavaScript

• The prototype chain

• A prototype-based language

• Javascript classes

• Roundup

Intro

Have you ever wondered how strings, arrays or objects “know” the methods each of them have? How does a string know it can .toUpperCase() or an array know that it can .sort()? We never defined these methods manually, right?

The answer is that these methods come built-in within each type of data structure thanks to something called prototype inheritance.

In JavaScript, an object can inherit properties of another object. The object from where the properties are inherited is called the prototype. In short, objects can inherit properties from other objects — the prototypes.

You’re probably wondering: why the need for inheritance in the first place? Well, inheritance solves the problem of data and logic duplication. By inheriting, objects can share properties and methods without the need of manually setting those properties and methods on each object.

How to Access a Prototype’s Properties and Methods in JavaScript

When we try to access a property of an object, the property is not only searched in the object itself. It's also searched in the prototype of the object, in the prototype of the prototype, and so on – until a property is found that matches the name or the end of the prototype chain is reached.

If the property or method isn’t found anywhere in the prototype chain, only then will JavaScript return undefined.

Every object in JavaScript has an internal property called [[Prototype]].

If we create an array and log it to the console like this:

const arr = [1,2,3]
console.log(arr)

We will see this:

The double square brackets that enclose [[Prototype]] signify that it is an internal property, and cannot be accessed directly in code.

To find the [[Prototype]] of an object, we will use the Object.getPrototypeOf() method.

const arr = [1,2,3]
console.log(Object.getPrototypeOf(arr))

The output will consist of several built-in properties and methods:

Keep in mind that prototypes can also be changed and modified through different methods.

The Prototype Chain

At the end of the prototype chain is Object.prototype. All objects inherit the properties and methods of Object. Any attempt to search beyond the end of the chain results in null.

If you look for the prototype of the prototype of an array, a function, or a string, you’ll see it’s an object. And that’s because in JavaScript all objects are descendants or instances of Object.prototype, which is an object that sets properties and methods to all other JavaScript data types.

const arr = [1,2,3]
const arrProto = Object.getPrototypeOf(arr)
console.log(Object.getPrototypeOf(arrProto))

Each type of prototype (for example array prototype) defines its own methods and properties, and in some cases overrides the Object.prototype methods and properties (that’s why arrays have methods that objects don’t).

But under the hood and going up the ladder of the prototype chain, everything in JavaScript is built upon the Object.prototype.

If we try to look into the prototype of Object.prototype we get null.

const arr = [1,2,3]
const arrProto = Object.getPrototypeOf(arr)
const objectProto = Object.getPrototypeOf(arrProto)
console.log(Object.getPrototypeOf(objectProto))

A Prototype-Based Language

JavaScript is a prototype-based language, meaning object properties and methods can be shared through generalized objects that have the ability to be cloned and extended.

When it comes to inheritance, JavaScript has only one structure: objects.

Each object has a private property (referred to as its [[Prototype]]) that maintains a link to another object called its prototype. That prototype object has its own prototype, and so on until an object whose prototype is null is reached.

By definition, null has no prototype, and acts as the final link in this chain of prototypes.

This is known as prototypical inheritance and differs from class inheritance. Among popular object-oriented programming languages, JavaScript is relatively unique, as other prominent languages such as PHP, Python, and Java are class-based languages, which instead define classes as blueprints for objects.

At this point you may be thinking "But we CAN implement classes on JavaScript!". And yes, we can, but as syntactic sugar. 🤫🤔

Javascript Classes

Classes are a way to set a blueprint to create objects with predefined properties and methods. By creating a class with specific properties and methods, you can later on instantiate objects from that class, that will inherit all the properties and methods that that class has.

In JavaScript, we can create classes in the following way:

class Alien {
    constructor (name, phrase) {
        this.name = name
        this.phrase = phrase
        this.species = "alien"
    }
    fly = () => console.log("Zzzzzziiiiiinnnnnggggg!!")
    sayPhrase = () => console.log(this.phrase)
}

And then we can instantiate an object from that class like this:

const alien1 = new Alien("Ali", "I'm Ali the alien!")
console.log(alien1.name) // output: "Ali"

Classes are used as a way to make code more modular, organized, and understandable and are heavily used in OOP programming.

But keep in mind that JavaScript doesn’t really support classes like other languages. The class keyword was introduced with ES6 as syntactic sugar that facilitates this way of organizing code.

To visualize this, see that the same thing we did by previously defining a class, we can do it by defining a function and editing the prototype in the following way:

function Alien(name, phrase) {
    this.name = name
    this.phrase = phrase
    this.species = "alien"
}

Alien.prototype.fly = () => console.log("Zzzzzziiiiiinnnnnggggg!!")
Alien.prototype.sayPhrase = () => console.log(this.phrase)

const alien1 = new Alien("Ali", "I'm Ali the alien!")

console.log(alien1.name) // output "Ali"
console.log(alien1.phrase) // output "I'm Ali the alien!"
alien1.fly() // output "Zzzzzziiiiiinnnnnggggg"

Any function can be invoked as a constructor with the keyword new and the prototype property of that function is used for the object to inherit methods from. In JavaScript, “class” is only used conceptually to describe the above practice – technically they’re just functions.😑

Although this doesn't necessarily make a lot of difference (we can still perfectly implement OOP and use classes like in most other programming languages), it's important to remember that JavaScript is built with prototype inheritance at its core.

Roundup

That's it, everyone! As always, I hope you enjoyed the article and learned something new. If you want, you can also follow me on LinkedIn or Twitter.

Cheers and see you in the next one! =D

An object can have one or more properties. Each of the properties is a key-value pair separated by a colon(:). The key must be a string or JavaScript symbol type. The value can be of any type, including another object.

With that explanation of an object, let's create one to see how it works:

const user = {
 'name': 'Bob',
 'age': 27   
}

Here we have created an object with two properties (name, age) and their respective values. We have created a variable called user with the const keyword and we've assigned the object to it as a value.

By default, objects are mutable. This means once they're created, you can add a new property to them, modify the value of an existing property, or delete a property.

In my early years of programming, I found the terms mutable and immutable very confusing. Let me try explaining it in simple English.

Mutable is something you can change. Immutable is just the opposite of that. So, mutability is the ability to change over time. Immutability means something is unchanging over time.

There could be situations where you may not want an object to change programmatically. Therefore you'll want to make it immutable.

When an object is immutable, you can't add a new property to it, modify it, or delete an existing property. There is no way even to extend it.

This is what a Frozen Object is, which we'll learn about, practice with, and understand in this article.

I discussed frozen objects in a Twitter thread recently. Please feel free to have a look. This article will expand on the thread with more details and examples.

How to Create a Frozen Object in JavaScript

You can freeze (make immutable) an object using the function Object.freeze(obj). The object passed to the freeze method will become immutable. The freeze() method also returns the same object.

Let's create an object of supported languages:

const supportedLanguages = {
  'af': 'Afrikaans',
  'bn': 'Bengali',
  'de': 'German',
  'en': 'English',
  'fr': 'French'
}

If you don't want this object to change after it is created, just use the freeze method to make it immutable.

const frozenSupportedLanguages = Object.freeze(supportedLanguages);

// The supportedLanguages and frozenSupportedLanguages are same

frozenSupportedLanguages === supportedLanguages; // returns true

Now let's try changing either of the objects and see what happens:

// Add a new property
supportedLanguages['kn'] = 'Kannada';

// Modify an existing property
supportedLanguages["af"] = 'something else';

// Delete a property
delete supportedLanguages.bn; // returns false

// log the object to the console
console.log(supportedLanguages); // Unchanged => {af: "Afrikaans", bn: "Bengali", en: "English", fr: "French"}

You'll get errors when you try changing a frozen object (immutable object) in the JavaScript strict environment.

Hold On – doesn't the const keyword do the same thing?

Ah, not quite. The const keyword and Object.freeze() are not the same things. When you assign an object to a variable created with the const keyword, you can not reassign another value. However, you can modify the assigned objects in whatever way you want.

Let's understand the difference with an example. This time, we will take the same supportedLanguages object but will not freeze it.

const supportedLanguages = {
  'af': 'Afrikaans',
  'bn': 'Bengali',
  'de': 'German',
  'en': 'English',
  'fr': 'French'
}

Now you can modify it like this:

// Add a new property
supportedLanguages['kn'] = 'Kannada';

// Modify an existing property
supportedLanguages["af"] = 'something else';

// Delete a property
delete supportedLanguages.bn; // returns true

// log the object to the console
console.log(supportedLanguages);

Now the supportedLanguages object is changed to the following:

So, this change is allowed. But if you try to assign a new object to the supportedLanguages variable:

supportedLanguages = {'id': 'Indonesian'};

You will get this error:

I hope the difference is clear now – it's also a frequently asked interview question.

Why Do We Need Frozen Objects in JavaScript?

Again, we need frozen objects when we need immutability. In object-oriented programming, it is common to have APIs that we can not extend or modify outside the current context.

Do you remember the final keyword in Java? Or how in the Kotlin programming language, lists are immutable by default? Trying to mutate them at run time causes errors. Immutability is an essential concept to use in functional programming.

Immutability is often important in the JavaScript programming language as well. You may want a configuration object to be immutable, a fixed set of supported language for your applications, or anything else that you don't want to change at the run time.

You Can Freeze an Array, Too

In JavaScript, Arrays are objects under the hood. So you can also apply Object.freeze()to arrays to make them immutable.

Let's take an array of human senses:

const senses = ['touch', 'sight', 'hearing', 'smell', 'taste'];

We can now make it immutable like this:

Object.freeze(senses);

Now, try to push an element to that array. It's not possible.

senses.push('walking');

The output will be the following error:

Try to remove an element from the array:

senses.pop();

You'll get this error:

Please notice the error in both the cases. It clearly says, the add and delete property is not allowed as the underlying object is not extensible.

Object Freeze is Shallow

A JavaScript object property can have another object as its value. It can go to a deeper level down.

When we freeze an object, it is a shallow freeze. This means that only the top-level properties are frozen. If any of the property's values are another object, that inner object is not frozen. You can still make changes to it.

Let's understand this with the example of a configuration object:

const config = {
  'db': 'postgresql',
  'host': 'acme-ind.com',
  'password': 'fake-password',
  'port': 512,
  'admin': {
    'name': 'Tapas',
    'rights': ['create', 'update', 'delete']
  }
}

The config object has properties like db, host, password, and port with simple string types values. However, the admin property has an object as the value. Now, let's freeze the config object.

Object.freeze(config);

Now, let's try to change the db name.

config.db = 'redis';

It is not allowed as the object is frozen. However, you can do this:

config.admin.name = 'atapas';

Here we have changed the property of the nested object. As the object freezing is shallow in nature, it is not going to stop us from changing the nested object. So, if you log the object in the console, this is what you'll get:

How to Deep Freeze an Object in JavaScript

But how do you deep freeze an object if you need or want to? You may want to freeze all the properties of the object to the deepest level possible, right? We can do that using recursion.

In programming, recursion is a methodology that uses a procedure, function, or algorithm to call itself. Check out this article for an in-depth understanding.

So, we can iterate through every property and recursively apply the freeze method to everything. It will make sure that the nested objects are also frozen.

To do that, you can write a simple function like this:

const deepFreeze = obj => {
  Object.keys(obj).forEach(prop => {
    if (typeof obj[prop] === 'object') deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
};

deepFreeze(config);

What's the Diffecrence Between freeze(), seal(), and preventExtentions()?

With Object.freeze we achieve full immutability. But there are two other methods that provide object immutability, only partially.

• Object.seal – We can not add a new property or delete existing properties of an object sealed with this method. But we can still update the value of existing properties.
• Object.preventExtensions – This method prevents new property creation. But you can update and delete existing properties.

Here is a table to compare them:

How to UnFreeze a Frozen Object

There is no straightforward ways to unfreeze a frozen object in JavaScript.

You can probably simulate an unfreeze by making a copy of the object maintaining the prototype.

Here is an NPM package that does the same with a shallow copy.

In Summary

To Summarize,

• We can freeze an object to make it immutable.
• You use the method Object.freeze to freeze an object.
• You can not create a new property, modify or delete an existing property, or extend the object when a freeze is applied.
• Declaring a variable with the const keyword with an object value is not same as freezing the object.
• You can freeze an array using the same freeze method.
• The freeze method does a shallow freeze. Use recursion to do a deep freeze.
• The seal() and preventExtentions() methods provide partial immutability.
• Unfreezing is not supported in the language (yet).

Before We End...

That's all for now. I hope you've found this article insightful, and that it helps you understand object immutability more clearly.

Let's connect. You will find me active on Twitter (@tapasadhikary). Feel free to give a follow. I've also started sharing knowledge using my YouTube channel, so you can check it out, too.

You may also like these articles:

• The JavaScript Array Handbook – JS Array Methods Explained with Examples
• A practical guide to object destructuring in JavaScript
• JavaScript: Equality comparison with ==, === and Object.is
• How NOT to use Git in Practice. Ten Git usages, you should know to avoid.

Objects are one of the most valuable things you can learn in JavaScript. You can use them to take your programs to the next level.

An object is a collection of data – or key value pairs – which consist of variables and functions that you can access using dot notation.

Now that's a bunch of words that might not mean anything to you at the moment, so let's break it down.

What is a Key Value Pair in JavaScript?

The easiest way to explain a key value pair is that you have 2 items that are linked together. One being the "key" and one being the "value". An object can have several Key Value Pairs inside of it.

Now that we understand what key value pairs are, we can dive deeper into objects.

What is an Object in JavaScript?

This is an object in JavaScript:

const phone = {
    brand: ['Samsung', 'Apple', 'Google'],
    quantity: [1,2,3],
    howManyGooglePhones: function(){
        alert("There are " + this.quantity[1] + ' ' + this.brand[2] + " phones available.");
    }
}

phone.howManyGooglePhones();

We create and name our object – in this case we have named it phone. We also have everything wrapped in our curly braces { }. Each key is separated from the value using a colon :.

In the code above, we have 2 arrays and one function. Notice how each key value pair ends with a comma , – this is very important and is required.

What is Dot Notation in JavaScript?

Dot notation is where we can call that key value pair (which is known as a property) and pulls that information.

If I wanted the brand Samsung I could do phone.brand[0] and it would give me Samsung. We use the object name (in this example it is phone), use a Dot, and then proceed by writing the name of the property.

Our function is set up to display how many phones we have of each brand. In the above function we are using it to show how many Google Phones we have in stock.

this.quantity[1] is accessing the "quantity" property and is looking in the [1] position for the value. this.brand[2] is accessing the Brand property that we want to show, which in this case is Google.

Can you quickly figure out how we would access Apple with the quantity being 3? What would that look like in this situation?

this is being used because we want to access these values from within this object. The alert is creating a pop up to display this info when the program loads for this example.

Now that our object is complete, we want to call the function that is in the object and have it displayed. Since we are no longer in the object, we will not be using this like we did inside of the object.

Instead we will be calling the object by name and using Dot notation. Our object name is phone so let's use it then the name of the function:

phone.howManyGooglePhones();

Calling the function will now create this pop up:

You successfully went through making an object, called a function, that was in the object that accessed 2 different values from the properties. Nice work!

If you like my blog articles you will love my social media posts.
Follow me on Twitter @DThompsonDev

Experienced programmers use Python all the time as well, thanks to its wide community, abundance of packages, and clear syntax.

But there's one issue that seems to confuse beginners as well as some experienced developers: Python objects. Specifically, the difference between mutable and immutable objects.

In this post we will deepen our knowledge of Python objects, learn the difference between mutable and immutable objects, and see how we can use the interpreter to better understand how Python operates.

We will use important functions and keywords such as id and is, and we'll understand the difference between x == y and x is y.

Are you up for it? Let's get started.

In Python, everything is an object

Unlike other programming languages where the language supports objects, in Python really everything is an object – including integers, lists, and even functions.

We can use our interpreter to verify that:

>>> isinstance(1, object)
True

>>> isinstance(False, object)
True

def my_func():
   return "hello"

>>> isinstance(my_func, object)
True

Python has a built-in function, id, which returns the address of an object in memory. For example:

>>> x = 1
>>> id(x)
1470416816

Above, we created an object by the name of x, and assigned it the value of 1. We then used id(x) and discovered that this object is found at the address 1470416816 in memory.

This allows us to check interesting things about Python. Let's say we create two variables in Python – one by the name of x, and one by the name of y – and assign them the same value. For example, here:

>>> x = "I love Python!"
>>> y = "I love Python!"

We can use the equality operator (==) to verify that they indeed have the same value in Python's eyes:

>>> x == y
True

But are these the same object in memory? In theory, there can be two very different scenarios here.

According to scenario (1), we really have two different objects, one by the name of x, and another by the name of y, that just happen to have the same value.

Yet, it could also be the case that Python actually stores here only one object, which has two names that reference it – as shown in scenario (2):

We can use the id function introduced above to check this:

>>> x = "I love Python!"
>>> y = "I love Python!"
>>> x == y
True

>>> id(x)
52889984

>>> id(y)
52889384

So as we can see, Python's behavior matches scenario (1) described above. Even though x == y in this example (that is, x and y have the same values), they are different objects in memory. This is because id(x) != id(y), as we can verify explicitly:

>>> id(x) == id(y)
False

There is a shorter way to make the comparison above, and that is to use Python's is operator. Checking whether x is y is the same as checking id(x) == id(y), which means whether x and y are the same object in memory:

>>> x == y
True

>>> id(x) == id(y)
False

>>> x is y
False

This sheds light on the important difference between the equality operator == and the identity operator is.

As you can see in the example above, it is completely possible for two names in Python (x and y) to be bound to two different objects (and thus, x is y is False), where these two objects have the same value (so x == y is True).

How can we create another variable that points to the same object that x is pointing to? We can simply use the assignment operator =, like so:

>>> x = "I love Python!"
>>> z = x

To verify that they indeed point to the same object, we can use the is operator:

>>> x is z
True

Of course, this means they have the same address in memory, as we can verify explicitly by using id:

>>> id(x)
54221824

>>> id(z)
54221824

And, of course, they have the same value, so we expect x == z to return True as well:

>>> x == z
True

Mutable and immutable objects in Python

We have said that everything in Python is an object, yet there is an important distinction between objects. Some objects are mutable while some are immutable.

As I mentioned before, this fact causes confusion for many people who are new to Python, so we are going to make sure it's clear.

Immutable objects in Python

For some types in Python, once we have created instances of those types, they never change. They are immutable.

For example, int objects are immutable in Python. What will happen if we try to change the value of an int object?

>>> x = 24601
>>> x
24601

>>> x = 24602
>>> x
24602

Well, it seems that we changed x successfully. This is exactly where many people get confused. What exactly happened under the hood here? Let's use id to further investigate:

>>> x = 24601
>>> x
24601

>>> id(x)
1470416816

>>> x = 24602
>>> x
24602

>>> id(x)
1470416832

So we can see that by assigning x = 24602, we didn't change the value of the object that x had been bound to before. Rather, we created a new object, and bound the name x to it.

So after assigning 24601 to x by using x = 24601, we had the following state:

And after using x = 24602, we created a new object, and bound the name x to this new object. The other object with the value of 24601 is no longer reachable by x (or any other name in this case):

Whenever we assign a new value to a name (in the above example - x) that is bound to an int object, we actually change the binding of that name to another object.

The same applies for tuples, strings (str objects), and bools as well. In other words, int (and other number types such as float), tuple, bool, and str objects are immutable.

Let's test this hypothesis. What happens if we create a tuple object, and then give it a different value?

>>> my_tuple = (1, 2, 3)
>>> id(my_tuple)
54263304

>>> my_tuple = (3, 4, 5)
>>> id(my_tuple)
56898184

Just like an int object, we can see that our assignment actually changed the object that the name my_tuple is bound to.

What happens if we try to change one of the tuple's elements?

>>> my_tuple[0] = 'a new value'
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: 'tuple' object does not support item assignment

As we can see, Python doesn't allow us to modify my_tuple's contents, as it is immutable.

Mutable objects in Python

Some types in Python can be modified after creation, and they are called mutable. For example, we know that we can modify the contents of a list object:

>>> my_list = [1, 2, 3]
>>> my_list[0] = 'a new value'
>>> my_list
['a new value', 2, 3]

Does that mean we actually created a new object when assigning a new value to the first element of my_list? Again, we can use id to check:

>>> my_list = [1, 2, 3]
>>> id(my_list)
55834760

>>> my_list
[1, 2, 3]

>>> my_list[0] = 'a new value'
>>> id(my_list)
55834760

>>> my_list
['a new value', 2, 3]

So our first assignment my_list = [1, 2, 3] created an object in the address 55834760, with the values of 1, 2, and 3:

We then modified the first element of this list object using my_list[0] = 'a new value', that is - without creating a new list object:

Now, let us create two names – x and y, both bound to the same list object. We can verify that either by using is, or by explicitly checking their ids:

>>> x = y = [1, 2]
>>> x is y
True

>>> id(x)
18349096

>>> id(y)
18349096

>>> id(x) == id(y)
True

What happens now if we use x.append(3)? That is, if we add a new element (3) to the object by the name of x?

Will x by changed? Will y?

Well, as we already know, they are basically two names of the same object:

Since this object is changed, when we check its names we can see the new value:

>>> x.append(3)
>>> x
[1, 2, 3]

>>> y
[1, 2, 3]

Note that x and y have the same id as before – as they are still bound to the same list object:

>>> id(x)
18349096

>>> id(y)
18349096

In addition to lists, other Python types that are mutable include sets and dicts.

Implications for dictionary keys in Python

Dictionaries (dict objects) are commonly used in Python. As a quick reminder, we define them like so:

my_dict = {"name": "Omer", "number_of_pets": 1}

We can then access a specific element by its key name:

>>> my_dict["name"]
'Omer'

Dictionaries are mutable, so we can change their content after creation. At any given moment, a key in the dictionary can point to one element only:

>>> my_dict["name"] = "John"
>>> my_dict["name"]
'John'

It is interesting to note that a dictionary's keys must be immutable:

>>> my_dict = {[1,2]: "Hello"}
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: unhashable type: 'list'

Why is that so?

Let's consider the following hypothetical scenario (note: the snippet below can't really be run in Python):

>>> x = [1, 2]
>>> y = [1, 2, 3]
>>> my_dict = {x: 'a', y: 'b'}

So far, things don't seem that bad. We'd assume that if we access my_dict with the key of [1, 2], we will get the corresponding value of 'a', and if we access the key [1, 2, 3], we will get the value 'b'.

Now, what would happen if we attempted to use:

>>> x.append(3)

In this case, x would have the value of [1, 2, 3], and y would also have the value of [1, 2, 3]. What should we get when we ask for my_dict[[1, 2, 3]]? Will it be 'a' or 'b'? To avoid such cases, Python simply doesn't allow dictionary keys to be mutable.

Taking things a bit further

Let's try to apply our knowledge to a case that is a bit more interesting.

Below, we define a list (a mutable object) and a tuple (an immutable object). The list includes a tuple, and the tuple includes a list:

>>> my_list = [(1, 1), 2, 3]
>>> my_tuple = ([1, 1], 2, 3)
>>> type(my_list)
<class 'list'>

>>> type(my_list[0])
<class 'tuple'>

>>> type(my_tuple)
<class 'tuple'>

>>> type(my_tuple[0])
<class 'list'>

So far so good. Now, try to think for yourself – what will happen when we try to execute each of the following statements?

(1) >>> my_list[0][0] = 'Changed!'

(2) >>> my_tuple[0][0] = 'Changed!'

In statement (1), what we are trying to do is change my_list's first element, that is, a tuple. Since a tuple is immutable, this attempt is destined to fail:

>>> my_list[0][0] = 'Changed!'
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: 'tuple' object does not support item assignment

Note that what we were trying to do is not change the list, but rather – change the contents of its first element.

Let's consider statement (2). In this case, we are accessing my_tuple's first element, which happens to be a list, and modify it. Let's further investigate this case and look at the addresses of these elements:

>>> my_tuple = ([1, 1], 2, 3)
>>> id(my_tuple)
20551816

>>> type(my_tuple[0])
<class 'list'>

>>> id(my_tuple[0])
20446248

When we change my_tuple[0][0], we do not really change my_tuple at all! Indeed, after the change, my_tuple's first element will still be the object whose address in memory is 20446248. We do, however, change the value of that object:

>>> my_tuple[0][0] = 'Changed!'
>>> id(my_tuple)
20551816

>>> id(my_tuple[0])
20446248

>>> my_tuple
(['Changed!', 1], 2, 3)

Since we only modified the value of my_tuple[0], which is a mutable list object, this operation was indeed allowed by Python.

Recap

In this post we learned about Python objects. We said that in Python everything is an object, and got to use id and is to deepen our understanding of what's happening under the hood when using Python to create and modify objects.

We also learned the difference between mutable objects, that can be modified after creation, and immutable objects, which cannot.

We saw that when we ask Python to modify an immutable object that is bound to a certain name, we actually create a new object and bind that name to it.

We then learned why dictionary keys have to be immutable in Python.

Understanding how Python "sees" objects is a key to becoming a better Python programmer. I hope this post has helped you on your journey to mastering Python.

Omer Rosenbaum, Swimm’s Chief Technology Officer. Cyber training expert and Founder of Checkpoint Security Academy. Author of Computer Networks (in Hebrew). Visit My YouTube Channel.

You can group related data together into a single data structure by using a JavaScript object, like this:

const desk = {
   height: "4 feet",
   weight: "30 pounds",
   color: "brown",
   material: "wood",
 };

An object contains properties, or key-value pairs. The desk object above has four properties. Each property has a name, which is also called a key, and a corresponding value.

For instance, the key height has the value "4 feet". Together, the key and value make up a single property.

height: "4 feet",

The desk object contains data about a desk. In fact, this is a reason why you’d use a JavaScript object: to store data. It’s also simple to retrieve the data that you store in an object. These aspects make objects very useful.

This article will get you up and running with JavaScript objects:

• how to create an object
• how to store data in an object
• and retrieve data from it.

Let’s start by creating an object.

How to Create an Object in JavaScript

I'll create an object called pizza below, and add key-value pairs to it.

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

The keys are to the left of the colon : and the values are to the right of it. Each key-value pair is a property. There are three properties in this example:

• The key topping has a value “cheese”.
• The key sauce has a value “marinara”.
• The key size has a value “small”.

Each property is separated by a comma. All of the properties are wrapped in curly braces.

This is the basic object syntax. But there are a few rules to keep in mind when creating JavaScript objects.

Object Keys in JavaScript

Each key in your JavaScript object must be a string, symbol, or number.

Take a close look at the example below. The key names 1 and 2 are actually coerced into strings.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

It’s a difference made clear when you print the object.

console.log(shoppingCart);
//Result: { '1': 'apple', '2': 'oranges' }

There’s another rule to keep in mind about key names: if your key name contains spaces, you need to wrap it in quotes.

Take a look at the programmer object below. Notice the last key name, "current project name" . This key name contains spaces so, I wrapped it in quotes.

const programmer = {
   firstname: "Phil",
   age: 21,
   backendDeveloper: true,
   languages: ["Python", "JavaScript", "Java", "C++"],
   "current project name": "The Amazing App"
};

Object Values in JavaScript

A value, on the other hand, can be any data type, including an array, number, or boolean. The values in the above example contain these types: string, integer, boolean, and an array.

You can even use a function as a value, in which case it’s known as a method. sounds(), in the object below, is an example.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Now say you want to add or delete a key-value pair. Or you simply want to retrieve an object’s value.

You can do these things by using dot or bracket notation, which we’ll tackle next.

How Dot Notation and Bracket Notation Work in JavaScript

Dot notation and bracket notation are two ways to access and use an object’s properties. You’ll probably find yourself reaching for dot notation more often, so we'll start with that.

How to Add a Key-Value Pair with Dot Notation in JavaScript

I'll create an empty book object below.

const book = {};

To add a key-value pair using dot notation, use the syntax:

objectName.keyName = value

This is the code to add the key (author) and value ("Jane Smith") to the book object:

book.author = "Jane Smith";

Here's a breakdown of the above code:

• book is the object's name
• . (dot)
• author is the key name
• = (equals)
• "Jane Smith" is the value

When I print the book object, I’ll see the newly added key-value pair.

console.log(book);
//Result: { author: 'Jane Smith' }

I’ll add another key-value pair to the book object.

book.publicationYear = 2006;

The book object now has two properties.

console.log(book);
//Result: { author: 'Jane Smith', publicationYear: 2006 }

How to Access Data in a JavaScript Object Using Dot Notation

You can also use dot notation on a key to access the related value.

Consider this basketballPlayer object.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Say you want to retrieve the value “shooting guard.” This is the syntax to use:

objectName.keyName

Let's put this syntax to use to get and print the "shooting guard" value.

console.log(basketballPlayer.position);
//Result: shooting guard

Here's a breakdown of the above code:

• basketballPlayer is the object's name
• . (dot)
• position is the key name

This is another example.

console.log(basketballPlayer.name);
//Result: James

How to Delete a Key-Value Pair in JavaScript

To delete a key-value pair use the delete operator. This the syntax:

delete objectName.keyName

So to delete the height key and its value from the basketballPlayer object, you’d write this code:

delete basketballPlayer.height;
`

As a result, the basketballPlayer object now has three key-value pairs.

console.log(basketballPlayer);
//Result: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

You’ll probably find yourself reaching for dot notation frequently, though there are certain requirements to be aware of.

When using dot notation, key names can’t contain spaces, hyphens, or start with a number.

For example, say I try to add a key that contains spaces using dot notation. I’ll get an error.

basketballPlayer.shooting percentage = "75%";
//Results in an error

So dot notation won’t work in every situation. That’s why there’s another option: bracket notation.

How to Add a Key-Value Pair Using Bracket Notation in JavaScript

Just like dot notation, you can use bracket notation to add a key-value pair to an object.

Bracket notation offers more flexibility than dot notation. That’s because key names can include spaces and hyphens, and they can start with numbers.

I'll create an employee object below.

const employee = {};

Now I want to add a key-value pair using bracket notation. This is the syntax:

objectName[“keyName”] = value

So this is how I’d add the key (occupation) and value (sales) to the employee object:

employee["occupation"] = "sales";

Here's a breakdown of the above code:

• employee is the object's name
• "occupation" is the key name
• = (equals)
• "sales" is the value

Below are several more examples that use bracket notation's flexibility to add a variety of key-value pairs.

//Add multi-word key name
employee["travels frequently"] = true;

//Add key name that starts with a number and includes a hyphen
employee["1st-territory"] = "Chicago";

//Add a key name that starts with a number
employee["25"] = "total customers";

When I print the employee object, it looks like this:

{
  '25': 'total customers',
  occupation: 'sales',
  'travels frequently': true,
  '1st-territory': 'Chicago'
}

With this information in mind, we can add the “shooting percentage” key to the basketballPlayer object from above.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

You may remember that dot notation left us with an error when we tried to add a key that included spaces.

basketballPlayer.shooting percentage = "75%";
//Results in an error

But bracket notation leaves us error-free, as you can see here:

basketballPlayer["shooting percentage"] = "75%";

This is the result when I print the object:

{
  name: 'James',
  averagePointsPerGame: 20,
  height: '6 feet, 2 inches',
  position: 'shooting guard',
  'shooting percentage': '75%'
}

How to Access Data in a JavaScript Object Using Bracket Notation

You can also use bracket notation on a key to access the related value.

Recall the animal object from the start of the article.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Let's get the value associated with the key, name. To do this, wrap the key name quotes and put it in brackets. This is the syntax:

objectName[“keyName”]

Here's the code you'd write with bracket notation: animal["name"];.

This is a breakdown of the above code:

• animal is the object's name
• ["name"] is the key name enclosed in square brackets

Here’s another example.

console.log(animal["sounds"]());

//Result: 
meow meow
undefined

Note that sounds() is a method, which is why I added the parentheses at the end to invoke it.

This is how you’d invoke a method using dot notation.

console.log(animal.sounds());

//Result: 
meow meow
undefined

JavaScript Object Methods

You know how to access specific properties. But what if you want all of the keys or all of the values from an object?

There are two methods that will give you the information you need.

const runner = {
   name: "Jessica",
   age: 20,
   milesPerWeek: 40,
   race: "marathon"
};

Use the Object.keys() method to retrieve all of the key names from an object.

This is the syntax:

Object.keys(objectName)

We can use this method on the above runner object.

Object.keys(runner);

If you print the result, you’ll get an array of the object’s keys.

console.log(Object.keys(runner));
//Result: [ 'name', 'age', 'milesPerWeek', 'race' ]

Likewise, you can use the Object.values() method to get all of the values from an object. This is the syntax:

Object.values(objectName)

Now we'll get all of the values from the runner object.

console.log(Object.values(runner));
//Result: [ 'Jessica', 20, 40, 'marathon' ]

We’ve covered a lot of ground. Here’s a summary of the key ideas:

Objects:

• Use objects to store data as properties (key-value pairs).
• Key names must be strings, symbols, or numbers.
• Values can be any type.

Access object properties:

• Dot notation: objectName.keyName
• Bracket notation: objectName[“keyName”]

Delete a property:

• delete objectName.keyName

There’s a lot you can do with objects. And now you’ve got some of the basics so you can take advantage of this powerful JavaScript data type.

I write about learning to program, and the best ways to go about it on amymhaddad.com. I also tweet about programming, learning, and productivity: @amymhaddad.

For example, imagine you have an array like this:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

And you only want to count the number of objects with status set to '0'.

Like with just about everything in programming, there are a number of ways to do this. We'll go through a few of the common methods below.

Use a for loop

Probably the easiest way would be to declare a counter variable, loop through the array, and iterate counter only if status is equal to '0':

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

let counter = 0;
for (let i = 0; i < storage.length; i++) {
  if (storage[i].status === '0') counter++;
}

console.log(counter); // 6

You could simplify this a bit by using a for...of loop:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

let counter = 0;
for (const obj of storage) {
  if (obj.status === '0') counter++;
}

console.log(counter); // 6

Also, you could create a function to do the same thing if you have other arrays of objects to count conditionally:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

function statusCounter(inputs) {
  let counter = 0;
  for (const input of inputs) {
    if (input.status === '0') counter += 1;
  }
  return counter;
}

statusCounter(storage); // 6

Use array methods

JavaScript includes a bunch of helpful methods when working with arrays. Each one can be chained to an array and passed different parameters to work with while iterating through the elements in the array.

The two we'll look at are filter() and reduce().

filter()

The filter method does just that – it iterates through each element in the array and filters out all elements that don't meet the condition(s) you provide. It then returns a new array with all the elements that returned true based on your condition(s).

For example:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.filter(function(item){
  if (item.status === 0) {
    return true;
  } else {
    return false;
  }
});

/*
[
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' }
] 
*/

Now that you've filtered out the object with status: '1', just call the length() method on the new array to get the total count of objects with status: '1':

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.filter(function(item){
  if (item.status === 0) {
    return true;
  } else {
    return false;
  }
}).length; // 6

But this can be shortened a lot with ES6 syntax:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.filter(item => item.status === '0').length; // 6

reduce()

Think of the reduce() method like a Swiss army knife – it's extremely flexible, and lets you take an array as input and transform it into just about anything. Even better, like filter(), this method returns a new array, leaving the original unchanged.

You can read more about reduce() in this article.

For our purposes, we want to take an array, examine its contents, and produce a number. Here's a simple way to do that:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.reduce((counter, obj) => {
  if (obj.status === '0') counter += 1
  return counter;
}, 0); // 6

You could simplify further by using ES6 syntax and a ternary operator:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.reduce((counter, obj) => obj.status === '0' ? counter += 1 : counter, 0); // 6

And even a bit more by using object destructuring:

const storage = [
  { data: '1', status: '0' },
  { data: '2', status: '0' },
  { data: '3', status: '0' },
  { data: '4', status: '0' },
  { data: '5', status: '0' },
  { data: '6', status: '0' },
  { data: '7', status: '1' },
];

const count = storage.reduce((counter, { status }) => status === '0' ? counter += 1 : counter, 0); // 6

So those are a few ways to go through the elements of an array and count them conditionally. Now get out there and count with confidence!

Imagine you call an API from your React project and the response looks something like this:

Object1 {
     Object2 {
           propertyIWantToAcess:
           anotherpropertyIWantToAcess:
      }
}

You've stored the data within your component's state as this.state.myPosts, and can access the elements of the outer object with the following:

render() {
    console.log(this.state.myPosts);

    const data = this.state.myPosts;

    const display = Object.keys(data).map((d, key) => {
    return (
      <div className="my-posts">
        <li key={key}>
          {data.current_route}
        </li>
      </div>
      );
    });

    return(
      <div>
        <ul>
          { display }
        </ul>
      </div>
    );
  }

But the problem is that you aren't able to access any of the inner objects.

The values of the inner objects will always change, so you aren't able to hardcode their keys and iterate through those to get the proper values.

Possible solutions

It can be difficult to work directly with complex API responses, so let's take a step back and simplify:

const visit = (obj, fn) => {
    const values = Object.values(obj)

    values.forEach(val => 
        val && typeof val === "object" ? visit(val, fn) : fn(val))
}

// Quick test
const print = (val) => console.log(val)

const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 15,
    secret: {
        secret2: {
            secret3: {
                val: "I ate your cookie"
            }
        }
    }
}

visit(person, print)
/* Output
John
Doe
15
I ate your cookie
*/

The lodash library has simple methods to accomplish the same thing, but this is a quick and dirty way to do the same thing in vanilla JS.

But say you want to simplify further, something like:

render() {
    // Logs data
    console.log(this.state.myPosts);

    const data = this.state.myPosts;

    // Stores nested object I want to access in posts variable
    const posts = data.content;

    // Successfully logs nested object I want to access
    console.log(posts);

    // Error, this will not allow me to pass posts variable to Object.keys
    const display = Object.keys(posts).map(key =>
      <option value={key}>{posts[key]}</option>
    )


    return(
      <div>
        {display}
      </div>
    );
 }

But you get an error, TypeError: can't convert undefined to object error whenever you try to pass posts to Object.keys.

Keep in mind that this error has nothing to do with React. It's illegal to pass an object as a child of a component.

Object.keys() only returns the keys of the object that's passed in as a parameter. You'll need to call it multiple times to iterate through all the nested keys.

If you need to display the whole nested object, one option is to use a function to convert each object into a React component and pass it as an array:

let data= []

visit(obj, (val) => {
    data.push(<p>{val}</p>)  // wraps any non-object type inside <p>
})
...
return <SomeComponent> {data} </SomeComponent>

Useful packages

Another option is to use a package like json-query to help iterate through the nested JSON data.

Here's a modified version of the render function above using json-query:

 render() {
   const utopian = Object.keys(this.state.utopianCash);
   console.log(this.state.utopianCash);

   var author = jsonQuery('[*][author]', { data: this.state.utopianCash }).value
   var title = jsonQuery('[*][title]', { data: this.state.utopianCash }).value
   var payout = jsonQuery('[*][total_payout_value]', { data: this.state.utopianCash }).value
   var postLink = jsonQuery('[*][url]', { data: this.state.utopianCash }).value
   var pendingPayout = jsonQuery('[*][pending_payout_value]', { data: this.state.utopianCash }).value
   var netVotes = jsonQuery('[*][net_votes]', { data: this.state.utopianCash }).value


   let display = utopian.map((post, i) => {
     return (
       <div className="utopian-items">
        <p>
          <strong>Author: </strong>
          {author[i]}
        </p>
        <p>
          <strong>Title: </strong>
            <a href={`https://www.steemit.com` + postLink[i]}>{title[i]}</a>
        </p>
        <p>
          <strong>Pending Payout: </strong>
            {pendingPayout[i]}
        </p>
        <p>
          <strong>Votes: </strong>
          {netVotes[i]}
        </p>
       </div>
     );
   });

    return (
      <div className="utopian-container">
        {display}
        <User />
      </div>
    );
  }
}

On average I work with JSON data 18 times a week. And I still need to google for specific ways to manipulate them almost every time. What if there was an ultimate guide that could always give you the answer?

In this article, I'll show you the basics of working with object arrays in JavaScript.

If you ever worked with a JSON structure, you've worked with JavaScript objects. Quite literally. JSON stands for JavaScript Object Notation.

Creating an object is as simple as this:

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date('2012-02-03'),
  "capacity": 7
}

This object represents a car. There can be many types and colors of cars, each object then represents a specific car.

Now, most of the time you get data like this from an external service. But sometimes you need to create objects and their arrays manually. Like I did when I was creating this e-shop:

Considering each category list item looks like this in HTML:

I didn't want to have this code repeated 12 times, which would make it unmaintainable.

Creating an array of objects

But let's get back to cars. Let's take a look at this set of cars:

We can represent it as an array this way:

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

Arrays of objects don't stay the same all the time. We almost always need to manipulate them. So let's take a look at how we can add objects to an already existing array.

Add a new object at the start - Array.unshift

To add an object at the first position, use Array.unshift.

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

Add a new object at the end - Array.push

To add an object at the last position, use Array.push.

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

Add a new object in the middle - Array.splice

To add an object in the middle, use Array.splice. This function is very handy as it can also remove items. Watch out for its parameters:

Array.splice(
  {index where to start},
  {how many items to remove},
  {items to add}
);

So if we want to add the red Volkswagen Cabrio on the fifth position, we'd use:

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

Looping through an array of objects

Let me ask you a question here: Why do you want to loop through an array of objects? The reason I'm asking is that the looping is almost never the primary cause of what we want to achieve.

JavaScript provides many functions that can solve your problem without actually implementing the logic in a general cycle. Let's take a look.

Find an object in an array by its values - Array.find

Let's say we want to find a car that is red. We can use the function Array.find.

let car = cars.find(car => car.color === "red");

This function returns the first matching element:

console.log(car);
// output:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

It's also possible to search for multiple values:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

In that case we'll get the last car in the list.

Get multiple items from an array that match a condition - Array.filter

The Array.find function returns only one object. If we want to get all red cars, we need to use Array.filter.

let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

Transform objects of an array - Array.map

This is something we need very often. Transform an array of objects into an array of different objects. That's a job for Array.map. Let's say we want to classify our cars into three groups based on their size.

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

It's also possible to create a new object if we need more values:

let carsProperties = cars.map(car => {
 let properties = {
   "capacity": car.capacity,
   "size": "large"
 };
 if (car.capacity <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 return properties;
});
console.log(carsProperties);
// output:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

Add a property to every object of an array - Array.forEach

But what if we want the car size too? In that case we can enhance the object for a new property size. This is a good use-case for the Array.forEach function.

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

Sort an array by a property - Array.sort

When we're done with transforming the objects, we usually need to sort them one way or another.

Typically, the sorting is based on a value of a property every object has. We can use the Array.sort function, but we need to provide a function that defines the sorting mechanism.

Let's say we want to sort the cars based on their capacity in descending order.

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

The Array.sort compares two objects and puts the first object in the second place if the result of the sorting function is positive. So you can look at the sorting function as if it was a question: Should the first object be placed in second place?

Make sure to always add the case for zero when the compared value of both objects is the same to avoid unnecessary swaps.

Checking if objects in array fulfill a condition - Array.every, Array.includes

Array.every and Array.some come handy when we just need to check each object for a specific condition.

Do we have a red cabrio in the list of cars? Are all cars capable of transporting at least 4 people? Or more web-centric: Is there a specific product in the shopping cart?

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

You may remember the function Array.includes which is similar to Array.some, but works only for primitive types.

Summary

In this article, we went through the basic functions that help you create, manipulate, transform, and loop through arrays of objects. They should cover most cases you will stumble upon.

If you have a use-case that requires more advanced functionality, take a look at this detailed guide to arrays or visit the W3 schools reference.

Or get in touch with me and I will prepare another article :-)