Функция работает без фигурных скобок и не работает с ними, почему?

Question

Я делаю упражнения в лагере FreeCode, и это запутало меня:

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);

Это работает правильно, но если я поставлю:

 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);

Типичное вьющееся скобки, которые обычно используются во многих функциях, это не работает. Почему?

Answer 1

Без фигурных скобок для вас добавляется return.

С фигурными скобками вы должны добавить его самостоятельно.

---

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);

будет работать правильно.

Answer 2

Один - это набор statements (с фигурными скобками), а другой - expression

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

Поэтому, когда вы используете первую форму, вам нужно return что-то из нее

Так что в вашем нерабочем случае это должен быть оператор return

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

Любая единица кода, которая может быть оценена как значение, является выражением .

A оператор - это инструкция или набор инструкций для выполнения определенного c действия

Более подробное объяснение здесь в Mozilla Docs

Answer 3

К лучшему или к худшему, javascript позволяет функциям стрелок иметь вид

args => expression

или

args => function_body

Таким образом, они "пересекают линию" между старыми школы Javascript замыкания (function (arglist...) {...}), которые должны иметь тело функции, и лямбды на более чисто функциональных языках, где они всегда будут принимать выражение.

Рабочий пример, который у вас есть, имеет форму args => expression , но если вы положите фигурные скобки вокруг выражения, оно будет интерпретировано как args => function_body. Но тело функции без оператора возврата возвращает undefined. Это легко исправить, добавив ключевое слово return, так как args => expression действительно является сокращением для функции, которая возвращает то, к чему вычисляется выражение.

args => {return expression}

Обратите внимание, что это syntacti c неоднозначность также может привести к проблемам, если вы хотите использовать функцию стрелки, для которой expression должен быть литералом объекта; в этом случае вы должны сказать

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

(обратите внимание на дополнительные (), которые мешают компилятору думать, что вы предоставляете тело функции).