JavaScript ES6: Moderne Features die u Moet Kennen

1. Let en Const - Nieuwe Variabele Declaraties

ES6 introduceerde twee nieuwe manieren om variabelen te declareren: let en const.

Let

Let biedt block-scoped variabelen, in tegenstelling tot var die function-scoped is:

// ES5
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // Prints 3, 3, 3
}

// ES6
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // Prints 0, 1, 2
}

Const

Const declareert constanten die niet opnieuw toegewezen kunnen worden:

const API_URL = 'https://api.example.com';
const user = { name: 'John', age: 30 };

// Dit werkt niet:
// API_URL = 'https://api2.example.com'; // TypeError

// Dit werkt wel (object properties kunnen nog steeds worden gewijzigd):
user.age = 31;

2. Arrow Functions

Arrow functions bieden een beknoptere syntax voor functies en behouden de this context van de omliggende scope:

// ES5
var multiply = function(a, b) {
    return a * b;
};

// ES6
const multiply = (a, b) => a * b;

// Met meerdere statements
const processUser = (user) => {
    console.log('Processing user:', user.name);
    return user.id;
};

// Array methods met arrow functions
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);

3. Template Literals

Template literals maken string interpolatie en multiline strings mogelijk:

// ES5
var name = 'John';
var age = 30;
var message = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

// ES6
const name = 'John';
const age = 30;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

// Multiline strings
const html = `
    <div class="user-card">
        <h2>${name}</h2>
        <p>Age: ${age}</p>
    </div>
`;

4. Destructuring Assignment

Destructuring maakt het mogelijk om waarden uit arrays en objecten uit te pakken in afzonderlijke variabelen:

Array Destructuring

const colors = ['red', 'green', 'blue'];

// ES5
var firstColor = colors[0];
var secondColor = colors[1];

// ES6
const [first, second, third] = colors;
console.log(first); // 'red'

// Met rest operator
const [primary, ...others] = colors;
console.log(others); // ['green', 'blue']

Object Destructuring

const user = { name: 'John', age: 30, city: 'Brussels' };

// ES5
var name = user.name;
var age = user.age;

// ES6
const { name, age, city } = user;

// Met aliassen
const { name: userName, age: userAge } = user;

// Met default waarden
const { name, age, country = 'Belgium' } = user;

5. Default Parameters

ES6 maakt het mogelijk om default waarden voor functie parameters te definiëren:

// ES5
function greet(name, greeting) {
    name = name || 'Guest';
    greeting = greeting || 'Hello';
    return greeting + ', ' + name + '!';
}

// ES6
function greet(name = 'Guest', greeting = 'Hello') {
    return `${greeting}, ${name}!`;
}

// Arrow function met default parameters
const calculateArea = (width = 1, height = 1) => width * height;

6. Rest en Spread Operators

Rest Operator (...)

Verzamelt meerdere elementen in een array:

// Rest parameters
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

// Rest in destructuring
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // [2, 3, 4, 5]

Spread Operator (...)

Spreidt elementen van een array of object uit:

// Array spread
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Object spread
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, city: 'Brussels' };

// Function calls
const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // 3

7. Enhanced Object Literals

ES6 maakte object literals krachtig en beknopter:

const name = 'John';
const age = 30;

// ES5
var user = {
    name: name,
    age: age,
    greet: function() {
        return 'Hello, ' + this.name;
    }
};

// ES6
const user = {
    name,        // Shorthand property
    age,
    greet() {    // Method shorthand
        return `Hello, ${this.name}`;
    },
    [`dynamic_${Date.now()}`]: 'dynamic value' // Computed property names
};

8. Classes

ES6 introduceerde class syntax als syntactic sugar over JavaScript's prototype-based inheritance:

// ES6 Class
class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
    
    greet() {
        return `Hello, I'm ${this.name}`;
    }
    
    // Static method
    static createGuest() {
        return new User('Guest', '[email protected]');
    }
}

// Inheritance
class AdminUser extends User {
    constructor(name, email, permissions) {
        super(name, email);
        this.permissions = permissions;
    }
    
    hasPermission(permission) {
        return this.permissions.includes(permission);
    }
}

const admin = new AdminUser('Alice', '[email protected]', ['read', 'write']);

9. Modules (Import/Export)

ES6 modules bieden een gestandaardiseerde manier om code te organiseren:

// math.js
export const PI = 3.14159;
export function add(a, b) {
    return a + b;
}
export default function subtract(a, b) {
    return a - b;
}

// main.js
import subtract, { PI, add } from './math.js';
import * as mathUtils from './math.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3
console.log(mathUtils.PI); // 3.14159

10. Promises

Promises bieden een elegante oplossing voor asynchrone programmering:

// Creating a Promise
const fetchUserData = (userId) => {
    return new Promise((resolve, reject) => {
        // Simulate API call
        setTimeout(() => {
            if (userId > 0) {
                resolve({ id: userId, name: 'John' });
            } else {
                reject(new Error('Invalid user ID'));
            }
        }, 1000);
    });
};

// Using Promises
fetchUserData(1)
    .then(user => console.log('User:', user))
    .catch(error => console.error('Error:', error));

// Promise chaining
fetchUserData(1)
    .then(user => `Hello, ${user.name}`)
    .then(greeting => console.log(greeting))
    .catch(error => console.error(error));

11. Map en Set

Nieuwe data structures voor verschillende use cases:

// Map
const userRoles = new Map();
userRoles.set('john', 'admin');
userRoles.set('jane', 'user');

console.log(userRoles.get('john')); // 'admin'
console.log(userRoles.has('jane')); // true

// Set
const uniqueIds = new Set([1, 2, 3, 3, 4, 4]);
console.log(uniqueIds); // Set {1, 2, 3, 4}

uniqueIds.add(5);
console.log(uniqueIds.size); // 5

Best Practices voor ES6

• Gebruik const by default: Alleen let als herherziening nodig is
• Prefer arrow functions: Voor callbacks en korte functies
• Use template literals: Voor string concatenation
• Destructure when possible: Maakt code leesbaarder
• Use modules: Voor betere code organisatie
• Embrace async/await: Voor betere Promise handling (ES2017)

Browser Ondersteuning

De meeste ES6 features hebben uitstekende browser ondersteuning in moderne browsers. Voor oudere browsers kun je transpilers zoals Babel gebruiken om ES6 code te converteren naar ES5.

Conclusie

ES6 heeft JavaScript getransformeerd van een eenvoudige scripting taal naar een krachtige, moderne programmeertaal. Deze features maken code leesbaarder, onderhoudbaarder en krachtiger.

Begin met het integreren van deze features in uw dagelijkse development werk. Start met de basics zoals let/const en arrow functions, en werk geleidelijk toe naar geavanceerdere concepten zoals classes en modules.