CODEWITHSUNDEEP
javascriptmathfunctional-programmingbracketscurly-braces
Carlos Pérez
Carlos Pérez

Reputation: 197

Function works withouth curly braces and doesn't work with them, why?

I'm doing FreeCode camp exercises, and this has messed-up my mind:

const squareList = arr =>
  arr
    .filter(num => num > 0 && num % parseInt(num) === 0)
    .map(num => Math.pow(num, 2));

const squaredIntegers = squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]);

console.log(squaredIntegers);

This works correctly, but if i put: 

 const squareList = arr => {
      arr
        .filter(num => num > 0 && num % parseInt(num) === 0)
        .map(num => Math.pow(num, 2));
    }
    const squaredIntegers = squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]);

    console.log(squaredIntegers);

The typical curly brackets which are used normally in many functions, it doesn't work. Why?

Upvotes: 1

Views: 331

Answers (3)

Mark Adelsberger
Mark Adelsberger

Reputation: 45779

For better or for worse, javascript allows arrow functions to be either of the form

args => expression

or

args => function_body

So they "straddle the line" between old-school Javascript closures (function (arglist...) {...}) which must have a function body, and lambdas in more purely functional languages where they would always take an expression.

The working example you have is of the form args => expression, but if you put curly-braces around the expression, it is interpreted as args => function_body. But a function body with no return statement returns undefined. This is easy to fix by adding the return keyword, since args => expression is really a shorthand for a function that returns what the expression evaluates to.

args => {return expression}

Note that this syntactic ambiguity also can lead to problems if you want an arrow function to whose expression should be an object literal; in that case you have to say

args => ({
    // object key/value pairs
})

(note the extra () which prevent the compiler from thinking you're providing a function body).

Upvotes: 1

Shubham Dixit
Shubham Dixit

Reputation: 1

One is a set of statements (with curly braces) and other is an expression

(param1, param2, …, paramN) => { statements } // needs to return something
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

So when you are using the first form ,you need to return something from it

So in your non working case it should be a return statement

const squareList = arr => {
     return arr
        .filter(num => num > 0 && num % parseInt(num) === 0)
        .map(num => Math.pow(num, 2));
    }

Any unit of code that can be evaluated to a value is an expression.

A statement is an instruction or set of instructions to perform a specific action

A more detailed explanation is here in mozilla docs

Upvotes: 2

toastrackengima
toastrackengima

Reputation: 8742

Without the curly brackets, return is added for you.

With the curly brackets, you need to add it yourself.

const squareList = arr => {
    return arr
        .filter(num => num > 0 && num % parseInt(num) === 0)
        .map(num => Math.pow(num, 2));
}
const squaredIntegers = squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]);

console.log(squaredIntegers);

will work correctly.

Upvotes: 2

Related Questions