JavaScript - void Keyword: A Beginner's Guide

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир ключевого слова void. Не волнуйтесь, если вы еще ни разу не писали строку кода — я буду вашим дружелюбным гидом, и мы рассмотрим эту тему шаг за шагом. Так что возьмите свою виртуальную палочку (то есть клавиатуру), и давайте окунемся в это!

Что такое ключевой оператор void?

Прежде чем мы углубимся в детали, давайте поймем, что такое void. В JavaScript void — это оператор, который evaluates выражение и затем возвращает undefined. Теперь вы можете подумать: "Зачем мне это нужно?" Ну, мои любопытные друзья, у него есть свои цели, и мы вот-вот их откроем!

Синтаксис

Синтаксис ключевого слова void довольно прост:

void expression

Здесь expression может быть любымvalid выражением JavaScript. Оператор void будет оценивать это выражение, но всегда возвращать undefined.

Давайте рассмотрим простой пример:

console.log(void 0); // Вывод: undefined
console.log(void(0)); // Вывод: undefined
console.log(void "Hello"); // Вывод: undefined
console.log(void (2 + 3)); // Вывод: undefined

Как видите, независимо от того, какое выражение мы ставим после void, оно всегда возвращает undefined. Это как маг, который может превратить все в кролика — за исключением того, что наш маг все превращает в undefined!

Важность приоритета ключевого слова void

Теперь давайте поговорим о чем-то более продвинутом — приоритете ключевого слова void. В JavaScript у операторов есть разные уровни приоритета, которые определяют порядок их оценки.

Оператор void имеет очень высокий приоритет. Это означает, что он будет оценен до большинства других операторов. Давайте посмотрим пример:

let x = 1;
console.log(void x === undefined); // Вывод: true
console.log(void (x = 5)); // Вывод: undefined
console.log(x); // Вывод: 5

В этом примере void x === undefined оценивается как (void x) === undefined, а не как void (x === undefined). Оператор void сначала применяется к x, возвращая undefined, который затем сравнивается с undefined.

Во втором предложении, хотя мы присваиваем 5 x, оператор void все равно возвращает undefined. Однако присвоение все же происходит, что мы видим в третьей строке.

Что такое javascript:void(0)?

Вы можете столкнуться с javascript:void(0) в HTML, особенно в атрибутах href тегов锚. Давайте развенчаем это!

<a href="javascript:void(0);" onclick="console.log('Clicked!')">Нажми меня</a>

В этом примере javascript:void(0) используется для предотвращения_EDEFAULT действия ссылки (которое было бы переходом на новую страницу). Событие onclick все равно сработает, но ссылка не выполнит никаких других действий.

Это как сказать вашей собаке "стоять" перед тем, как кинуть мяч — собака видит действие, но не двигается!

Ключевое слово void с функциями

Ключевое слово void также можно использовать с функциями. Давайте рассмотрим пример:

function greet() {
console.log("Hello, world!");
}

console.log(greet()); // Вывод: Hello, world! undefined
console.log(void greet()); // Вывод: Hello, world! undefined

В обоих случаях "Hello, world!" выводится в консоль. Однако greet()implicitly возвращает undefined (так как функции в JavaScript возвращают undefined по умолчанию, если не указано return), в то время как void greet() explicitly возвращает undefined.

Ключевое слово void с немедленно вызываемыми функциональными выражениями (IIFE)

Last but not least, давайте рассмотрим, как void можно использовать с немедленно вызываемыми функциональными выражениями (IIFE). IIFE — это функция, которая выполняется сразу после своего определения.

void function() {
console.log("I'm an IIFE!");
}();

// Вывод: I'm an IIFE!

В этом случае void используется для того, чтобы обеспечить лечение функционального выражения как выражения, а не как декларации. Это как надеть маскарадный костюм перед тем, как тайно проникнуть на вечеринку — функция выполняется, но не остается afterwards!

Обзор методов использования ключевого слова void

Вот удобная таблица, резюмирующая различные ways, в которых мы можем использовать ключевые слова void:

Method	Example	Description
Основное использование	void 0	Возвращает undefined
С выражениями	void (2 + 3)	Оценивает выражение, возвращает undefined
В HTML	<a href="javascript:void(0);">	Prevents default link action
С функциями	void greet()	Вызывает функцию, возвращает undefined
С IIFE	void function() {}();	Выполняет IIFE, возвращает undefined

И вот мы и добрались до конца, друзья! Мы отправились в путешествие по стране void, от его базового синтаксиса до его более продвинутых применений. Помните, как и любое другое средство в программировании, void имеет свои конкретные цели. Он может не быть тем, что вы используете каждый день, но понимание его зробит вас более разносторонним разработчиком JavaScript.

Продолжайте практиковаться, оставайтесь любопытными, и скоро вы будете колдовать JavaScript заклинания как профессионал! До свидания, счастливого кодирования!

Credits: Image by storyset