Зачем использовать скобочки у функции в JavaScript

Что проверяют

На самом деле вопрос о разнице между ссылкой на функцию и её вызовом. Следом почти всегда дают код с обработчиком события или setTimeout и спрашивают, почему функция сработала сразу, а не по клику.

Как отвечать

Функция в JavaScript это объект первого класса. Имя без скобок это ссылка на объект, скобки после имени это оператор вызова:

• fn: сама функция, её можно передать аргументом, положить в переменную, вернуть из другой функции;
• fn(): вызов, значение выражения равно тому, что функция вернула. Без return получится undefined;
• колбэки: addEventListener("click", handle) передаёт функцию, а addEventListener("click", handle()) вызывает её сразу и передаёт результат. То же с setTimeout(fn, 1000) и arr.map(fn). В React пишут onClick={handle} или onClick={() => handle(id)}, но не onClick={handle(id)};
• скобки в объявлении: список параметров, обязателен даже пустой: function f() {}, () => 1. У стрелочной функции с одним простым параметром скобки можно опустить: x => x * 2. С деструктуризацией, значением по умолчанию или rest-параметром они нужны;
• IIFE: (function () { ... })() оборачивают в скобки, чтобы парсер увидел выражение, а не объявление, и сразу вызывают. С модулями и блочной областью видимости нужда в этом почти пропала;
• опциональный вызов: callback?.() вызовет функцию, только если она определена.

Где спотыкаются

Пишут onClick={handleDelete(id)} и удивляются, что удаление срабатывает при каждом рендере, а не по клику. Нужна стрелочная обёртка или bind.

Считают, что имя функции без скобок вызовет ошибку. Это просто ссылка, и условие if (user.isAdmin) вместо if (user.isAdmin()) всегда истинно, поэтому баг получается молчаливым.

Не могут объяснить скобки вокруг IIFE. Без них строку function () {}() парсер читает как объявление функции и выдаёт SyntaxError.