JAVASCRIPT (II)

TEHNICI WEB
OBJECT
JAVASCRIPT (II)

OBJECT

▸ tip de date ce înglobează o colecție de date și/sau funcții

corelate (denumite proprietăți și metode)

▸ un obiect gol poate fi definit prin constructor 


( const x = new Object() ) sau literal ( x = {} )

▸ cheia fiecărei proprietăți/metode este de tip string; în cazul

în care se folosește alt tip de date, se apelează implicit
toString()

▸ pentru a accesa câmpurile folosim fie notația cu punct

( obj.cheie ), fie notația cu paranteze pătrate ( obj[‘cheie’] )
JAVASCRIPT (II)

OBJECT - PROPERTIES
▸ adăugare de proprietăți la definire: folosind notația literală

var obj = { 

property_1: value_1, // property_# may be an identifier...

2: value_2, // or a number...

// ...,

'property n': value_n // or a string

};
▸ adăugare de proprietăți ulterior: folosind aceleași notații ca la accesare

var myObj = new Object(),

str = 'myString',

rand = Math.random(),

obj = new Object();

myObj.type = 'Dot syntax';

myObj['date created'] = 'String with space';

myObj[str] = 'String value';

myObj[rand] = 'Random Number';

myObj[obj] = 'Object';

myObj[''] = 'Even an empty string';
JAVASCRIPT (II)

OBJECT - PROPERTIES
▸ valoarea unei proprietăți poate fi la rândul ei un alt Object

▸ pentru a accesa (citi/modifica) proprietăți imbricate putem înlănțui mai multe

notații cu punct sau cu paranteze:

const person = {

name: {

firstName: ’Bob’,

lastName: ’Smith’

}

};

console.log(person[‘name’][‘firstName’]) // ‘Bob’;

person.name.firstName = ‘John’;

console.log(person[‘name’].firstName) // ‘John’;

▸ dacă încercăm să accesăm un câmp inexistent, valoarea întoarsă este undefined

JAVASCRIPT (II)

OBJECT - METHODS

▸ const person1 = {

name: 'Chris',

greeting: function() {

console.log(`Hi! I'm ${this.name}`);

}

};

person1.greeting() // “Hi! I’m Chris.”
😳 WHAT IS THIS ?
JAVASCRIPT (II)

THIS

▸ this este o referință la obiectul care execută funcția

curentă

▸ utilizat în afara oricărei funcții sau într-o funcție ce nu

aparține vreunui obiect (nu e metodă), this face referire la
“obiectul global” (în browser valoarea implicită e window)

▸ this poate avea valoarea undefined în anumite situații

▸ daca funcția în care e folosit este o metodă a unui obiect,

atunci this este referință către acel obiect
JAVASCRIPT (II)

THIS
▸ metode din Function

▸ bind

▸ creează o funcție nouă în care valoarea this este cea dată ca prim argument
(argumentele destinate funcției pot fi date tot aici, separate prin virgulă, după this)

const boundGetX = unboundGetX.bind(this)

▸ call

▸ apelează funcția cu valoarea this dată ca prim argument (argumentele destinate

funcției pot fi date tot aici, separate prin virgulă, după this) 

var max = Math.max.call(null, 5, 6, 2, 3, 7)

▸ apply

▸ apelează funcția cu valoarea this dată ca prim argument (argumentele destinate

funcției pot fi date tot aici, ca Array)

var max = Math.max.apply(null,[5, 6, 2, 3, 7]);
JAVASCRIPT (II)

THIS
▸ arrow functions

const sumOfTwo = (arg1, arg2) => {

return arg1 + arg2

}

▸ o formă compactă de a defini o funcție

▸ funcțiile definite cu arrow function nu au propriile valori definite

pentru this, folosindu-se valoarea din scope-ul părinte

▸ parantezele sunt opționale dacă avem un singur parametru

▸ corpul funcției și cuvântul cheie return pot fi omise dacă avem doar
un rând cu return
JAVASCRIPT (II)

OBJECT
▸ spread syntax ( …foo )

▸ în definiția unei funcții, spread syntax se poate folosi pentru a

îngloba toți parametrii, indiferent de câți sunt;

dacă vrem să denumim separat unii parametri, aceștia trebuie sa
fie la începutul listei

function dummyConstructor2(limit, …numbers) {}

▸ la apelarea unei funcții, spread syntax poate transforma un array

într-o listă de parametri

const numsArray = [3,1,2,4,5,4];

dummyConstructor2(…numsArray)

// echivalent cu dummyConstructor2(3,1,2,4,5,4)
JAVASCRIPT (II)

OBJECT
▸ spread syntax ( …foo )

▸ în literalul generator de Array, cu spread putem combina

liste (ordinea se păstrează)

const oldList = [1,2,3];

const newList = [-3, -2, -1, 0, …oldList, 5, 6, 7]

▸ în literalul generator de Object, cu spread putem combina

obiecte (ordinea conteaza, se pot suprascrie câmpuri)

const oldObj = { a: “this is the old a”, b: “this is the old b” }

const newObj = { …oldObj, a: “this is a new a” }