JavaScript map returning array of objects instead of ojbect

Question

Javascript method returns array of object instead of object.

Helper method:

export const getDefaultValue = (valueList) => {
    return defaultValue = valueList.map((item, index) => {
        if (item.isDefault) {
            return item;
        }
    });
}

Input:

let valueList = [{itemId: 1, isDefault: true}, {itemId: 2, isDefault: false}, {itemId: 3, isDefault: false}]

When calling getDefaultValue(valueList), I'm getting below output:

Output:

[{itemId: 1, isDefault: true}, undefined, undefined]

Shouldn't getDefaultValue return only {itemId: 1, isDefault: true}?

Newbie to JavaScript. What am I missing here?

From the documentation on [`Array.prototype.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map): _"creates **a new array** with the results of calling a provided function on every element in the calling array."_ - Should have been part of your research. — Andreas, Aug 05 '19 at 06:35
do you want only one element or all which where `isDefault` is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)? — Nina Scholz, Aug 05 '19 at 06:37
`.map` creates a new array and **won't** stop on the first occurrence. You probably wanted to use `filter` instead, or, even better, `.find` — briosheje, Aug 05 '19 at 06:44

Jack Bashford · Accepted Answer · 2019-08-05T06:38:49.380

3

map isn't right for this - use find:

export const getDefaultValue = (valueList) => {
    return defaultValue = valueList.find((item, index) => {
        if (item.isDefault) {
            return true;
        }
    });
}

You could also simplify it:

export const getDefaultValue = valueList => valueList.find(({ isDefault }) => isDefault);

edited Aug 05 '19 at 06:38

answered Aug 05 '19 at 06:36

Jack Bashford

43,180
11
50
79

find is only find the first item. did you mean filter? – Murat Aras Aug 05 '19 at 06:36
Nope. Look at the expected output. – Jack Bashford Aug 05 '19 at 06:37
yep. wants an object not an array with isDefault:true criteria. – Murat Aras Aug 05 '19 at 06:43
And that's exactly what my answer does @MuratAras - your point is? – Jack Bashford Aug 05 '19 at 06:43

Nina Scholz · Answer 2 · 2019-08-05T06:49:26.750

You need to filter the array with Array#filter and this returns either the element or not, depending on the return value.

return defaultValue = valueList.filter(item => item.isDefault);

Array#map returns a new element for each element.

After a clear problem description, you need to take Array#find for getting a single object.

This method returnd the first found element or undefined if not element fullfills the condition.

return defaultValue = valueList.find(item => item.isDefault);

score 2 · Answer 3 · answered Aug 05 '19 at 06:34

Since you just want to get the one matching value from the array, you should use .find instead:

export const getDefaultValue = (valueList) => {
    return defaultValue = valueList.find((item) => {
        if (item.isDefault) {
            return true;
        }
    });
};

.map will always construct a new array, based on all items of the old array, which isn't what you want here.

score 0 · Answer 4 · answered Aug 05 '19 at 06:37

The Array.Map() method returns array of values. Since you are returning item itself which is an object, the final output becomes array of object.

try this:

 export const getDefaultValue = (valueList) => {
    return defaultValue = valueList.map((item, index) => {
        if (item.isDefault) {
            return item.itemId;
        }
    });
}

which will also capture undefined if nothing gets returned. You can you filter method instead.

const  getDefaultValue = valueList.filter(item => item.isDefault);

JavaScript map returning array of objects instead of ojbect

4 Answers4