How to Manipulate Complex Objects in JavaScript

Introduction

Objects are non-primitive data type in JavaScript that have mutable values, that is, their values can be changed. These values can be another set of data that may seem cumbersome to be grouped.

In this article, I will show you why you should care about objects and the ways to manipulate complex objects in JavaScript without ambiguity.

Let’s get started.

What is an Object?

An Object is simply a group of data. let’s see an object as a person. This has a specific description (say look and character) and can also possess something (say car) that has also has a specific description, and in that car, the person can carry some other people and things. This is how an Object can group another objects, or even an Array. Since we are seeing a person as an Object, we can say the man below is an Object, and the descriptions are his properties.

Object in JavaScript

Object is one of the most important concepts or data structures to understand as a developer because, most the the time, you will be working with collections of data for example; user profile, number blog post, comments and replies, likes and shares etc. Object allows us to group these data in a form that will be easy for us to access. Let’s go back to the person we talked about above.
Let assume the person is a man, he speaks English, has brown hair, wore a blue T-shirt, a jean trouser, a snicker, and this man is singing and dancing, while driving his Black, Toyota Camry 2015 car. These data can be grouped as.

var man = {
  "gender" : "Male",
  "language" : "English",
  "hair color" : "Brown",
  "shirt color" : "Blue",
  "trouser" : "Jean",
  "shoe" : "Snickers",
  "events" : ["Singing", "Dancing", "Driving"],
  "car" : {
    "brand" : "Toyota",
    "model" : "2015",
    "color" : "Black"
  }
}

var person = man.events;
console.log(person);  //  ["Singing","Dancing","Driving"]

In order to create a new object data structure, you will need to wrap the properties of the object in a brace. You will notice that each property has a name followed by a colon and a value, then separated by a comma as demonstrated above. this is why object data structure is called a key value pair data structure. Each name is a Key, and whatever is after the colon is its Value. That is, “Gender” is a key and “Male” is its value.
We can easily access this object, either through its value or through its key.

Accessing Data in an Object

Now that we have seen how to create and store data in an Object, the next question is, how do we access the data we have created inside an Object just as we will easily pointed at his T-Shirt.
Individual property in an Object can be accessed in two ways:

1. Dot notation - This is used to access the property of an object when the property is a literal.

For example. to access the value of Gender and Event in our example above. We simply write the name of the object, a dot, followed by the key.
I.e
var person = man.gender;
console.log(person); // “Male

var person = man.events;
console.log(person); // ["Singing","Dancing","Driving"]


1. Bracket notation - This is used to access the property of an object when the property is not a literal. That is, it is a statement

For example. to access the value of Hair Color in our example above. We simply write the name of the object, a square bracket, followed by the key inside the square bracket. I.e

var person = man["shirt color"];
console.log(person); // “Blue”


Manipulating Complex Object

Now that we have learn how to access a property in an Object, let see how we can access the property of nested Objects.
Let’s access the value of Brand in the Car property.

var = person = man.car.brand // “Toyota”

Type the code in your text editor and check your result in your console. Or use online text editor such as code pen to try it out.

Let's build a project

In this project we want to delete any album that doesn’t have album detail, and update the ones with incomplete album detail. We will be using album catalog number 2468, 2648, 3548, and 5439.

var collection = {
  "2548" : {
    "album" : "Implication",
    "artist" : "2face Idibia",
    "tracks" : [ "Spiritual healing", 
                "you Give Love a Bad Name"
    ]
  },
  "2468" : {
    "album" : "Beautiful Imperfection",
    "artist" : "Asa",
    "tracks" : [ "Bed of Stone", 
                "Awe"
    ]
  },

  "2548" : {
    "artist" : "R-Kelly",
    "tracks" : []
  },

  "5439" : {
    "album" : "Adekunle"
  }
};

//we will check album that doesn't have details and update album.

function updateRecords(id , prop, value) {
  if (value === "") {
    delete collection[id][prop];
  } else if (prop === "tracks") {
    collection[id][prop] = collection[id][prop] || [];
    collection[id][prop].push(value);
  } else {
    collection[id][prop] = value;
  }

  return collection;
}
console.log(updateRecords(2468, "tracks", "test")); 
console.log(updateRecords(5439, "artist", "Adekunle Gold"));

//Output

/*  "2468" : {
    "album" : "Beautiful Imperfection",
    "artist" : "Asa",
    "tracks" : [ "Bed of Stone", 
                "Awe”,
        “Test”
    ]
  },

  "2548" : {
    "artist" : "R-Kelly",
    "tracks" : []
  },

  "5439" : {
    "album" : "Adekunle”,
    “Artist” : “Adekunle Gold”
  }
}; */

Take Away

1. Objects are non-primitive data type.
2. Objects do have properties and the properties are represented in keys and values. (Known as Key-Value Pairs)
3. Objects can be nested inside another Object.
4. The properties of an Object can be accessed by dot or bracket notation.

What’s Next?

The best way to learn programming is to write code. Try to solve more object related problems, or even formulate one and play around with every method learned in this article to get an hang of it.

Wrapping up

Wow, you read this to the end, that’s awesome. If you enjoyed and find this article resourceful consider sharing with your community. If you would love to read more article like this from me, I will like to connect with you.

Let’s connect on

Twitter @yusfulcoder

LinkedIn Yusuf Olanrewaju