Home » JavaScript » Objects
Category:

Objects

Objects

JavaScript for…of Loop: A Comprehensive Tutorial

written by utmoker71

The for…of loop in JavaScript is a convenient way to iterate over iterable objects, such as arrays, strings, sets, maps, and more.

Introduced in ES6 (ECMAScript 2015), for…of provides an elegant syntax to traverse data structures without having to worry about indexing or object properties.

This tutorial will explore the for…of loop with several practical examples.

1. Basic Syntax of for…of Loop

The syntax of the for…of loop is simple and intuitive:

for (const element of iterable) {
  // Code to execute for each element
}

element: A variable that will hold the value of the current element in each iteration.
iterable: The object you want to loop over (arrays, strings, sets, maps, etc.).

2. Using for…of with Arrays

The for…of loop is commonly used to iterate over elements of an array.

Example 1: Iterating Over an Array

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}

Output:

apple
banana
orange

Explanation: The loop iterates over each element in the fruits array, logging each fruit to the console.

3. Using for…of with Strings

The for…of loop can iterate over each character in a string.

Example 2: Iterating Over a String

const message = 'Hello, World!';

for (const char of message) {
  console.log(char);
}

Output:

H
e
l
l
o
,
 
W
o
r
l
d
!

Explanation: The loop iterates over each character in the string, including spaces and punctuation.

4. Using for…of with Sets

Sets are collections of unique values. The for…of loop can be used to iterate over elements in a Set.

Example 3: Iterating Over a Set

const uniqueNumbers = new Set([1, 2, 3, 4, 5]);

for (const number of uniqueNumbers) {
  console.log(number);
}

Output:

1
2
3
4
5

Explanation: The loop iterates over each element in the Set, logging each number to the console. Duplicate values are not included in the set.

5. Using for…of with Maps

Maps store key-value pairs, and for…of can be used to iterate over a map’s entries, keys, or values.

Example 4: Iterating Over a Map's Entries

const userRoles = new Map([
  ['Alice', 'Admin'],
  ['Bob', 'Editor'],
  ['Charlie', 'Viewer']
]);

for (const [user, role] of userRoles) {
  console.log(`${user}: ${role}`);
}

Output:

Alice: Admin
Bob: Editor
Charlie: Viewer

Explanation: The loop iterates over each entry in the map. The destructuring assignment ([user, role]) extracts the key and value from each map entry.

Example 5: Iterating Over a Map's Keys and Values

const userRoles = new Map([
  ['Alice', 'Admin'],
  ['Bob', 'Editor'],
  ['Charlie', 'Viewer']
]);

// Iterating over keys
for (const user of userRoles.keys()) {
  console.log(user);
}

// Iterating over values
for (const role of userRoles.values()) {
  console.log(role);
}

Output:

Alice
Bob
Charlie
Admin
Editor
Viewer

Explanation: You can use userRoles.keys() and userRoles.values() to iterate over the keys and values of the map, respectively.

6. Using for…of with Arrays and entries()

The entries() method returns an iterator object containing key-value pairs for each index in an array. Using for…of with entries() allows you to get both the index and the value in each iteration.

Example 6: Iterating Over Array with Index and Value

const colors = ['red', 'green', 'blue'];

for (const [index, color] of colors.entries()) {
  console.log(`Index: ${index}, Value: ${color}`);
}

Output:

Index: 0, Value: red
Index: 1, Value: green
Index: 2, Value: blue

Explanation: The entries() method returns an iterator containing arrays of index-value pairs, which are then destructured in the for…of loop.

7. Using for…of with NodeLists (DOM Elements)

When working with the DOM, you often need to iterate over collections of elements. NodeList objects (returned by methods like document.querySelectorAll) are iterable and can be traversed using for…of.

Example 7: Iterating Over DOM Elements

// Assuming there are multiple

elements on the page const paragraphs = document.querySelectorAll(‘p'); for (const paragraph of paragraphs) { paragraph.style.color = ‘blue'; // Changes the text color of each

element to blue }

Explanation: The for…of loop iterates over each

element in the NodeList and applies a style change to it.

8. Using for…of with Generators

Generators are a special type of function that can be paused and resumed. They produce a sequence of values, making them iterable.

Example 8: Iterating Over a Generator

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const numbers = numberGenerator();

for (const number of numbers) {
  console.log(number);
}

Output:

1
2
3

Explanation: The for…of loop iterates over each value produced by the generator function.

9. Difference Between for…of and for…in

for…of: Iterates over the values of an iterable (like arrays, strings, sets, and maps).
for…in: Iterates over the keys (property names) of an object or array indices.

Example 9: for…of vs. for…in

const arr = ['a', 'b', 'c'];

console.log('Using for...of:');
for (const value of arr) {
  console.log(value); // Outputs the values: a, b, c
}

console.log('Using for...in:');
for (const index in arr) {
  console.log(index); // Outputs the indices: 0, 1, 2
}

Output:

Using for...of:
a
b
c
Using for...in:
0
1
2

Explanation: for…of iterates over the values of the array, while for…in iterates over the indices (keys).

Conclusion

The for…of loop is a versatile tool for iterating over various types of iterable objects in JavaScript, including arrays, strings, sets, maps, NodeList objects, and even generators.

It simplifies the iteration process by allowing you to focus on the elements themselves rather than their indices or properties.

Experiment with these examples to get a solid understanding of how for…of can be used in different scenarios!

0 comment
0 FacebookTwitterPinterestEmail
Objects

JavaScript Promises: A Complete Tutorial

written by utmoker71

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Promises make it easier to work with asynchronous code, avoiding “callback hell” and allowing more readable and maintainable code.

This tutorial will cover how to create and use promises in JavaScript with several practical examples.

1. Understanding a Promise

A promise has three possible states:

Pending: The initial state; neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

2. Creating a Promise

You can create a promise using the Promise constructor. It takes a function with two parameters: resolve and reject. Call resolve() when the operation is successful, and reject() when there's an error.

Example 1: Basic Promise

