Коли використовувати оголошення функції проти виразу функції

Серія Tech Jargon

Ймовірно, ви вже знаєте, як писати функції обома цими способами. function doStuff() {}і () =>{} - це символи, які ми вводимо цілий день. Але чим вони відрізняються і навіщо використовувати одне над іншим?

Примітка: Приклади наведені в JavaScript. У нашого M ileage M ау V ічних з іншими мовами.

Перша відмінність: ім’я

Коли ви створюєте функцію з іменем , це декларація функції . Ім'я може бути опущено у виразах функцій , роблячи цю функцію "анонімною".

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

function doStuff() {};

Вираз функції:

const doStuff = function() {}

Ми часто бачимо анонімні функції, що використовуються з синтаксисом ES6, так:

const doStuff = () => {}

Підйом

Піднімання означає доступність функцій та змінних "у верхній частині" вашого коду, на відміну від лише після їх створення. Об'єкти ініціалізуються під час компіляції та доступні де завгодно у вашому файлі.

Оголошення функцій підняті, але вирази функцій - ні.

Це легко зрозуміти на прикладі:

doStuff();
function doStuff() {};

Вище не виникає помилка, але це може:

doStuff();
const doStuff = () => {};

Справа для виразів функцій

Може здатися, що декларації функцій з їх потужними властивостями підйому збираються обмежити вирази функцій для корисності. Але вибір одного над іншим вимагає продумати, коли і де потрібна функція . В основному, хто повинен про це знати?

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

IIFE

Назва - вирази функцій, що викликаються одразу - майже все це говорить. Коли функція створюється одночасно з її викликом, ви можете використовувати IIFE, який виглядає так:

(function() => {})()

або:

(() => {})()

Для детального ознайомлення з IIFE перегляньте цю вичерпну статтю.

Зворотні дзвінки

Функція, передана іншій функції, часто називається "зворотним викликом" у JavaScript. Ось приклад:

function mapAction(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

Проблема тут полягає в тому, що mapActionвона буде доступна всій вашій програмі - у цьому немає необхідності. Якщо цей зворотний виклик є виразом функції, він не буде доступний поза функцією, яка його використовує:

array.map(item => { //do stuff to an item })

або

const mapAction = function(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

хоча mapActionбуде доступний для коду нижче його ініціалізації.

Резюме

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

Список літератури

  • Оголошення функції, документи MDN.
  • Вираз функції, документи MDN.
  • Підйом, глосарій MDN.

Серія Tech Jargon

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

Правда в тому, що я часто просто не знаю правильного слова для цього. Як люди, але особливо розробники, ми любимо відмовлятись від тих, хто не “розмовляє”, тому ця серія стосується глибокого розуміння концепцій програмування, які “слід знати”.

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