How to create array of objects from a function call?

Question

Let a function createSquare with accepts arguments side, color which returns an object with properties same as the arguments.The values assigned to the properties should be the values assigned to the function.Other than these properties the object also has one method which return the area of square.Now create an array Box this array should contain the 3 objects which are created by calling createSquare function.And the objects should have the values[(3,black) ,(4,red) ,(5,green) ].

I have used ES5 javascript for this. The initial part I have used constructor to create the object like

function CreateBox(side, color) {
  this.side = side;
  this.color = color;

  //function-1
  areaOfSquare = function () {
    let a = this.side * this.side;
    console.log(a);
  };
}

The Second part I am confused how to push the values of object into array.(this is how I thought of)

let box = [];
for (let i = 0; i < 3; i++) {
  box[i].push(CreateBox(3, "black"));
}

Welcome to SO, I formatted your code (please do so next time as it makes it much easier to read). You had a syntax error, missing `)` at the end of `box[i].push(CreateBox(3, "black")`. Didn't read the question or the code, but please check if that could have been an issue. — Balázs Édes, Apr 18 '21 at 11:13
You push the boxes into the array directly, without the `[i]`: `box.push(...);`. See docs, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push — tevemadar, Apr 18 '21 at 11:14
Thank you. It was just a typo error. That wasn't actually the issue. — R379, Apr 18 '21 at 11:18
Something you'll need to understand in JS: [How does the “this” keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Thomas, Apr 18 '21 at 11:53

score 0 · Answer 1 · answered Apr 18 '21 at 11:23

In order to return an Object the function or class should be initialize the object by adding new keyword like new CreateBox() before the function/class call, example:

let box = [];
for (let i = 0; i < 3; i++) {
  box[i].push(new CreateBox(3, "black")); // only thing missing the new keyword
}
//or
let array = [new CreateBox(3, "black"), new CreateBox(4, "yellow"), new CreateBox(5, "blue")]

score 0 · Answer 2 · answered Apr 18 '21 at 11:27

0

// Define constructor like method
const CreateBox = (function () {
    function CreateBox(side, color) {
        this.side = side;
        this.color = color;
    }
    CreateBox.prototype.area = function () {
        return Math.pow(this.side, 2);
    }
    return CreateBox;
}());

// Add boxes into Array with new CreateBox(side, color);
let box = [];
for (let i = 0; i < 3; i++) {
    box.push(new CreateBox(i + 1, "black"));
}

// Check the data
box.forEach(b => console.log(`side = ${b.side}, color = ${b.color}, area = ${b.area()}`));

answered Apr 18 '21 at 11:27

Wazeed

1,230
1
8
9

Thank you . Your code really helped me and I understood what was my mistake.But the only problem now I am facing is when I call the area function it shows" Uncaught TypeError: Cannot read property 'area' of undefined – R379 Apr 18 '21 at 19:34
I understood why the error " Uncaught TypeError: Cannot read property 'area' of undefined" the console shows because area function is in IIFE and only CreateBox was returned as result it shows the error. So how to return an object CreateBox as well as function area? – R379 Apr 18 '21 at 21:05
In the above example `area` function is getting executed. Can you share your code, exactly how it is invoked? – Wazeed Apr 18 '21 at 22:58
The error reads that, the function `area` is invoked on an `undefined` variable. `new CreateBox(...)` with above approach is included with the `area` method. – Wazeed Apr 18 '21 at 23:18
I don't want to call the area function "box.forEach(b => console.log(`side = ${b.side}, color = ${b.color}, area = ${b.area()}`));" in this line. I want to call the area function like "area(3); " something like this.when I do this "script.js:178 Uncaught ReferenceError: area is not defined"this is the error it showsup how to fix this? at script.js:178 – R379 Apr 19 '21 at 09:01
Can you update your script.js's error throwing code in your question? – Wazeed Apr 19 '21 at 09:40
What would you mean by update? I have the error from this code : box.forEach(b => console.log(`side = ${b.side}, color = ${b.color}, area = ${b.area()}`)); area(3); I am able to call in the b.area but am unable to call using area(3). I have no idea how to fix this so that I can call area(3) – R379 Apr 19 '21 at 10:29
If you are expecting `area(3) = 3 * 3`, you may define the method `function area(side) { return Math.pow(side, 2); }` – Wazeed Apr 19 '21 at 10:38

How to create array of objects from a function call?

2 Answers2