Hey developers 👋🏻, in this blog we will be discussing about JavaScript Objects.
Topics Covered :
- What are JavaScript Objects.
- Why to use them?
- Three ways to create them.
- How to access properties from Objects.
What are JavaScript Objects ?
JavaScript Objects are just as real world objects, for example:
A car is an object which has some property :
One Engine
4 Tiers
4 Doors
Company's Name
Color
and many more. We just have to express this in a syntactical way :
let car = {
company: "Tesla",
color: "Matte-Black",
tiers: 4,
doors: 4,
engine: 1
}
Here as we can see there are 4 properties company, color, tiers and doors, where all of these properties are defined in a key : value
pair and the key is the indicator of the value.
So if I console.log(car)
I would get :
further in this blog, I will explain how to make an object in detail but before understanding that let's understand the need of objects.
Why to use Objects ?
Objects are non-primitive data types which means they are not meant to store a single data, rather it is meant to store more complex entities. We can store multiple data-types inside an object, even functions are accepted in them.
In a very layman's terms, objects is a mini version of class, which can be used to store multiple entities and can be used in multiple places though it would be wrong to compare objects and classes.
Three Ways to Create Objects :
Three ways to create objects are :
1. Object Literals :
i.
const person = {
name: "Shreyas Pahune",
age: 18,
isMale: true,
favLangs: [
"JavaScript",
"TypeScript",
"Java",
"Dart/Flutter"
]
}
ii. Here in the above way, we just have to insert the key : value
pair inside a pair of curly brackets.
2. New
Keyword :
i.
const person = new Object()
person.name = "Shreyas Pahune"
person.age = 18
person.isMale = true
person.favLangs : ["JavaScript", "TypeScript", "Java", "Dart/Flutter"]
ii. When using this way, the code gets unnecessarily long, while you can achieve the same result by using the Object Literal method (1st method).
3. Using Object.create() :
i.
const person = {
name: "full-name",
age: 0,
isMale: true,
favLangs: [
"Lang1",
"Lang2",
"Lang3",
"Lang4"
]
}
const shreyas = Object.create(person)
shreyas.name = Shreyas Pahune"
shreyas.age = 18
shreyas.isMale = true
shreyas.favLangs : ["JavaScript", "TypeScript", "Java", "Dart/Flutter"]
ii. Object.create()
always makes an new object whilst keeping the original object as an template to follow.
How to Retrieve Data from Objects ?
There are two ways of retrieving data from an object :
- Dot Notation
- Bracket Notation
Dot Notation is :
let person = {
name: "Shreyas Pahune"
}
console.log(person.name) // expected output : Shreyas Pahune
Bracket Notation is :
let person = {
name: "Shreyas Pahune"
}
console.log(person['name']) // expected output : Shreyas Pahune
Bonus 🎈 :
There is a thing called object constructor where we use a special type of function to create an object.
The special function is known as constructor function and it is somewhat like Object.create()
but better.
Here in this function, we have to pass parameters and it is suggested to use this or the object literal type to create small-medium sized objects.
Here is the syntax for it 👇🏻
function Person(name, age, isMale, favLang) {
this.name = name;
this.age = age;
this.isMale = isMale;
this.favLang = favLang;
this.displayInfo = () => {
console.log(
`My name is ${this.name}, I am ${this.age} years old and I like to code in
${this.favLang}!`
);
};
}
const personOne = new Person("Shreyas", 18, true, [
"Typescript",
"JavaScript",
"Java",
"Dart/Flutter"
]);
personOne.displayInfo();
Here in the above example, we have made a function called person
NOTE: The first letter of a constructor function is to be kept capital. Nothing compulsory but just a convention!
The function takes 4 parameters/arguments, and the this
keyword refers to the object it indicates, so here if I make another person named as personTwo and give them a name as Anushka then the object will use the new name instead of the old name passed in.
Here we have made a function which is defined as a property and after making an instance(personOne) of the Person Object we can call the function as usual.
Expected output of the function would be :
My name is Shreyas, I am 18 years old and I like to code in Typescript,JavaScript,Java,Dart/Flutter!
Thank you so much for reading the whole blog 👏🏻, I really appreciate it.
PS : I am publishing a new blog after a very long time so I'll try to be more regular xD! Till then... bye bye 👋🏻.
Top comments (9)
Awesome knowledge about objects. Keep sharing like async, wait, promises in js.
Thanks a lot bro 🔥, more awesome blogs are on the way!
Great read <3
Thanks bro
More of this please. Conditional statements if possible
Sure thing ✈
Change your old methods for writing a JavaScript Code - Shorthand's for JavaScript Code
It's useful, keep sharing, thank you!
Thank you for reading it 💯