const myPromise = new Promise((resolve, reject) => {
  let success = true; // Simulating a condition

  if (success) {
    resolve('The operation was successful!');
  } else {
    reject('The operation failed.');
  }
});

// Using the promise
myPromise
  .then((message) => {
    console.log(message); // Output: The operation was successful!
  })
  .catch((error) => {
    console.log(error); // Won't run in this case
  });

In this example:

The promise checks a condition (success).
If the condition is true, it calls resolve() to indicate success.
If the condition is false, it calls reject() to indicate failure.

3. Consuming Promises with then, catch, and finally

Example 2: Using then(), catch(), and finally()

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data fetched successfully!');
  }, 2000);
});

myPromise
  .then((message) => {
    console.log(message); // Output: Data fetched successfully!
  })
  .catch((error) => {
    console.log(error); // This block runs if the promise is rejected
  })
  .finally(() => {
    console.log('Operation completed.'); // Runs regardless of success or failure
  });

then(): Called when the promise is fulfilled (resolved).
catch(): Called when the promise is rejected.
finally(): Always called regardless of whether the promise was fulfilled or rejected.

4. Chaining Promises

You can chain multiple then() calls to handle sequential asynchronous tasks. Each then() receives the result of the previous one.

Example 3: Chaining Promises

const asyncTask = new Promise((resolve) => {
  resolve(2);
});

asyncTask
  .then((number) => {
    console.log(number); // Output: 2
    return number * 2;
  })
  .then((number) => {
    console.log(number); // Output: 4
    return number * 2;
  })
  .then((number) => {
    console.log(number); // Output: 8
  });

Each then() returns a new promise, allowing the chain to continue processing the value.

5. Handling Errors in Promises

Errors in any part of the chain will be caught by catch(). You can also handle specific errors at each step if needed.

Example 4: Error Handling in Promises

const divideNumbers = (a, b) => {
  return new Promise((resolve, reject) => {
    if (b === 0) {
      reject('Cannot divide by zero.');
    } else {
      resolve(a / b);
    }
  });
};

divideNumbers(10, 0)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error); // Output: Cannot divide by zero.
  });

6. Using Promise.all

Promise.all() takes an array of promises and returns a new promise that resolves when all input promises have resolved. If any of the promises reject, Promise.all() immediately rejects with that error.

Example 5: Using Promise.all()

const promise1 = Promise.resolve('First promise resolved');
const promise2 = new Promise((resolve) => setTimeout(() => resolve('Second promise resolved'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('Third promise resolved'), 1000));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results);
    // Output: ['First promise resolved', 'Second promise resolved', 'Third promise resolved']
  })
  .catch((error) => {
    console.error(error);
  });

7. Using Promise.race

Promise.race() takes an array of promises and returns a new promise that resolves or rejects as soon as one of the input promises resolves or rejects.

Example 6: Using Promise.race()

const promiseA = new Promise((resolve) => setTimeout(() => resolve('A won!'), 1000));
const promiseB = new Promise((resolve) => setTimeout(() => resolve('B won!'), 500));

Promise.race([promiseA, promiseB])
  .then((winner) => {
    console.log(winner); // Output: 'B won!'
  });

8. Creating Promises with async and await

JavaScript's async/await syntax is syntactic sugar built on top of promises, providing a way to write asynchronous code that looks synchronous.

Example 7: Using async and await

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched!');
    }, 2000);
  });
};

const fetchDataAsync = async () => {
  try {
    const result = await fetchData();
    console.log(result); // Output: 'Data fetched!'
  } catch (error) {
    console.error(error);
  } finally {
    console.log('Fetching complete.');
  }
};

fetchDataAsync();

async: When you declare a function with async, it automatically returns a promise.
await: Pauses the execution of the async function until the promise is resolved or rejected.

9. Using Promise.allSettled

Promise.allSettled() returns a promise that resolves after all input promises have either resolved or rejected. It provides the results of each promise, regardless of whether they were fulfilled or rejected.

Example 8: Using Promise.allSettled()

const promise1 = Promise.resolve('Success');
const promise2 = Promise.reject('Failure');
const promise3 = Promise.resolve('Another success');

Promise.allSettled([promise1, promise2, promise3])
  .then((results) => {
    results.forEach((result, index) => {
      console.log(`Promise ${index + 1}:`, result);
    });
  });

Output:

Promise 1: { status: 'fulfilled', value: 'Success' }
Promise 2: { status: 'rejected', reason: 'Failure' }
Promise 3: { status: 'fulfilled', value: 'Another success' }

10. Using Promise.any

Promise.any() takes an array of promises and returns a promise that resolves as soon as any of the input promises resolves. If all input promises reject, it rejects with an AggregateError.

Example 9: Using Promise.any()

const promiseA = Promise.reject('Error A');
const promiseB = Promise.reject('Error B');
const promiseC = new Promise((resolve) => setTimeout(() => resolve('Promise C resolved'), 1000));

Promise.any([promiseA, promiseB, promiseC])
  .then((result) => {
    console.log(result); // Output: 'Promise C resolved'
  })
  .catch((error) => {
    console.error('All promises were rejected:', error);
  });

Conclusion

Promises are a fundamental part of modern JavaScript, providing a clear and manageable way to handle asynchronous operations.

By understanding how to create, chain, and handle promises, you can write more efficient and error-resistant code.

This tutorial covers the basics and some advanced use cases of promises to help you work with asynchronous code effectively.

Feel free to experiment with the examples and explore further!

0 comment
0 FacebookTwitterPinterestEmail
Objects

JavaScript for…in Loop: A Complete Tutorial

written by utmoker71

The for…in loop is a special type of loop in JavaScript used to iterate over the enumerable properties of an object.

This loop is particularly useful when working with objects, as it allows you to easily access all properties (keys) without knowing them beforehand.

In this tutorial, we will explore the for…in loop with multiple examples.

1. Basic Syntax of for…in Loop

The for…in loop iterates over all the enumerable properties of an object:

for (let key in object) {
  // Code to execute for each property
}

key: This is a variable that will hold the property name of the current iteration.
object: The object whose properties are to be iterated over.

2. Iterating Over Object Properties

