JavaScript Void 0 пояснюється всього за 5 хвилин

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

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

У JavaScript є різні оператори, створені для виконання різних ролей. У цій статті я поясню, що таке JavaScript Void (0), його важливість, варіанти використання та переваги, потенційні ризики безпеки та його альтернативи.

Що таке оператор Void (0)?

У наших словниках void означає «недійсний» або «повністю порожній». Void (0) — це оператор, який перевіряє задане значення та повертає undefined. Функція вважається недійсною, якщо вона нічого не повертає. Оператор void (0) можна використовувати в багатьох сферах.

Наприклад, JavaScript може повертати невизначене значення, коли ви натискаєте тег прив’язки. Коли це станеться, це означає, що сторінка, яку ви натискаєте, не оновлюватиметься, і з нею нічого не станеться.

Важливість використання оператора Void і 0 як операнда

Оператор void можна використовувати з будь-яким виразом. Однак у JavaScript він здебільшого використовується з 0 як операнд. Ось кілька випадків використання оператора Void (0):

Заборонити навігацію

У звичайних випадках, якщо ви натиснете посилання, воно, ймовірно, переведе вас на нову сторінку. Ми можемо створити проект, щоб продемонструвати, як він працює. У моєму проекті буде два файли: index.html і nextPage.html.

Ви можете додати цей код до різних файлів наступним чином:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to the Home Page</h1>
    <a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/nextPage.html">Go to Next Page (No void operator)</a>
    <script src="script.js"></script>
</body>
</html>
nextPage.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Next Page</title>
</head>
<body>
    <h1>You are on the Next Page</h1>
    <a href="index.html">Go back to Home Page (No void operator)</a>
    <script src="script.js"></script>
</body>
</html>

Перегляньте це відео:

Як бачите, ви можете перейти від «Домашньої» до «Наступної сторінки», натиснувши кнопку.

Тепер ми можемо ввести оператор void (0), який блокує навігацію. Додайте цей код до index.html:

<!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
  function doSomething() {
    alert("Button clicked, but no navigation!");
  }
</script><!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
  function doSomething() {
    alert("Button clicked, but no navigation!");
  }
</script>

Перегляньте це відео, коли ми натискаємо кнопку «Натисни мене»:

Ви бачите, що після натискання кнопки з’являється сповіщення «Кнопку натиснуто, але навігації немає!» з’являється, але ми не переходимо до наступної сторінки.

Самовиконувані анонімні функції

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

Подивіться на цей код:

void function() {
    // Function to calculate the sum of numbers from 1 to n
    const calculateSum = () => {
        let sum = 0;
        for (let i = 1; i <= 10; i++) {
            sum += i;
        }
        return sum;
    };
    // Call the function and log the result to the console
    const result = calculateSum();
    console.log("The sum of numbers from 1 to 10 is:", result);
}();

Це самовиконувана функція, яка додає всі числа від 1 до 10 і відображає результати після виконання коду.

Коли ви запустите код, результатом буде: «Сума чисел від 1 до 10 дорівнює: 55».

Як поєднати JavaScript і Void 0

Оператор void не є винятковим для JavaScript, оскільки він доступний в інших мовах програмування, таких як C і C++. Однак використання цього оператора відрізняється від однієї мови до іншої. Наприклад, void — це тип даних у мовах програмування C і C++, а не оператор.

JavaScript використовує ключове слово “void” із нулем. Ви можете використовувати оператор void (), щоб запобігти поведінці за замовчуванням, наприклад переходу браузера до наступної URL-адреси. Це чудовий приклад блоку коду, який поєднує JavaScript з оператором void ().

<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>

Ви також можете використовувати оператор void (), щоб отримати невизначене примітивне значення. Подивіться на цей блок коду:

const result = void(0);const result = void(0);

Коли ви запустите його, ви отримаєте undefined.

Які переваги Void (0)?

У JavaScript ми використовуємо оператор void (), щоб створити значення «void» або «undefined». Ось деякі з переваг використання цього оператора у вашому коді:

  • Заборонити навігацію: ми можемо використовувати оператор void(0) в атрибуті href, якщо хочемо заборонити браузерам переходити на нову сторінку, коли ми натискаємо посилання чи кнопку. Цей блок коду ілюструє, як це працює:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
  • Повертайте невизначені значення з функцій: як розробник, ви можете використовувати оператор void (), щоб явно повертати невизначені значення, якщо вам потрібна послідовність коду у вашій програмі. Перегляньте цей блок коду:
