Decoding OBJECTS in modern javascript - PART I;

#todayilearned #javascript #100daysofcode #webdev

Intro to objects;

Some of the most powerful data structures to work within javascript are arrays and objects. Both of these items have a lot in common and also can interact with each other. They both are used to store collections of data in javascript where arrays store lists of data while an object mostly stores properties of an item and its values.

This article will highlight the inner workings of each of these data structures and how they can interact with each other in javascript. This article will also include several javascript code snippets and there are many ways of running them to view the results described in this article.

Working with javascript objects;

1. Object definition ;

The line of code below shows how to define an object in javascript language;

const user = {};//an empty object

An object can also contain properties that appear as follows;

const user = { 
  name: "cyrusCodes",
  proficiency: "javascript",
};

2. Accessing all javascript object values;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user);/*{ name: 'cyrusCodes', proficiency: 'javascript' }*/

3. Accessing javascript object value;

There are two methods of accessing property values in a javascript object either by the use of dot notation (.) or the square bracket notation[].

- Using the dot (.) notation;

This methodology is the most recommended while coding in javascript language and it is utilized as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user.name); /*cyrusCodes*/

- Using the square bracket [] notation;

This methodology uses square brackets to access the property value of the javascript object as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user["proficiency"]); /*javascript*/

4. Reassigning a property value;

To achieve this in javascript, the use of assignment operator **(=) **is required as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user.proficiency); /*javascript*/
user.proficiency = "front-end";
console.log(user.proficiency); /*front-end*/

5. Adding a new property to a javascript object;

In this and coming examples, we will utilize the dot (.) notation in all examples related to javascript objects. In this case, the addition is achieved as follows;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user); /*{ name: 'cyrusCodes', proficiency: 'javascript' }*/
user.email = "cyruscodes@yahoo.com"; /*added property email*/
console.log(user); /*{ name: 'cyrusCodes',proficiency: 'javascript',email: 'cyruscodes@yahoo.com'}*/

6. Removing / Deleting a property from a javascript object;

const user = {
  name: "cyrusCodes",
  proficiency: "javascript",
};
console.log(user);  /*{ name: 'cyrusCodes', proficiency: 'javascript' }*/
delete user.proficiency; /*deleting an object's property*/
console.log(user);/*{ name: 'cyrusCodes' }*/

Thank you so much. Remember, there are tons of other operations one can work with when it comes to javascript objects. This post is meant to highlight the basics and an advanced series is on the way, but in the meantime, this concludes the first part of a blog series of posts that are meant to decode objects and arrays and how one can use a combination of the two. Have a look at this second part of the blog series that explains the workings of arrays in modern javascript. Stay tuned for more updates on this and much more.

Please ensure you follow me on Twitter for more detailed and comprehensive blog posts.