Why does `_.map` result in undefined when I return `false`?

Question

Why does `_.map` result in undefined when I return `false`?

I am facing an issue with a function that maps an array using underscore. Below is the function in question:

var services = _.map(userCopy.get('services'), function (service) {
    if (service.service_selected === true) {
        return service;
    }
});

The problem arises when the conditional === false, causing undefined to be placed into services. While I can manually remove the undefined values, it is not ideal and I want to ensure proper usage of the map function. How can I resolve this issue?

javascript arrays underscore.js

Answer 1

Answer №1

_.map utilizes the return value of the function to generate the result. In JavaScript, if a function does not explicitly return anything, it defaults to undefined. This explains why _.map results in undefined when the condition is not met.

If what you truly require is a _.filter

var services = _.filter(userCopy.get('services'), function(service) {
    return service.service_selected === true;
});

_.filter takes a collection and a predicate function. It evaluates the predicate function for each element in the collection, including elements that return true and excluding those that return false.

Note: Another approach is to use _.matcher, combined with _.filter, like this

var isServiceSelected = _.matcher({
    service_selected: true;
});

var services = _.filter(userCopy.get('services'), isServiceSelected);

This method is beneficial when filtering based on service_selected: true occurs frequently. For one-time instances, consider using _.where as demonstrated below.

You can also utilize _.where, which only returns objects containing all specified key-value pairs, like so

var services = _.where(userCopy.get('services'), {
    service_selected: true;
});

In this case, only service objects with service_selected attribute set to true will be returned.

Demo:

function display(heading, data) {
    var json = JSON.stringify(data, null, 4);
    document.body.appendChild(document.createElement('h3')).innerHTML = heading;
    document.body.appendChild(document.createElement('pre')).innerHTML = json;
}


var data = [{
    "name": "auth",
    "service_selected": true
}, {
    "name": "authorization",
    "service_selected": false
}, {
    "name": "faltu",
    "service_selected": true
}];


display("_.filter", _.filter(data, function (service) {
    return service.service_selected === true;
}));

display("_.matcher", _.filter(data, _.matcher({
    service_selected: true
})));


display("_.where", _.where(data, {
    service_selected: true
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Answer 2

_.map utilizes the return value of the function to generate the result. In JavaScript, if a function does not explicitly return anything, it defaults to undefined. This explains why _.map results in undefined when the condition is not met.

If what you truly require is a _.filter

var services = _.filter(userCopy.get('services'), function(service) {
    return service.service_selected === true;
});

_.filter takes a collection and a predicate function. It evaluates the predicate function for each element in the collection, including elements that return true and excluding those that return false.

Note: Another approach is to use _.matcher, combined with _.filter, like this

var isServiceSelected = _.matcher({
    service_selected: true;
});

var services = _.filter(userCopy.get('services'), isServiceSelected);

This method is beneficial when filtering based on service_selected: true occurs frequently. For one-time instances, consider using _.where as demonstrated below.

You can also utilize _.where, which only returns objects containing all specified key-value pairs, like so

var services = _.where(userCopy.get('services'), {
    service_selected: true;
});

In this case, only service objects with service_selected attribute set to true will be returned.

Demo:

function display(heading, data) {
    var json = JSON.stringify(data, null, 4);
    document.body.appendChild(document.createElement('h3')).innerHTML = heading;
    document.body.appendChild(document.createElement('pre')).innerHTML = json;
}


var data = [{
    "name": "auth",
    "service_selected": true
}, {
    "name": "authorization",
    "service_selected": false
}, {
    "name": "faltu",
    "service_selected": true
}];


display("_.filter", _.filter(data, function (service) {
    return service.service_selected === true;
}));

display("_.matcher", _.filter(data, _.matcher({
    service_selected: true
})));


display("_.where", _.where(data, {
    service_selected: true
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Answer 3

Answer №2

Just updated my response... Issue is resolved now!

var paramsNotProvided = _.map(requiredParams, function (value, parameter) {
    if (value) {
        if (!req.user[parameter]) {
            return parameter;
        }
    }
});

var missingParameters = _.filter(paramsNotProvided, Boolean);

Alternatively, missingParameters can be defined as:

var missingParameters = _.filter(paramsNotProvided, function (param) {
   return param !== undefined;
});

Answer 4

Just updated my response... Issue is resolved now!

var paramsNotProvided = _.map(requiredParams, function (value, parameter) {
    if (value) {
        if (!req.user[parameter]) {
            return parameter;
        }
    }
});

var missingParameters = _.filter(paramsNotProvided, Boolean);

Alternatively, missingParameters can be defined as:

var missingParameters = _.filter(paramsNotProvided, function (param) {
   return param !== undefined;
});

Why does `_.map` result in undefined when I return `false`?

Answer №1

Answer №2

Similar questions

I've been working on a script in JavaScript to retrieve lectures for a specific day, but I'm having trouble connecting my jQuery code to it

The checkbox is displayed as selected after being clicked in conjunction with another checkbox

Execute CGI upon the loading of the page

Attempting to iterate through and retrieve the names listed in the table

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

Ways to automatically expand all table groupings

Sending a JSON object as a prop from one React.js component to another

Filtering a multidimensional array in PHP can be done by using functions like array

Axios is passing an array instead of a JSON object when making a POST request

Using Vercel for a Next.js Custom Directory Configuration

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

The correct reading of JavaScript in HTML is a common source of confusion

Include the name of the uploaded attachment in the textarea before hitting the submit button

Rotating around the axis of extrusion, Three.js extrudes a 2D face

When data is retrieved, the state value in Reactjs useEffect remains unchanged

Unable to validate file name using pug template

How to Get into a Nested Class in JavaScript

Twice the clicking actions triggered by the event

Experimenting with the useDebounceCallback hook through Jest testing

Import a JSON file and convert it into an array using JavaScript