Difference between Code with Curly Braces and One without

Question

When I use curly braces with the javascript some funcion, I get an unexpected result. I was looking to see if someone could help me understand what is going on?

const ages = [3, 10, 18, 20]
let x
x = ages.some( (a) => a===18)  // x is true
x = ages.some( (a) => {a===18})  // x is false

Wondering why x results to false when I add curly braces. Could someone help explain?

No curly braces = automatically returns result, Curly braces = explicitly requiring `return` statement. So in your example with the curly braces, you return undefined every time... because you need to explicitly write `return` — kemicofa ghost, May 08 '19 at 12:28

score 1 · Answer 1 · answered May 08 '19 at 12:33

Arrow function have something called implicit returns.

So if you write an expression as the body of the arrow function, it will automatically return the result.

So for x = ages.some( (a) => a===18), the check a === 18 is returned automatically as the result. The same way as if you had written x = ages.some( (a) => { return a === 18; }).

For the version with brackets, you don't add a return value, so it always returns undefined, even if a equals 18. You'd need to return explicitly for it to work as shown above.

Array.some() function returns true if at least one element returns true for the callback. So written without the brackets, you return true for the 3rd array element and false for the others, resulting in true for variable x.

In the version with brackets, you always return undefined since the function does not return anything. Undefined gets cast to false for all the values and hence, the end result is that variable x is also false.

score 0 · Answer 2 · answered May 08 '19 at 12:31

0

Without curly braces, your function body is limited to a single expression and the return value automatically becomes the result of that expression.

But with { } the function behaves like any other block of code: It does not implicitly return a value (i.e. it evaluates to undefined) unless you use an explicit return statement.

(x) => x + 1 is equivalent to (x) => { return x + 1; }.

answered May 08 '19 at 12:31

melpomene

84,125
8
85
148

I really doubt this question needed an answer, and is probably a duplicate of something. – kemicofa ghost May 08 '19 at 12:31
@kemicofa Find me a convincing duplicate and I'll vote for it. – melpomene May 08 '19 at 12:33

score 0 · Answer 3 · answered May 08 '19 at 12:31

0

When you are using curly braces you must return the result, else it return undefined, meaning {a===18} will always be considered as false. You should write

x = ages.some( (a) => {return a===18})

answered May 08 '19 at 12:31

Sami Tahri

1,077
9
19

score 0 · Answer 4 · answered May 08 '19 at 12:32

0

=> without curly braces it return a===18 boolean value

but in second case u need to return that value like x = ages.some( (a) => {return a===18})

answered May 08 '19 at 12:32

sarvon ks

626
3
10

score 0 · Answer 5 · answered May 08 '19 at 12:38

Here's a good example of the different ways functions can be written in JS, and how they work. Basically though keep in mind that the arrow functions without the curly braces are just shorthand for return.

() => { return 'foo'; } is identical to () => 'foo';

//regular function with no return value
var a = 'bar';
const myFunc1 = function() { a = 'foo'; }
console.log(myFunc1(), a);

//regular function with a return value
a = 'bar';
const myFunc2 = function() { return a = 'foo'; }
console.log(myFunc2(), a);

//arrow function with a return value
a = 'bar';
const myFunc3 = () => { return b = 'foo'; }
console.log(myFunc3(), a);

//arrow function with no return value
a = 'bar';
const myFunc4 = () => { b = 'foo'; }
console.log(myFunc4(), a);

//arrow function using shorthand, which has an implicit return value
a = 'bar';
const myFunc5 = () => b = 'foo';
console.log(myFunc5(), a);

Difference between Code with Curly Braces and One without

5 Answers5