Avec l'arrivée d'ES6 viennent une nouvelle syntaxe et de nouvelles fonctionnalités pour écrire mieux et moins !

Je vais en faire une petite série sur l'ES6, je suis vraiiiiment amoureux !

Écrire moins de code ne veut pas dire travailler moins, mais travailler plus intelligemment.

Variable scopé par bloc : let

Nos variables en Javascript sont connues pour n'avoir aucune limite sur les block scope.

Par exemple, lorsqu'on écrit :

var maVariable = "Allo ! Tu veux de la poutine ?";

// petit block scope
{
  var maVariable = 420; // parce que c'est "lit"
  console.log(maVariable);
}

console.log(maVariable);

D'après toi, quel va être le résultat ?

Simple ! La console va nous sortir :

> 420
> 420

Alors qu'avec let, on a la possibilité d'avoir une variable scopé dans son propre bloc de code donc scopé !

Avec le même exemple en utilisant let :

var maVariable = "Allo ! Tu veux de la poutine ?";

// petit block scope
{
  let maVariable = 420; // parce que c'est "lit"
  console.log(maVariable);
}
console.log(maVariable);

Notre console va nous sortir :

> 420
> "Allo ! Tu veux de la poutine ?"

let peut être réassigné et prendre une nouvelle valeur, comme var finalement, c'est donc une variable mutable.

C'est cool mais comment le mettre en pratique ?

Faire des for avec un let scopé

Rien de plus chiant d'avoir un collaborateur qui te vole un nom de variable lorsque les variables ne sont pas bien scopé ! Adieu frustration de relire ton fichier pour te demander ce qui se passe !

for (let i = 0; i < 10; i++) {
	console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
}
console.log(i); // ReferenceError: i is not defined

Dans un cas avec var i = 0, le code n'aurait eu aucun plantage, let est donc bien scopé !

C'est quand même plus pratique, non ?

Variable scopé par bloc : const

Là où let est mutable, const est immutable maiiiis pas complètement.

Ce mot clef est bien plus puissant que var :

  • Une variable const déclaré DOIT ÊTRE assignée par une valeur lors de sa création
  • Une variable const est immuable. Vous ne pouvez pas changer la valeur une fois créée.

Une variable est comme un pointeur vers une valeur, const empêche juste d'être réassigné par une autre valeur.

On pourrait dire que cela le rend immuable, MAIS la valeur ne l'est pas !

const tableau = [4, 8, 15, 16, 23, 42]; // Share l'article si tu as compris la référence :p

tableau.push(420); // C'est correct, ça marche !

tableau = ['foo', 'bar'] // Ooops, on a : TypeError: Assignment to constant variable.

Il faut prendre conscience que lorsqu'un tableau ou objet est assigné à const, il peut être mutable.

A contrario, les types number, boolean et string sont immutables. Si vous utilisez const, ces types sont intrinsèquement immutables !

Pourquoi const est mieux ?

Tout simplement qu'en ayant moins de possibilités, d'effet de bords et de cas, le code devient plus simple à lire et à comprendre.

const variableImmutable = "Mangez des pommes, c'est bon pour la santé";

// ...Masse de code...

console.log("Votez pour moi.", variableImmutable);

/*
	On sait que la variable est **safe** d'utilisation et qu'on limite les erreurs.
	Simplement parce que ***const*** ne peut être réassigné, on est tranquille d'esprit.
*/

Cas d'une valeur par défaut

Dans certains cas, on aimerait assigner une valeur par défaut à const mais sans réassigner. Par exemple, lors du déclenchement d'une fonction avec des paramètres dont certains pourraient être absents !

// ❌ Nope, on ne fait pas ça !
function leroyJenkins(params) {
	let sword = params.sword;
	if (!params.sword) {
		sword = function() {
			console.log("Je donne un coups");
		}
	}
	sword();
}


// ✅ C'est bien mieux !
function leroyJenkins(params) {
	const sword = params.sword || () => console.log("Je donne un coups");  // oui, c'est une arrow function, on voit ça en bas
	sword();
}

Ou encore avec une condition :

// ❌ Nope, on ne fait pas ça !
function leroyJenkins(params) {
	let sword;
	if (params.conditionTrue) {
		sword = function() {
			console.log("Je donne un coups");
		}
	} else {
		sword = function() {
			console.log("Lol nope");
		}
	}
	sword();
}


// ✅ C'est bien mieux !
function leroyJenkins(params) {
	const sword = params.conditionTrue ? () => console.log("Je donne un coups") : () => console.log("Lol nope");
	sword();
}

Aaah ! C'est mieux non ?

Comme quoi, on peut écrire mieux avec peu !

Je me sens bien après avoir écrit ça !

Allez, on se voit sur la suite !

function userInteraction(article) {

	const { user, david } = article.humans;

	if (user.likeArticle) {
		if (!user.isFanFacebookPage) {
			user.likeFacebookPage();
		}
		user.shareFacebook();
		user.shareTwitter();
		user.shareLinkedin();
		david.notifyThankYou();
	} else {
		david.noOffence();
		david.notifyStillLoveYou();
	}

}

userInteraction(this);
Partages ! 😉