replace filter and map with reduce es6
1
I'm trying to avoid chaining with filter and map, but why my reduce returned undefined?
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
// expected ['moto', 'car']
// using filter and map
data.filter(obj => obj.passed).map(obj => obj.value)
What's wrong?
data.reduce((accum, obj) => obj.checked && [...accum, obj.value], )
javascript ecmascript-6
asked Nov 19 '18 at 11:39
MichealMicheal
213
|
show 5 more comments
1
I'm trying to avoid chaining with filter and map, but why my reduce returned undefined?
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
// expected ['moto', 'car']
// using filter and map
data.filter(obj => obj.passed).map(obj => obj.value)
What's wrong?
data.reduce((accum, obj) => obj.checked && [...accum, obj.value], )
javascript ecmascript-6
asked Nov 19 '18 at 11:39
MichealMicheal
213
1
It is "passed" not "checked" on your data.
– Alex G
Nov 19 '18 at 11:42
1
You need a ternary operator in yourreducecallback, not&&. Imagine what you return whenobj.passedis false... it should beaccum, but instead you returnfalse.
– trincot
Nov 19 '18 at 11:43
1
What's wrong with chainingfilterandmap?
– Denis Frezzato
Nov 19 '18 at 11:44
@Denis - you run similar loop 2 times instead of one. So it might, for example, take 4sec instead of 2sec.
– pbialy
Nov 19 '18 at 11:45
The solution withreducewould be this:data.reduce((accum, obj) => obj.passed ? [...accum, obj.value] : accum, ). But there is nothing wrong with usingfilterandmap.
– Carsten Führmann
Nov 19 '18 at 11:55
|
show 5 more comments
1
1
1
1
I'm trying to avoid chaining with filter and map, but why my reduce returned undefined?
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
// expected ['moto', 'car']
// using filter and map
data.filter(obj => obj.passed).map(obj => obj.value)
What's wrong?
data.reduce((accum, obj) => obj.checked && [...accum, obj.value], )
javascript ecmascript-6
asked Nov 19 '18 at 11:39
MichealMicheal
213
I'm trying to avoid chaining with filter and map, but why my reduce returned undefined?
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
// expected ['moto', 'car']
// using filter and map
data.filter(obj => obj.passed).map(obj => obj.value)
What's wrong?
data.reduce((accum, obj) => obj.checked && [...accum, obj.value], )
javascript ecmascript-6
javascript ecmascript-6
asked Nov 19 '18 at 11:39
MichealMicheal
213
asked Nov 19 '18 at 11:39
MichealMicheal
213
asked Nov 19 '18 at 11:39
MichealMicheal
213
asked Nov 19 '18 at 11:39
MichealMicheal
213
asked Nov 19 '18 at 11:39
MichealMicheal
213
213
1
It is "passed" not "checked" on your data.
– Alex G
Nov 19 '18 at 11:42
1
You need a ternary operator in yourreducecallback, not&&. Imagine what you return whenobj.passedis false... it should beaccum, but instead you returnfalse.
– trincot
Nov 19 '18 at 11:43
1
What's wrong with chainingfilterandmap?
– Denis Frezzato
Nov 19 '18 at 11:44
@Denis - you run similar loop 2 times instead of one. So it might, for example, take 4sec instead of 2sec.
– pbialy
Nov 19 '18 at 11:45
The solution withreducewould be this:data.reduce((accum, obj) => obj.passed ? [...accum, obj.value] : accum, ). But there is nothing wrong with usingfilterandmap.
– Carsten Führmann
Nov 19 '18 at 11:55
|
show 5 more comments
1
It is "passed" not "checked" on your data.
– Alex G
Nov 19 '18 at 11:42
1
You need a ternary operator in yourreducecallback, not&&. Imagine what you return whenobj.passedis false... it should beaccum, but instead you returnfalse.
– trincot
Nov 19 '18 at 11:43
1
What's wrong with chainingfilterandmap?
– Denis Frezzato
Nov 19 '18 at 11:44
@Denis - you run similar loop 2 times instead of one. So it might, for example, take 4sec instead of 2sec.
– pbialy
Nov 19 '18 at 11:45
The solution withreducewould be this:data.reduce((accum, obj) => obj.passed ? [...accum, obj.value] : accum, ). But there is nothing wrong with usingfilterandmap.
– Carsten Führmann
Nov 19 '18 at 11:55
1
1
It is "passed" not "checked" on your data.
– Alex G
Nov 19 '18 at 11:42
It is "passed" not "checked" on your data.
– Alex G
Nov 19 '18 at 11:42
1
1
You need a ternary operator in your
reduce callback, not &&. Imagine what you return when obj.passed is false... it should be accum, but instead you return false.– trincot
Nov 19 '18 at 11:43
You need a ternary operator in your
reduce callback, not &&. Imagine what you return when obj.passed is false... it should be accum, but instead you return false.– trincot
Nov 19 '18 at 11:43
1
1
What's wrong with chaining
filter and map?– Denis Frezzato
Nov 19 '18 at 11:44
What's wrong with chaining
filter and map?– Denis Frezzato
Nov 19 '18 at 11:44
@Denis - you run similar loop 2 times instead of one. So it might, for example, take 4sec instead of 2sec.
– pbialy
Nov 19 '18 at 11:45
@Denis - you run similar loop 2 times instead of one. So it might, for example, take 4sec instead of 2sec.
– pbialy
Nov 19 '18 at 11:45
The solution with
reduce would be this: data.reduce((accum, obj) => obj.passed ? [...accum, obj.value] : accum, ). But there is nothing wrong with using filter and map.– Carsten Führmann
Nov 19 '18 at 11:55
The solution with
reduce would be this: data.reduce((accum, obj) => obj.passed ? [...accum, obj.value] : accum, ). But there is nothing wrong with using filter and map.– Carsten Führmann
Nov 19 '18 at 11:55
|
show 5 more comments
3 Answers
3
active
oldest
votes
1
(accum, obj) => obj.checked && [...accum, obj.value]
does not return the filtered list, in case the object is not checked.
(accum, obj) => {
if (obj.checked) accum.push(obj.value)
return accum;
}
as reducer function will do that.
or to keep it as a oneliner, to not maintain readability:
(accum, obj) => obj.checked ? [...accum, obj.value] : accum;
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
add a comment |
2
You can do:
const data = [{value: "moto",passed: true}, {value: "boat",passed: false}, {value: "car",passed: true}];
const result = data.reduce((a, c) => c.passed ? (a.push(c.value), a) : a, );
console.log(result);answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
1
+1 for using(a.push(c.value), a), that removes the immutable nature of[...a, c.value], but since that is a simple reducer its ok in favor of performance.
– philipp
Nov 19 '18 at 12:06
1
why use push? can't it be using spread?
– Micheal
Nov 19 '18 at 13:01
add a comment |
0
It's because you are not returning anything if obj.passed = false. Updated below. Pls check
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
console.log(data.reduce((accum, obj) =>
obj.passed
? accum.concat(obj.value)
: accum
, ))answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373863%2freplace-filter-and-map-with-reduce-es6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
(accum, obj) => obj.checked && [...accum, obj.value]
does not return the filtered list, in case the object is not checked.
(accum, obj) => {
if (obj.checked) accum.push(obj.value)
return accum;
}
as reducer function will do that.
or to keep it as a oneliner, to not maintain readability:
(accum, obj) => obj.checked ? [...accum, obj.value] : accum;
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
add a comment |
1
(accum, obj) => obj.checked && [...accum, obj.value]
does not return the filtered list, in case the object is not checked.
(accum, obj) => {
if (obj.checked) accum.push(obj.value)
return accum;
}
as reducer function will do that.
or to keep it as a oneliner, to not maintain readability:
(accum, obj) => obj.checked ? [...accum, obj.value] : accum;
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
add a comment |
1
1
1
(accum, obj) => obj.checked && [...accum, obj.value]
does not return the filtered list, in case the object is not checked.
(accum, obj) => {
if (obj.checked) accum.push(obj.value)
return accum;
}
as reducer function will do that.
or to keep it as a oneliner, to not maintain readability:
(accum, obj) => obj.checked ? [...accum, obj.value] : accum;
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
(accum, obj) => obj.checked && [...accum, obj.value]
does not return the filtered list, in case the object is not checked.
(accum, obj) => {
if (obj.checked) accum.push(obj.value)
return accum;
}
as reducer function will do that.
or to keep it as a oneliner, to not maintain readability:
(accum, obj) => obj.checked ? [...accum, obj.value] : accum;
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
answered Nov 19 '18 at 11:43
philippphilipp
8,76653570
8,76653570
add a comment |
add a comment |
2
You can do:
const data = [{value: "moto",passed: true}, {value: "boat",passed: false}, {value: "car",passed: true}];
const result = data.reduce((a, c) => c.passed ? (a.push(c.value), a) : a, );
console.log(result);answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
1
+1 for using(a.push(c.value), a), that removes the immutable nature of[...a, c.value], but since that is a simple reducer its ok in favor of performance.
– philipp
Nov 19 '18 at 12:06
1
why use push? can't it be using spread?
– Micheal
Nov 19 '18 at 13:01
add a comment |
2
You can do:
const data = [{value: "moto",passed: true}, {value: "boat",passed: false}, {value: "car",passed: true}];
const result = data.reduce((a, c) => c.passed ? (a.push(c.value), a) : a, );
console.log(result);answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
1
+1 for using(a.push(c.value), a), that removes the immutable nature of[...a, c.value], but since that is a simple reducer its ok in favor of performance.
– philipp
Nov 19 '18 at 12:06
1
why use push? can't it be using spread?
– Micheal
Nov 19 '18 at 13:01
add a comment |
2
2
2
You can do:
const data = [{value: "moto",passed: true}, {value: "boat",passed: false}, {value: "car",passed: true}];
const result = data.reduce((a, c) => c.passed ? (a.push(c.value), a) : a, );
console.log(result);answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
You can do:
const data = [{value: "moto",passed: true}, {value: "boat",passed: false}, {value: "car",passed: true}];
const result = data.reduce((a, c) => c.passed ? (a.push(c.value), a) : a, );
console.log(result);const data = [{value: "moto",passed: true}, {value: "boat",passed: false}, {value: "car",passed: true}];
const result = data.reduce((a, c) => c.passed ? (a.push(c.value), a) : a, );
console.log(result);const data = [{value: "moto",passed: true}, {value: "boat",passed: false}, {value: "car",passed: true}];
const result = data.reduce((a, c) => c.passed ? (a.push(c.value), a) : a, );
console.log(result);answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
answered Nov 19 '18 at 11:49
Yosvel QuinteroYosvel Quintero
11.2k42430
11.2k42430
1
+1 for using(a.push(c.value), a), that removes the immutable nature of[...a, c.value], but since that is a simple reducer its ok in favor of performance.
– philipp
Nov 19 '18 at 12:06
1
why use push? can't it be using spread?
– Micheal
Nov 19 '18 at 13:01
add a comment |
1
+1 for using(a.push(c.value), a), that removes the immutable nature of[...a, c.value], but since that is a simple reducer its ok in favor of performance.
– philipp
Nov 19 '18 at 12:06
1
why use push? can't it be using spread?
– Micheal
Nov 19 '18 at 13:01
1
1
+1 for using
(a.push(c.value), a), that removes the immutable nature of [...a, c.value], but since that is a simple reducer its ok in favor of performance.– philipp
Nov 19 '18 at 12:06
+1 for using
(a.push(c.value), a), that removes the immutable nature of [...a, c.value], but since that is a simple reducer its ok in favor of performance.– philipp
Nov 19 '18 at 12:06
1
1
why use push? can't it be using spread?
– Micheal
Nov 19 '18 at 13:01
why use push? can't it be using spread?
– Micheal
Nov 19 '18 at 13:01
add a comment |
0
It's because you are not returning anything if obj.passed = false. Updated below. Pls check
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
console.log(data.reduce((accum, obj) =>
obj.passed
? accum.concat(obj.value)
: accum
, ))answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
add a comment |
0
It's because you are not returning anything if obj.passed = false. Updated below. Pls check
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
console.log(data.reduce((accum, obj) =>
obj.passed
? accum.concat(obj.value)
: accum
, ))answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
add a comment |
0
0
0
It's because you are not returning anything if obj.passed = false. Updated below. Pls check
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
console.log(data.reduce((accum, obj) =>
obj.passed
? accum.concat(obj.value)
: accum
, ))answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
It's because you are not returning anything if obj.passed = false. Updated below. Pls check
const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
console.log(data.reduce((accum, obj) =>
obj.passed
? accum.concat(obj.value)
: accum
, ))const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
console.log(data.reduce((accum, obj) =>
obj.passed
? accum.concat(obj.value)
: accum
, ))const data = [{
value: "moto",
passed: true
},{
value: "boat",
passed: false
}, {
value: "car",
passed: true
}]
console.log(data.reduce((accum, obj) =>
obj.passed
? accum.concat(obj.value)
: accum
, ))answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
answered Nov 19 '18 at 11:46
Nitish NarangNitish Narang
2,9401815
2,9401815
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373863%2freplace-filter-and-map-with-reduce-es6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
It is "passed" not "checked" on your data.
– Alex G
Nov 19 '18 at 11:42
1
You need a ternary operator in your
reducecallback, not&&. Imagine what you return whenobj.passedis false... it should beaccum, but instead you returnfalse.– trincot
Nov 19 '18 at 11:43
1
What's wrong with chaining
filterandmap?– Denis Frezzato
Nov 19 '18 at 11:44
@Denis - you run similar loop 2 times instead of one. So it might, for example, take 4sec instead of 2sec.
– pbialy
Nov 19 '18 at 11:45
The solution with
reducewould be this:data.reduce((accum, obj) => obj.passed ? [...accum, obj.value] : accum, ). But there is nothing wrong with usingfilterandmap.– Carsten Führmann
Nov 19 '18 at 11:55