Using ES6 Classes to map an array of variables

Question

Using ES6 Classes to map an array of variables

If I have a list of 5 people's names, such as Sam, Ash, Moe, Billy, Kenzi, and want each name to have properties like doneHomework and lazy using a class:

class Person {
    constructor() {
        this.doneHomeWork = 0;
        this.lazy = false;
    }
}

Instead of manually assigning each name like this:

const Sam = new Person();
const Ash = new Person();
const Moe = new Person();
const Billy = new Person();
const Kenzi = new Person();

I thought about doing this:

listNames.forEach(name => {
    name = new Person();
})

But my ESLint is showing an error:

Assignment to function parameter 'name' - no-param-reassign

This may seem trivial, but I'm having difficulty refactoring this code.

javascript arrays oop es6-class

Answer 1

Answer №1

The problem arises from the usage of the name variable within the loop cycle. The error occurs because you are updating this variable in the initial iteration of the loop, triggering the

Assignment to function parameter 'name' no-param-reassign

error message.

Furthermore, attempting to assign dynamic names as variable identifiers is problematic. To achieve this, consider utilizing bracket notation. Here's how you can implement it:

class Student {
    constructor() {
        this.homeworkCompleted = 0
        this.attendance = true
    }
}
let students = [];
let studentNames = ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve'];

studentNames.forEach(name => {
    students[name] = new Student()
})

console.log(students);

Answer 2

The problem arises from the usage of the name variable within the loop cycle. The error occurs because you are updating this variable in the initial iteration of the loop, triggering the

Assignment to function parameter 'name' no-param-reassign

error message.

Furthermore, attempting to assign dynamic names as variable identifiers is problematic. To achieve this, consider utilizing bracket notation. Here's how you can implement it:

class Student {
    constructor() {
        this.homeworkCompleted = 0
        this.attendance = true
    }
}
let students = [];
let studentNames = ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve'];

studentNames.forEach(name => {
    students[name] = new Student()
})

console.log(students);

Answer 3

Answer №2

In order to achieve this functionality, you can utilize ES6 array destructuring by creating a new instance of the Person class for each name.

class Person {
  constructor() {
    this.completedTasks = 0;
    this.isLazy = false;
  }
}

const [John, Alice, Mike, Sarah, Emma] = Array.from(Array(5), e => new Person)

console.log(John)
console.log(Alice)

Answer 4

In order to achieve this functionality, you can utilize ES6 array destructuring by creating a new instance of the Person class for each name.

class Person {
  constructor() {
    this.completedTasks = 0;
    this.isLazy = false;
  }
}

const [John, Alice, Mike, Sarah, Emma] = Array.from(Array(5), e => new Person)

console.log(John)
console.log(Alice)

Answer 5

Answer №3

Instead of attempting to dynamically generate this

const Alex = new Person();
const Emily = new Person():

You can achieve a similar result like so,

const people = {
  Alex: new Person(),
  Emily: new Person(),
};

Then you can access them using people['Alex'] or people.Alex. To accomplish this from an array,

const names = ['Alex', 'Emily'];
const people = {};
names.forEach(name => {
  people[name] = new Person();
});

Regarding the eslint warning that you are receiving, it is due to your attempt to modify a function parameter. You can disable it by setting the rule to 0 in your eslint configuration file. However, I would advise against doing so.

Answer 6

Instead of attempting to dynamically generate this

const Alex = new Person();
const Emily = new Person():

You can achieve a similar result like so,

const people = {
  Alex: new Person(),
  Emily: new Person(),
};

Then you can access them using people['Alex'] or people.Alex. To accomplish this from an array,

const names = ['Alex', 'Emily'];
const people = {};
names.forEach(name => {
  people[name] = new Person();
});

Regarding the eslint warning that you are receiving, it is due to your attempt to modify a function parameter. You can disable it by setting the rule to 0 in your eslint configuration file. However, I would advise against doing so.

Answer 7

Answer №4

To accomplish this task, you can make use of the ES6 destructuring feature as demonstrated below:

class Student {
    constructor() {
        this.completedAssignments = 0;
        this.attendance = true;
    }
}
let students = [];
for(let i=0; i<5; i++) {
    students.push(new Student());
}

const [Alice, Bob, Charlie, Dave, Eve] = [...students];

console.log(Alice);

Answer 8

To accomplish this task, you can make use of the ES6 destructuring feature as demonstrated below:

class Student {
    constructor() {
        this.completedAssignments = 0;
        this.attendance = true;
    }
}
let students = [];
for(let i=0; i<5; i++) {
    students.push(new Student());
}

const [Alice, Bob, Charlie, Dave, Eve] = [...students];

console.log(Alice);

Using ES6 Classes to map an array of variables

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having difficulty retrieving the Area and Range information in ChartJS

develop a Java 2D array

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

Use jQuery to update the field without affecting the observable

How can I transfer a selected value from a unique dropdown component to react-hook-form?

Optimizing Nginx for caching server-side rendered (SSR) web pages developed using React and Next.js

"Executing the ajax send() function does not result in any changes to the

Is there a method available to streamline the process of generating .json files for language translations?

The .slice() function in TypeScript has the ability to alter the initial array

Scraping with Node.js and PhantomJS for dynamic content

Middleware functions in Mongoose for pre and post actions are not being triggered when attempting to save

Vue: restrict entry to the view unless props are configured

Searching by element within a JSON array

Similar to Angular ui-router 1.0.3, what is the equivalent function for reloadOn

What is the necessity for an additional item?

What's the best way to link two http requests in AngularJS?

"There is an issue with the payload size: request entity is too large. What is the solution for handling this in Nest

Using Jquery for Animation: Tips on Revealing Text After Changing Element Color or Styles

observing which specific element corresponds to the nth child?

Loading a stack of images in MATLAB: a simple guide