The for…in loop is mainly used for iterating over the properties of an object.

Example 1: Basic for…in loop

const user = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

Output:

name: Alice
age: 25
city: New York

In this example, the for…in loop iterates over each property of the user object, and key contains the current property name (name, age, city).

3. Iterating Over Arrays with for…in

Though it's possible to use for…in to iterate over arrays, it's not recommended because for…in iterates over all enumerable properties, including the array indexes and any custom properties you may add to the array.

For arrays, the for…of loop or the for loop is usually a better choice. However, here's how it works with arrays:

Example 2: Using for…in with an array

const colors = ['red', 'green', 'blue'];

for (let index in colors) {
  console.log(`${index}: ${colors[index]}`);
}

Output:

0: red
1: green
2: blue

While this works, remember that for…in is not optimized for arrays. The index variable is a string, not a number, which can cause confusion when performing arithmetic operations.

4. Using for…in with Nested Objects

The for…in loop can also be used to iterate over nested objects.

Example 3: Iterating over nested objects

const student = {
  name: 'John',
  age: 21,
  subjects: {
    math: 'A',
    science: 'B',
    literature: 'A'
  }
};

for (let key in student) {
  if (typeof student[key] === 'object') {
    for (let nestedKey in student[key]) {
      console.log(`${nestedKey}: ${student[key][nestedKey]}`);
    }
  } else {
    console.log(`${key}: ${student[key]}`);
  }
}

Output:

name: John
age: 21
math: A
science: B
literature: A

In this example, the nested object subjects is also iterated over using a nested for…in loop.

5. Using hasOwnProperty with for…in

The for…in loop will iterate over all enumerable properties, including inherited ones. To avoid this and focus only on the object's own properties, use the hasOwnProperty method:

Example 4: Using hasOwnProperty to filter out inherited properties

const person = {
  firstName: 'Jane',
  lastName: 'Doe'
};

Object.prototype.age = 30; // Adding an inherited property

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

Output:

firstName: Jane
lastName: Doe

In this example, age is added to the prototype of all objects, but it doesn't appear in the loop output because we used hasOwnProperty.

6. Modifying Object Properties Using for…in

You can modify an object’s properties while iterating over them using the for…in loop.

Example 5: Modifying object properties

const book = {
  title: 'JavaScript Basics',
  author: 'John Doe',
  year: 2021
};

for (let key in book) {
  if (key === 'year') {
    book[key] = 2022; // Updating the year property
  }
}

console.log(book);

Output:

{
  title: 'JavaScript Basics',
  author: 'John Doe',
  year: 2022
}

7. Deleting Properties Using for…in

You can also delete properties from an object during iteration.

Example 6: Deleting properties in an object

const car = {
  make: 'Toyota',
  model: 'Camry',
  year: 2018
};

for (let key in car) {
  if (key === 'year') {
    delete car[key]; // Deleting the year property
  }
}

console.log(car);

Output:

{
  make: 'Toyota',
  model: 'Camry'
}

8. Caveats of Using for…in

Arrays: While for…in can be used with arrays, it is not recommended because it iterates over all enumerable properties (including custom properties) and the indexes are returned as strings. Use for…of or traditional for loops for arrays.

Inherited Properties: By default, for…in loops iterate over all enumerable properties, including those inherited from an object's prototype. Use hasOwnProperty to filter out inherited properties if needed.

Conclusion

The for…in loop is a useful tool for iterating over the properties of an object. However, it should be used carefully, especially when dealing with arrays and inherited properties.

By understanding its quirks and limitations, you can use for…in effectively in your JavaScript code.

Feel free to experiment with the examples provided and use for…in where it fits best!

0 comment
0 FacebookTwitterPinterestEmail
Objects

JavaScript Object Protection: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, object protection involves restricting the ability to modify, add, or delete properties in an object.

This can be particularly useful when you want to ensure that certain objects remain consistent throughout your application, preventing accidental or malicious alterations.

JavaScript provides several built-in methods to protect objects:

Object.preventExtensions()
Object.seal()
Object.freeze()

In this tutorial, we’ll explore each of these methods, how they work, and provide examples to illustrate their usage.

1. Object.preventExtensions()

Object.preventExtensions() prevents new properties from being added to an object. However, it allows existing properties to be modified or deleted.

Example 1: Using Object.preventExtensions()

let car = {
  brand: 'Toyota',
  model: 'Corolla'
};

Object.preventExtensions(car);

// Attempting to add a new property
car.year = 2022;
console.log(car.year); // Output: undefined (addition failed)

// Modifying an existing property
car.model = 'Camry';
console.log(car.model); // Output: Camry

// Deleting an existing property
delete car.brand;
console.log(car); // Output: { model: 'Camry' }

Explanation

