JavaScript operator spajanja za null vrijednosti (??): Sveobuhvatan vodič za dodjelu zadanih vrijednosti

U JavaScriptu je dodjeljivanje zadanih vrijednosti čest zadatak. Programeri su tradicionalno u tu svrhu koristili OR operator (||). Međutim, operator spajanja za null vrijednosti (??), uveden u ECMAScript 2020, pruža precizniji i pouzdaniji način rukovanja dodjelom zadanih vrijednosti, posebno kada se radi o vrijednostima null ili undefined. Ovaj vodič pruža detaljan uvid u operator spajanja za null vrijednosti, istražujući njegovu sintaksu, ponašanje, razlike u odnosu na OR operator i praktične slučajeve upotrebe.

Što je operator spajanja za null vrijednosti (Nullish Coalescing)?

Operator spajanja za null vrijednosti (??) je logički operator koji vraća svoj desni operand kada je njegov lijevi operand null ili undefined. U suprotnom, vraća svoj lijevi operand. Jednostavnije rečeno, on pruža zadanu vrijednost samo kada je varijabla strogo null ili undefined.

Sintaksa

Sintaksa za operator spajanja za null vrijednosti je jednostavna:

leftOperand ?? rightOperand

Ovdje je leftOperand varijabla ili izraz koji želite provjeriti na null ili undefined, a rightOperand je zadana vrijednost koju želite dodijeliti ako je leftOperand doista null ili undefined.

Primjer

Razmotrite sljedeći primjer:

const username = null ?? "Guest";
console.log(username); // Izlaz: Guest

const age = undefined ?? 25;
console.log(age); // Izlaz: 25

const city = "London" ?? "Unknown";
console.log(city); // Izlaz: London

U ovom primjeru, varijabli username dodijeljena je zadana vrijednost "Guest" jer je početno null. Slično tome, varijabli age dodijeljeno je 25 jer počinje kao undefined. Međutim, city zadržava svoju izvornu vrijednost, "London", jer nije ni null ni undefined.

Nullish vs. Falsy vrijednosti

Ključno je razumjeti razliku između nullish i falsy vrijednosti u JavaScriptu. Nullish vrijednost je ili null ili undefined. Falsy vrijednost je vrijednost koja se smatra neistinitom (false) kada se nađe u booleovom kontekstu. Falsy vrijednosti uključuju:

null
undefined
0 (nula)
NaN (Not a Number)
'' (prazan string)
false

Ključna razlika je u tome što operator spajanja za null vrijednosti provjerava samo null ili undefined, dok OR operator (||) provjerava bilo koju falsy vrijednost.

Razlika između `??` i `||`

OR operator (||) je logički ILI operator koji vraća desni operand ako je lijevi operand falsy. Iako se može koristiti za dodjeljivanje zadanih vrijednosti, može dovesti do neočekivanog ponašanja pri radu s vrijednostima kao što su 0 ili prazan string.

Primjer: Zamke operatora `||`

const quantity = 0 || 10; // Namjeravamo postaviti zadanu vrijednost 10 ako količina nedostaje
console.log(quantity); // Izlaz: 10 (Neočekivano!) jer je 0 falsy

const text = '' || 'Default Text'; // Namjeravamo postaviti zadani tekst ako tekst nedostaje
console.log(text); // Izlaz: Default Text (Neočekivano!) jer je '' falsy

U prvom primjeru, namjeravali smo dodijeliti zadanu količinu od 10 samo ako je quantity nedostajala (null ili undefined). Međutim, budući da je 0 falsy vrijednost, OR operator je netočno dodijelio zadanu vrijednost. Slično tome, prazan string uzrokuje prikazivanje zadanog teksta čak i ako string postoji (ali je prazan).

Korištenje `??` za preciznost

Napišimo prethodni primjer ponovno koristeći operator spajanja za null vrijednosti:

const quantity = 0 ?? 10;
console.log(quantity); // Izlaz: 0 (Točno!)

const text = '' ?? 'Default Text';
console.log(text); // Izlaz: '' (Točno!)

Sada je izlaz onakav kakav se očekuje. Operator spajanja za null vrijednosti provjerava samo null ili undefined, stoga se 0 i '' tretiraju kao važeće vrijednosti, a njihove izvorne vrijednosti su sačuvane.

