9 Javascript one-liners om mee te starten.

Deze makkelijke one-liners zijn een leuke manier om met Javascript aan de slag te gaan. In een paar minuten heb je ze in de vingers.

Met Javascript kan je fantastische dingen doen. Van complexe frameworks tot API's aanspreken, er is zoveel om te leren. Maar je kan ook al straffe dingen doen met maar één eenvoudige lijn code. Bekijk zeker deze 9 JavaScript one-liners maar eens!

1. Shuffle een reeks getallen

Een super eenvoudige functie die een reeks van getallen neemt, door elkaar schudt en dan terugstuurt.

Kopieer de code hieronder

const shuffleArray = (arr) => arr.slice().sort(() => Math.random() - 0.5)
  
console.log(shuffleArray([1, 2, 3, 4, 5, 6]))
// Result: [6, 2, 3, 1, 5, 4]

2. Gooi een dobbelsteen

Nog een stukje Javascript dat de `random` methode gebruikt is deze code waarmee je een virtuele dobbelsteen kan gooien waarna je een getal terugkrijgt tussen 1 en 6.

Kopieer de code hieronder

const throwdice = () => ~~(Math.random() * 6) + 1;

// Examples
throwdice();    // Result: 4
throwdice();    // Result: 1
throwdice();    // Result: 6

3. Detecteer Dark Mode

Wil je bepaalde delen van je website of applicatie aanpassen aan de Dark Mode instellingen van de gebruiker? Probeer dan dit stukje Javascript eens:

Kopieer de code hieronder

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

// Result: True or False

4. Check of de code in de browser wordt gebruikt

Zoals je wellicht weet kan Javascript op veel plaatsen ingezet worden. Op servers, terminals, of zoals meestal, in je web-browser. Als je een bepaald deel van je code ENKEL wil toepassen als de code in de browser wordt gebruikt, dan kan je onderstaande code hiervoor gebruiken.

Kopieer de code hieronder

const isBrowser = typeof window === 'object' && typeof document === 'object';

// Result: True or False

5. De waarde van een Cookie ophalen

🍪 Cookies! 🍪

Je vind ze op praktisch op iedere website en je kan bijna niet meer op het web zonder dat je ze tegenkomt. Als je de waarde van een specifieke cookie wilt ophalen, waarvan je bijvoorbeeld de naam kent, dan kan je onderstaande functie gebruiken:

Kopieer de code hieronder

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Result: GA1.2.821239271.5181504719

cookie('lang');
// Result: "en"

6. Maak een overzicht van de laatste 7 dagen

Een cool trucje dat je een overzicht geeft van de laatste 7 dagen geeft, inclusief 'vandaag'.

Je kan de - wisselen door + en dan krijg je een overzicht voor de volgende 7 dagen.

Kopieer de code hieronder

const pastSevenDays = [...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));

console.log(pastSevenDays);
// Result: [Array with 7 Date Objects]

const comingSevenDays = [...Array(7).keys()].map(days => new Date(Date.now() + 86400000 * days));

console.log(comingSevenDays);
// Result: [Array with 7 Date Objects]

7. Verwissel twee variabelen

Dit is een heel eenvoudig voorbeeld waar ik nog maar een paar jaar geleden achter kwam. Je kan blijkbaar de waarde van 2 variabelen wisselen door dit stukje eenvoudige code:

Kopieer de code hieronder

let a = 1
let b = 2

[a, b] = [b, a];

console.log(a)
// Result: 2

console.log(b)
// Result: 1

8. Converteer een string naar een URL-slug

Om van een string naar een URL-slug te gaan kan een beetje tricky zijn. We kunnen dit oplossen door een RegEx te gebruiken die speciale characters verwijderd en “—” toevoegt tussen de woorden.

Probeer het maar!

Kopieer de code hieronder

const slugify = string => string.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, '');

// Example
slugify('Episode IV: A New Hope');
// Result:'episode-iv-a-new-hope

9. Genereer een willekeurige Hex kleurwaarde

Je weet maar nooit wanneer je eens een willekeurige kleur nodig kan hebben.

Met de onderstaande Javascript one-liner kan je alvast aan de slag om een willekeurige HEX kleurwaarde te genereren.

Kopieer de code hieronder

const randomHexColor = () => '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).slice(1, 6);

randomHexColor() // Result: #fec150
randomHexColor() // Result: #abba22
randomHexColor() // Result: #304060

vertaling en adaptatie van een post op Medium door Twan Mulder