JavaScript-symboler: Entydige egenskabsnøgler og metadata-lagring

JavaScript-symboler, der blev introduceret i ECMAScript 2015 (ES6), tilbyder en kraftfuld mekanisme til at skabe entydige og uforanderlige egenskabsnøgler til objekter. I modsætning til strenge er symboler garanteret entydige, hvilket forhindrer utilsigtet kollision af egenskabsnavne og muliggør avancerede programmeringsteknikker såsom implementering af private egenskaber og lagring af metadata. Denne artikel giver et omfattende overblik over JavaScript-symboler, der dækker deres oprettelse, brug, velkendte symboler og praktiske anvendelser.

Hvad er JavaScript-symboler?

Et symbol er en primitiv datatype i JavaScript, ligesom tal, strenge og booleske værdier. Symboler har dog en unik egenskab: hvert oprettet symbol er garanteret entydigt og forskelligt fra alle andre symboler. Denne entydighed gør symboler ideelle til brug som egenskabsnøgler i objekter, hvilket sikrer, at egenskaber ikke utilsigtet overskrives eller tilgås af andre dele af koden. Dette er især nyttigt, når du arbejder med biblioteker eller frameworks, hvor du ikke har fuld kontrol over de egenskaber, der muligvis føjes til et objekt.

Tænk på symboler som en måde at tilføje specielle, skjulte etiketter til objekter, som kun du (eller den kode, der kender det specifikke symbol) kan få adgang til. Dette giver mulighed for at oprette egenskaber, der er effektivt private, eller tilføje metadata til objekter uden at forstyrre deres eksisterende egenskaber.

Oprettelse af symboler

Symboler oprettes ved hjælp af Symbol()-konstruktøren. Konstruktøren tager et valgfrit strengargument, der fungerer som en beskrivelse af symbolet. Denne beskrivelse er nyttig til debugging og identifikation, men påvirker ikke symbolets entydighed. To symboler oprettet med den samme beskrivelse er stadig forskellige.

Grundlæggende symboloprettelse

Sådan opretter du et grundlæggende symbol:

            
const mySymbol = Symbol();
const anotherSymbol = Symbol("My Description");

console.log(mySymbol);       // Output: Symbol()
console.log(anotherSymbol);  // Output: Symbol(My Description)
console.log(typeof mySymbol);  // Output: symbol

            

              
                Copy
              
            
          

Som du kan se, bekræfter typeof-operatoren, at mySymbol og anotherSymbol faktisk er af typen symbol.

Symboler er entydige

For at understrege symbolers entydighed, overvej dette eksempel:

            
const symbol1 = Symbol("example");
const symbol2 = Symbol("example");

console.log(symbol1 === symbol2);  // Output: false

            

              
                Copy
              
            
          

Selvom begge symboler blev oprettet med den samme beskrivelse ("example"), er de ikke ens. Dette demonstrerer den grundlæggende entydighed af symboler.

Brug af symboler som egenskabsnøgler

Den primære anvendelse af symboler er som egenskabsnøgler i objekter. Når du bruger et symbol som en egenskabsnøgle, er det vigtigt at omslutte symbolet i firkantede parenteser. Dette skyldes, at JavaScript behandler symboler som udtryk, og den firkantede parentesnotation er påkrævet for at evaluere udtrykket.

Tilføjelse af symbolegenskaber til objekter

Her er et eksempel på, hvordan du tilføjer symbolegenskaber til et objekt:

            
const myObject = {};
const symbolA = Symbol("propertyA");
const symbolB = Symbol("propertyB");

myObject[symbolA] = "Value A";
myObject[symbolB] = "Value B";

console.log(myObject[symbolA]);  // Output: Value A
console.log(myObject[symbolB]);  // Output: Value B

            

              
                Copy
              
            
          

I dette eksempel bruges symbolA og symbolB som entydige nøgler til at gemme værdier i myObject.

Hvorfor bruge symboler som egenskabsnøgler?

Brug af symboler som egenskabsnøgler giver flere fordele:

