ok so im have a variable filled with a object and the object has key value pairs now heres the code !

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = [];

//calculate the are of hte image 

images.forEach((image)=>{
    areas.push(images.height.value*images.width.value)
});

im trying to run threw the object and multiply the values and add them to the new areas array !

ok so im have a variable filled with a object and the object has key value pairs now heres the code !

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = [];

//calculate the are of hte image 

images.forEach((image)=>{
    areas.push(images.height.value*images.width.value)
});

im trying to run threw the object and multiply the values and add them to the new areas array !

• javascript
• foreach
• ecmascript-6

5 Answers 5

You don't need the value property, and you have to use the argument from what you're iterating over, i.e. image in each iteration.

You could use Array.map to return the values directly to a new array, and Array.reduce if you want to sum the values

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];

var areas = images.map( img => img.height * img.width);
var total = areas.reduce( (a,b) => (a+b) );

console.log(areas);
console.log(total);

You could destruct the object and multiply the values.

var images = [{ height: 10, width: 30 }, { height: 20, width: 90 }, { height: 54, width: 32 }],
    areas = images.map(({ height, width }) => height * width);

console.log(areas);

I suggest you do it with the map function of arrays: no need to create an empty array and push values in it.

Here's the code:

const areas = images.map(({ height, width }) => height * width)

That's it.

In the parameters of the callback I'm using object destructuring, which you can look up here: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

There is no value property in your objects, and you already have the variable image in your arrow function, so just use it with the properties height and width of the image. And you don't need curly brackets in arrow functions:

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];
var areas = [];

//calculate the area of the image 

images.forEach((image)=>
    areas.push(image.height*image.width)
);
console.log(areas);

You can use different approaches, depending on patibility needs

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
]

// For new browsers - ES6 support
var areas1 = images.map(({height, width}) => height * width)
console.log(areas1)

// For older browsers - ES5 support
// no destructuring, no arrow functions used
var areas2 = []
images.forEach(function (i) {
  areas2.push(i.height * i.width)
})
console.log(areas2)

// For ancient browsers - ES3 support
// no forEach method
var areas3 = []
for (var i = 0; i < images.length; i++) {
  areas3.push(images[i].height * images[i].width)
}
console.log(areas3)