Функції у

Про концепцію Функції

Функція - це блок упорядкованого, багаторазово використовуваного коду, який виконує певну дію. У JavaScript є кілька способів визначати функції. Тут ми розглянемо оголошення функцій та функціональні вирази. Інші можливості, як-от стрілкові функції, ми розглянемо в інших концепціях.

Оголошення функції

Стандартний спосіб визначити функцію в JavaScript - оголошення функції, яке також називають визначенням функції або інструкцією функції.

Воно складається з ключового слова function, назви функції та розділеного комами списку параметрів у круглих дужках. Далі йде тіло функції (набір інструкцій, який визначає, що робить функція), узяте у фігурні дужки.

function someName(param1, param2, param3) {
  // ...
}

Використання функції

У JavaScript, щоб викликати функцію, треба назвати її імʼя, а потім поставити круглі дужки з аргументами.

someName(arg1, arg2, arg3);

Сама лише назва функції не викликає її в JavaScript.

function sayHello() {
  console.log('Hello, World!');
}

sayHello;
// => [Function: sayHello]
// The text representations varies between environments.

sayHello();
// => 'Hello, World!'

Параметри

Працюючи з параметрами всередині тіла функції, варто памʼятати про можливі побічні ефекти для початкового значення, яке було передано у функцію. У JavaScript аргумент - це копія посилання на початкове значення. Що це означає на практиці, залежить від типу даних аргументу.

• Значення примітивних типів даних є незмінними. Будь-які «зміни» завжди створюють нове примітивне значення. Тому на початкове значення ніяк не впливає те, що відбувається з аргументом у тілі функції.

  const num = 0;
  
  function increase(number) {
    number = number + 1;
  }
  
  increase(num);
  num;
  // => 0
  

• Інакше з такими значеннями, як обʼєкти, масиви, функції. Оскільки копіюється посилання, повторне присвоєння не вплине на початкове значення. Однак, маючи справу з поверхневою копією, ми побачимо, що зміна аргументу в тілі функції також змінить початкове значення, яке було передано.

  const nums = [0, 1, 2, 3, 4];
  
  function pushFive(arr) {
    arr.push(5);
  }
  
  pushFive(nums);
  nums;
  // => [0, 1, 2, 3, 4, 5]
  

Типово всі параметри, визначені в оголошенні функції, у JavaScript є необовʼязковими. Якщо функції передати менше аргументів, ніж є параметрів, то пропущені аргументи всередині тіла функції матимуть значення undefined, див. Null та Undefined. У багатьох випадках краще ініціалізувати параметр типовим значенням, якщо йому не передано жодного значення або передано undefined. Це можна зробити, указавши типові параметри безпосередньо у визначенні функції.

function someName(param1 = defaultValue1, param2 = defaultValue2) {
  // ...
}

Функцію можна викликати з більшою кількістю аргументів, ніж було параметрів у визначенні функції. Усі аргументи, зокрема й зайві, можна знайти в «масиві» arguments.

Також можна визначати функції, які приймають довільну кількість аргументів (варіативні функції); докладніше про залишкові параметри див. у Оператори rest і spread.

Інструкція return

Інструкція return завершує виконання функції та вказує значення, яке буде повернуто туди, звідки функцію викликали. Функція може мати кілька інструкцій return.

function checkNumber(num) {
  if (num === 0) {
    return 'You passed 0, please provide another number.';
  }

  return 'Thanks for passing such a nice number.';
}

Якщо функція не повертає жодного значення або не має інструкції return, її результат - undefined. У JavaScript немає неявних return.

function nakedReturn(a) {
  a * 2;
  return;
}

nakedReturn(1);
// => undefined

function noReturn(a) {
  a * 2;
}

noReturn(1);
// => undefined

У JavaScript можна повернути лише одне значення. Якщо потрібно передати більше інформації, спершу треба поєднати її в одну сутність, зазвичай в обʼєкт або масив.

function divide(a, b) {
  return {
    quotient: Math.floor(a / b),
    remainder: a % b,
  };
}

Функціональний вираз

Оголошення функції - це окрема інструкція. Але іноді зручно визначити функцію як частину іншого виразу: у присвоєнні, як параметр функції (функція зворотного виклику) або як значення в обʼєкті. Для цього використовують функціональний вираз. Він має той самий синтаксис, що й оголошення функції, лише імʼя функції можна опустити, щоб створити анонімну функцію.

const someFunction = function (param) {
  // ...
};

someOtherFunction(function (param) {
  // ...
});

const obj = {
  someFunction: function (param) {
    // ...
  },
};

Область видимості

Функція створює новий контекст виконання в JavaScript. Змінні, визначені всередині функції, недоступні поза нею. Але змінні, визначені в батьківській області видимості (тій, де визначено саму функцію), доступні всередині функції. Документація MDN про область видимості показує приклади такої поведінки.

Щоб дізнатися більше про область видимості змінних у JavaScript, погляньмо на замикання.