CODEWITHSUNDEEP
javascriptarraysfilter
yerigagarin
yerigagarin

Reputation: 177

Use && operator with filter() method in JavaScript

I have a mental block that does not allow me to move forward.

I have an array that I will exemplify with the following code:

let cars = [
  { brand: "Ford", year: "2012", color: "White", doors: "5", model: "One" },
  { brand: "Chevrolet", year: "2021", color: "Red", doors: "5", model: "Two" },
  { brand: "Chevrolet", year: "2000", color: "Black", doors: "5", model: "Three" },
  { brand: "Citroen", year: "2004", color: "Pink", doors: "3", model: "Four" },
];

I need to store in a variable all those cars that meet the condition of having 5 doors. Well,

let carsWithFiveDoors = cars.filter(({ doors }) => doors == "5");

But I also need it to meet two conditions at the same time. To be more clear, to my new array that has only those 5-door cars, I need to apply another filter that allows me to have only those cars that are not Chevrolet branded, nor red. The problem arises when, by simple logic, I apply this method to my array:

carsWithFiveDoors.filter(({ brand, color }) => brand !== "Chevrolet" && color !== "Red");

The result of this filter is the following array:

let newArrayOfCars = [
  {
    brand: "Ford",
    year: "2012",
    color: "White",
    doors: "5",
    model: "One",
  },
  {
    brand: "Toyota",
    year: "2000",
    color: "Black",
    doors: "5",
    model: "Three",
  },
  {
    brand: "Citroen",
    year: "2004",
    color: "Pink",
    doors: "3",
    model: "Four",
  },
];

With that method what I achieved was to generate an array without any Chevrolet vehicles, but I need to filter out those cars that, at the same time, are red and Chevrolet branded.

How could I achieve this? I've given it a lot of thought and I think I've already burned out.

Upvotes: 1

Views: 2603

Answers (4)

Mellacheruvu Janakirama Sarma
Mellacheruvu Janakirama Sarma

Reputation: 127

You should be using a double filter here in this case. Use the below code and this should solve your ask.

let newArrayOfCars = cars.filter(({ doors }) => doors == "5").filter(({ brand, color }) => brand !== "Chevrolet" && color !== "Red");

Also note that you can try putting all the three conditions at once in a single filter using &&.

Upvotes: 1

Jonathon Hibbard
Jonathon Hibbard

Reputation: 1546

Well first of all, you need to use === instead of == - which is why you see 3 door cars in your search results along with 5.

let carsWithFiveDoors = cars.filter(({ doors }) => doors === "5");

Also, I think you can simplify this by replacing && with || which will filter out any cars that are red or chevrolete (which is what I think you're saying you want). Feel free to correct me and i'll update the answer.

I think what you want though is this:

let carsWithFiveDoors = cars.filter({ doors, brand, color } => (doors === "5" && (brand !== "Chevrolet" || color !== 'Red'))

Upvotes: 0

Kien Nguyen
Kien Nguyen

Reputation: 2701

Since you need to filter out cars that are both brand Chevrolet and red, you need to implement the following logical expression:

let newArrayOfCars = carsWithFiveDoors.filter(({ brand, color }) => !(brand === "Chevrolet" && color === "Red"));

Upvotes: 2

Andy
Andy

Reputation: 63570

filter will always return a new array - you can't filter on an array in place. So you will need a new filter on the carsWithFiveDoors array to produce a new array of noRedFiveDoorChevs.

Note: the actual output will not result in your expected output.

const cars = [
  { brand: "Ford", year: "2012", color: "White", doors: "5", model: "One" },
  { brand: "Chevrolet", year: "2021", color: "Red", doors: "5", model: "Two" },
  { brand: "Chevrolet", year: "2000", color: "Black", doors: "5", model: "Three" },
  { brand: "Citroen", year: "2004", color: "Pink", doors: "3", model: "Four" },
];

const carsWithFiveDoors = cars.filter(({ doors }) => doors === "5");

const noRedFiveDoorChevs = carsWithFiveDoors.filter(({ brand, color }) => {
  return brand !== "Chevrolet" && color !== "Red"
});

console.log(noRedFiveDoorChevs);

Upvotes: 1

Related Questions