Object.preventExtensions(car) prevents adding new properties (car.year fails).
Modifying (car.model = ‘Camry') and deleting (delete car.brand) existing properties are still allowed.
Checking If an Object is Not Extensible

You can check if an object is non-extensible using Object.isExtensible().

console.log(Object.isExtensible(car)); // Output: false

2. Object.seal()

Object.seal() prevents adding or deleting properties to an object. However, it allows modifying the values of existing properties. In addition, it marks all existing properties as non-configurable, which means their descriptors (e.g., enumerability, configurability) cannot be changed.

Example 2: Using Object.seal()

let user = {
  name: 'Alice',
  age: 30
};

Object.seal(user);

// Attempting to add a new property
user.email = 'alice@example.com';
console.log(user.email); // Output: undefined (addition failed)

// Modifying an existing property
user.age = 31;
console.log(user.age); // Output: 31

// Attempting to delete a property
delete user.name;
console.log(user.name); // Output: Alice (deletion failed)

Explanation

Object.seal(user) prevents adding (user.email) and deleting (delete user.name) properties.
Modifying existing properties (user.age) is still allowed.

Checking If an Object is Sealed

You can check if an object is sealed using Object.isSealed().

console.log(Object.isSealed(user)); // Output: true

3. Object.freeze()

Object.freeze() is the most restrictive of the three methods. It prevents adding, deleting, or modifying properties of an object. Additionally, it marks all properties as non-writable and non-configurable.

Example 3: Using Object.freeze()

let book = {
  title: 'JavaScript Essentials',
  author: 'John Doe'
};

Object.freeze(book);

// Attempting to add a new property
book.year = 2023;
console.log(book.year); // Output: undefined (addition failed)

// Attempting to modify an existing property
book.title = 'Advanced JavaScript';
console.log(book.title); // Output: JavaScript Essentials (modification failed)

// Attempting to delete a property
delete book.author;
console.log(book.author); // Output: John Doe (deletion failed)

Explanation

Object.freeze(book) prevents adding (book.year), modifying (book.title), and deleting (delete book.author) properties.
Checking If an Object is Frozen

You can check if an object is frozen using Object.isFrozen().

console.log(Object.isFrozen(book)); // Output: true

4. Property Attributes and Protection Methods

When using Object.preventExtensions(), Object.seal(), and Object.freeze(), it's helpful to understand how they interact with property attributes like writable and configurable.

Summary of Protection Methods

Method Add Properties Delete Properties Modify Properties Change Property Attributes
Object.preventExtensions ❌ No ✅ Yes ✅ Yes ✅ Yes
Object.seal ❌ No ❌ No ✅ Yes ❌ No
Object.freeze ❌ No ❌ No ❌ No ❌ No

 

5. Protecting Nested Objects

Object.freeze() and Object.seal() do not perform deep protection. They only apply to the object at the top level, not nested objects.

Example 4: Protecting Nested Objects

let user = {
  name: 'Alice',
  address: {
    city: 'New York',
    zip: '10001'
  }
};

Object.freeze(user);

// Attempting to modify a nested object property
user.address.city = 'Los Angeles';
console.log(user.address.city); // Output: Los Angeles (modification succeeded)

Explanation

Even though Object.freeze(user) freezes the user object, the nested address object remains mutable.
To deeply freeze an object, you need to create a utility function.

Example 5: Deep Freezing an Object

function deepFreeze(obj) {
  // Retrieve the property names defined on obj
  let propNames = Object.getOwnPropertyNames(obj);

  // Freeze properties before freezing self
  for (let name of propNames) {
    let value = obj[name];

    // If value is an object, freeze it
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  }

  return Object.freeze(obj);
}

let user = {
  name: 'Alice',
  address: {
    city: 'New York',
    zip: '10001'
  }
};

deepFreeze(user);

// Attempting to modify a nested object property
user.address.city = 'Los Angeles';
console.log(user.address.city); // Output: New York (modification failed)

Explanation

The deepFreeze() function recursively freezes the properties of an object, including nested objects.
After using deepFreeze(), attempts to modify nested properties are also prevented.

6. Working with Property Descriptors

You can use Object.defineProperty() to set property attributes like writable, enumerable, and configurable, providing more control over how individual properties can be accessed or modified.

Example 6: Using Object.defineProperty() for Property Protection

let user = {};
Object.defineProperty(user, 'name', {
  value: 'Alice',
  writable: false, // Cannot be modified
  enumerable: true,
  configurable: false // Cannot be deleted
});

console.log(user.name); // Output: Alice
user.name = 'Bob'; // Attempt to modify (fails silently)
console.log(user.name); // Output: Alice

delete user.name; // Attempt to delete (fails silently)
console.log(user.name); // Output: Alice

Explanation

writable: false makes the property read-only.
configurable: false makes the property non-deletable and prevents its descriptor from being modified.

Summary

Object protection in JavaScript helps to control how and if an object's properties can be modified, added, or deleted. Here is a quick overview of the methods:

Methods for Object Protection

Method Description
Object.preventExtensions() Prevents new properties from being added to the object.
Object.seal() Prevents adding or deleting properties; allows modification of existing properties.
Object.freeze() Prevents adding, deleting, or modifying properties.

Additional Tips

  • Use Object.isExtensible(), Object.isSealed(), and Object.isFrozen() to check the state of an object.
  • For deeply nested objects, use a custom function (e.g., deepFreeze()) to apply protection to all levels.
  • Utilize Object.defineProperty() to set property attributes (writable, enumerable, configurable) for more granular control.

By understanding and using these methods, you can ensure that your objects are safeguarded against unwanted changes, making your JavaScript applications more robust and reliable.

0 comment
0 FacebookTwitterPinterestEmail
Objects

JavaScript Object Properties: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, object properties are key-value pairs that store data related to the object. Properties can be of any data type, including strings, numbers, arrays, functions (methods), or even other objects.

This tutorial will cover how to define, access, modify, delete, and use advanced techniques with object properties.

1. Defining Object Properties

You can define properties in an object using object literals, dot notation, bracket notation, and Object.defineProperty().

Example 1: Defining Properties Using an Object Literal

let person = {
  name: 'Alice',
  age: 30,
  isStudent: false,
};

console.log(person); 
// Output: { name: 'Alice', age: 30, isStudent: false }

Explanation

The person object has three properties: name, age, and isStudent.
The keys (name, age, isStudent) are strings, and the values can be any data type.

Example 2: Defining Properties Using Dot and Bracket Notation

let car = {};
car.brand = 'Toyota'; // Dot notation
car['model'] = 'Corolla'; // Bracket notation

console.log(car); 
// Output: { brand: 'Toyota', model: 'Corolla' }

Explanation

Dot Notation: Use object.propertyName to define a property.
Bracket Notation: Use object[‘propertyName'] to define a property, useful when property names contain spaces or special characters.

Example 3: Using Object.defineProperty()

The Object.defineProperty() method provides more control over property characteristics.

let user = {};
Object.defineProperty(user, 'name', {
  value: 'John',
  writable: false, // Cannot be modified
  enumerable: true, // Shows up in loops
  configurable: false // Cannot be deleted or modified
});

console.log(user.name); // Output: John
user.name = 'Doe'; // This will not change the name due to writable: false
console.log(user.name); // Output: John

Explanation

Object.defineProperty() allows you to create or modify properties with specific attributes (writable, enumerable, configurable).
writable: If false, the property value cannot be changed.
enumerable: If true, the property will be included in loops such as for…in.
configurable: If false, the property cannot be deleted or changed to a data descriptor.

2. Accessing Object Properties

You can access properties using dot notation or bracket notation.

Example 4: Accessing Properties

let book = {
  title: 'JavaScript Essentials',
  author: 'Jane Doe',
  year: 2023
};

console.log(book.title); // Output: JavaScript Essentials
console.log(book['author']); // Output: Jane Doe

Explanation

Dot Notation: Use object.propertyName to access a property.
Bracket Notation: Use object[‘propertyName'] to access a property. This is necessary when the property name has spaces or special characters.

3. Modifying Object Properties

You can modify an existing property’s value using either dot or bracket notation.

Example 5: Modifying Properties

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022
};

car.year = 2023; // Modify using dot notation
car['model'] = 'Camry'; // Modify using bracket notation

console.log(car); 
// Output: { brand: 'Toyota', model: 'Camry', year: 2023 }

Explanation

Use object.propertyName = newValue to change the value of a property.

4. Deleting Object Properties

You can delete an object property using the delete operator.

Example 6: Deleting Properties

let user = {
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
};

delete user.email;

console.log(user); 
// Output: { name: 'Alice', age: 25 }

Explanation

The delete operator removes the specified property from the object.
Deleting a non-existent property does not throw an error.

5. Checking for Property Existence

You can check if an object has a specific property using the in operator or the hasOwnProperty() method.

Example 7: Using the in Operator and hasOwnProperty()

let person = {
  name: 'John',
  age: 30
};

console.log('name' in person); // Output: true
console.log('gender' in person); // Output: false

console.log(person.hasOwnProperty('age')); // Output: true
console.log(person.hasOwnProperty('toString')); // Output: false

Explanation

in Operator: Returns true if the property exists in the object or its prototype chain.
hasOwnProperty(): Returns true if the property exists directly on the object, not on its prototype.

6. Iterating Over Object Properties

You can use a for…in loop, Object.keys(), Object.values(), and Object.entries() to iterate over object properties.

Example 8: Iterating with for…in Loop

let car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2023
};

for (let key in car) {
  console.log(`${key}: ${car[key]}`);
}

Output

brand: Toyota
model: Camry
year: 2023

Explanation

The for…in loop iterates over all enumerable properties of the object.

Example 9: Using Object.keys(), Object.values(), and Object.entries()

let book = {
  title: 'JavaScript Essentials',
  author: 'Jane Doe',
  year: 2023
};

console.log(Object.keys(book)); // Output: ['title', 'author', 'year']
console.log(Object.values(book)); // Output: ['JavaScript Essentials', 'Jane Doe', 2023]
console.log(Object.entries(book)); // Output: [['title', 'JavaScript Essentials'], ['author', 'Jane Doe'], ['year', 2023]]

Explanation

Object.keys(): Returns an array of the object's property names.
Object.values(): Returns an array of the object's property values.
Object.entries(): Returns an array of key-value pairs.

7. Using Computed Property Names

JavaScript allows you to define property names dynamically using computed property names within an object literal.

Example 10: Computed Property Names

let propertyName = 'color';
let car = {
  brand: 'Toyota',
  [propertyName]: 'Red' // Computed property name
};

console.log(car.color); // Output: Red

Explanation

The property name is computed dynamically using the variable propertyName.

8. Freezing and Sealing Objects

JavaScript provides methods like Object.freeze() and Object.seal() to control object properties.

Example 11: Using Object.freeze() and Object.seal()

let user = {
  name: 'Alice',
  age: 25
};

Object.freeze(user);
user.age = 30; // This will not change the age property

console.log(user.age); // Output: 25

let book = {
  title: 'JavaScript Essentials'
};

Object.seal(book);
book.author = 'Jane Doe'; // Adding new properties is not allowed
delete book.title; // Deleting properties is also not allowed

console.log(book); // Output: { title: 'JavaScript Essentials' }

Explanation

Object.freeze(): Prevents adding, deleting, or modifying properties.
Object.seal(): Prevents adding or deleting properties, but allows modifying existing ones.

Summary

JavaScript object properties are fundamental for storing and manipulating data within objects. Here's a quick recap of what we covered:

Property Operations

Operation Method
Define a Property Object literal, dot notation, bracket notation, Object.defineProperty()
Access a Property Dot notation (obj.prop), bracket notation (obj['prop'])
Modify a Property object.property = value
Delete a Property delete object.property
Check Existence 'property' in object, object.hasOwnProperty('property')
Iterate Over Properties for...in, Object.keys(), Object.values(), Object.entries()

Advanced Techniques

  • Computed Property Names: Define properties dynamically.
  • Control Attributes: Use Object.defineProperty() for writable, enumerable, and configurable attributes.
  • Freeze/Seal Objects: Use Object.freeze() and Object.seal() to control changes to object properties.

By mastering object properties in JavaScript, you gain greater control over how you define, access, modify, and interact with data in your applications

 

0 comment
0 FacebookTwitterPinterestEmail
Objects

JavaScript Object Methods: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, object methods are functions that belong to an object. Methods allow objects to perform actions using their properties. They are useful for manipulating and working with the data inside objects.

This tutorial will guide you through various techniques to define, use, and manipulate object methods in JavaScript.

1. Defining Object Methods

Methods can be added to objects in multiple ways: using object literals, after the object is created, or using ES6 shorthand syntax.

Example 1: Defining Methods in an Object Literal

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022,
  start: function() {
    console.log(`${this.brand} ${this.model} is starting...`);
  },
  stop: function() {
    console.log(`${this.brand} ${this.model} has stopped.`);
  }
};

