Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript reduce shorthand not returning object

Why would one work and the other not ?

const b = {
  age: 20,
  name: "John Doe"
}

const sortedB = Object.entries(b).sort().reduce((acc, [key, val]) => acc[key] = val,{});

Output: John Doe

The top is leaving out the block brackets which says return acc automatically . The bottom is saying use the block braces which means you have to manually return acc

  const sortedB = Object.entries(b).sort().reduce((acc, [key, val]) => {
    acc[key] = val;
    return acc;
  },{});

Output: {age: 20, name: "John Doe"}

like image 336
me-me Avatar asked Oct 15 '25 22:10

me-me


2 Answers

The top is leaving out the block brackets which says return acc automatically

No, that's not what it means. How/why should JavaScript know to return acc?

If you have an arrow function with only an expression as a body, then the result of that expression is returned. And the result of an assignment is the value that was assigned. Example:

var func = () => 1;
console.log(func()); // 1

func = x => x;
console.log(func(42)) // 42

func = (x, y) => y = 42;
console.log(func(1,2)); // 42

func = x => (x, 42);
console.log(func(21)); // 42

func = x => (42, x);
console.log(func(21)); // 21

If you want the value of acc returned then you have to make sure the expression evaluates to that value, e.g. with the comma operator:

 (acc, [key, val]) => (acc[key] = val, acc)
 //                    ^^^^^^^^^^^^^^^^^^^
 //  the comma operator returns the result of the right expression
like image 162
Felix Kling Avatar answered Oct 18 '25 13:10

Felix Kling


As it's already explained in another answer, there's no way how acc[key] = val expression can return acc automatically, because it evaluates to val, not acc.

A recipe that can be conveniently used in reduce function in ES6 is Object.assign because it returns an object it extends:

Object.entries(b).sort().reduce((acc, [key, val]) => Object.assign(acc, { [key]: val }) ,{});

It's more costly than acc[key] = val; return acc but can be used in non-critical places (in performance-critical places Object.entries and reduce aren't welcome, too) and can be used with implied arrow return.

like image 42
Estus Flask Avatar answered Oct 18 '25 12:10

Estus Flask