JSFiddle - React, Tailwind, and code Playground

by Rob Louie

JavaScript

const carArray = [
    {
        brand: 'Mazda',
        model: '3',
        trim: 'base',
        year: 2022,
        drive: ['FWD', 'AWD'],
        LKA: true,
        laneCenter: false,
        handsFree: false,
        style: 'sedan',
        zeroSixty: 7.5 
    },
    {
        brand: 'Ford',
        model: 'Mustang Mach E',
        trim: 'base',
        year: 2022,
        drive: ['FWD', 'AWD'],
        LKA: true,
        laneCenter: true,
        handsFree: true,
        style: 'SUV',
        zeroSixty: 3.7 
    },
    {
        brand: 'KIA',
        model: 'Forte',
        trim: 'GT',
        year: 2022,
        drive: ['FWD'],
        LKA: true,
        laneCenter: true,
        handsFree: false,
        style: 'sedan',
        zeroSixty: 6.4 
    },
];

const userCar = {
        brand: undefined,
        model: undefined,
        trim: undefined,
        year: 2022,
        drive: undefined,
        LKA: true,
        laneCenter: true,
        handsFree: undefined,
        style: 'SUV',
        zeroSixty: undefined 
};

// First we make a function that lets us check that defined properties match.
// First, use Object.entries to get an array of all keys and values, which looks like this:
// [['brand', 'Mazda']
// ['model', '3']
// ['trim', 'base']
// ['year', 2022]
// ['drive', Array(2)]
// ['LKA', true]
// ['laneCenter', false]
// ['handsFree', false]
// ['style', 'sedan']
// ['zeroSixty', 7.5]]

// Now we can use the key to get values from the user car. Since undefined counts as a match, we check
// that every value for a given key is either undefined or matches the user car's value.
// That all happens in the below function:
function filterToDefinedAndMatching(car) {
	return Object.entries(car).every(([key, value]) => !userCar[key] || userCar[key] == value);
}

// Now that we have a function that can determing if a single car matches the user car, we can
// simply pass it into carArray.filter:
const matchingCars =...