Notation med hakparenteser i Javascript

Vad är Key/value?

I Javascript använder vi oss ofta av objekt för att spara undan data som vi sedan kan använda oss av. Ett objekt är en kollektion av egenskaper, som kan vara av olika typer som strängar, nummer eller metoder. Egenskaperna är data som vi sparar undan genom att ange en key, ett namn som en “nyckel”, som är kopplat till det värde (value) som vi vill spara.

object = { 
  key: "value", 
  color: "red", 
  number: 13, 
  function: function () {
       console.log("stuff"); 
  }, 
}

Skillnaden på object.key och object[”key”]

För att komma åt värdet kallar vi på nyckeln, och i Javascript finns det två olika sätt att göra det, punkt-notation och hakparentes-notation. Punkt-notation är den form som oftast används, den är smidig, snabb och lätt att använda sig av. Syntaxen består av att man skriver objektets namn, punkt, och nyckeln man vill få fram värdet ur. object.key

Men det finns tillfällen då punkt-notation inte fungerar och kommer att kasta fel och riskera att krascha programmet, då är det bra att att känna till hur man kallar på ett värde med hjälp av hakparenteser. Syntaxen för att kalla på ett värde med hakparentes-notation är objektets namn följt av hakparenteser med nyckeln som en sträng inuti. object[”key”]

Många är säkert redan familjära med denna syntaxen när det kommer till arrayer, men kanske har missat fördelarna med att använda den för objekt med.

console.log(object.key)
//output: value
console.log(object["key"])
//output: value

Flexibilitet med nyckel-namn

En fördel med att kunna använda hakparenteser istället för punkt är bland annat att man kan hantera egenskaper i objekt som vanligtvis skulle räknas som “ogiltiga”, till exempel nycklar som består av siffror, strängar med mellanrum eller börjar med speciella karaktärer. Om man försöker hantera ett objekt med den här typen av nycklar med punktnotation kommer det att kasta fel och krascha appen, men hakparentes-notation har en flexibilitet som tillåter de flesta underliga nycklar man kan tänkas stöta på.

invalid = { 
  1: "ett", 
  "&char": "&", 
  "-char": "-", 
  "mening med mellanrum": 
  "som nyckel", 
}; 
console.log(invalid.&char) 
// output SyntaxError: Unexpected  token '&' 

console.log(invalid."&char") // output: SyntaxError: Unexpected string 

console.log(invalid["&char"]); //output &

Ge variabler tillgång till nycklarna

Men en av de kanske största fördelarna hakparenteser har är att man kan använda variabler för att få tillgång till nycklarna i ett objekt, till exempel för att göra jämförelser mot nycklarna i ett objekt för att hitta och jämföra värden.

Säg att vi har ett objekt ‘users’, där varje egenskap består av ett användarnamn och ett lösenord (observera dock att det här inte på något sätt är ett rekommenderat sätt att hantera känsliga uppgifter i verkligheten, utan bara på i exemplenas värld).

Vi vill ta emot ett användarnamn och ett lösenord och jämföra mot vår lista av users. Om vi använder punktnotation kommer den inte att kunna jämföra, då värdet av users.username är ‘undefined’.

let users = { 
  bob: "pass123", 
  denise: "c4ts4r3c00l", 
  sofia: "m0t0rb1ke3", 
}; 
const username = "denise"; 
const password = "c4ts4r3c00l"; 
if (users.username === password) {
  console.log("welcome :)"); 
} else { 
  console.log("this doesn't work :("); console.log(users.username); 
} 
//output this doesn't work :( undefined

Om vi däremot gör samma jämförelse med hakparenteser istället, så kommer den att kunna hämta värdet ut variabeln username och använda det för att hitta en matchande nyckel, och därefter jämföra värdet av users [ username ] med värdet av password.

if (users[username] === password) { 
  console.log("welcome :)");
  console.log(users[username]); 
} else { 
  console.log("this doesn't work :("); 
} //output welcome :) c4ts4r3c00l

Object[”<3”]

Så, nu har vi gått igenom lite snabba exempel på hur man kan använda sig av hakparenteser utöver punkter för att kalla på värden i ett objekt, och hoppas att det kommer vara till hjälp om man hamnar i en situation där man behöver lite större flexibilitet för att få fram sina värden!