Why does adding {} to sort function change the answer?

Question

Why does the addition of {} in the second sort function "break" the sort (change it back to sorting alphabetically?):

console.log([10, -2, 49].sort((a,b) => a-b))
console.log([10, -2, 49].sort((a,b) => {a-b}))

This is more of a why does JS do this type of question rather than a fix my code type of question.

Answer 1

The sort method's callback function in javascript needs to return a value, when you put {} around the function content you are essentially returning undefined from the function and your code inside the function is just an expression being executed inside it

When you use {} you need an explicit return statement to return the value

console.log([10, -2, 49].sort((a,b) => a-b))
console.log([10, -2, 49].sort((a,b) => {return a-b;}));

In the first case it works because when you write the function with that syntax, it has an implicit return.

You can know more about explicit and implicit return in this post:

Arrow functions and the use of parentheses () or {} or ({})

Answer 2

Okay, this is common confusion , / FUNCTION 1

const func = (a,b ) => a+b 

Equivalent to , Function 2

const func = (a,b) => {
return (a+b)
}

So when you us e curly braces , you must explicitly use return keyword , where using () doesn't require using return keyword.

Answer 3

When you have an arrow function (the =>), you can have single-line statements which auto-return an expression, or multiline statements, which require {} around the statements and thus require a return. By adding the {}, you get the multiline statement form. So you need to add a return within the curly braces, or nothing is returned.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Note, if you want to return an object from a single-line array function statement, wrap it in parentheses:

((a, b) => ({ c: a + b }))(1, 2) // {c: 3}