Dot vs Bracket Notation in Accessing JavaScript Object.

We kunnen toegang krijgen tot de eigenschap van een object door

• Dot notatie
• Bracket notatie

Dit is de meest populaire en meest gebruikte manier om toegang te krijgen tot de eigenschap van een object. Dit maakt code leesbaarder. Puntnotatie wordt het vaakst gebruikt.

Syntax: obj.property_name

var user = {name : "Mark"};user.name ; // "Mark"

Wanneer dot notatie niet gebruiken

Bedenk dat we een eigenschapsnaam hebben als 123

var obj = {
'123' : 123
};

In het bovenstaande geval kunnen we geen toegang krijgen met

obj.123; 

Dus, als de naam van de eigenschap geen geldige identifier is, kunnen we geen toegang krijgen tot de waarde met . notatie.

Wat is een identifier?

Een identifier is een reeks tekens in de code die een variable, function, of property identificeert. In het algemeen de naam van een functie of variabele of de naam van een eigenschap van een object

Wat is een geldige identifier?

In dit geval kunnen we haakjesnotatie gebruiken

var obj = {
'123' : 123
};obj; // 123

Note

In JavaScript zijn $ , en _ geldige identifiers. dus kunnen we deze eigenschappen benaderen met . notatie.

var obj = {
$ : 10,
_ : 20
}obj.$; // 10obj._; // 20

Bracket notatie

De bracket notatie wordt gebruikt wanneer de naam van de eigenschap een ongeldige identifier is (begint met een getal, bevat symbolen).

var obj = {
test-123 : "test"
}// in this case we cannot use dot notationobj; // "test"

Als de naam van de eigenschap number is, dan hoeven we de naam van de eigenschap niet te wikkelen in single /double quotes bij het maken van het object. Maar in haakjesnotatie, als de naam van de eigenschap whole number is, dan hoeven we de naam niet in single /double quotes te wikkelen. Maar als de naam van de eigenschap double is, dan moet de naam binnen single /double quotes worden gewikkeld.

Voorbeeld 1: geheel getal

var obj = {
123456 : 10
}obj;

Voorbeeld 2: Dubbel

var obj = {
123.456 : 10
}obj; // undefinedobj; // 10

Voorbeeld 3: Gebruik van een ongeldig getal

var obj = {
123.123.123 : 10 // throws invalid number error
}For this case use single/double quotesvar obj = {
'123.123.123' : 10
}

Voorbeeld 4: Gebruik van speciale symbolen

var obj = {
'123-test' : "test" 
}obj; // error(test is not defined)obj; // "test"

Gebruik van variabele als eigenschapsnaam

Voorbeeld 1:

var test = "test";var obj = {
test : "Test success"
}obj // "Test success"

Voorbeeld 2 :

var obj = {
name : "Mark"
age : 20
}var name = "age";obj; // Mark
obj; // 20

Voorbeeld 3: Voorbeeld uit de praktijk van het gebruik van haakjesnotatie

We kunnen ook object als eigenschapsnaam gebruiken, maar dat wordt dan omgezet in

var a = {};var b = {};var c = {};c = 10;c ; {: 10}c = 20; // this will replace old c; {: 20}

We kunnen ook empty string als eigenschapsnaam hebben

var obj= {};var emptyString = "";obj = "10";obj; // 10