All About JavaScript Objects
Neeraj Jain
Posted on November 11, 2021
Hello learners and reckoners....
It's my first article in such a colossal developer community like [https://dev.to] ....will try my best that my content benefits the readers.
I am assuming that a beginner reading this article must be familiar with (OOP)Object Oriented Programming paradigm. Also, the most important prerequisite of this article is adequate knowledge of Basic JavaScript.
Introduction
The main motive of OOP is to manifest real world entities in the form of code. Each entity has some properties and values associated with it. JS(JavaScript) being an object oriented language makes use of objects to represent these entities. Real world entities have properties and values associated with it and JS has the ability to represent any entity as a JS Object.
One thing to note is that JS is an almost 100% Object Oriented Language since everything in JS is an Object be it Booleans, Strings, Numbers, Arrays etc.
Create Objects
const player = {
first_name:'Lionel',
last_name: 'Messi',
jersey_number:'30',
age: 33,
club: 'PSG',
goals: 635
}
This called an Object Literal.
It is the simplest and the most appropriate way through which objects can be created in JS. Observe that data is stored in Key:Value pairs which makes it very much comprehensive.
We can also create objects using classes in JS just like in any other OOP language like Java, Python, C++ but JS makes this look cool and simple using this approach.
Go to the console and check the type of player by
it will give the output as Object.
console.log(typeof(player))
Another way to create object is as follows:
const player = new Object()
player.first_name:'Lionel',
player.last_name: 'Messi',
player.jersey_number:'30',
player.age: 33,
player.club: 'PSG',
player.goals: 635
Accessing Object Attributes and Values
There are two ways through which we can access values associated with properties
1.Using []
console.log(player[first_name]) //Returns Lionel
console.log(player[last_name]) //Returns Messi
console.log(player[jersey_number]) //Returns 30
console.log(player[age]) //Returns 33
...
Within the square brackets we can not only write direct attributes but also a valid expression....for example let's add another variable in this snippet
const player = {
first_name:'Lionel',
last_name: 'Messi',
jersey_number:'30',
age: 33,
club: 'PSG',
goals: 635
}
const nameKey = 'name' //Another Variable//
console.log(player[first+'_'+nameKey]) //Returns Lionel
console.log(player[last+'_'+nameKey]) //Returns Messi
console.log(player[jersey_number]) //Returns 30
console.log(player[age]) //Returns 33
...
2.Using . Operator
console.log(player.first_name) //Returns Lionel
console.log(player.last_name) //Returns Messi
console.log(player.jersey_number) //Returns 30
console.log(player.age) //Returns 33
...
Expressions cannot be used in case of . operator and . operator style of accessing attributes looks much cleaner than [] notation.
Modifying Attributes and Values
We can easily modify any of the attributes of the object using the .operator notation in the following manner
const player = {
first_name:'Lionel',
last_name: 'Messi',
jersey_number:30,
age: 33,
club: 'PSG',
goals: 635
}
player.first_name = 'Cristiano'
player.last_name = 'Ronaldo'
player.jersey_number = 7
...
console.log(player) //All values of attributes have changed//
Data Within Data
1.Methods as Attributes
We can use methods as attributes while defining objects.
const mikel = {
firstName : 'Mikel',
lastName : 'Arteta',
birthYear: 1978,
calcAge : function () {
return 2021 - this.birthYear
}
}
console.log(`${mikel.firstName} ${mikel.lastName} is ${mikel.calcAge()} years old`)
//Mikel Arteta is 43 years old//
Here this is a reference variable used to refer to any attribute of the current object i.e. the object itself.
2.Arrays as Values
We can have Arrays as values to a particular attribute within an object.
const mikel = {
firstName : 'Mikel',
lastName : 'Arteta',
birthYear: 1978,
calcAge : function () {
return 2021 - this.birthYear
},
friends : ['Ole', 'Gerard', 'Klopp', 'Henry']
}
console.log(`${mikel.firstName} ${mikel.lastName} has ${mikel.friends.length} friends. ${mikel.friends[3]} is his best friend`);
//Mikel Arteta has 4 friends. Henry is his best friend//
3.Object Within Object
We can have an object as a value of an attribute within an object.
var obj = {
prop1: 5,
obj2: {
prop1: [3, 6, 3],
prop2: 74,
prop3: {
str: "Hello World"
}
}
};
console.log(obj.obj2.prop3.str);
//Hello World//
Looping over an Object
To access all the attributes of an objects at one go we will use a for..in loop.
const player = {
first_name:'Lionel',
last_name: 'Messi',
jersey_number:30,
age: 33,
club: 'PSG',
goals: 635
}
for (let property in player) {
console.log(`${property} : ${player[property]}`)
}
/*
first_name : Lionel
last_name : Messi
jersey_number : 30
age : 33
club : PSG
goals : 635
*/
That's all for now....hope you found it useful to some extent and I am looking forward for your suggestions for improving my content and feedback for this post.
Thanks and Keep Learning....!!!!!
Posted on November 11, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024