JavaScript Void 0 Vysvětleno za pouhých 5 minut

Obsah

JavaScript je univerzální skriptovací jazyk, který nachází uplatnění jak ve front-endovém, tak i back-endovém vývoji. S jeho pomocí lze vytvářet dynamicky aktualizovaný obsah, animovat obrázky a ovládat přehrávání multimédií.

JavaScript disponuje rozsáhlou paletou frameworků a knihoven a je také jedním z nejrozšířenějších programovacích jazyků, jak uvádí Statista.

V JavaScriptu existuje mnoho operátorů, které slouží k různým účelům. Tento článek se zaměří na operátor void(0), objasní jeho význam, možnosti použití, přínosy, možná bezpečnostní rizika a alternativní řešení.

Co je operátor `void(0)`?

Slovo „void“ v překladu znamená „neplatný“ nebo „zcela prázdný“. V kontextu JavaScriptu je void(0) operátor, který zhodnotí daný výraz a vrací hodnotu undefined. Funkce se považuje za neplatnou, pokud nevrací žádnou hodnotu. Operátor void(0) lze využít v mnoha situacích.

Například, pokud kliknete na odkaz, může JavaScript vrátit undefined. V takovém případě se stránka, na kterou klikáte, neobnoví a nic se na ní nezmění.

Význam použití operátoru `void` s operandem 0

Operátor void lze sice použít s libovolným výrazem, nicméně v JavaScriptu se nejčastěji používá právě s operandem 0. Níže jsou uvedeny některé příklady jeho praktického využití:

Zamezení navigace

Standardně, když kliknete na odkaz, prohlížeč vás přesměruje na novou stránku. Pro demonstraci si vytvoříme jednoduchý projekt se dvěma soubory: index.html a nextPage.html.

Do jednotlivých souborů vložte následující kód:

index.html

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domovská stránka</title>
</head>
<body>
    <h1>Vítejte na Domovské stránce</h1>
    <a href="nextPage.html">Přejít na Další stránku (bez operátoru void)</a>
    <script src="script.js"></script>
</body>
</html>

nextPage.html

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Další stránka</title>
</head>
<body>
    <h1>Nacházíte se na Další stránce</h1>
    <a href="index.html">Zpět na Domovskou stránku (bez operátoru void)</a>
    <script src="script.js"></script>
</body>
</html>

(Zde by mohlo být video, ale kvůli omezením nemohu vložit video prvek)

Jak je vidět, kliknutím na odkaz se můžete snadno přesunout mezi „Domovskou stránkou“ a „Další stránkou“.

Nyní si představíme, jak operátor void(0) dokáže zabránit navigaci. Vložte tento kód do souboru index.html:

<!-- S operátorem void -->
<a href="javascript:void(0);" onclick="doSomething()">Klikni na mě</a>
<script>
    function doSomething() {
        alert("Tlačítko bylo kliknuto, ale nedošlo k navigaci!");
    }
</script>

(Zde by mohlo být video, ale kvůli omezením nemohu vložit video prvek)

Po kliknutí na tlačítko „Klikni na mě“ se zobrazí upozornění „Tlačítko bylo kliknuto, ale nedošlo k navigaci!“, ale prohlížeč nepřesměruje na jinou stránku.

Samo-spouštěcí anonymní funkce

Samo-spouštěcí anonymní funkce, známá také jako okamžitě vyvolaná funkce (IIFE), je funkce, která se definuje a ihned po definici spouští. Tyto funkce vytvářejí soukromý obor pro proměnné, čímž zabraňují kolizím s proměnnými v globálním oboru.

Zvažte následující kód:

void function() {
    // Funkce pro výpočet součtu čísel od 1 do n
    const calculateSum = () => {
        let sum = 0;
        for (let i = 1; i <= 10; i++) {
            sum += i;
        }
        return sum;
    };
    // Zavolání funkce a výpis výsledku do konzole
    const result = calculateSum();
    console.log("Součet čísel od 1 do 10 je:", result);
}();

Tato samo-spouštěcí funkce sečte všechna čísla od 1 do 10 a zobrazí výsledek po provedení kódu.

Výstupem po spuštění kódu bude: „Součet čísel od 1 do 10 je: 55“.

Jak kombinovat JavaScript a `void(0)`

Operátor void není exkluzivní pro JavaScript, je dostupný i v jiných programovacích jazycích, jako jsou C a C++. Nicméně jeho použití se v těchto jazycích liší. Například v C a C++ je void datový typ, nikoli operátor.

V JavaScriptu se klíčové slovo void používá s numerickou nulou. Pomocí operátoru void() můžete zabránit výchozímu chování, jako je například přesměrování prohlížeče na jinou URL adresu. Následující kód demonstruje kombinaci JavaScriptu s operátorem void().

<a href="javascript:void(0);" onclick="myFunction()">Klikni na mě</a>

Operátor void() můžete také využít k získání nedefinované primitivní hodnoty. Následující kód to demonstruje:

const result = void(0);

Po spuštění tohoto kódu získáte hodnotu undefined.

Jaké jsou výhody `void(0)`?

V JavaScriptu se operátor void() používá k vytvoření hodnoty „void“ nebo „undefined“. Níže uvádíme některé z výhod jeho použití v kódu:

Zamezení navigace: Operátor void(0) lze použít v atributu href, pokud chceme zabránit prohlížeči v navigaci na novou stránku při kliknutí na odkaz nebo tlačítko. Následující kód demonstruje, jak to funguje:

