31.6 C
Jaipur
Tuesday, September 21, 2021

JavaScript Objects/Dictionary – Explained

Must read

Objects in JavaScript are data types used to store related data; They are a collection of named values or variables used to store multiple values; these values are stored in the form of name:value pairs. Objects have properties and methods. Methods are basically functions written as properties of an object.

The best way one can learn about JavaScript objects is by comparing them with real life objects. Objects in real life have different properties and can do different tasks, e.g., a Bicycle is an object; it has properties like colour, model, name, and methods like start, break, stop.

Now all the Bicycles have these properties; every Bicycle has a colour, model, and name but the value of each of these properties may differ for every Bicycle. Similarly, all the Bicycles perform these methods but at different times.

Difference between objects and dictionaries:

The data stored in the form of key-value pairs is called an Object or a Dictionary. Objects and dictionaries are similar; the difference lies in semantics. In JavaScript, dictionaries are called objects, whereas, in languages like Python or C#, they are called dictionaries.

How to use Objects in JavaScript?

Now we will create an object named user with different properties using JavaScript as an example:

const user = {fName:“Mary”, lName:“Jane”, age:23, id:01};

The user object given above has four different properties, i.e., fName, lName, age, and id. These properties have Marry, Jane, 23, and 01 as values, respectively. JavaScript is syntactically a dynamic language, so we can also declare the object in the following way for better readability:

const user = {
fName: “Mary” ,
lName: “Jane” ,
    age: 23 ,
    id: 01
};

Generally, objects are declared using the const keyword, and their definitions can consist of multiple lines.

How to access a property present inside an object?

Two different methods can be used to access and assign properties to an object in JavaScript:

  • By using the dot “.” operator
  • By using the square brackets syntax

Following is the syntax used in the dot operator method:

Object_name.property_name

The syntax for square bracket method is given below:

Object_name[‘property_name’]

For example, if we want to access the property age in our object user, we can do it in two different ways:

const user = {
fName: “Mary” ,
lName: “Jane” ,
    age: 23 ,
    id: 01
};

console.log(user.age);
console.log(user[‘age’]);

We can also modify the value of the property by using the object_name.property_name and the object_name[‘property_name’] syntax:

var user = {
fName: “Mary” ,
lName: “Jane” ,
  age: 23 ,
  id: 01
};

user.age = 24;
console.log(user.age);
user[‘age’] = 25;
console.log(user[‘age’]);

Similarly, methods can also be accessed in the same way by using the dot operator.

Now we are going to add a method to our user object.

const user = {
fName: “Mary” ,
lName: “Jane” ,
    age: 23 ,
    id: 01 ,
birthYear() {
const date = newDate();
        Year = date.getFullYear() this.age;
return Year;
    }
};

console.log(user.birthYear());

In the example given above, we have declared a method inside of the object user. This method subtracts the user’s age from the current year to return the user’s birth year.

The ‘this’ keyword in the example refers to the object that owns the age property. This keyword is used to access the value of a property within an object.

Objects in JavaScript can also be declared using the Object constructor along with the new keyword:

const user = newObject();

// Assigning Properties and Property Values

user.fName = “Marry”;
user.lName = “Jane”;
user.age = 23;
user.id = 01;

Conclusion

Apart from the primitive data types, almost everything else in JavaScript is an object. The new keyword can convert primitive data types such as Booleans, numbers, and strings into objects (not recommended).

JavaScript has some built-in objects such as Date and Math. We also have the option to create our own custom objects. This guide taught us to create an object and assign it to different properties, property values, and methods. We also learned to access and manipulate/modify the properties and methods present in an object.

Source link

- Advertisement -

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement -

Latest article