Slučajevi upotrebe operatora spajanja za null vrijednosti

Operator spajanja za null vrijednosti koristan je u različitim scenarijima gdje trebate pružiti zadane vrijednosti samo kada je varijabla strogo null ili undefined. Evo nekih uobičajenih slučajeva upotrebe:

1. Rukovanje opcionalnim parametrima funkcije

Kada definirate funkciju s opcionalnim parametrima, možete koristiti operator spajanja za null vrijednosti kako biste pružili zadane vrijednosti ako parametri nisu navedeni.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Izlaz: Hello, User!
greet("Alice"); // Izlaz: Hello, Alice!
greet("Bob", "Greetings"); // Izlaz: Greetings, Bob!

2. Postavljanje zadanih konfiguracijskih opcija

Kada radite s konfiguracijskim objektima, možete koristiti operator spajanja za null vrijednosti kako biste osigurali da se koriste zadane vrijednosti ako određene konfiguracijske opcije nisu navedene.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Zadano vrijeme čekanja od 10 sekundi
  const retries = options.retries ?? 5; // Zadanih 5 pokušaja
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Izlaz: Timeout: 5000, Retries: 3
fetchData({}); // Izlaz: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Izlaz: Timeout: 10000, Retries: 5

3. Pristupanje ugniježđenim svojstvima objekta

Prilikom pristupanja svojstvima ugniježđenih objekata, operator spajanja za null vrijednosti može se kombinirati s opcionalnim ulančavanjem (?.) kako bi se pružile zadane vrijednosti ako su neka od međusvojstava null ili undefined.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Izlaz: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Izlaz: Unknown

4. Rad s API-jevima i vanjskim podacima

Prilikom dohvaćanja podataka iz API-ja ili vanjskih izvora, operator spajanja za null vrijednosti može se koristiti za pružanje zadanih vrijednosti ako određena polja podataka nedostaju ili imaju vrijednosti null ili undefined. Razmotrite dohvaćanje korisničkih podataka iz različitih regija. Pretpostavite da neke regije možda neće uključivati polje `country` u svojim korisničkim podacima.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`Korisnik je iz: ${country}, Vremenska zona: ${timezone}`);
  } catch (error) {
    console.error("Greška pri dohvaćanju korisničkih podataka:", error);
  }
}

// Simuliranje različitih odgovora API-ja:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Da biste ovo testirali, trebat će vam stvarni API ili lažni fetch.
// U svrhu demonstracije, simulirajmo odgovore:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Izlaz: Korisnik je iz: USA, Vremenska zona: EST
getUserData(456); // Izlaz: Korisnik je iz: Unknown Country, Vremenska zona: GMT

Prioritet operatora

Operator spajanja za null vrijednosti ima relativno nizak prioritet. Niži je od OR (||) i AND (&&) operatora. Stoga, pri kombiniranju operatora spajanja za null vrijednosti s drugim logičkim operatorima, ključno je koristiti zagrade kako bi se eksplicitno definirao redoslijed operacija. Ako to ne učinite, može doći do sintaksnih pogrešaka ili neočekivanog ponašanja.

Primjer: Korištenje zagrada za jasnoću

// Bez zagrada (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Sa zagradama (Točno)
const result = false || (null ?? "Default");
console.log(result); // Izlaz: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Izlaz: null

U prvom primjeru, nedostatak zagrada rezultira greškom SyntaxError jer JavaScript mehanizam ne može odrediti namjeravani redoslijed operacija. Dodavanjem zagrada, eksplicitno kažemo mehanizmu da prvo procijeni operator spajanja za null vrijednosti. Drugi primjer je valjan; međutim, izlaz je drugačiji jer se prvo procjenjuje izraz s ||.

Kompatibilnost s preglednicima

Operator spajanja za null vrijednosti (??) je relativno nova značajka, stoga je ključno uzeti u obzir kompatibilnost s preglednicima, posebno ako ciljate starije preglednike. Većina modernih preglednika podržava operator spajanja za null vrijednosti, uključujući:

