JavaScript Objects: A Beginner's Guide
What is an object?
An object is a collection of related data and/or functionality. It can store multiple values of different types, such as numbers, strings, arrays, functions, etc. Each value in an object is called a property, and each function in an object is called a method.
How to create an object?
There are two main ways to create objects in JavaScript:
- Object literals: These are the simplest and most common way. An object literal is a comma-separated list of name-value pairs, enclosed by curly braces.
- Constructors: These are like blueprints for creating multiple objects of the same type. You define a template with properties and methods, then use the new keyword to create individual instances:
How to create an object literal
To create an object literal, simply enclose key-value pairs within curly braces. For example:
// Create an object literal
const person = {
name: "Alice",
age: 25,
greet: function() {
console.log("Hello, I'm " + this.name);
}
};
The name and value in each pair are separated by a colon. The name can be any valid identifier, and the value can be any valid expression. In the example above, the person object has three properties: name, age, and greet. The name and age properties have string and number values, respectively, and the greet property has a function value.
How to access and modify object properties?
You can access and modify object properties using either dot notation or bracket notation. Dot notation is more concise and readable, but bracket notation allows you to use variables and expressions as property names. For example:
// Access and modify object properties using dot notation
person.name = "Bob"; // Modify the name property
console.log(person.age); // Access the age property
person.greet(); // Invoke the greet method
// Access and modify object properties using bracket notation
person["name"] = "Charlie"; // Modify the name property
console.log(person["age"]); // Access the age property
person"greet"; // Invoke the greet method
How to use constructors and prototypes?
A constructor is a special function that creates and initializes a new object. You can define your own constructor function, or use a built-in constructor function, such as Object, Array, String, etc.
How to create on object constructor
To create a new object using a constructor function, you use the new keyword, followed by the name of the function and any arguments. For example:
// Define a constructor function
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("Hello, I'm " + this.name);
};
}
// Create a new object using the constructor function
const alice = new Person("Alice", 25);
const bob = new Person("Bob", 30);
A prototype is an object that is shared by all objects created from the same constructor function. It contains properties and methods that are common to all instances of that type of object. You can access and modify the prototype of a constructor function using the prototype property. For example:
// Add a new property to the prototype
Person.prototype.gender = "female";
// Add a new method to the prototype
Person.prototype.sayAge = function() {
console.log("I'm " + this.age + " years old");
};
// Access and invoke the prototype properties and methods
console.log(alice.gender); // "female"
alice.sayAge(); // "I'm 25 years old"
console.log(bob.gender); // "female"
bob.sayAge(); // "I'm 30 years old"
How to use the new, this, and instanceof keywords?
The new keyword creates a new object from a constructor function, and sets the value of this to the new object. The this keyword refers to the current object that is executing the code. The value of this depends on how the function is called. In general, this refers to the object that is left of the dot when invoking a method, or the global object when invoking a function. The instanceof keyword checks if an object is an instance of a constructor function, and returns a boolean value. For example:
// Use the new keyword to create a new object from a constructor function
const car = new Car("red", "Toyota");
// Use the this keyword to refer to the current object
car.start = function() {
console.log("The " + this.color + " " + this.brand + " is starting");
};
// Use the instanceof keyword to check if an object is an instance of a constructor function
console.log(car instanceof Car); // true
console.log(car instanceof Object); // true
console.log(car instanceof Array); // false
conclusion
In this article we delved into the core concepts of JavaScript objects. We also explored object creation through literals and constructors, unveiled the power of prototypes for code reuse, and wielded keywords like new, this, and instanceof with precision. Armed with this knowledge, you can seamlessly organize data, manipulate object properties and methods, and confidently navigate the vast landscape of JavaScript applications.