car.start(); // Output: Toyota Corolla is starting...
car.stop();  // Output: Toyota Corolla has stopped.

Explanation

The car object has two methods: start and stop.
The this keyword refers to the current object (car in this case).
Methods are defined using function expressions within the object.

Example 2: Using ES6 Shorthand Method Syntax

let user = {
  name: 'Alice',
  greet() { // Shorthand syntax
    console.log(`Hello, my name is ${this.name}.`);
  }
};

user.greet(); // Output: Hello, my name is Alice.

Explanation

The ES6 shorthand syntax allows you to define methods without the function keyword.

2. Adding Methods to an Existing Object

You can add methods to an object after it has been created.

Example 3: Adding Methods to an Object

let person = {
  name: 'John',
  age: 30
};

// Adding a method to the object
person.sayHello = function() {
  console.log(`Hello, I am ${this.name} and I am ${this.age} years old.`);
};

person.sayHello(); // Output: Hello, I am John and I am 30 years old.

Explanation

The sayHello method is added to the person object after it was created.
The method uses this to refer to the object's properties.

3. Using this Keyword in Methods

In JavaScript, the this keyword within a method refers to the object on which the method was called.

Example 4: Using this in Object Methods

let book = {
  title: 'JavaScript Essentials',
  author: 'John Doe',
  printDetails() {
    console.log(`${this.title} by ${this.author}`);
  }
};