• Forebyggelse af egenskabsnavnskollisioner: Symboler garanterer, at egenskabsnavne er entydige, hvilket undgår utilsigtet overskrivning, når du arbejder med eksterne biblioteker eller frameworks.
• Indkapsling: Symboler kan bruges til at oprette egenskaber, der er effektivt private, da de ikke er enumerable og er vanskelige at få adgang til udefra objektet.
• Metadata-lagring: Symboler kan bruges til at vedhæfte metadata til objekter uden at forstyrre deres eksisterende egenskaber.

Symboler og enumeration

En vigtig egenskab ved symbolegenskaber er, at de ikke er enumerable. Det betyder, at de ikke er inkluderet, når du itererer over et objekts egenskaber ved hjælp af metoder som for...in-løkker, Object.keys() eller Object.getOwnPropertyNames().

Eksempel på ikke-enumerable symbolegenskaber

            
const myObject = {
  name: "Example",
  age: 30
};

const symbolC = Symbol("secret");
myObject[symbolC] = "Top Secret!";

console.log(Object.keys(myObject));          // Output: [ 'name', 'age' ]
console.log(Object.getOwnPropertyNames(myObject)); // Output: [ 'name', 'age' ]

for (let key in myObject) {
  console.log(key);                    // Output: name, age
}

            

              
                Copy
              
            
          

Som du kan se, er symbolegenskaben symbolC ikke inkluderet i outputtet af Object.keys(), Object.getOwnPropertyNames() eller for...in-løkken. Denne adfærd bidrager til indkapslingsfordelene ved at bruge symboler.

Adgang til symbolegenskaber

For at få adgang til symbolegenskaber skal du bruge Object.getOwnPropertySymbols(), som returnerer et array af alle symbolegenskaber, der findes direkte på et givet objekt.

            
const symbolProperties = Object.getOwnPropertySymbols(myObject);
console.log(symbolProperties);            // Output: [ Symbol(secret) ]
console.log(myObject[symbolProperties[0]]); // Output: Top Secret!

            

              
                Copy
              
            
          

Denne metode giver dig mulighed for at hente og arbejde med de symbolegenskaber, der ikke er enumerable på andre måder.

Velkendte symboler

JavaScript tilbyder et sæt foruddefinerede symboler, kendt som "velkendte symboler". Disse symboler repræsenterer specifikke interne adfærdsmønstre i sproget og kan bruges til at tilpasse adfærden af objekter i visse situationer. Velkendte symboler er egenskaber af Symbol-konstruktøren, såsom Symbol.iterator, Symbol.toStringTag og Symbol.hasInstance.

Almindelige velkendte symboler

Her er nogle af de mest almindeligt anvendte velkendte symboler:

• Symbol.iterator: Angiver standarditeratoren for et objekt. Den bruges af for...of-løkker til at iterere over objektets elementer.
• Symbol.toStringTag: Angiver en brugerdefineret strengbeskrivelse for et objekt, når Object.prototype.toString() kaldes.
• Symbol.hasInstance: Afgør, om et objekt betragtes som en instans af en klasse. Den bruges af instanceof-operatoren.
• Symbol.toPrimitive: Angiver en metode, der konverterer et objekt til en primitiv værdi.
• Symbol.asyncIterator: Angiver standardasynkron iteratoren for et objekt. Den bruges af for await...of-løkker.

Brug af Symbol.iterator

