How to take more than one property in a Javascript object array using unstructuring

Question

I have an array of objects containing 5 objects, both with properties x and y:

const objArr = [
  { 'x': 1, 'y': 1 }, // OBJ0
  { 'x': 2, 'y': 3 }, // OBJ1
  { 'x': 3, 'y': 3 }, // OBJ2
  { 'x': 3, 'y': 4 }, // OBJ3
  { 'x': 4, 'y': 5 }  // OBJ4
]

I know I can take the property x and y as follows:

const [ { x, y } ] = objArr;

However, I can only store the first object:

console.log(x); // 1
console.log(y); // 1

This is the function that I created, it works that way, but I wanted to know how to rewrite it using unstructuring. I thank you already.

function getCount([...objArr]) {

  let samePropCount = 0;

  for(let i=0; i<objArr.length; i++) {
    if (objArr[i].x === objArr[i].y) {
      samePropCount++;
    }
  }

  return samePropCount;
}

Answer 1

First of all, this here getCount([...objArr]) is irrelevant and redundant. Your role should receive only objArr, for it is already an array and that way getCount([...objArr]), the objArr within the function refers to the const objArr = [...]. Use only getCount(objArr) so that the function is pure and only work with what was passed to it by parameter.

Method 1

Using the loop for:

const objArr = [
  { x: 1, y: 1 }, // OBJ0
  { x: 2, y: 3 }, // OBJ1
  { x: 3, y: 3 }, // OBJ2
  { x: 3, y: 4 }, // OBJ3
  { x: 4, y: 5 }, // OBJ4
];

function getCount(objArr) {
  let samePropCount = 0;

  for (let i = 0; i < objArr.length; i++) {
    const { x, y } = objArr[i]; // desestruturamos aqui
                                // cada objArr[i] é um objeto {x: numero, y: numero}
    if (x === y) {
      samePropCount++;
    }
  }

  return samePropCount;
}

console.log(getCount(objArr));

Method 2

Using the loop forEach:

const objArr = [
  { x: 1, y: 1 }, // OBJ0
  { x: 2, y: 3 }, // OBJ1
  { x: 3, y: 3 }, // OBJ2
  { x: 3, y: 4 }, // OBJ3
  { x: 4, y: 5 }, // OBJ4
];

function getCount(objArr) {
  let samePropCount = 0;

  objArr.forEach((obj) => {
    const { x, y } = obj; // desestruturamos aqui
                          // cada obj é um objeto {x: numero, y: numero}

    if (x === y) {
      samePropCount++;
    }
  });

  return samePropCount;
}

console.log(getCount(objArr));

Extra

There is a way to unstructure multiple objects from this array manually:

const objArr = [
  { 'x': 1, 'y': 1 }, // OBJ0
  { 'x': 2, 'y': 3 }, // OBJ1
  { 'x': 3, 'y': 3 }, // OBJ2
  { 'x': 3, 'y': 4 }, // OBJ3
  { 'x': 4, 'y': 5 }  // OBJ4
]

const [obj, obj1, obj2, obj3, obj4] = objArr

console.log(obj, obj1, obj2, obj3, obj4)

Answer 2

Just complementing, there is also the for iteration and structuring which is a variation of the declaration for...of who travels iterative objects structuring its elements:

const objArr = [
  { 'x': 1, 'y': 1 }, // OBJ0
  { 'x': 2, 'y': 3 }, // OBJ1
  { 'x': 3, 'y': 3 }, // OBJ2
  { 'x': 3, 'y': 4 }, // OBJ3
  { 'x': 4, 'y': 5 }  // OBJ4
]

//const getCount = (a)=> a.reduce((r,e)=>(e.x == e.y) ? r + 1: r, 0);
function getCount(a){
  let r = 0;                  //Declara e inicializa variável de resultado.
  //Para cada elemento da entrada os desestrutura em x e y...
  for(let {x, y} of a){
      r += (x === y)? 1: 0;   //...se x===y incrementa o resultado.
  }
  return r;                   //Retorna o resultado.
}

console.log(getCount(objArr))