function myFunction() {
    // do something
    return void(0);
}
  • Уникайте призначення ‘undefined’: Ви можете використовувати void () таким чином, що ‘undefined’ буде еквівалентним ‘result’. Ви також можете використовувати його як стильовий вибір. Цей блок коду показує, як можна досягти цього:
let result = void(0);
  • Зробіть код більш читабельним: читабельність коду – це не те, що ми повинні ігнорувати, особливо коли маємо справу з великими програмами. Ви можете використовувати void(), якщо ви хочете явно відкинути значення, що повертається, і повідомити іншим розробникам, що функція нічого не повертатиме. Цей блок коду показує, як можна досягти цього:
function myFunction() {
  // Do something...
  return void(0);
}

Потенційні ризики безпеки через Void (0)

Незважаючи на те, що void (0) корисний у різних випадках у JavaScript, він також може виявитися небезпечним, якщо його використовувати неправильно. Ось деякі з випадків, коли void (0) може використовуватися зловмисно:

  • Уразливості ін’єкцій сценаріїв. Існують потенційні ризики атак ін’єкцій сценаріїв, якщо значення, передане оператору void (), не оброблено та перевірено. Хорошим прикладом є коли це значення динамічно генерується на основі введення користувача.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>

Такий блок коду дозволяє користувачам вводити шкідливий код.

  • Клікджекінг: зловмисники можуть використовувати оператори void для створення прозорих/невидимих ​​шарів над веб-сторінкою. Такі зловмисники потім використовуватимуть ці шари, щоб обманом змусити користувачів натиснути шкідливі посилання та кнопки.
  • Можна використовувати для обходу політики безпеки вмісту (CSP): більшість власників веб-сайтів використовують CSP для запобігання атакам міжсайтових сценаріїв (XSS). Ви можете використовувати CSP, щоб обмежити характер сценаріїв і ресурсів, які мають завантажувати ваші веб-сторінки. Однак використання оператора void () може конфліктувати з такими заходами, оскільки воно завантажує навіть сценарії, заборонені політикою безпеки вмісту.

Альтернативи void (0)

Технології постійно змінюються, як і програмування. Деякі люди вважають void (0) застарілим оператором. Ось деякі з альтернатив, які використовують сучасні розробники:

  • Використовуйте event.preventDefault(): ви можете використовувати event.preventDefault(), щоб запобігти дії події. Така заява може перешкодити користувачам подати форму або перейти до наступної сторінки.

Ці фрагменти коду показують, як використовувати event.preventDefault:

#html
<a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
  • Використовуйте # як значення href: різні сторінки програми пов’язані між собою для зручності навігації. Використання # як href гарантує, що користувачі залишаються на тій самій сторінці. Ви можете використовувати цей підхід разом із event.prevetDefault(), щоб запобігти прокручуванню веб-сторінки вгору. Ось як ви можете досягти цього:
#html

<a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
  event.preventDefault();
  window.scrollTo(0, 0);
});
  • Використовуйте значення null: ви можете повернути значення null замість undefined. Ось як ви можете досягти цього:
let result = null;

поширені запитання

Що таке JavaScript?

JavaScript — це мова програмування, яка в основному використовується у розробці інтерфейсу. Однак ця мова використовується у внутрішній розробці з фреймворками, такими як Node.js. JavaScript здебільшого використовується з іншими зовнішніми технологіями, такими як CSS і HTML, щоб додати інтерактивність веб-сторінок.

Що таке JavaScript Void 0?

JavaScript Void 0 — це оператор, який використовується для запобігання дії за замовчуванням. Наприклад, ви можете використовувати void (0), щоб запобігти навігації, коли користувач натискає посилання або кнопку. Коли натискається посилання з коду з void (0), браузер намагається перейти, але результат оцінюється як undefined.

Чи існують альтернативи void (0)?

Так. Більшість сучасних розробників використовують слухачі подій замість void (0) у своєму коді. Цей підхід полегшує обробку різних функцій і запобігає поведінці за замовчуванням у вихідних кодах.

Чи безпечно використовувати void (0)?

Ви можете використовувати void (0), щоб запобігти поведінці за замовчуванням і для самовиконуваних функцій. Однак void (0) може бути небезпечним, якщо ви не використовуєте його свідомо у своєму коді. Наприклад, такий оператор може полегшити впровадження шкідливого коду, якщо його застосувати до введених користувачем даних.

Висновок

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

Ми навчили, що таке оператор void (0), його важливість і випадки використання, а також його альтернативи. Тепер ви також розумієте, як поєднати JavaScript і void(0) потенційні ризики, з якими ви можете зіткнутися, коли використовуєте цей оператор.
Ви також можете дослідити деякі найкращі середовища виконання JavaScript для кращого виконання коду.