Chrome 80+
Firefox 72+
Safari 13.1+
Edge 80+
Node.js 14+

Ako trebate podržati starije preglednike, možete koristiti transpiler poput Babela kako biste svoj kôd pretvorili u kompatibilnu verziju JavaScripta. Babel će transformirati operator ?? u ekvivalentan JavaScript kôd koji radi u starijim okruženjima.

Najbolje prakse

Evo nekoliko najboljih praksi za učinkovito korištenje operatora spajanja za null vrijednosti:

Koristite ?? za provjeru nullish vrijednosti: Koristite operator spajanja za null vrijednosti (??) kada specifično želite pružiti zadanu vrijednost samo kada je varijabla null ili undefined.
Koristite zagrade za složene izražaje: Prilikom kombiniranja operatora spajanja za null vrijednosti s drugim logičkim operatorima, koristite zagrade kako biste jasno definirali redoslijed operacija.
Uzmite u obzir kompatibilnost s preglednicima: Provjerite kompatibilnost s preglednicima i koristite transpiler ako je potrebno za podršku starijim preglednicima.
Koristite dosljedno: Usvojite ?? tamo gdje je prikladno za predvidljiviji stil kodiranja u cijelom projektu.
Kombinirajte s opcionalnim ulančavanjem: Koristite ?? u kombinaciji s opcionalnim ulančavanjem ?. kako biste sigurno pristupili i dodijelili zadane vrijednosti ugniježđenim svojstvima objekata.

Globalna razmatranja

Prilikom razvoja za globalnu publiku, uzmite u obzir sljedeće točke vezane za dodjelu zadanih vrijednosti:

Lokalizacija: Zadane vrijednosti možda će trebati lokalizirati ovisno o jeziku ili regiji korisnika. Na primjer, zadani simbol valute ili format datuma.
Kulturološke norme: Određene zadane vrijednosti možda će trebati prilagoditi ovisno o kulturološkim normama. Na primjer, zadana poruka dobrodošlice može se razlikovati u različitim kulturama.
Pristupačnost: Osigurajte da su zadane vrijednosti pristupačne i razumljive korisnicima s invaliditetom. Pružite jasne i opisne oznake za zadane vrijednosti u korisničkim sučeljima.
Vremenske zone i datumi: Prilikom rada s datumima i vremenima, koristite odgovarajuće vremenske zone i formate datuma kako biste osigurali da se zadane vrijednosti ispravno prikazuju korisnicima u različitim regijama.

Primjer: Lokalizacija s operatorom spajanja za null vrijednosti

Recimo da želite prikazati zadanu poruku dobrodošlice na različitim jezicima ovisno o lokalitetu korisnika. Možete koristiti operator spajanja za null vrijednosti kako biste pružili zadanu poruku ako lokalizirana poruka nije dostupna.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Zadano na engleski ako lokalitet nije pronađen
  return message;
}

console.log(getWelcomeMessage("fr")); // Izlaz: Bienvenue !
console.log(getWelcomeMessage("es")); // Izlaz: Welcome! (Postavlja se na engleski kao zadani)

Zaključak

Operator spajanja za null vrijednosti (??) je vrijedan dodatak JavaScript jeziku. On pruža precizniji i pouzdaniji način dodjeljivanja zadanih vrijednosti u usporedbi s OR operatorom (||), posebno pri radu s vrijednostima kao što su 0 ili prazni stringovi. Razumijevanjem njegove sintakse, ponašanja i slučajeva upotrebe, možete pisati čišći, lakše održiv kôd koji točno rukuje dodjelom zadanih vrijednosti. Ne zaboravite uzeti u obzir kompatibilnost s preglednicima, prioritet operatora i globalna razmatranja pri korištenju operatora spajanja za null vrijednosti u svojim projektima.

Slijedeći najbolje prakse navedene u ovom vodiču, možete učinkovito iskoristiti operator spajanja za null vrijednosti kako biste poboljšali kvalitetu i pouzdanost svog JavaScript kôda, čineći ga robusnijim i lakšim za razumijevanje. Zapamtite da uvijek dajete prednost jasnoći i održivosti u svom kôdu, a operator spajanja za null vrijednosti može biti moćan alat u postizanju tih ciljeva.