Using loop-for through array to push key-values nested inside, into a different array. Javascript

Question

newbie here.

I'm having trouble with a simple challenge, the goal is simple, push the sedan cars into another array, so the output when the function is called (no console.log can be used, it will be ignored) is:

[ { type:'sedan', size: 'white'} , { type:'sedan', color:'red'} ].

The suggestion is to use push().

Here is my terrible code.

Any help is welcome!

function filterCars (cars) {
     const sedanCars = []
     const carArr = [
      { type: 'sedan', color: 'white'},
      { type: 'truck', color: 'blue'},
      { type: 'sedan', color: 'red'},
      { type: 'coupe', color: 'red'}
      ]
   
    var arrayLength = carArr.length;
    for (var i = 0; i < arrayLength; i++) {
    console.log(carArr[i]);
        
  if(carArr.type==="sedan") {
          return sedanCars.push("sedan");
        }

carArr is an array, not an object. You need to index it to access the object with a type property. — Barmar
– Barmar, Commented Nov 3, 2021 at 20:46
Why are you pushing a string onto the array? Don't you want an array of objects? It seems like you haven't really thought about this problem very much, and just wrote some random code that uses the function you were told about. You won't learn to program by trial and error. — Barmar
– Barmar, Commented Nov 3, 2021 at 20:47
Please check my solution(s) when you have a chance. I provided one using the push() method, and another using the spread operator (...). — Brandon McConnell
– Brandon McConnell, Commented Nov 3, 2021 at 20:50

Brandon McConnell · Accepted Answer · 2021-11-04 13:56:55Z

1

Your filterCars function and return do not seem all that clear to me in their function, especially since you are triggering your return within a for loop iteration.

There are several ways we can approach this…

Option #1. Building a `filter`-based function

function getSedans(cars) {
  return cars.filter(car => car.type === 'sedan')
}
const carArr = [
  { type: 'sedan', color: 'white' },
  { type: 'truck', color: 'blue' },
  { type: 'sedan', color: 'red' },
  { type: 'coupe', color: 'red' }
];
const sedanCars = getSedans(carArr);

// including this console.log to provide the output
console.log(sedanCars);

Option #2. `filter`-based function + `push()` & spread (`...`)

If you would prefer to use this solution but also use push, you could do by declaring the empty sedanCars array before the carArr and then push the results of getSedans(carArr) to it like this…

const sedanCars = [],
      carArr = [ /* cars here */ ];
sedanCars.push(...getSedans(carArr));

You can see that in action here:

function getSedans(cars) {
  return cars.filter(car => car.type === 'sedan')
}
const sedanCars = [],
      carArr = [
        { type: 'sedan', color: 'white' },
        { type: 'truck', color: 'blue' },
        { type: 'sedan', color: 'red' },
        { type: 'coupe', color: 'red' }
      ];
sedanCars.push(...getSedans(carArr));

// including this console.log to provide the output
console.log(sedanCars);

Option #3. `push()` method using `for..of` loop

However, this adds an extra unnecessary step by using spread. If you really prefer to use push(), here is a more appropriate method for using it:

const sedanCars = [],
      carArr = [
        { type: 'sedan', color: 'white' },
        { type: 'truck', color: 'blue' },
        { type: 'sedan', color: 'red' },
        { type: 'coupe', color: 'red' }
      ];
for (const car of carArr) {
  if (car.type === 'sedan') sedanCars.push(car);
}

// including this console.log to provide the output
console.log(sedanCars);

Option #4. `push()` method using `forEach` method

And lastly, if you wanna get fancy, you could replace that entire for..of loop with a forEach invocation and replace the if statement for a short circuit, like this:

carArr.forEach(car => car.type === 'sedan' && sedanCars.push(car));

Here is how that would look in action:

const sedanCars = [],
      carArr = [
        { type: 'sedan', color: 'white' },
        { type: 'truck', color: 'blue' },
        { type: 'sedan', color: 'red' },
        { type: 'coupe', color: 'red' }
      ];
carArr.forEach(car => car.type === 'sedan' && sedanCars.push(car));

// including this console.log to provide the output
console.log(sedanCars);

edited Nov 4, 2021 at 13:56

answered Nov 3, 2021 at 20:49

Brandon McConnell

6,1881 gold badge26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barmar Over a year ago

What's the point of the spread operator in the first solution? You're just making a copy of the array returned by filter()

Brandon McConnell Over a year ago

@Barmar you're absolutely right — good call-out! I refactored that to show a more appropriate scenario for the spread operator, and a separate solution to demonstrate the forEach(). Thanks 👏🏼

Gab-Pifer Over a year ago

Thanks Brandon!

Phillip · Accepted Answer · 2021-11-03 20:43:58Z

0

Since push is only a suggestion, I would recommend a more modern approach using the array filter method for this:

const cars = [
  { type: 'sedan', color: 'white'},
  { type: 'truck', color: 'blue'},
  { type: 'sedan', color: 'red'},
  { type: 'coupe', color: 'red'},
];

const sedans = cars.filter(car => car.type === 'sedan');

The filter methods takes a callback function that is called on each element of the array. If it returns a truthy value then that item will be included in the resulting array.

Read more about filter on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

answered Nov 3, 2021 at 20:43

Phillip

6,3033 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

Using loop-for through array to push key-values nested inside, into a different array. Javascript

2 Answers 2

Option #1. Building a `filter`-based function

Option #2. `filter`-based function + `push()` & spread (`...`)

Option #3. `push()` method using `for..of` loop

Option #4. `push()` method using `forEach` method

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option #1. Building a filter-based function

Option #2. filter-based function + push() & spread (...)

Option #3. push() method using for..of loop

Option #4. push() method using forEach method

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Option #1. Building a `filter`-based function

Option #2. `filter`-based function + `push()` & spread (`...`)

Option #3. `push()` method using `for..of` loop

Option #4. `push()` method using `forEach` method