Understanding Objects in JavaScript

JavaScript is an Object Oriented Programming (OOP) language. You may have heard that before. Basically, all of this is just a fancy way of saying that everything you do will revolve around working with what are known as objects. So Properly understanding what these objects are and how to use them is something that will help us in getting along with .

What are Objects?

The concept of objects in a programming language like JavaScript maps nicely to its real-world equivalents. In the real world, you are literally surrounded by objects. Your computer is an object. Your alarm clock is an object. I could go on forever, but (for everyone’s sake :P) I’m going to stop here.

The thing to realize is that objects come in different shapes, sizes, and usefulness. Despite the variations, objects are all the same at a high-level. They are an abstraction.

Objects in JavaScript.

An object in JavaScript is a data type that is composed of a collection of names or keys and values, represented in name:value pairs. The name:value pairs can consist of properties that may contain any data type — including strings, numbers, and Booleans — as well as methods, which are functions contained within an object. The Key will always be a String

Objects in JavaScript are standalone entities that can be likened to objects in real life. For example, a book might be an object which you would describe by the title, author, number of pages, and genre. Similarly, a car might be an object that you would describe by the color, make, model, and horsepower. JavaScript arrays are also a type of object.

Creating an Object

An object is a JavaScript data type, just as a number or a string is also a data type. As a data type, an object can be contained in a variable. There are two ways to construct an object in JavaScript:

• The object literal, which uses curly brackets: {}
• The object constructor, which uses the new keyword

// Initialize object literal with curly brackets
(Empty Object)
const objectLiteral = {};
// Initialize object constructor with new Object
const objectConstructor = new Object();
const bike = {
    brand: "KTM",
    model: "Duke",
    cc: "250",
};

Properties and Methods

Objects can have properties and methods.

A property is the association between a name (key) and value within an object, and it can contain any datatype. A property generally refers to the characteristic of an object.

A method is a function that is the value of an object property, and therefore a task that an object can perform.

An easy way to remember the difference between object properties and methods is to think of a property as a noun, and a method as a verb.

Adding and Modifying Object Properties

In order to add a new property to an object, you would assign a new value to a property with the assignment operator (=).

// Add new age property to gimli
bike.color = 'red'; (or)
bike["color"] = 'red';
console.log(bike)
Output: 
{
    brand: "KTM",
    model: "Duke",
    cc: "250",
    color: "red"
};
The end result is that the color property gets set on the bike object. Whichever approach you use, you'll be just fine

Using the same method, an object’s property can be modified by assigning a new value to an existing property.
In order to remove a property from an object, you will utilize the delete keyword. delete is an operator that removes a property from an object.

//modify color property
bike.color= "black";
// Remove color property from bike
delete bike.weapon;

Looping Through Object Properties

JavaScript has a built-in type of for loop that is specifically meant for iterating over the properties of an object. This is known as the for...in loop.

We can use for...in to traverse through all the properties of bikeand print them to the console. Using bracket notation, we can retrieve the property value as a variable, in this case key.

// Iterate through properties of gimli
for (let key in bike) {
  console.log(bike[key]);
}

Another useful enumeration method is the Object.keys() method, which will return an array of the object’s keys.

// Initialize method on gimli object to return property keys
Object.keys(bike);
Output:
["brand", "model", "cc"]

Objects are an extremely useful and versatile feature of the JavaScript programming language. They are some of the main building blocks of writing code in JavaScript, and are a practical way to organize related data and functionality.