Заметка о void в JavaScript и TypeScript
Если вы, до того, как заинтересовались JavaScript, писали на традиционных языках с сильной типизацией, то вы, возможно, знакомы с концепцией void . Это — тип, использование которого сообщает программисту о том, что соответствующие функции и методы при их вызове ничего не возвращают.
Сущность void имеется также в JavaScript и TypeScript. В JS это — оператор. В TS это примитивный тип данных. И там и там void ведёт себя не так, как могли бы ожидать многие из тех, кто сталкивался с void в других языках.
Оператор void в JavaScript
В JavaScript оператор void вычисляет переданное ему выражение. При этом, независимо от того, какое именно выражение вычисляется, void всегда возвращает undefined .
Зачем вообще нужен подобный оператор?
Во-первых, надо отметить, что в ранние годы JS-программирования разработчики могли переопределять undefined и записывать в него какое-нибудь своё значение. А вот void всегда возвращает настоящее значение undefined .
Во-вторых — использование оператора void — это интересный способ работы с немедленно вызываемыми функциями:
И всё это — без загрязнения глобального пространства имён:
Так как оператор void всегда возвращает undefined и всегда вычисляет переданное ему выражение, в нашем распоряжении оказывается весьма выразительный способ возвращения из функции без возврата какого-то значения, но с вызовом, например, некоего коллбэка:
Это приводит нас к самому важному способу использования void . Данный оператор представляет собой нечто вроде «поста охраны» приложения. Если некая функция всегда должна возвращать undefined — обеспечить это можно, воспользовавшись оператором void .
Тип данных void в TypeScript
Тип void в TypeScript можно назвать чем-то вроде противоположности типа any . Функции в JavaScript всегда что-то возвращают. Это может быть либо некое заданное программистом значение, либо undefined :
Так как JavaScript функции, из которых явным образом ничего не возвращается, всегда возвращают undefined , void в TypeScript является подходящим типом, сообщающим разработчикам о том, что функция возвращает undefined :
Сущность void в виде типа можно ещё использовать для параметров и для любых других объявлений переменных. Единственное значение, которое всегда можно передать void-параметру — это undefined .
В результате оказывается, что в TS типы void и undefined — это почти одно и то же. Но между ними есть одно маленькое различие, которое, на самом деле, чрезвычайно важно. Возвращаемый тип void может быть заменён на другие типы, что позволяет реализовывать продвинутые паттерны работы с коллбэками.
Разработчики ожидают от подобных конструкций, часто используемых в JS-приложениях, именно такого поведения. Вот материал на эту тему.
Если вы хотите, чтобы функция принимала бы лишь функции, которые возвращают undefined — вы можете соответствующим образом изменить сигнатуру метода:
Итоги
Оператор void в JavaScript и тип данных void в TypeScript — сущности довольно простые и понятные. Круг ситуаций, в которых они применимы, ограничен. Однако надо отметить, что программист, который их использует, скорее всего, не столкнётся при работе с ними с какими-то проблемами.
void operator
В void оценивает данное expression , а затем возвращает undefined .
Try it
Syntax
Description
Этот оператор позволяет вычислять выражения, которые производят значение, в тех местах, где требуется выражение, которое оценивается как undefined .
Оператор void часто используется просто для получения undefined примитивного значения, обычно с помощью void(0) (что эквивалентно void 0 ). В этих случаях можно использовать глобальную переменную undefined .
Следует отметить , что приоритет в void операторе должен быть принят во внимание и что круглые скобки могут помочь прояснить разрешение выражения , следующим за void оператором:
Examples
Немедленно вызванные функциональные выражения
При использовании выражения функции, вызываемой немедленно , можно использовать void , чтобы заставить ключевое слово function обрабатываться как выражение вместо объявления.
Выполнение указанной выше функции без ключевого слова void приведет к ошибке Uncaught SyntaxError .
JavaScript URIs
Когда браузер следует javascript: URI, он оценивает код в URI и затем заменяет содержимое страницы возвращенным значением, если возвращаемое значение не undefined . Оператор void может использоваться для возврата undefined . Например:
Примечание: псевдопротокол javascript: не рекомендуется по сравнению с другими альтернативами, такими как ненавязчивые обработчики событий.
Непротекающие функции стрелок
Функции стрелок вводят синтаксис короткой руки без скобки,который возвращает выражение.Это может привести к нежелательным побочным эффектам,возвращая результат вызова функции,которая ранее ничего не возвращала.Для безопасности,когда возвращаемое значение функции не предназначено для использования,оно может быть передано оператору void для обеспечения того,чтобы (например)изменение API не приводило к изменению поведения функций со стрелками.
Это гарантирует, что возвращаемое значение doSomething , изменяющееся с undefined на true , не изменит поведения этого кода.
What Does void 0 Do in JavaScript?
The void operator in JavaScript evaluates an expression and returns undefined . At first glance, this operator doesn't seem useful, but there are 3 cases where you may see the void operator in practice. Here are the 3 major use cases:
No Overwriting undefined
Surprisingly enough, undefined is a valid variable name in JavaScript. The below script will print out "test" twice.
However, void is an operator. That means, if you try to name a variable void , JavaScript will throw the below error.
Some JavaScript projects prefer void 0 instead of undefined to avoid accidentally creating variables named undefined . There is even an ESLint rule to disallow undefined for this reason.
No-Op for <a> Tags
Another use case for the void operator is to make an <a> tag with a javascript: URI do nothing. An <a> tag is not valid HTML unless it has a name or href property, so javascript: void(0) is a common trick to make an <a> tag render correctly without adding an actual link.
Below is how the above HTML looks:
Immediately Invoked Function Expressions (IIFEs)
To declare a function and execute it in the same statement, you normally would use parentheses to force JavaScript to handle the function declaration as an expression.
You may occasionally see the void operator as an alternative to parentheses. Because void is a unary operator, it tells JavaScript to treat the function declaration as an expression, so the below code prints "Hello, World."
The difference is that a normal IIFE can still return a value, whereas using void for IIFE will always evaluate to undefined .
What does “javascript:void(0)” mean?
In this tutorial, we will learn what “javascript: void(0)” means.
In English, void means nothing. In a programming language, void means return nothing. “javascript: void(0)” is similar to void.
javascript: void(0) means return undefined as a primitive value. We use this to prevent any negative effects on a webpage when we insert some expression.
For example, in the case of URL hyperlinks. Hyperlinks open by reloading the page when the user clicks on the link. When you need to run some other code in such cases, you can use javascript: void(0).
Let’s split javascript: void(0) with a colon. We get javascript and void(0).
javascript: is a pseudo URL. The JavaScript engine interprets this as some code after that colon and executes that code.
Syntax
Here, displays 1 in the console when we click the link.
void(0) returns undefined. void(0) means void(false). Even if 1+1 is 2, void makes it undefined.
In the above snippet, the code inside the void executes.
Without using javascript: void(0)
Example
In this example, we have set # to the href and added a double-click event to the anchor tag. Only when the user doubles clicks on the tag, does the alert trigger. Here the page refreshes because we have set #. We can also observe the color change of the link.
Use javascript: void(0)
Example
In this example, we have set javascript: void(0) to the href and added a double-click event to the anchor tag. Only when the user doubles clicks on the tag, does the alert trigger. Here page does not refresh because we have set javascript: void(0). We can not observe the color change of the link because we didn’t visit it.
In this tutorial, we have discussed the javascript: void(0). We can use this option when we need to prevent some action on a webpage.