Objects in JavaScript

Hello devs👋
It's another day to explore some of the basic concepts in JavaScript and this time around I would be taking us a bit through JavaScript Objects🙂.

Objects are very important in JavaScript and it's very much required that as a developer, you should have a good understanding of objects and their uses.

As we know, variables are used to store data and also deal with them effectively when required.
We must also know that primitive data types can only contain single values.

---

What are primitive data types?

Primitive data types are data that contain primitive values and a primitive value is a value that has no properties and methods.
Some of the primitive data types include:

• Strings
• Numbers
• Booleans
• Null
• Undefined

For example:

'Hello' is a primitive data type(String),

3.14 is also a primitive data type (Number).

Now when we store related data in JavaScript as primitive data types alone, we may find ourselves writing codes of thousands of lines.
In a situation like this, we would need something to store data more efficiently.

Non-primitive data types help a lot with this as they can store data collection of values within them.
And Objects are one of them.

---

What are JavaScript Objects?

JavaScript objects are containers for named values called properties.
You can compare an object to a person for instance. The person should have properties such as first name, last name, age, gender etc. The same thing also applies to objects. They are unordered collections of key-value pairs and each key-value pair is refered to as a property.

The key of a property can be a string. And the value of a property can be any value, such as a string, a number, an array, and even a function.

Objects are variables too. But objects can contain many values.

Object values are written as name : value pairs (name and value separated by a colon).

Example:

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age: 18,
gender:  "Male",
}

In this example, charlrific stands as the object which has several properties of which are firstName, lastName, age and gender with each of them having their corresponding values.
This code assigns several values to the variable named charlrific.

---

Creating a JavaScript Object

The easiest way to create a JavaScript Object is by using Object literal.

Using an object literal, you can both define and create an object in one statement.
An object literal is a list of name:value pairs inside curly braces {}.

The example below creates a new JavaScript object with four properties:

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age:  18,
gender:  "Male"
};

You can also declare an empty object and then assign properties to it .

const charlrific = { };
charlrific.firstName = "Charles" ;
charlrific.lastName = "Ezeani" ;
charlrific.age = 18 ;
charlrific.gender = "Male" ;

---

Accessing Properties of Objects

Some of the ways of accessing object properties in JavaScript is through the following syntax :

The dot notation ( . )

objectName.property    ;

or

The array-like notation ( [] )

objectName["property"]   ;

Examples

Using objectName.property

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age:  18,
gender:  "Male"



let text = charlrific.firstname +
 " is " + charlrific.age + 
" years old. " ;

console.log(text) ; // Charles is 18 years old.

Using objectName["property"]

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age:  18,
gender:  "Male"

// Using objectName.property

let text = charlrific[" firstName"] +
 " is " + charlrific["age"] +
 " years old. " ;

console.log(text) ; // Charles is 18 years old.

---

Adding New Objects Properties

New properties can be added to an already existing object by simply assigning a value to it. Just as I explained above when we were creating the object.
We can assume that the object already exists and then assign new values to it.

Example

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age: 18,
gender:  "Male",
}

charlrific.country = "Nigeria",

console.log(charlrific.country) // Nigeria

---

Deleting Object properties

Properties can be removed from an object by using the delete keyword .
It deletes both the value of the property and the property itself.

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age:  18,
gender:  "Male",

delete charlrific.age ;

console.log(charlrific.age); // undefined

---

JavaScript Object Methods

A JavaScript method is an object property containing a function definition.
They are also actions that can be performed on an object.

Example:

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age:  18,
gender:  "Male",
fullName: function (){
 return this.firstName + " " + this.lastName ;
}
};

The this keyword in the above example refers to the charlrific object.
From the example it is clear that methods are functions stored as object properties.

---

Accessing Object Methods

We can easily acess JavaScript Object Methods by using the following syntax:

objectName.methodName() ;

Example:

const charlrific = {
firstName:  "Charles",
lastName:  "Ezeani",
age:  18,
gender:  "Male",
fullName: function (){
 return this.firstName + " " + this.lastName ;
}
};
console.log(charlrific.fullName); // Charles Ezeani

The example accesses the fullName property of the charlrific object.

If the fullName method is accessed without the parentheses ( ), the function will not be executed, instead, it will return the function definition.

---

There is a whole lot more to JavaScript objects and guess I won't be able to cover them all in this post but I believe that we were able to get a little review on the topic.
Well, that would be all for now until next time.

Thanks for stopping by!

Lead image background Source
Edited with Inshot