book.printDetails(); // Output: JavaScript Essentials by John Doe

Explanation

this.title and this.author refer to the properties of the book object.
The this keyword is essential when you need to reference the object’s properties from within its methods.

4. Common Built-In Object Methods

JavaScript provides several built-in methods to work with objects, such as Object.keys(), Object.values(), Object.entries(), Object.assign(), and Object.freeze().

Example 5: Using Object.keys(), Object.values(), and Object.entries()

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022
};

console.log(Object.keys(car));   // Output: ['brand', 'model', 'year']
console.log(Object.values(car)); // Output: ['Toyota', 'Corolla', 2022]
console.log(Object.entries(car)); // Output: [['brand', 'Toyota'], ['model', 'Corolla'], ['year', 2022]]

Explanation

Object.keys() returns an array of the object's keys.
Object.values() returns an array of the object's values.
Object.entries() returns an array of key-value pairs.

Example 6: Using Object.assign()

The Object.assign() method is used to copy properties from one or more source objects to a target object.

let target = { name: 'John' };
let source = { age: 30, city: 'New York' };

Object.assign(target, source);

console.log(target); // Output: { name: 'John', age: 30, city: 'New York' }

Explanation

Object.assign() copies properties from the source object to the target object.
The target object is modified to include the properties of the source.

Example 7: Using Object.freeze()

The Object.freeze() method freezes an object, preventing new properties from being added, existing properties from being removed, or values from being modified.

let user = {
  name: 'Alice',
  age: 25
};

Object.freeze(user);
user.age = 30; // This will not change the age property

console.log(user.age); // Output: 25

Explanation

Object.freeze(user) freezes the user object.
Any attempts to modify the properties of a frozen object will have no effect.

5. Method Chaining

You can define multiple methods in an object and return the object itself (this) to allow method chaining.

Example 8: Method Chaining

let calculator = {
  result: 0,
  
  add(value) {
    this.result += value;
    return this; // Returning 'this' for chaining
  },
  
  subtract(value) {
    this.result -= value;
    return this; // Returning 'this' for chaining
  },
  
  multiply(value) {
    this.result *= value;
    return this; // Returning 'this' for chaining
  },
  
  reset() {
    this.result = 0;
    return this; // Returning 'this' for chaining
  },
  
  printResult() {
    console.log(this.result);
    return this; // Returning 'this' for chaining
  }
};

calculator.add(10).subtract(2).multiply(3).printResult(); // Output: 24
calculator.reset().add(5).multiply(4).printResult(); // Output: 20

Explanation

Each method (add, subtract, multiply, reset, printResult) returns this, which allows subsequent method calls to be chained together.
This pattern is often used in libraries (e.g., jQuery) for concise, readable code.

6. Using Getter and Setter Methods

JavaScript objects support getter and setter methods to get and set property values dynamically.

Example 9: Getters and Setters

