Főoldal

"Mérnököt a mérnöktől"

A Schönherz Bázis összeköti az állást kereső és állást kínáló mérnököket.

CV küldés

Küldj önéletrajzot! Gyorsan, egyszerűen.
Megjegyzésbe írd be a pozíció nevét.
CV küldés

Iratkozz fel hírlevelünkre!

Hírek

JavaScript objektumok, szögletes zárójelek és algoritmusok
JavaScript objektumok, szögletes zárójelek és algoritmusok

A JavaScript egyik leghasznosabb képessége, hogy dinamikusan hivatkozhatunk az objektumok tulajdonságaira. A továbbiakban ezek működését és előnyeit mutatjuk be.

Egy gyors pillantást vetünk az informatikában használt adatstruktúrákra, emellett megnézünk egy „big-o notation” avagy ordo nevű dolgot, melyet az algoritmusok hatékonyságának leírására használunk.


1. Bevezetés az objektumokba

Kezdjük azzal, hogy egy autót reprezentáló, egyszerű objektumot hozunk létre. Minden objektum rendelkezik úgynevezett tulajdonságokkal (properties). A tulajdonság egy változó, mely az objektumhoz tartozik. A mi autónknak három tulajdonsága lesz: make, model and color.

Lássuk, ez hogy nézhet ki:


const car = {

  make: 'Ford',

  model: 'Fiesta',

  color: 'Red'

};


Az objektum különböző tulajdonságaira való hivatkozást ponttal jelöljük. Például ha ki akarjuk deríteni, hogy milyen színű az autónk, akkor azt ilyen jelöléssel tudjuk megtenni: car.color.

Ezt ki is írhatjuk a console.log használatával:


console.log(car.color); //output: Red


Emellett szögletes zárójelek alkalmazásával is hivatkozhatunk a tulajdonságokra:


console.log(car['color']); //output: Red


A fenti példában a tulajdonság nevét stringként használjuk a szögletes zárójelben, hogy megkapjuk az ennek megfelelő értéket. Ebben a jelölésben viszont az a leghasznosabb, hogy így változókat is tudunk használni, hogy dinamikusan megkapjuk a tulajdonságot.

Így ahelyett, hogy már a kódba írnánk az adott tulajdonság nevét, egy változóban stringként tudjuk specifikálni:


const propertyName = 'color';

const console.log(car[propertyName]); //outputs: Red


2. Dinamikus keresés szögletes zárójelek használatával

Nézzünk meg egy példát, ahol ezt felhasználhatjuk. Tegyük fel, hogy egy éttermet vezetünk, és el szeretnénk érni a menüben szereplő tételek árait. Ennek egy módja if/else utasítások használata.

Írjunk egy függvényt, mely átveszi a tétel nevét, és visszatér az árával:


function getPrice(itemName){

  if(itemName === 'burger') {

    return 10;

  } else if(itemName === 'fries') {

    return 3;

  } else if(itemName === 'coleslaw') {

    return 4;

  } else if(itemName === 'coke') {

    return 2;

  } else if(itemName === 'beer') {

    return 5;

  }

}


Noha a fenti megközelítés működik, mégsem ideális, mivel beleírtuk az étlapot a kódunkba. Így, ha a menü változik, újra kell majd írni és telepíteni. Továbbá az étlapunk akár ennél sokkal hosszabb is lehet, és ilyen terjedelmes kódot írni elég nehézkes lenne.

Jobb lenne máshonnan megközelíteni; válasszuk szét az adatokat és a logikát! Az étlap az adatok közt lesz eltárolva, míg a logika fogja ebből kikeresni az árakat.

A menu itt lehet egy objektum, ahol a tulajdonság neve – más néven kulcs – megfelel egy értéknek. Ebben az esetben a kulcs a tétel neve lesz, az érték pedig a tétel ára:


const menu = {

  burger: 10,

  fries: 3,

  coleslaw: 4,

  coke: 2,

  beer: 5

};


Szögletes zárójelek használatával létre tudunk hozni egy függvényt, mely két paramétert vesz át:

  • egy menü objektumot
  • egy stringet a tétel nevével


és visszaadja ennek a tételnek az árát.


const menu = {

  burger: 10,

  fries: 3,

  coleslaw: 4,

  coke: 2,

  beer: 5

};

function getPrice(itemName, menu){

  const itemPrice = menu[itemName];

  return itemPrice;

}

const priceOfBurger = getPrice('burger', menu);

console.log(priceOfBurger); // output: 10


Itt a legfontosabb az adatok és a logika különválasztása. Ebben a példában az adat a kódunkba van írva, de ugyanilyen könnyen jöhetne akár egy adatbázisból vagy API-ból is. Többé már nem kötődik szorosan a keresőlogikához, mely a tétel nevét alakítja át az árrá.


3. Adatstruktúrák és algoritmusok

