Оператор void

JavaScriptJunior~2 хв читання

Оператор void виконує вираз і завжди повертає undefined, яким би не був результат самого виразу. Це рідкісний, але корисний інструмент, коли потрібно виконати дію і при цьому гарантовано нічого не повернути.

Теорія

TL;DR

Синтаксис: void expression або void(expression).
Вираз справді обчислюється, усі його побічні ефекти відбуваються.
Результат завжди undefined, і це не залежить від виразу.
Класичні сценарії: javascript:void(0) у посиланнях, bookmarklet, IIFE, стрілкові функції без повернення значення.
void 0 це також надійний спосіб отримати undefined там, де саме ім'я undefined могло бути перевизначене.

Швидкий приклад

javascript

void 123;       // undefined
void 'hello';   // undefined
void (5 + 5);   // undefined

Неважливо, чому дорівнює вираз праворуч: результат void завжди undefined.

Як працює void

Оператор виконує вираз, але завжди повертає undefined. Функція при цьому реально викликається:

javascript

function sayHi() {
  console.log('Привіт!');
  return 'Hi';
}

console.log(sayHi());      // "Hi"
console.log(void sayHi()); // виконується, але повертає undefined

Тут sayHi() викликається і виводить повідомлення в консоль, але результат 'Hi' ігнорується, назовні йде undefined.

Ще одна причина існування оператора історична: у старому коді undefined не було зарезервованим словом і його можна було перевизначити у власній області видимості. Запис void 0 давав справжнє undefined завжди.

Де використовується на практиці

1. Щоб посилання нікуди не вело

Іноді потрібно, щоб клік по посиланню нічого не робив:

html

<a href="javascript:void(0)">Натисни мене</a>

Тут виконується void(0), результат undefined, і браузер нікуди не переходить, бо href не дає адреси.

Це застаріла практика: у сучасному коді краще використовувати href="#" разом з event.preventDefault(), або взагалі <button>.

2. Для IIFE

Раніше void ставили перед функцією, щоб гарантувати коректне виконання IIFE:

javascript

void function() {
  console.log('Спрацювало!');
}();

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

3. У стрілкових функціях, щоб нічого не повертати

javascript

const log = msg => void console.log(msg);

log('Привіт'); // виведе в консоль, але поверне undefined

Тут void потрібен, щоб виконати дію без повернення значення. Це корисно, наприклад, коли API очікує колбек, який має повертати undefined, а не випадкове значення.

4. У bookmarklet, тобто міні-скриптах у закладках

javascript

javascript:void(alert('Привіт'))

Без void браузер спробував би перейти на «сторінку» з результатом виразу, а void цьому запобігає.

Порівняння зі звичайним викликом

javascript

function calc() {
  return 42;
}

console.log(calc());      // 42
console.log(void calc()); // undefined

Функція виконується в обох випадках, але void змушує вираз повернути undefined.

Характеристика	Значення
Що робить	Виконує вираз і повертає `undefined`
Що повертає	`undefined`
Для чого потрібен	Ігнорування результату виразу
Часті сценарії	Посилання `javascript:void(0)`, IIFE, стрілкові функції без повернення

Типові помилки

Думати, що void скасовує виконання. Вираз обчислюється повністю, відкидається лише його значення.
Використовувати javascript:void(0) у новому коді. Для дії без переходу є <button> або event.preventDefault().
Плутати void з undefined як типом. Це оператор, а не тип; тип з такою назвою є в TypeScript, і це зовсім інша річ.
Забувати про пріоритет операцій. void a + b це (void a) + b, тому дужки в складних виразах обов'язкові.
Застосовувати void до async-функції та вважати, що помилки зникли. Проміс усе одно виконується, а необроблене відхилення нікуди не подінеться.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.