JavaScript Objekti

DG WEB FACTORY » Pamācības » JavaScript Objekti

JavaScript objekti ir īpašību kolekcijas. Īpašībām ir vērtības. Visvienkāršāk saprast, kas ir objekts, ir iztēlojoties objektu no reālās dzīves. Piemēram automašīna ir objekts, un tai ir īpašības: krāsa, svars, izmērs utt. Īpašībām objektā ir vērtības. Piemēram, krāsa ir īpašība un sarkans ir krāsas vērtība. Objektiem var būt metodes. Piemēram, automašīnai – braukt, bremzēt, stāvēt utt.
Objekta īpašības un vērtības raksta figūriekavās , aiz vērtības ir kols unīpašība un vērtības atdala ar komatu vienu no otras.

Izveidosim objektu person:

const person = {
firstName:’Jānis’,
lastname:’Bērziņš’,
age:20
}

firstname, lastName un age ir īpašības un Jānis, Bērziņš un 20 ir īpašību vērtības. Objektā mēs kā vērtības varam ievietot dažādu tipu vērtības – stringus, skaitļus, boolean, masīvus un pat funkcijas. Piemērā ir īpašībai greeting vērtība ir funkcija. Funkcija objektā ir metode.

izvadot konsolē objektu person, mēs redzam visas objekta īpašības un vērtības. Mēs varam arī piekļūt konkrētai īpašībai, norādot objekta nosaukumu, punktu un īpašības nosaukumu. Piemēram, ja gribam izvadīt vārdu (fistName), mēs var tam piekļūt, norādot:

person.firstName

(objektanosaukums.īpašība)

Mēs varam arī izveidot mainīgo, kas būs vienāds ar kādu no objekta īpašību vērtībām, piemēram, iegūstot vērtību vecumam (age):

const age = person.age;
console.log(age);

Tiek izvadīta age vērtība (20):

Kā arī mēs varam mainīt vērtību:

person.firstName=”Anna”;
console.log(person.firstName); //redzam, ka tagad vērtība firstName ir Anna, nevis Jānis

Mēs varam izsaukt arī metodi, ko pievienojām objektā (tā ir mūsu funkcija,kas izvada “hello”):

 

Arrow function

Jūs variet saskarties arī ar šādu funkcijas pierakstu () => {}, bez vārda function un ar nedaudz savādāku sintaksi. Šīs ir tā sauktās arrow funkcijas, ko izmanto kopš ES6 versijas.

const person = {
firstName:’Jānis’,
lastname:’Bērziņš’,
age:20,
education:false,
married:true,
siblings:[‘Anna’, ‘Pēteris’, ‘Jānis’],
greeting:() => {
console.log(‘hello’);
}
}
person.greeting();