A guide on incorporating a method using ES6 Rest into a JavaScript object

Question

A guide on incorporating a method using ES6 Rest into a JavaScript object

My goal is to enhance my Person constructor by adding a method that allows users to add friends. I wanted to utilize the "rest" feature of ES6 to pass a variable number of friends, but I seem to be stuck. My initial attempt resulted in an error ("Uncaught TypeError: f.addFriends is not a function(…)"):

// Persons creator
function Person(name){
    this.name = name;
    this.friends = [];
    this.addFriends = function(...a){
      a.forEach(function(d){this.friends.push(d)});
    }
}

// Create three persons
f = new Person("Fanny");
e = new Person("Eric");
j = new Person("John");

// add Eric & Fanny as friends of Fanny
f.addFriends(e,j);

I also tried the following code (no error, but no friends were added):

// Persons creator
function Person(name){
    this.name = name;
    this.friends = [];
}

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)});
}


// Create three persons
f = new Person("Fanny");
e = new Person("Eric");
j = new Person("John");

// add Eric & Fanny as friends of Fanny
f.addFriends(e,j);

Do you know what I'm doing wrong? Thank you for your assistance!

javascript object ecmascript-6 spread-syntax

Answer 1

Answer №1

forEach requires a callback function, which is typically executed in the global context (referred to as window in the browser). To address the issue of scope, you can pass the current value of this as the second argument when using forEach.

Alternatively, you can sidestep the this dilemma entirely by simply combining the arrays using the concat method:

function Person(name){
    this.name = name;
    this.friends = [];
    this.addFriends = function(...newFriends){
      this.friends = this.friends.concat(newFriends);
    }
}

Answer 2

forEach requires a callback function, which is typically executed in the global context (referred to as window in the browser). To address the issue of scope, you can pass the current value of this as the second argument when using forEach.

Alternatively, you can sidestep the this dilemma entirely by simply combining the arrays using the concat method:

function Person(name){
    this.name = name;
    this.friends = [];
    this.addFriends = function(...newFriends){
      this.friends = this.friends.concat(newFriends);
    }
}

Answer 3

Answer №2

this, in the callback function passed to forEach, does not refer to your specific instance of Person within this code snippet:

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)});
}

To ensure the correct context, you can utilize an arrow function like this:

Person.prototype.addFriends = function(...a){
   a.forEach((d) => {this.friends.push(d)});
}

However, an even more elegant solution is available here:

Person.prototype.addFriends = function(...a){
   this.friends.push(...a);
}

Answer 4

this, in the callback function passed to forEach, does not refer to your specific instance of Person within this code snippet:

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)});
}

To ensure the correct context, you can utilize an arrow function like this:

Person.prototype.addFriends = function(...a){
   a.forEach((d) => {this.friends.push(d)});
}

However, an even more elegant solution is available here:

Person.prototype.addFriends = function(...a){
   this.friends.push(...a);
}

Answer 5

Answer №3

When utilizing a callback within the forEach method, the reference of this does not point to the object itself. To correct this, bind the callback function to this:

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)}.bind(this));
}

In modern ES6 syntax, you have the option to use an arrow function, which automatically binds the lexical value of this:

Person.prototype.addFriends = function(...a){
   a.forEach((d) => this.friends.push(d));
}

Answer 6

When utilizing a callback within the forEach method, the reference of this does not point to the object itself. To correct this, bind the callback function to this:

Person.prototype.addFriends = function(...a){
   a.forEach(function(d){this.friends.push(d)}.bind(this));
}

In modern ES6 syntax, you have the option to use an arrow function, which automatically binds the lexical value of this:

Person.prototype.addFriends = function(...a){
   a.forEach((d) => this.friends.push(d));
}

Answer 7

Answer №4

A brand new feature introduced in ECMAScript 6 is the use of classes

To start, you define your class:

class User {

constructor(username) {
    this.username = username;
    this.posts = [];
}

addPost(posts) {
    // do something with posts
    this.posts = posts;
}

}

After defining your class, you can create new instances of the User

var u = new User("Alice");

and add some posts

p.addPost(....)

Answer 8

A brand new feature introduced in ECMAScript 6 is the use of classes

To start, you define your class:

class User {

constructor(username) {
    this.username = username;
    this.posts = [];
}

addPost(posts) {
    // do something with posts
    this.posts = posts;
}

}

After defining your class, you can create new instances of the User

var u = new User("Alice");

and add some posts

p.addPost(....)

A guide on incorporating a method using ES6 Rest into a JavaScript object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Navigating the Basics: Understanding the Four Quadrant Selection Grid in a Material UI & React Pop-Up Form

Sending data with the request body using Express and Passport

The function returning the map finished before the foreach loop

The Node.js Express server does not provide access to certain static files

Bootstrap 4 modal experiencing issues with the form end tag functionality

On startup of the chrome app, read and load a JSON file into a variable

What is the best way to incorporate modal window parameters into this code snippet?

Leverage jQuery to automatically submit an ajax form once all ajax requests have been successfully executed

Is jQuery's $.trim() function reliable or poorly implemented?

Retrieve the values of a particular key from your Django queryset JSON data and then seamlessly send them over to VueJS

Removing the hash symbol in Angular: A step-by-step guide

MUI Tutorial: Displaying Text with Line Breaks

Stop HTML <dialog> from automatically closing using Vue

A guide to utilizing the spread operator within a typescript tuple

Playing embedded YouTube videos automatically in Safari 11 without user interaction

Utilize the csv-parser module to exclusively extract the headers from a file

Function activation in Element requires a double click to initiate

Determining the Maximum Number of Characters Allowed in a Div Using jQuery

Refresh required to showcase newly created items

What is the best way to create a reusable component for a Material-UI Snackbar?