Introduction

Ce weekend, j’ai fait un Kata en JS.
Voici une liste de snippets utiles à connaître pour coder proprement son app.

Tips

Calculer le nombre propriétés que possède un objet

1
2
3
4
5
6
const fleur = {
couleur: 'rouge',
nom: 'rose'
}

Object.keys(fleurs).length

Trier un tableau d’objets en fonction de certaines propriétés

1
2
3
4
5
6
7
8
9
10
11
const liste = [
{ couleur: 'blanc', taille: 'XXL' },
{ couleur: 'rouge', taille: 'XL' },
{ couleur: 'noir', taille: 'M' }
]

// Trier par ordre alphabétique le nom des couleurs: blanc, noir, rouge.
liste.sort((a, b) => (a.couleur > b.couleur) ? 1 : -1)

//La fonction de callback pourrait trier sur une seconde propriété, pour gérer le cas où 2 couleurs seraient identiques:
list.sort((a, b) => (a.couleur > b.couleur) ? 1 : (a.couleur === b.couleur) ? ((a.taille > b.taille) ? 1 : -1) : -1 )

Comment définir des valeurs par défaut pour des fonctions

Depuis ES6 en 2015, il est possible de définir des valeurs par défaut aux paramètres des fonctions.

1
2
3
const doSomething = (param1 = 'test', param2 = 'test2') => {

}

Si on devait passer un objet d’options à une fonction, voici le code pour gérer des options undefined:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const colorize = (options) => {
if (!options) {
options = {}
}

const color = ('color' in options) ? options.color : 'yellow'
...
}

// Avec le destructuring, c'est beaucoup plus simple:
const colorize = ({ color = 'yellow' }) => {
...
}

// Si pas l'objet n'est passé en appelant la fonction colorize on peut assigner un objet vide par défaut:
const spin = ({ color = 'yellow' } = {}) => {
...
}

Vider un tableau

1
2
3
4
5
6
7
// Option 1
const list = ['a', 'b', 'c']
list.length = 0

// Option 2 en utilisant let plutôt que const
let list = ['a', 'b', 'c']
list = []

Encoder une URL

Pour respecter le standard RFC 3986 (http://tools.ietf.org/html/rfc3986), il y a la fonction suivante:

1
2
3
4
5
const fixedEncodeURIComponent = (str) => {
return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
return '%' + c.charCodeAt(0).toString(16)
})
}

Fusionner 2 objets

ES6 en 2015 a introduit le Spread Operator, qui permet de fusionner facilement 2 simples objets:

1
2
3
4
5
6
7
8
9
const object1 = {
name: 'Flavio'
}

const object2 = {
age: 35
}

const object3 = {...object1, ...object2 }

Si les 2 objets ont des propriétés ayant des noms identiques, le 2ème objets surchargera le premier.
Dans ce cas, il pourra utiliser la méthode merge() de lodash qui fera un deep merge.