let person = {
  firstName: 'John',
  lastName: 'Doe',
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  
  set fullName(name) {
    let parts = name.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

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

person.fullName = 'Jane Smith';
console.log(person.firstName); // Output: Jane
console.log(person.lastName); // Output: Smith

Explanation

The fullName getter returns the full name.
The fullName setter splits a name string and updates the firstName and lastName properties.

Summary

JavaScript object methods provide powerful ways to define behavior for objects, manipulate object data, and implement reusable code. Here's a quick recap of the key points:

Defining Methods

Object Literal: Define methods directly within an object.
ES6 Shorthand: Use the shorthand syntax for defining methods (methodName() { … }).
Adding Methods: Add methods to objects after creation using dot notation.

Built-In Object Methods

Object.keys(), Object.values(), Object.entries(): Work with object properties and values.
Object.assign(): Copy properties from one or more source objects to a target object.
Object.freeze(): Prevent modifications to an object.

Using this Keyword
this refers to the current object within a method and is essential for accessing the object's properties.

Advanced Techniques

Method Chaining: Return this from methods to enable chaining.
Getters and Setters: Use getter and setter methods for controlled access to properties.

By mastering object methods, you can create more dynamic, flexible, and powerful JavaScript objects, enhancing your ability to write clean and efficient code.

0 comment
0 FacebookTwitterPinterestEmail
Objects

JavaScript Object Definition: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, objects are fundamental data structures that store collections of related data and functionality.

Objects are made up of key-value pairs, where keys are strings (also known as properties) and values can be any data type, including other objects, functions, arrays, and primitive values.

Objects in JavaScript can be created and manipulated using various methods.

This tutorial covers different ways to define objects in JavaScript, how to access and manipulate object properties, and some common operations on objects.

1. Defining Objects Using Object Literals

The simplest way to define an object in JavaScript is using an object literal, which is created with curly braces {}. Properties and methods are defined directly within these braces.

Example 1: Creating an Object Using an Object Literal

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022,
  start: function() {
    console.log('The car is starting...');
  },
};

console.log(car.brand); // Output: Toyota
console.log(car.model); // Output: Corolla
car.start(); // Output: The car is starting...

Explanation

The car object has properties: brand, model, and year, and a method start.
Methods in an object literal can be defined as functions.
Object properties are accessed using dot notation (car.brand) or bracket notation (car[‘brand']).

2. Defining Objects Using the new Object() Syntax

Objects can also be created using the new Object() constructor, which creates an empty object. Properties can then be added using dot or bracket notation.

Example 2: Creating an Object Using the new Object() Syntax

let person = new Object();
person.name = 'Alice';
person.age = 30;
person.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

console.log(person.name); // Output: Alice
console.log(person.age); // Output: 30
person.greet(); // Output: Hello, my name is Alice

Explanation

new Object() creates an empty object.
Properties and methods are added to the object using dot notation.

3. Using Object Properties with Bracket Notation

Object properties can also be accessed and defined using bracket notation, which is particularly useful when the property name contains special characters, spaces, or is dynamically determined.

Example 3: Accessing and Defining Properties Using Bracket Notation

let book = {
  title: 'JavaScript Essentials',
  'author name': 'John Doe',
};

console.log(book['title']); // Output: JavaScript Essentials
console.log(book['author name']); // Output: John Doe

// Adding a new property using bracket notation
let propertyName = 'publisher';
book[propertyName] = 'TechBooks Publishing';

console.log(book['publisher']); // Output: TechBooks Publishing

Explanation

Bracket notation (book[‘title']) is used to access properties, allowing for property names with spaces (‘author name').
You can dynamically define new properties using variables (e.g., book[propertyName]).

4. Defining Objects Using Constructor Functions

Constructor functions allow you to create multiple instances of objects with the same structure. By convention, constructor functions are named with a capitalized first letter.

Example 4: Creating Objects Using a Constructor Function

function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
  this.start = function() {
    console.log(`${this.brand} ${this.model} is starting...`);
  };
}

let car1 = new Car('Toyota', 'Camry', 2022);
let car2 = new Car('Honda', 'Civic', 2021);

console.log(car1.brand); // Output: Toyota
console.log(car2.model); // Output: Civic
car1.start(); // Output: Toyota Camry is starting...

Explanation

Car is a constructor function that initializes the brand, model, and year properties.
The new keyword creates a new instance of Car (car1 and car2).
Each instance has its own properties and methods.

5. Defining Objects Using the Object.create() Method

The Object.create() method creates a new object with a specified prototype object and properties.

Example 5: Creating an Object Using Object.create()

let animal = {
  type: 'Unknown',
  speak: function() {
    console.log(`${this.type} makes a noise.`);
  },
};

let dog = Object.create(animal);
dog.type = 'Dog';
dog.speak(); // Output: Dog makes a noise.

Explanation

The animal object serves as a prototype for the dog object.
Object.create(animal) creates a new object (dog) that inherits properties and methods from animal.

6. Using ES6 Classes to Define Objects

In ES6, JavaScript introduced classes as a syntactic sugar for constructor functions and prototypes. Classes provide a more straightforward way to define objects and include methods.

Example 6: Creating Objects Using ES6 Classes

class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }

  start() {
    console.log(`${this.brand} ${this.model} is starting...`);
  }
}

let car1 = new Car('Ford', 'Mustang', 2022);
let car2 = new Car('Chevrolet', 'Camaro', 2021);

console.log(car1.brand); // Output: Ford
car2.start(); // Output: Chevrolet Camaro is starting...

Explanation

The Car class has a constructor method that initializes brand, model, and year.
The start method is defined inside the class and is shared among all instances.
car1 and car2 are instances of the Car class.

7. Manipulating Object Properties

You can add, update, and delete properties of an object dynamically.

Example 7: Adding, Updating, and Deleting Object Properties

let user = {
  name: 'John',
  age: 25,
};

// Adding a new property
user.email = 'john@example.com';
console.log(user.email); // Output: john@example.com

// Updating an existing property
user.age = 26;
console.log(user.age); // Output: 26

// Deleting a property
delete user.name;
console.log(user.name); // Output: undefined

Explanation

Adding a property: user.email = ‘john@example.com';.
Updating a property: user.age = 26;.
Deleting a property: delete user.name;.

8. Iterating Over Object Properties

You can iterate over object properties using a for…in loop or Object.keys(), Object.values(), and Object.entries() methods.

Example 8: Using for…in to Iterate Over Properties

let user = {
  name: 'Alice',
  age: 30,
  city: 'New York',
};

for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

Output

name: Alice
age: 30
city: New York

Explanation

The for…in loop iterates over all enumerable properties of the user object.

Example 9: Using Object.keys(), Object.values(), and Object.entries()

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022,
};

// Getting keys
console.log(Object.keys(car)); // Output: ['brand', 'model', 'year']

// Getting values
console.log(Object.values(car)); // Output: ['Toyota', 'Corolla', 2022]

// Getting entries (key-value pairs)
console.log(Object.entries(car)); // Output: [['brand', 'Toyota'], ['model', 'Corolla'], ['year', 2022]]

Explanation

Object.keys() returns an array of property names (keys).
Object.values() returns an array of property values.
Object.entries() returns an array of key-value pairs.

Summary

JavaScript objects are versatile and can be created and manipulated in various ways. Here’s a recap of key points:

Ways to Define Objects

Method Description
Object Literals ({}) Simplest way to create objects with properties and methods.
new Object() Creates an empty object; properties are added dynamically.
Constructor Functions Defines object templates using functions.
Object.create() Creates a new object with a specified prototype.
ES6 Classes Provides a modern syntax for creating objects and defining methods.

Common Operations

  • Access Properties: object.property or object['property'].
  • Add/Update Properties: object.newProperty = value.
  • Delete Properties: delete object.property.
  • Iterate Properties: Use for...in, Object.keys(), Object.values(), and Object.entries().

Understanding how to define and work with objects is crucial in JavaScript, as they are used

0 comment
0 FacebookTwitterPinterestEmail
Objects

JavaScript Object Prototypes: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, every object has a prototype. A prototype is a blueprint from which objects inherit properties and methods. Prototypes allow you to create objects that share properties and methods without having to redefine them every time.

