Javascript Tutorial-30 : How To Create And Use Object

In this Javascript tutorial, we will dive deep into the concept of objects and learn how to create and use objects in Javascript. Objects are a fundamental part of the language and understanding how to work with them is crucial for any Javascript developer. So, let's get started!

What are Objects in Javascript?

Objects in Javascript are complex data types that allow you to store and organize multiple values, called properties, as key-value pairs. These key-value pairs can be of any data type, including strings, numbers, booleans, arrays, and even other objects. Objects provide a way to represent real-world entities or concepts in your code, making them an essential tool for building complex applications.

Creating Objects

Literal Notation

One of the simplest ways to create an object in Javascript is by using the literal notation. This involves enclosing the key-value pairs within curly braces {} and separating them with colons :. Let's take a look at an example:

let person = {
  name: "John Doe",
  age: 30,
  isStudent: false,
  hobbies: ["reading", "coding", "gaming"]
};

n this example, we have created an object called person with four properties: name, age, isStudent, and hobbies. The name property stores a string value, the age property stores a number value, the isStudent property stores a boolean value, and the hobbies property stores an array of strings.

Constructor Function

Another way to create objects in Javascript is by using constructor functions. Constructor functions are essentially templates that allow you to create multiple objects with similar properties and methods. Here's an example of how to create an object using a constructor function:

Constructor Function

function Person(name, age, isStudent, hobbies) {
  this.name = name;
  this.age = age;
  this.isStudent = isStudent;
  this.hobbies = hobbies;
}

let person = new Person("John Doe", 30, false, ["reading", "coding", "gaming"]);

In this example, we define a constructor function called Person that takes four parameters: name, age, isStudent, and hobbies. Inside the constructor function, we use the this keyword to assign the passed values to the corresponding properties of the newly created object.

Accessing Object Properties

Once you have created an object, you can access its properties using dot notation or bracket notation. Dot notation involves using the dot operator (.) followed by the property name to access the value. Here's an example:

console.log(person.name); // Output: "John Doe"

In this example, we access the name property of the person object using dot notation.

Alternatively, you can use bracket notation by enclosing the property name in square brackets []. This notation is particularly useful when the property name is stored in a variable or when the property name contains special characters. Here's an example:

let propertyName = "age";
console.log(person[propertyName]); // Output: 30

In this example, we store the property name "age" in the propertyName variable and then use bracket notation to access the corresponding property value.

Modifying Object Properties

To modify the value of an object property, you can simply assign a new value to it using the assignment operator =. Here's an example:

person.age = 35;

In this example, we change the value of the age property of the person object to 35.

Adding and Deleting Object Properties

You can add new properties to an object by assigning a value to a property that doesn't exist. Similarly, you can delete properties from an object using the delete operator. Here are some examples:

person.isMarried = true; // Adding a new property
delete person.hobbies; // Deleting an existing property

In the first example, we add a new property called isMarried to the person object. In the second example, we delete the hobbies property from the person object.

Checking if a Property Exists

To check if a property exists in an object, you can use the in operator or the hasOwnProperty() method. The in operator returns true if the property exists, either directly on the object or somewhere in its prototype chain. The hasOwnProperty() method, on the other hand, only returns true if the property exists directly on the object. Here are some examples:

In the first example, we add a new property called isMarried to the person object. In the second example, we delete the hobbies property from the person object.

Checking if a Property Exists

console.log("name" in person); // Output: true
console.log(person.hasOwnProperty("age")); // Output: true
console.log("gender" in person); // Output: false
console.log(person.hasOwnProperty("hobbies")); // Output: false

In this example, we check if the name property exists in the person object using both the in operator and the hasOwnProperty() method. We also perform the same checks for the gender and hobbies properties.

Looping Through Object Properties

To iterate over the properties of an object, you can use a for...in loop. This loop allows you to access each property of an object one by one. Here's an example:

for (let key in person) {
  console.log(key + ": " + person[key]);
}

In this example, we loop through the properties of the person object and print each property name and value to the console.

Object Methods

Objects in Javascript can also have methods, which are functions that are associated with the object. These methods can perform certain actions or provide useful functionality related to the object. Let's take a look at an example:

let person = {
  name: "John Doe",
  age: 30,
  isStudent: false,
  hobbies: ["reading", "coding", "gaming"],
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.sayHello(); // Output: "Hello, my name is John Doe"

In this example, we define a method called sayHello inside the person object. This method logs a greeting message to the console, including the name property of the object.

Frequently Asked Questions (FAQs)

Q1: What is the difference between dot notation and bracket notation for accessing object properties?

Dot notation and bracket notation are two ways to access object properties in Javascript. Dot notation is more commonly used and allows you to access properties directly using the dot operator (.) followed by the property name. Bracket notation, on the other hand, involves enclosing the property name in square brackets []. Bracket notation is particularly useful when the property name is stored in a variable or when the property name contains special characters.

Q2: Can objects in Javascript have nested objects?

Yes, objects in Javascript can have nested objects as properties. This allows you to create complex data structures and represent hierarchical relationships between entities or concepts. Here's an example:

let person = {
name: "John Doe",
address: {
street: "123 Main St",
city: "Exampleville",
country: "Exampleland"
}
};

console.log(person.address.city); // Output: "Exampleville"

In this example, the person object has an address property, which itself is an object with its own properties (street, city, country).

Q3: How can I copy an object in Javascript?

To copy an object in Javascript, you can use various techniques depending on your specific requirements. One common approach is to use the Object.assign() method or the spread operator (...). Here's an example:

let originalObject = { name: "John Doe", age: 30 };
let copiedObject = Object.assign({}, originalObject);
// Or
let copiedObject = { ...originalObject };

In both cases, a new object is created with the same properties and values as the original object.

Q4: What is the difference between in operator and hasOwnProperty() method for checking object properties?

The in operator and the hasOwnProperty() method are used to check if a property exists in an object. However, there is a difference in the way they behave. The in operator checks if the property exists either directly on the object or somewhere in its prototype chain, while the hasOwnProperty() method only checks if the property exists directly on the object.

Q5: Can I iterate over object properties using a for...of loop?

No, the for...of loop is used to iterate over iterable objects like arrays or strings, but it cannot be used to directly iterate over the properties of an object. For iterating over object properties, you can use the for...in loop, which is specifically designed for that purpose.

Q6: Can I dynamically add or delete properties from an object?

Yes, you can dynamically add or delete properties from an object in Javascript. Adding a new property is as simple as assigning a value to a property that doesn't exist. To delete a property, you can use the delete operator followed by the property name. Keep in mind that modifying the object's structure dynamically can affect its behavior and should be done with caution.

Conclusion

In this tutorial, we have explored the world of objects in Javascript and learned how to create, access, modify, and iterate over object properties. Objects are a powerful feature of the language, enabling you to organize and manipulate data in a structured manner. By mastering the concepts covered in this tutorial, you are well-equipped to leverage the full potential of objects in your Javascript projects.

Remember to practice what you have learned and experiment with different scenarios to solidify your understanding. Happy coding!

Javascript Tutorial-30 : How To Create And Use Object