Informatikában a map egy adatstruktúra, mely a kulcs/érték párokat tárolja, ahol minden kulcs leképez egy értéket. Ezt felhasználhatjuk egy bizonyos kulcshoz tartozó érték megkeresésére, ahogyan a fenti példában is tettük. Van egy kulcsunk, ami egy tétel neve, és kikereshetjük a neki megfelelő árat a menü objektumunk segítségével. Tulajdonképpen egy objektumot használunk egy map adatszerkezet implementálására.

Nézzünk meg egy példát arra, hogy miért lehet szükségünk egy map-re. Tegyük fel, hogy egy könyvesboltot vezetünk, és van egy listánk az árusított könyvekről. Minden könyvnek van egy egyedi azonosítója, amit Nemzetközi Szabványos Könyvazonosítónak (ISBN) nevezünk, és mely 13 számjegyből áll. A könyveinket egy tömbben tároljuk, és keresni szeretnénk közöttük az ISBN segítségével.

Ezt például meg tudjuk oldani úgy, hogy végigmegyünk a tömbön, megnézzük minden könyv ISBN értékét, és ha megegyezik, akkor visszatérünk vele:


const books = [{

  isbn: '978-0099540946',

  author: 'Mikhail Bulgakov',

  title: 'Master and Margarita'

}, {

  isbn: '978-0596517748',

  author: 'Douglas Crockford',

  title: 'JavaScript: The Good Parts'

}, {

  isbn: '978-1593275846',

  author: 'Marijn Haverbeke',

  title: 'Eloquent JavaScript'

}];

function getBookByIsbn(isbn, books){

  for(let i = 0; i < books.length; i++){

    if(books[i].isbn === isbn) {

      return books[i];

    }

  }

}

const myBook = getBookByIsbn('978-1593275846', books);


Ebben a példában ez tökéletesen működik, hiszen csak három könyvünk van (egy kicsi könyvesboltot vezetünk). Azonban ha az Amazont vezetnénk, akkor végigiterálni könyvek millióin elég lassú és számításigényes lenne.

Az Ordo jelölést informatikában algoritmusok hatékonyságának leírására használják. Például, ha a gyűjteményünkben a könyvek száma n, akkor O(n) lesz az iteráció használatának költsége a lehető legrosszabb esetben. Tehát, ha a gyűjteményünkben a könyvek száma megkétszereződik, akkor egy könyv iterációval való megtalálásának költsége is duplázódni fog.

Nézzük, hogy tudnánk az algoritmusunkat hatékonyabbá tenni más adatszerkezet alkalmazásával.

Ahogy azt vitattuk, használhatunk map-et a kulcsnak megfelelő érték megtalálására. Az adatainkat strukturálhatjuk tömb helyett mapként egy objektum használatával. A kulcs az ISBN lesz, az érték pedig az ennek megfelelő könyv objektum:


const books = {

  '978-0099540946':{

    isbn: '978-0099540946',

    author: 'Mikhail Bulgakov',

    title: 'Master and Margarita'

  },

  '978-0596517748': {

    isbn: '978-0596517748',

    author: 'Douglas Crockford',

    title: 'JavaScript: The Good Parts'

  },

  '978-1593275846': {

    isbn: '978-1593275846',

    author: 'Marijn Haverbeke',

    title: 'Eloquent JavaScript'

  }

};

function getBookByIsbn(isbn, books){

  return books[isbn];

}

const myBook = getBookByIsbn('978-1593275846', books);


Iteráció használata helyett így egy egyszerű, ISBN alapú map keresést használhatunk az érték megtalálására. Nem kell már minden egyes objektumnál vizsgálni az ISBN értéket; az értéket közvetlenül a mapből kapjuk meg a kulcs használatával.

Ami a hatékonyságot illeti, a map keresés jelentős javulást mutat fel az iterációhoz képest. Ez azért van, mert a számítást tekintve a map keresésnek konstans költsége van. Ennek jelölése O(1). Nem számít, hogy három, vagy hárommillió könyvünk van, ugyanolyan gyorsan megkapjuk az értéket, ha map keresést alkalmazunk.


4. Összegzés

  • Láttuk, hogy hozzáférhetünk az objektum tulajdonságainak értékeihez pont és szögletes zárójel alkalmazásával is.
  • Megtanultuk hogyan tudunk dinamikusan keresni változók és szögletes zárójelek segítségével.
  • Azt is megtanultuk, hogy egy map adatstruktúra kulcsokat értékekre képez le. A kulcsokat a mapben direkt keresésre tudjuk használni, melyet egy objektum használatával implementálunk.
  • Vetettünk egy pillantást arra, hogyan írjuk le egy algoritmus hatékonyságát ordo jelöléssel. Továbbá láttuk, hogyan javíthatjuk egy keresés hatékonyságát úgy, hogy objektumok tömbjét mappé konvertáljuk és direkt keresést alkalmazunk iteráció helyett.


Szeretnéd letesztelni az újonnan szerzett tudást? Próbáld ki a Crash Override feladatot Codewars-on!


(Forrás)


***

Ha Te is kreatív, kihívásokkal teli mérnök állást keresel minõségi munkáltatónál, jó helyen jársz, mert a Schönherz Bázis épp azért jött létre, hogy Neked segítsen.
Gyere, nézz szét aktuális állásaink között!