This mechanism is the core of prototype-based inheritance in JavaScript.

What is an Object Prototype?

When you create an object in JavaScript, it automatically has a property called __proto__ (also accessible via Object.getPrototypeOf(obj)), which points to its prototype.

If a property or method is not found in the object itself, JavaScript looks for it in the prototype.

1. Creating an Object with a Prototype

When you create an object using an object l
iteral or constructor function, JavaScript automatically assigns the prototype.

Example 1: Default Prototype of an Object

let car = {
  brand: 'Toyota',
  model: 'Corolla',
};

console.log(car.__proto__); // Output: {}

Explanation

The car object has a prototype (inherited from Object.prototype) that contains default methods like .toString() and .hasOwnProperty().

2. Understanding Object.prototype

Every object in JavaScript inherits from Object.prototype unless explicitly defined otherwise. This is why all objects in JavaScript have access to methods like .toString() and .hasOwnProperty().

Example 2: Using a Method from Object.prototype

let person = {
  name: 'Alice',
};

console.log(person.hasOwnProperty('name')); // Output: true
console.log(person.toString()); // Output: [object Object]

Explanation

The person object can use hasOwnProperty() and toString() because they are inherited from Object.prototype.

3. Creating Custom Prototypes Using Constructor Functions

You can create a custom prototype by using a constructor function. The properties and methods added to the constructor’s prototype are shared among all instances created from that constructor.

Example 3: Creating a Prototype Using a Constructor Function

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

// Adding a method to the prototype
Person.prototype.greet = function() {
  return `Hello, my name is ${this.name}.`;
};

let john = new Person('John', 30);
let jane = new Person('Jane', 25);

console.log(john.greet()); // Output: Hello, my name is John.
console.log(jane.greet()); // Output: Hello, my name is Jane.

Explanation

The Person constructor function initializes name and age properties.
Person.prototype.greet adds a method to the Person prototype.
All instances (john and jane) have access to the greet method because they inherit from Person.prototype.

4. Adding Properties and Methods to an Existing Prototype

You can add properties and methods to an existing prototype even after objects have been created.

Example 4: Adding Methods to the Prototype

function Car(brand, model) {
  this.brand = brand;
  this.model = model;
}

let car1 = new Car('Toyota', 'Camry');

// Add a method to the prototype
Car.prototype.getDetails = function() {
  return `${this.brand} ${this.model}`;
};

console.log(car1.getDetails()); // Output: Toyota Camry

Explanation

The Car constructor function initializes the brand and model properties.
We added a getDetails method to Car.prototype.
car1 can access getDetails() because it was added to the prototype.

5. Overriding Prototype Properties and Methods

If an object has a property or method with the same name as one on its prototype, it overrides the prototype's version.

Example 5: Overriding a Prototype Method

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name} makes a noise.`;
};

let dog = new Animal('Dog');
console.log(dog.speak()); // Output: Dog makes a noise.

// Overriding the speak method for the dog object
dog.speak = function() {
  return `${this.name} barks.`;
};

console.log(dog.speak()); // Output: Dog barks.

Explanation

The Animal constructor has a speak method on its prototype.
We override the speak method for the dog object, changing its behavior.

6. Prototypal Inheritance

You can create prototypes that inherit from other prototypes, forming a prototype chain.

Example 6: Inheriting Prototypes

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.start = function() {
  return `${this.type} is starting.`;
};

function Bike(type, brand) {
  Vehicle.call(this, type); // Inherit properties
  this.brand = brand;
}

// Inherit methods
Bike.prototype = Object.create(Vehicle.prototype);
Bike.prototype.constructor = Bike;

Bike.prototype.getBrand = function() {
  return `${this.brand}`;
};

let myBike = new Bike('Motorcycle', 'Harley-Davidson');

console.log(myBike.start()); // Output: Motorcycle is starting.
console.log(myBike.getBrand()); // Output: Harley-Davidson

Explanation

The Bike constructor calls Vehicle.call(this, type) to inherit properties from Vehicle.
Bike.prototype = Object.create(Vehicle.prototype); sets up the prototype chain so that Bike inherits methods from Vehicle.
Bike.prototype.constructor = Bike; restores the constructor reference on Bike.prototype.

7. Checking an Object's Prototype

You can check the prototype of an object using Object.getPrototypeOf() or the __proto__ property.

Example 7: Checking Prototypes

let car = {
  brand: 'Toyota',
};

console.log(Object.getPrototypeOf(car) === Object.prototype); // Output: true
console.log(car.__proto__ === Object.prototype); // Output: true

Explanation

Object.getPrototypeOf(car) and car.__proto__ both point to Object.prototype.

8. Using hasOwnProperty() to Check for Own Properties

To check if a property is directly on an object and not on its prototype chain, use hasOwnProperty().

Example 8: Using hasOwnProperty()

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name} makes a noise.`;
};

let cat = new Animal('Cat');

console.log(cat.hasOwnProperty('name')); // Output: true
console.log(cat.hasOwnProperty('speak')); // Output: false

Explanation

cat.hasOwnProperty(‘name') returns true because name is a direct property of cat.
cat.hasOwnProperty(‘speak') returns false because speak is a method on Animal.prototype.

Summary

JavaScript prototypes are a powerful mechanism for inheritance and code reuse. Here’s a recap of the key points:

Key Concepts

  • Prototypes: Each JavaScript object has a prototype from which it can inherit properties and methods.
  • Constructor Functions: Prototypes can be defined for constructor functions to share methods across instances.
  • Inheritance: Objects can inherit from other objects, forming a prototype chain.
  • __proto__ and Object.getPrototypeOf(): Use these to access an object's prototype.
  • hasOwnProperty(): Checks if a property belongs directly to the object, not its prototype.

Practical Use Cases

  • Code Reusability: Define shared methods on prototypes instead of directly on objects.
  • Inheritance: Create objects that inherit properties and methods from other objects using constructor functions and prototypes.

Mastering prototypes allows you to write more efficient and flexible JavaScript code, especially when working with object-oriented programming in JavaScript.

0 comment
0 FacebookTwitterPinterestEmail