JavaScript is a versatile language, and objects are a fundamental part of its architecture. Mastering object methods is crucial for any JavaScript developer, whether you're working on the front end or back end. This comprehensive guide will cover everything you need to know about object methods in JavaScript, including detailed explanations and practical examples.
1. Introduction to Objects
Objects in JavaScript are collections of key-value pairs. They are used to store various data types and more complex entities. An object can be created using the object literal syntax or the Object constructor.
Object Literal Syntax
let person = {
name: "Deepak Kumar",
age: 24,
profession: "MERN Stack Developer",
hobbies: ["Photography", "Blogging"]
};
Object Constructor Syntax
let person = new Object();
person.name = "Deepak Kumar";
person.age = 24;
person.profession = "MERN Stack Developer";
person.hobbies = ["Photography", "Blogging"];
2. Creating Objects
There are multiple ways to create objects in JavaScript, including the use of factory functions and ES6 classes.
Factory Function
function createPerson(name, age, profession, hobbies) {
return {
name: name,
age: age,
profession: profession,
hobbies: hobbies,
greet: function() {
console.log(`Hello, my name is ${this.name}.`);
}
};
}
let person1 = createPerson("Deepak Kumar", 24, "MERN Stack Developer", ["Photography", "Blogging"]);
person1.greet();
ES6 Class
class Person {
constructor(name, age, profession, hobbies) {
this.name = name;
this.age = age;
this.profession = profession;
this.hobbies = hobbies;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
let person2 = new Person("Deepak Kumar", 24, "MERN Stack Developer", ["Photography", "Blogging"]);
person2.greet();
3. Accessing Properties and Methods
You can access object properties and methods using dot notation or bracket notation.
Dot Notation
console.log(person1.name); // Deepak Kumar
person1.greet(); // Hello, my name is Deepak Kumar.
Bracket Notation
console.log(person1["age"]); // 24
person1["greet"](); // Hello, my name is Deepak Kumar.
Bracket notation is especially useful when dealing with dynamic property names.
4. Adding and Deleting Properties
You can add properties to an object dynamically and delete them when no longer needed.
Adding Properties
person1.email = "deepak@example.com";
console.log(person1.email); // deepak@example.com
Deleting Properties
delete person1.email;
console.log(person1.email); // undefined
5. Built-in Object Methods
JavaScript provides several built-in methods to work with objects.
Object.keys()
Returns an array of a given object's own enumerable property names.
let keys = Object.keys(person1);
console.log(keys); // ["name", "age", "profession", "hobbies", "greet"]
Object.values()
Returns an array of a given object's own enumerable property values.
let values = Object.values(person1);
console.log(values); // ["Deepak Kumar", 24, "MERN Stack Developer", ["Photography", "Blogging"], ƒ]
Object.entries()
Returns an array of a given object's own enumerable property [key, value] pairs.
let entries = Object.entries(person1);
console.log(entries); // [["name", "Deepak Kumar"], ["age", 24], ...]
Object.assign()
Copies all enumerable own properties from one or more source objects to a target object.
let target = {};
let source = {a: 1, b: 2};
Object.assign(target, source);
console.log(target); // {a: 1, b: 2}
Object.freeze()
Freezes an object, making it immutable.
let obj = {name: "Deepak"};
Object.freeze(obj);
obj.name = "John"; // This will fail silently
console.log(obj.name); // Deepak
Object.seal()
Seals an object, preventing new properties from being added but allowing existing properties to be changed.
let sealedObj = {age: 24};
Object.seal(sealedObj);
sealedObj.age = 25; // This will succeed
sealedObj.name = "Deepak"; // This will fail silently
console.log(sealedObj); // {age: 25}
6. Custom Object Methods
You can define custom methods directly on an object or via prototypes.
Direct Method Definition
person1.sayAge = function() {
console.log(`I am ${this.age} years old.`);
};
person1.sayAge(); // I am 24 years old.
Using Prototype
Person.prototype.sayProfession = function() {
console.log(`I am a ${this.profession}.`);
};
person2.sayProfession(); // I am a MERN Stack Developer.
7. Prototype Methods
JavaScript uses prototypes to allow objects to inherit features from one another. Understanding the prototype chain is key to mastering JavaScript.
Prototypal Inheritance
function Developer(name, age, profession, hobbies, language) {
Person.call(this, name, age, profession, hobbies);
this.language = language;
}
Developer.prototype = Object.create(Person.prototype);
Developer.prototype.constructor = Developer;
Developer.prototype.code = function() {
console.log(`I code in ${this.language}.`);
};
let dev = new Developer("Deepak Kumar", 24, "MERN Stack Developer", ["Photography", "Blogging"], "JavaScript");
dev.greet(); // Hello, my name is Deepak Kumar.
dev.code(); // I code in JavaScript.
8. Object Property Descriptors
Property descriptors provide more control over how properties behave.
Defining Property Descriptors
let user = {};
Object.defineProperty(user, 'name', {
value: 'Deepak',
writable: false,
enumerable: true,
configurable: false
});
console.log(user.name); // Deepak
user.name = 'John'; // This will fail silently
console.log(user.name); // Deepak
Object.getOwnPropertyDescriptor()
Returns a property descriptor for a given property on an object.
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(descriptor);
// {
// value: 'Deepak',
// writable: false,
// enumerable: true,
// configurable: false
// }
Object.defineProperties()
Defines multiple properties with descriptors at once.
Object.defineProperties(user, {
age: {
value: 24,
writable: true,
enumerable: true
},
profession: {
value: 'MERN Stack Developer',
writable: true,
enumerable: true
}
});
console.log(user); // {name: "Deepak", age: 24, profession: "MERN Stack Developer"}
9. Working with this
The this keyword refers to the context in which a function is executed. Its value can change depending on how the function is called.
In Methods
let obj = {
name: "Deepak",
greet() {
console.log(this.name);
}
};
obj.greet(); // Deepak
In Event Handlers
let button = document.createElement('button');
button.textContent = "Click me";
button.onclick = function() {
console.log(this); // The button element
};
document.body.appendChild(button);
Using bind(), call(), and apply()
These methods allow you to set the value of this explicitly.
bind()
let user = {
name: "Deepak"
};
function greet() {
console.log(this.name);
}
let boundGreet = greet.bind(user);
boundGreet(); // Deepak
call()
function greet(language) {
console.log(`${this.name} speaks ${language}`);
}
greet.call(user, 'JavaScript'); // Deepak speaks JavaScript
apply()
greet.apply(user, ['JavaScript']); // Deepak speaks JavaScript
10. Inheritance and the Prototype Chain
Understanding how JavaScript handles inheritance and the prototype chain is essential for creating complex applications.
Inheritance via Prototypes
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function
() {
console.log(`${this.name} barks.`);
};
let dog = new Dog('Rex');
dog.speak(); // Rex barks.
ES6 Classes and Inheritance
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
let dog = new Dog('Rex');
dog.speak(); // Rex barks.
11. Conclusion
Mastering object methods in JavaScript is a crucial step towards becoming a proficient developer. This guide has covered various ways to create and manipulate objects, access and define properties and methods, work with prototypes and inheritance, and control the behavior of properties using descriptors.
By understanding and applying these concepts, you can write more efficient, maintainable, and scalable JavaScript code. Happy coding!
Top comments (0)