<a href="javascript:void(0);" onclick="myFunction();">Klikni na mě</a>

Vracení undefined z funkcí: Vývojáři mohou operátor void() použít k explicitnímu vracení undefined, pokud chtějí zachovat konzistenci kódu. Podívejte se na tento kód:

function myFunction() {
  // provede se nějaká akce
  return void(0);
}

Vyhnutí se přiřazování undefined: Můžete použít void() tak, že undefined je ekvivalentní výsledku. Může to být také stylistická volba. Následující kód ukazuje, jak toho dosáhnout:

let result = void(0);

Zlepšení čitelnosti kódu: Čitelnost kódu je důležitá, zejména při práci s rozsáhlými aplikacemi. void() lze použít k explicitnímu zrušení návratové hodnoty a upozornění ostatních vývojářů, že funkce nic nevrací. Následující kód ukazuje, jak toho dosáhnout:

function myFunction() {
  // provede se nějaká akce...
  return void(0);
}

Potenciální bezpečnostní rizika `void(0)`

Přestože je void(0) v JavaScriptu užitečný, může být také nebezpečný, pokud není správně používán. Následují některé případy, kdy může být void(0) zneužit:

Chyby zabezpečení vkládání skriptů: Pokud hodnota předaná operátoru void() není ošetřena a ověřena, může dojít k útoku vkládáním skriptů. Příkladem je situace, kdy je tato hodnota generována dynamicky na základě uživatelského vstupu.

<a href="javascript:void(alert("Tohle může být škodlivé!"));">Klikni na mě</a>

Takový kód umožňuje uživatelům vkládat škodlivý kód.

Clickjacking: Útočníci mohou použít operátor void k vytvoření průhledných vrstev nad webovou stránkou. Pomocí těchto vrstev pak mohou přimět uživatele kliknout na škodlivé odkazy a tlačítka.
Obejítí zásad zabezpečení obsahu (CSP): Většina vlastníků webových stránek používá CSP k prevenci útoků typu cross-site scripting (XSS). CSP omezuje typ skriptů a zdrojů, které webová stránka smí načítat. Použití operátoru void() ale může tato opatření obejít, protože může načíst i skripty, které nejsou povoleny.

Alternativy k `void(0)`

Technologie se neustále vyvíjí, stejně jako programování. Někteří vývojáři považují void(0) za zastaralý operátor. Následují alternativy, které moderní vývojáři používají:

Použití event.preventDefault(): Metoda event.preventDefault() zabrání výchozí akci události. Uživatelům tak můžeme například zabránit v odeslání formuláře nebo v přechodu na jinou stránku.

Následující kód ukazuje použití event.preventDefault():

#html
<a href="#" onclick="event.preventDefault()">Můj odkaz</a>

#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());

Použití # jako hodnoty href: Různé stránky v aplikaci jsou propojeny pro snadnou navigaci. Použití # jako hodnoty href zajistí, že uživatel zůstane na stejné stránce. Tento přístup lze použít spolu s event.prevetDefault(), abyste zabránili posouvání webové stránky nahoru. Lze toho dosáhnout následovně:

#html
<a href="#">Můj odkaz</a>

#JavaScript
document.querySelector('a').addEventListener('click', event => {
  event.preventDefault();
  window.scrollTo(0, 0);
});

Použití null: Místo hodnoty undefined můžete vracet hodnotu null. Lze toho dosáhnout takto:

let result = null;

Nejčastější dotazy

Co je JavaScript?

JavaScript je programovací jazyk, který se nejčastěji používá ve front-endovém vývoji. S frameworky jako Node.js se však používá i v back-endovém vývoji. JavaScript se většinou používá společně s dalšími front-endovými technologiemi, jako jsou CSS a HTML, pro přidávání interaktivity na webové stránky.

Co je JavaScript void(0)?

JavaScript void(0) je operátor, který slouží k zabránění výchozí akci. Například, můžete použít void(0), abyste zabránili navigaci, když uživatel klikne na odkaz nebo tlačítko. Pokud se klikne na odkaz s kódem void(0), prohlížeč se pokusí navigovat, ale výsledek se vyhodnotí jako undefined.

Existují alternativy k void(0)?

Ano. Většina moderních vývojářů ve svém kódu používá posluchače událostí namísto void(0). Tento přístup usnadňuje manipulaci s různými funkcemi a zabraňuje výchozímu chování ve zdrojových kódech.

Je použití void(0) bezpečné?

void(0) lze použít pro zabránění výchozímu chování a se samo-spouštěcími funkcemi. Pokud však void(0) používáte bez rozmyslu, může to být nebezpečné. Takový operátor může například usnadnit vkládání škodlivého kódu, pokud je aplikován na uživatelské vstupy.

Závěr

JavaScript je velmi rozsáhlý programovací jazyk a osvojení si většiny jeho konceptů může chvíli trvat.

V tomto článku jsme se seznámili s operátorem void(0), jeho významem, využitím, alternativami a potenciálními riziky. Nyní už víte, jak kombinovat JavaScript s void(0) a jaké jsou potenciální rizika spojená s jeho používáním.
Doporučujeme prozkoumat také některá z nejlepších běhových prostředí JavaScriptu pro efektivnější provádění kódu.

Co je operátor void(0)?

Význam použití operátoru void s operandem 0