(function (){
console.log([0, 1, 2, 3].filter(i => {i % 2 == 0}));
})();
// Array[]
I want to print an array that contains only even numbers, that is 0 and 2 in the case above. Array.prototype.filter along with an arrow function are used for this purpose.
The above code returns an empty array. However, if I remove braces, the code works as expected.
(function (){
console.log([0, 1, 2, 3].filter(i => i % 2 == 0));
})();
// Array[0, 2]
Can someone explain why it happens? I always used arrow functions with braces and they worked just fine but it seems to me that there are caveats.
1
The body of an arrow function is either an expression, whose value is the value returned by the function, or a block of statements, similar to a regular function.
i => i % 2 == 0 has an expression as the body and is equivalent to:
function(i) {
return i % 2 == 0
}
i => { i % 2 == 0 } has a block of statements as the body and is equivalent to:
function(i) {
i % 2 == 0
}
It does not return anything. Therefore Array.filter() concludes that none of the array items matches the filter and returns [].
If you wrap the arrow function body in curly braces you have to explicitly mention what it returns:
i => { return i % 2 == 0 }
This is equivalent to i => i % 2 == 0 and not worth using.
However, if the arrow function does many things and an expression cannot be used then the block of statements and the explicit return are the way to go.
Arrow functions can skip the return keyword for single-line functions.
If you add braces, it means that the function will have multiple lines and it needs to know when to return something. Therefore, you need to add a return statement.
The explicit (with braces) equivalent of
i => i % 2 == 0
would be
i => { return i % 2 == 0 }
or (in function notation)
function (i) {
return i % 2 == 0
}
Your filter doesn’t return the expected result when you use braces because that function doesn’t return anything, which means the result is always undefined, which is falsy.
Why doesn’t it work now?
i => { i % 2 == 0 }
is equivalent to
function (i) {
i % 2 == 0
}
The function above computes whether i can be divided by 2, but it doesn’t store or return the value anywhere.