JavaScript is a dynamically typed programming language. In JavaScript, it is not required to define the data type of a variable but that does not mean JavaScript does not have data types. Data types in JavaScript are divided into two categories - primitive and non-primitive.
Primitive data types such as numbers and strings can hold only a single value. But non-primitive types can hold more than one value. Objects in JavaScript are non-primitive.
If you have ever done programming, you may be familiar with the concept of objects because objects are one of the most important parts of programming. The reason is simple. Objects can hold multiple values. In this article, we will discuss objects in JavaScript.
1. What is an object?
In simple terms, an object is a collection of data that stores data in key-value pairs. An object is created using curly brackets and each key-value pair is separated by a comma. Observe the following object.
const obj1 = {
name: "Lewis",
age: 28,
city: "New York",
isAvailable: true
}
The above object has four key-value pairs. The four keys are name, age, city, and isAvailable. The values of keys can be any data type that is supported by JavaScript. For example, the name and city have strings are their values while age has a number and isAvailable has a boolean value.
2. Keys and values
A key (or sometimes called properties) is always placed on the left-hand side of the colon while its value is always placed on the right-hand side. As mentioned above, the value can be of any data type. Be it number, string, array, or even another object.
Observe the following object.
const obj1 = {
name: "Lewis",
age: 28,
city: "New York",
isAvailable: true,
address: {
"housenumber": 23,
"street": "Abby street",
}
}
The value of the address is an object and that object has two key-value pairs. So, a key can have any value that is supported by JavaScript. It can be an object, as discussed in the last example, or an array, or even an array of objects. Moreover, the value can be a function as well.
Observe the following example.
const obj1 = {
name: "Lewis",
age: 28,
city: "New York",
isAvailable: true,
address: {
housenumber: 23,
street: "Abby street",
},
getDetails: function () {
return `name is ${this.name}, age is ${this.age}, and city is ${this.city}`;
},
};
This time, getDetails key has a function as its value that returns a statement. Observe carefully and you will find that other keys (name, age, and city) are used in the function with the help of the “this” keyword.
3. Accessing values
To access a value of a key of an object, we are provided with multiple ways. The most common way is by using a dot (.). Following is how values are accessed using the dot.
console.log(obj1.name) //"Lewis"
console.log(obj1.age) //28
console.log(obj1.city) //"New York"
Similarly, we can use the dot to access the function.
console.log(obj1.getDetails()); //name is Lewis, age is 28, and city is New York
Another way is by using the name of the key in the square brackets.
console.log(obj1["name"]); //"Lewis"
console.log(obj1["age"]); //28
console.log(obj1["city"]); //"New York"
Apart from these, destructuring is advanced to access the values from an object. In destructuring, keys are extracted from an object using curly brackets.
const { name, age, city } = obj1;
console.log(name);
console.log(age);
console.log(city);
Remember, the values written inside the curly brackets should match the keys of the object.
4. Updating values
The values corresponding to a key in an object can be updated using the dot and square brackets with the key names.
obj1.name = "Mike";
obj1.age = 21;
obj1.city = "Chicago";
obj1.address.housenumber = 34;
Similarly, we can use the key name to update the values.
obj1["name"] = "Mike";
obj1["age"] = 21;
obj1["age"] = "Chicago";
obj1.address["housenumber"] = 334;
5. Wrapping it up
If you want to master JavaScript, then you should learn what are objects and how to use them. In this article, we discussed the basics of objects in JavaScript and how to use them. But objects in JavaScript is a huge topic. A professional should learn as much as possible regarding JavaScript objects.
- The Frontend and Backend Developer RoadMap
- 10 Courses to become a full-stack Web developer
- 10 Free Courses to learn TypeScript in 2022
- 5 Free Courses to Learn Angular in 2022
- Top 5 Courses to learn MEAN Stack in 2022
- 5 Best Courses to learn Design Pattern in JavaScript
- 10 Frameworks Fullstack Developer Should Learn
- My favorite courses to learn Angular for beginners
- 5 Courses to Learn Ruby and Rails for Free
- The Full-Stack Developer RoadMap
- 13 Free Courses to learn JavaScript in 2022
- 3 Books and Courses to Learn RESTful Web Services in Java
- The Complete React JS Developer RoadMap
- 5 Best Courses to learn MERN Stack in 2022
- 5 Free Courses to learn Node.js for Beginners
- 6 Best HTML 5 and CSS 3 Courses for Web Designers
Thanks for reading this article so far. If you like these best JavaScript design pattern courses, please share them with your friends and colleagues. If you have any questions or feedback, then please drop a comment.
P. S. - If you are new to Javascript and looking for a free JavaScript course, you can also check out this free JavaScript Essentials course from Udemy. It's completely free, and you just need an Udemy account to join this course.
No comments:
Post a Comment
Feel free to comment, ask questions if you have any doubt.