20 faits méconnus en JavaScript

Salut la team des dev-ninjas ! Aujourd'hui, on va explorer les recoins obscurs de JavaScript et découvrir 20 faits qui vont vous faire dire "Wahou, je ne savais pas ça !" Attachez vos ceintures, ça va secouer vos neurones !

1. Le + qui se prend pour un -

Le + devant une chaîne la convertit en nombre. C'est comme un mini parseInt() ninja !

console.log(+'42'); // Affiche: 42 (nombre)
console.log(typeof +'42'); // Affiche: "number"

2. Le || paresseux mais malin

L'opérateur || est un pro pour définir des valeurs par défaut.

Javascript
function greet(name) {
    name = name || "Visiteur";
    console.log(`Bonjour ${name} !`);
}
greet(); // Affiche: "Bonjour Visiteur !"

3. La danse du NaN

NaN est le seul rebelle qui n'est pas égal à lui-même.

console.log(NaN === NaN); // Affiche: false
console.log(isNaN(NaN));  // Affiche: true

4. Le mystère du tableau vide

Un tableau vide est considéré comme "truthy". Étonnant, non ?

if ([]) {
    console.log("Je suis vide, mais je suis true !");
}

5. L'addition qui fait des siennes

L'addition de tableaux les transforme en chaînes. JavaScript, tu nous surprendras toujours !

console.log([1,2,3] + [4,5,6]); // Affiche: "1,2,34,5,6"

6. Le piège du this dans les arrow functions

Dans une fonction fléchée, 'this' se réfère au contexte englobant. Attention aux pièges !

const obj = {
    name: "Objet",
    sayHi: () => console.log(`Hi, I'm ${this.name}`)
};
obj.sayHi(); // Affiche: "Hi, I'm undefined"

7. Le comma operator, le méconnu

L'opérateur virgule évalue chaque expression et renvoie la dernière. Pratique pour les one-liners !

let x = (1, 2, 3);
console.log(x); // Affiche: 3

8. Le Label, l'incompris

JavaScript a des labels. Ils existent, mais on les utilise rarement (ouf !).

outerloop:
for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerloop;
        }
        console.log(i, j);
    }
}

9. Le void qui ne fait rien

L'opérateur void évalue une expression et renvoie undefined. Parfait pour les liens JavaScript !

console.log(void 0); // Affiche: undefined
Clic sans effet

10. Le with banni

L'instruction 'with' existe, mais elle est déconseillée. Un vestige du passé !

// À éviter comme la peste !
with (Math) {
    console.log(PI);
    console.log(cos(0));
}

11. Le destructuring magic

Le destructuring permet d'extraire des données comme par magie !

const [a, , b] = [1, 2, 3];
console.log(a, b); // Affiche: 1 3

12. Les template literals multilignes

Les backticks permettent de créer des chaînes multilignes sans concat !

const multiline = `
    Ceci est une chaîne
    sur plusieurs lignes
    sans concat !
`;
console.log(multiline);

13. Le spread operator, l'as du clonage

Le spread operator (...) clone les tableaux et objets en un clin d'œil !

const original = [1, 2, 3];
const copie = [...original];
console.log(copie); // Affiche: [1, 2, 3]

14. Les getters et setters furtifs

Les getters et setters vous permettent d'intercepter l'accès aux propriétés. Ninja style !

const obj = {
    _name: 'John',
    get name() {
        return this._name.toUpperCase();
    },
    set name(value) {
        this._name = value.trim();
    }
};
obj.name = '  Jane  ';
console.log(obj.name); // Affiche: "JANE"

15. Les Proxies, les espions du code

Les Proxies permettent de créer un comportement personnalisé pour les opérations fondamentales.

const handler = {
    get: (obj, prop) => prop in obj ? obj[prop] : 'Propriété non trouvée'
};
const p = new Proxy({}, handler);
p.a = 1;
console.log(p.a, p.b); // Affiche: 1 "Propriété non trouvée"

16. Le Symbol, l'identifiant unique

Symbol crée des identifiants uniques. Parfait pour les propriétés "privées" !

const id = Symbol('id');
const obj = {
    [id]: 42
};
console.log(obj[id]); // Affiche: 42

17. Les générateurs, la pause intelligente

Les générateurs permettent de mettre en pause et reprendre l'exécution d'une fonction.

function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = numberGenerator();
console.log(gen.next().value); // Affiche: 1
console.log(gen.next().value); // Affiche: 2

18. L'opérateur de chaînage optionnel

L'opérateur ?. permet d'accéder aux propriétés sans craindre les erreurs.

const user = {};
console.log(user?.address?.street); // Affiche: undefined

19. La fusion d'objets avec Object.assign()

Object.assign() fusionne des objets comme un pro !

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = Object.assign(target, source);
console.log(result); // Affiche: { a: 1, b: 3, c: 4 }

20. Les fonctions auto-invoquées (IIFE)

Les IIFE s'exécutent immédiatement après leur définition. Parfait pour l'encapsulation !

(function() {
    let privateVar = 'Je suis privé';
    console.log(privateVar);
})();

Pro-tip : Maîtriser ces 20 techniques va non seulement booster vos sites, mais aussi vous faire passer pour un vrai sorcier du JavaScript lors de vos prochains entretiens !

Et voilà, mes apprentis JS ! Avec ces 20 techniques en poche, vous êtes parés pour coder comme des dieux et impressionner vos collègues. N'oubliez pas : en JavaScript, la seule limite, c'est votre imagination (et peut-être la patience de votre navigateur) ! 😉

Allez, à vos claviers, et que la force du code soit avec vous !

Coding Team