Symbol.iterator er et af de mest nyttige velkendte symboler. Det giver dig mulighed for at definere, hvordan et objekt skal itereres over ved hjælp af for...of-løkker.

            
const myIterable = {
  data: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (const value of myIterable) {
  console.log(value); // Output: 1, 2, 3, 4, 5
}

            

              
                Copy
              
            
          

I dette eksempel definerer vi en brugerdefineret iterator for myIterable ved hjælp af Symbol.iterator. Iteratoren returnerer værdierne i data-arrayet én efter én, indtil slutningen af arrayet er nået.

Brug af Symbol.toStringTag

Symbol.toStringTag giver dig mulighed for at tilpasse strengrepræsentationen af et objekt, når du bruger Object.prototype.toString().

            
class MyClass {}
MyClass.prototype[Symbol.toStringTag] = "MyCustomClass";

const instance = new MyClass();
console.log(Object.prototype.toString.call(instance)); // Output: [object MyCustomClass]

            

              
                Copy
              
            
          

Uden Symbol.toStringTag ville outputtet være [object Object]. Dette symbol giver dig mulighed for at give en mere beskrivende strengrepræsentation.

Praktiske anvendelser af symboler

Symboler har forskellige praktiske anvendelser i JavaScript-udvikling. Her er et par eksempler:

Implementering af private egenskaber

Selvom JavaScript ikke har ægte private egenskaber som nogle andre sprog, kan symboler bruges til at simulere private egenskaber. Ved at bruge et symbol som en egenskabsnøgle og opbevare symbolet inden for rammerne af en lukning kan du forhindre ekstern adgang til egenskaben.

            
const createCounter = () => {
  const count = Symbol("count");
  const obj = {
    [count]: 0,
    increment() {
      this[count]++;
    },
    getCount() {
      return this[count];
    }
  };
  return obj;
};

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Output: 1
console.log(counter[Symbol("count")]); // Output: undefined (outside scope)

            

              
                Copy
              
            
          

I dette eksempel er count-symbolet defineret i createCounter-funktionen, hvilket gør det utilgængeligt udefra lukningen. Selvom det ikke er ægte privat, giver denne tilgang et godt niveau af indkapsling.

Vedhæftning af metadata til objekter

Symboler kan bruges til at vedhæfte metadata til objekter uden at forstyrre deres eksisterende egenskaber. Dette er nyttigt, når du har brug for at tilføje ekstra oplysninger til et objekt, der ikke bør være enumerable eller tilgængeligt via standardegenskabsadgang.

            
const myElement = document.createElement("div");
const metadataKey = Symbol("metadata");

myElement[metadataKey] = {
  author: "John Doe",
  timestamp: Date.now()
};

console.log(myElement[metadataKey]); // Output: { author: 'John Doe', timestamp: 1678886400000 }

            

              
                Copy
              
            
          

Her bruges et symbol til at vedhæfte metadata til et DOM-element uden at påvirke dets standardegenskaber eller attributter.

Udvidelse af tredjepartsobjekter

Når du arbejder med tredjepartsbiblioteker eller frameworks, kan symboler bruges til at udvide objekter med brugerdefineret funktionalitet uden at risikere kollision af egenskabsnavne. Dette giver dig mulighed for at tilføje funktioner eller adfærdsmønstre til objekter uden at ændre den originale kode.

            
// Assume 'libraryObject' is an object from an external library
const libraryObject = {
  name: "Library Object",
  version: "1.0"
};

const customFunction = Symbol("customFunction");
libraryObject[customFunction] = () => {
  console.log("Custom function called!");
};

libraryObject[customFunction](); // Output: Custom function called!

            

              
                Copy
              
            
          

I dette eksempel føjes en brugerdefineret funktion til libraryObject ved hjælp af et symbol, hvilket sikrer, at det ikke er i konflikt med eksisterende egenskaber.

Symboler og globalt symbolregister

Ud over at oprette lokale symboler tilbyder JavaScript et globalt symbolregister. Dette register giver dig mulighed for at oprette og hente symboler, der deles på tværs af forskellige dele af din applikation eller endda på tværs af forskellige JavaScript-miljøer (f.eks. forskellige iframes i en browser).

Brug af det globale symbolregister

For at oprette eller hente et symbol fra det globale register skal du bruge metoden Symbol.for(). Denne metode tager et strengargument, der fungerer som en nøgle til symbolet. Hvis et symbol med den givne nøgle allerede findes i registeret, returnerer Symbol.for() det eksisterende symbol. Ellers opretter den et nyt symbol med den givne nøgle og føjer det til registeret.

            
const globalSymbol1 = Symbol.for("myGlobalSymbol");
const globalSymbol2 = Symbol.for("myGlobalSymbol");

console.log(globalSymbol1 === globalSymbol2); // Output: true

console.log(Symbol.keyFor(globalSymbol1));   // Output: myGlobalSymbol

            

              
                Copy
              
            
          

I dette eksempel refererer både globalSymbol1 og globalSymbol2 til det samme symbol i det globale register. Metoden Symbol.keyFor() returnerer den nøgle, der er knyttet til et symbol i registeret.

Fordele ved det globale symbolregister

Det globale symbolregister giver flere fordele:

• Symboldeling: Giver dig mulighed for at dele symboler på tværs af forskellige dele af din applikation eller endda på tværs af forskellige JavaScript-miljøer.
• Konsistens: Sikrer, at det samme symbol bruges konsekvent på tværs af forskellige dele af din kode.
• Interoperabilitet: Letter interoperabilitet mellem forskellige biblioteker eller frameworks, der har brug for at dele symboler.

Bedste praksis for brug af symboler

Når du arbejder med symboler, er det vigtigt at følge nogle bedste praksisser for at sikre, at din kode er klar, vedligeholdelig og effektiv:

• Brug beskrivende symbolbeskrivelser: Angiv meningsfulde beskrivelser, når du opretter symboler for at hjælpe med debugging og identifikation.
• Undgå global symbolforurening: Brug lokale symboler, når det er muligt, for at undgå at forurene det globale symbolregister.
• Dokumenter symbolbrug: Dokumenter tydeligt formålet med og brugen af symboler i din kode for at forbedre læsbarheden og vedligeholdelsen.
• Overvej implikationer for ydeevne: Selvom symboler generelt er effektive, kan overdreven brug af symboler potentielt påvirke ydeevnen, især i store applikationer.

Eksempler fra den virkelige verden fra forskellige lande

Brugen af symboler strækker sig over forskellige softwareudviklingslandskaber globalt. Her er nogle konceptuelle eksempler, der er skræddersyet til forskellige regioner og brancher:

• E-handelsplatform (global): En stor international e-handelsplatform bruger symboler til at gemme brugerpræferencer til visning af produktoplysninger. Dette hjælper med at personliggøre brugeroplevelsen uden at ændre kerneproduktdatastrukturerne og respektere databeskyttelsesbestemmelserne i forskellige lande (f.eks. GDPR i Europa).
• Sundhedssystem (Europa): Et europæisk sundhedssystem bruger symboler til at tagge patientjournaler med sikkerhedsniveauer og sikrer, at følsomme medicinske oplysninger kun er tilgængelige for autoriseret personale. Dette udnytter symbolentydighed til at forhindre utilsigtede databrud i overensstemmelse med strenge love om beskyttelse af sundhedsoplysninger.
• Finansiel institution (Nordamerika): En nordamerikansk bank bruger symboler til at markere transaktioner, der kræver yderligere bedragerianalyse. Disse symboler, der er utilgængelige for almindelige behandlingsrutiner, udløser specialiserede algoritmer for forbedret sikkerhed, hvilket minimerer risici forbundet med økonomisk kriminalitet.
• Uddannelsesplatform (Asien): En asiatisk uddannelsesplatform bruger symboler til at gemme metadata om læringsressourcer, såsom sværhedsgrad og målgruppe. Dette muliggør tilpassede læringsforløb for studerende og optimerer deres uddannelsesoplevelse uden at ændre det originale indhold.
• Supply Chain Management (Sydamerika): En sydamerikansk logistikvirksomhed bruger symboler til at markere forsendelser, der kræver særlig håndtering, såsom temperaturkontrolleret transport eller farlige materialeprocedurer. Dette sikrer, at følsomme varer håndteres korrekt, hvilket minimerer risici og overholder internationale forsendelsesbestemmelser.

Konklusion

JavaScript-symboler er en kraftfuld og alsidig funktion, der kan forbedre sikkerheden, indkapslingen og udvidelsesmulighederne i din kode. Ved at levere entydige egenskabsnøgler og en mekanisme til lagring af metadata giver symboler dig mulighed for at skrive mere robuste og vedligeholdelige applikationer. At forstå, hvordan man bruger symboler effektivt, er afgørende for enhver JavaScript-udvikler, der ønsker at mestre avancerede programmeringsteknikker. Fra implementering af private egenskaber til tilpasning af objektadfærd tilbyder symboler en bred vifte af muligheder for at forbedre din kode.

Uanset om du bygger webapplikationer, server-side applikationer eller kommandolinjeværktøjer, bør du overveje at udnytte symboler til at forbedre kvaliteten og sikkerheden af din JavaScript-kode. Udforsk de velkendte symboler og eksperimenter med forskellige use cases for at opdage det fulde potentiale i denne kraftfulde funktion.

Yderligere læringsressourcer

• MDN Web Docs: Symbol
• ECMAScript 2015 Language Specification: Symbol Objects
• JavaScript.info: Symbols