Когда именно круглые скобки нужны при выполнении функции

На самом деле это довольно просто, если вы поймете, что в JavaScript функции - это данные, а также блоки вызываемого кода. Это означает, что вы можете передавать их, как если бы вы передавали число 10 или строку "test".

• Когда призывая - функция, вы должны включать круглые скобки.

  foo(); // Invokes the foo function

• Когда ссылка функция (как данные, которые будут где-то использоваться), вы не надо. Обратные вызовы событий являются примерами обращения к функциям. В следующем примере строка "click" и функция foo передаются в качестве аргументов (данных) методу .addEventListener() некоторого элемента. В этом элементе теперь должен быть зарегистрирован foo как функция обратного вызова для вызова, если / когда произойдет событие click этого элемента. Мы не хотим вызывать foo прямо сейчас, мы просто хотим, чтобы элемент знал, какую функцию, возможно, вызвать позже.

  element.addEventListener("click", foo); // References foo as the click event callback

  • Теперь все может стать немного сложнее, потому что функции могут возвращать значение, когда они завершили свою работу, и это значение (данные) также могут быть другой функцией. В этих случаях мы хотим вызвать функцию, чтобы получить функцию, которую она возвращает (в виде данных):

function returnAfunction(){
  // When this function is invoked, it will return
  // (as data) another function:
  return function(){
    console.info("You did it!");
  };
}

// Here, notice that the second argument does have parenthesis after it.
// This is because we want the function to run right now and whatever its
// returned value is will then become the actual event callback for the
// button element.
document.querySelector("button").addEventListener("click", returnAfunction());

<button type = "button">Click me!</button>

Я думаю, это потому, что когда вы определяете функцию, вы можете передать ей некоторые параметры, например

const isUserValid = (username, password) => {
  for (i = 0; i < database.length; i++) {
    if (database[i].username === username && database[i].password === password) {
      return true;
    }
  }
  return false;
}

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