Objets JavaScript, crochets carrés et algorithmes

L'un des aspects les plus puissants de JavaScript est de pouvoir faire référence de manière dynamique aux propriétés des objets. Dans cet article, nous verrons comment cela fonctionne et quels avantages cela pourrait nous apporter. Nous allons jeter un rapide coup d'œil à certaines des structures de données utilisées en informatique. De plus, nous examinerons ce que l'on appelle la notation Big O qui est utilisée pour décrire les performances d'un algorithme.

Intro d'objets

Commençons par créer un objet simple représentant une voiture. Chaque objet a quelque chose appelé properties. Une propriété est une variable appartenant à un objet. Notre objet voiture aura trois propriétés: make, modelet color.

Voyons à quoi cela pourrait ressembler:

const car = { make: 'Ford', model: 'Fiesta', color: 'Red'};

Nous pouvons faire référence aux propriétés individuelles d'un objet en utilisant la notation par points. Par exemple, si nous voulions savoir quelle est la couleur de notre voiture, nous pouvons utiliser la notation par points comme celle-ci car.color.

Nous pourrions même le sortir en utilisant console.log:

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

Une autre façon de faire référence à une propriété consiste à utiliser la notation entre crochets:

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

Dans l'exemple ci-dessus, nous utilisons le nom de la propriété sous forme de chaîne entre crochets pour obtenir la valeur correspondant à ce nom de propriété. La chose utile à propos de la notation entre crochets est que nous pouvons également utiliser des variables pour obtenir des propriétés de manière dynamique.

Autrement dit, plutôt que de coder en dur un nom de propriété spécifique, nous pouvons le spécifier sous forme de chaîne dans une variable:

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

Utilisation de la recherche dynamique avec la notation entre crochets

Regardons un exemple où nous pouvons utiliser cela. Disons que nous gérons un restaurant et que nous voulons être en mesure d'obtenir les prix des articles de notre menu. Une façon de procéder consiste à utiliser des if/elseinstructions.

Écrivons une fonction qui acceptera un nom d'article et retournera un prix:

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; }}

Bien que l'approche ci-dessus fonctionne, elle n'est pas idéale. Nous avons codé en dur le menu dans notre code. Maintenant, si notre menu change, nous devrons réécrire notre code et le redéployer. De plus, nous pourrions avoir un menu long et devoir écrire tout ce code serait fastidieux.

Une meilleure approche serait de séparer nos données et notre logique. Les données contiendront notre menu et la logique recherchera les prix à partir de ce menu.

Nous pouvons représenter le menucomme un objet où le nom de la propriété, également appelé clé, correspond à une valeur.

Dans ce cas, la clé sera le nom de l'article et la valeur sera le prix de l'article:

const menu = { burger: 10, fries: 3, coleslaw: 4, coke: 2, beer: 5};

En utilisant la notation entre crochets, nous pouvons créer une fonction qui acceptera deux arguments:

  • un objet de menu
  • une chaîne avec le nom de l'élément

et renvoyer le prix de cet article:

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); // outputs: 10

La chose intéressante à propos de cette approche est que nous avons séparé nos données de notre logique. Dans cet exemple, les données vivent dans notre code, mais elles pourraient tout aussi bien provenir d'une base de données ou d'une API. Il n'est plus étroitement associé à notre logique de recherche qui convertit le nom de l'article en prix de l'article.

Structures de données et algorithmes

Une carte en termes d'informatique est une structure de données qui est une collection de paires clé / valeur où chaque clé correspond à une valeur correspondante. Nous pouvons l'utiliser pour rechercher une valeur qui correspond à une clé spécifique. C'est ce que nous faisons dans l'exemple précédent. Nous avons une clé qui est un nom d'article et nous pouvons rechercher le prix correspondant de cet article en utilisant notre objet de menu. Nous utilisons un objet pour implémenter une structure de données cartographiques.

Regardons un exemple de la raison pour laquelle nous pouvons vouloir utiliser une carte. Disons que nous gérons une librairie et que nous avons une liste de livres. Chaque livre a un identifiant unique appelé International Standard Book Number (ISBN), qui est un numéro à 13 chiffres. Nous stockons nos livres dans un tableau et souhaitons pouvoir les rechercher à l'aide de l'ISBN.

Une façon de faire est de faire une boucle sur le tableau, de vérifier la valeur ISBN de chaque livre et si elle correspond à le renvoyer:

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);

Cela fonctionne bien dans cet exemple car nous n'avons que trois livres (c'est une petite librairie). Cependant, si nous étions Amazon, itérer sur des millions de livres pourrait être très lent et coûteux en calcul.

La notation Big O est utilisée en informatique pour décrire les performances d'un algorithme. Par exemple, si n est le nombre de livres de notre collection, le coût d'utilisation de l'itération pour rechercher un livre dans le pire des cas (le livre que nous recherchons est le dernier de la liste) sera O (n) . Cela signifie que si le nombre de livres de notre collection double, le coût de recherche d'un livre en utilisant l'itération doublera également.

Voyons comment nous pouvons rendre notre algorithme plus efficace en utilisant une structure de données différente.

Comme indiqué, une carte peut être utilisée pour rechercher la valeur qui correspond à une clé. Nous pouvons structurer nos données sous forme de carte au lieu d'un tableau en utilisant un objet.

La clé sera l'ISBN et la valeur sera l'objet livre correspondant:

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);

Au lieu d'utiliser l'itération, nous pouvons maintenant utiliser une simple recherche de carte par ISBN pour obtenir notre valeur. Nous n'avons plus besoin de vérifier la valeur ISBN de chaque objet. Nous obtenons la valeur directement de la carte en utilisant la clé.

En termes de performances, une recherche de carte fournira une énorme amélioration par rapport à l'itération. En effet, la recherche sur la carte a un coût constant en termes de calcul. Cela peut être écrit en utilisant la notation Big O comme O (1) . Peu importe si nous avons trois ou trois millions de livres, nous pouvons obtenir le livre que nous voulons tout aussi rapidement en effectuant une recherche sur la carte à l'aide de la clé ISBN.

résumer

  • We have seen we can access the values of object properties using dot notation and square bracket notation
  • We learned how we can dynamically look up values of property by using variables with square bracket notation
  • We have also learned that a map datastructure maps keys to values. We can use keys to directly look up values in a map which we implement using an object.
  • We had a first glance at how algorithm performance is described using Big O notation. In addition, we saw how we can improve the performance of a search by converting an array of objects into a map and using direct lookup rather than iteration.

Want to test your new found skills? Try the Crash Override exercise on Codewars.

Want to learn how to write web applications using JavaScript? I run Constructor Labs, a 12 week JavaScript coding bootcamp in London. The technologies taught include HMTL, CSS, JavaScript, React, Redux, Node and Postgres. Everything you need to create an entire web app from scratch and get your first job in the industry. Fees are £3,000 and next cohort starts on 29th May. Applications are open now.