ES6 (ECMAScript 2015) ve sonrasında gelen modern JavaScript özellikleri, web geliştirme dünyasını tamamen değiştirdi. Bu yazıda, en önemli özellikleri detaylı olarak inceleyeceğiz.

Modern JavaScript, geliştiricilere daha temiz, okunabilir ve güçlü kod yazma imkanı sunar. ES6+ özellikleri ile birlikte JavaScript artık gerçek bir enterprise-level programlama dili haline geldi.

Arrow Functions

Arrow functions, fonksiyon yazımını çok daha kısa ve okunabilir hale getirir. Bu özellik sayesinde callback fonksiyonları ve event handler'lar çok daha temiz görünür.

// Eski yöntem
function add(a, b) {
    return a + b;
}

// Arrow function
const add = (a, b) => a + b;

// Tek parametre ile
const square = x => x * x;

// Parametresiz
const getRandom = () => Math.random();

// Çok satırlı
const processData = (data) => {
    const filtered = data.filter(item => item.active);
    const mapped = filtered.map(item => item.value);
    return mapped.reduce((sum, val) => sum + val, 0);
};

Arrow functions'ın en büyük avantajı: this bağlamını otomatik olarak yakalamasıdır. Bu sayede callback fonksiyonlarda bind() kullanmaya gerek kalmaz.

Destructuring

Destructuring, objelerden ve dizilerden değerleri kolayca çıkarmamızı sağlar. Bu özellik kod okunabilirliğini önemli ölçüde artırır.

// Object destructuring
const user = { 
    name: 'Ahmet', 
    age: 25, 
    email: 'ahmet@example.com',
    preferences: {
        theme: 'dark',
        language: 'tr'
    }
};

const { name, age, preferences: { theme } } = user;
console.log(name); // 'Ahmet'
console.log(theme); // 'dark'

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

// Function parameters
const processUser = ({ name, age, ...otherProps }) => {
    console.log(`${name} is ${age} years old`);
    return otherProps;
};

Template Literals

Template literals ile string'leri çok daha esnek bir şekilde oluşturabiliriz. Multi-line string'ler ve expression interpolation artık çok kolay.

const name = 'Dünya';
const greeting = `Merhaba, ${name}!`;

// Multi-line strings
const htmlTemplate = `
    

        
${user.name}

        
Age: ${user.age}

        
Email: ${user.email}

    

`;

// Expression interpolation
const price = 29.99;
const discount = 0.1;
const finalPrice = `Final Price: $${(price * (1 - discount)).toFixed(2)}`;

// Tagged templates
const highlight = (strings, ...values) => {
    return strings.reduce((result, str, i) => {
        return result + str + (values[i] ? `${values[i]}` : '');
    }, '');
};

const message = highlight`Hello ${name}, you have ${unreadCount} unread messages.`;

Modules

ES6 modules ile kod organizasyonu çok daha iyi hale geldi. Artık her dosya kendi scope'una sahip ve sadece export edilen öğeler import edilebilir.

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const PI = 3.14159;

// Default export
export default class Calculator {
    constructor() {
        this.history = [];
    }
    
    calculate(operation, ...args) {
        const result = operation(...args);
        this.history.push({ operation: operation.name, args, result });
        return result;
    }
}

// main.js
import { add, multiply, PI } from './math.js';
import Calculator from './math.js';

const calc = new Calculator();
const sum = calc.calculate(add, 5, 3);
console.log(`5 + 3 = ${sum}`);

Spread ve Rest Operatörleri

Spread operatörü (...) ile dizileri ve objeleri kolayca kopyalayabilir, birleştirebilir ve manipüle edebiliriz.

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

// Object spreading
const obj1 = { name: 'Ahmet', age: 25 };
const obj2 = { ...obj1, age: 26, city: 'İstanbul' }; // { name: 'Ahmet', age: 26, city: 'İstanbul' }

// Function arguments
const max = Math.max(...[1, 2, 3, 4, 5]);

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

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

// Destructuring with rest
const [first, second, ...remaining] = [1, 2, 3, 4, 5];
console.log(remaining); // [3, 4, 5]

Default Parameters

Fonksiyon parametrelerine varsayılan değerler atayabiliriz. Bu özellik sayesinde fonksiyon çağrılarında eksik parametreler için güvenli varsayılan değerler kullanabiliriz.

function greet(name = 'Misafir', greeting = 'Merhaba') {
    return `${greeting}, ${name}!`;
}

greet(); // "Merhaba, Misafir!"
greet('Ahmet'); // "Merhaba, Ahmet!"
greet('Ahmet', 'Selam'); // "Selam, Ahmet!"

// Complex default values
const createUser = (name, options = {}) => {
    const {
        age = 18,
        email = `${name.toLowerCase()}@example.com`,
        isActive = true
    } = options;
    
    return { name, age, email, isActive };
};

const user1 = createUser('Ahmet');
const user2 = createUser('Fatma', { age: 25, isActive: false });

Classes

ES6 ile birlikte JavaScript'e class syntax'ı geldi. Bu sayede object-oriented programming çok daha temiz ve anlaşılır hale geldi.

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
        this.createdAt = new Date();
    }
    
    get displayName() {
        return `${this.name} (${this.email})`;
    }
    
    set displayName(value) {
        const [name, email] = value.split(' (');
        this.name = name;
        this.email = email.replace(')', '');
    }
    
    greet() {
        return `Merhaba, ${this.name}!`;
    }
    
    static createGuest() {
        return new User('Misafir', 'guest@example.com');
    }
}

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('Admin', 'admin@example.com', ['read', 'write', 'delete']);

Promises ve Async/Await

Modern JavaScript'te asenkron işlemleri yönetmek çok daha kolay. Promises ve async/await ile callback hell'den kurtulduk.

// Promise example
const fetchUserData = (userId) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const user = { id: userId, name: 'Ahmet', age: 25 };
            resolve(user);
        }, 1000);
    });
};

// Async/Await
async function getUserInfo(userId) {
    try {
        const user = await fetchUserData(userId);
        const posts = await fetchUserPosts(userId);
        return { user, posts };
    } catch (error) {
        console.error('Error fetching user data:', error);
        throw error;
    }
}

// Promise.all for parallel execution
const fetchMultipleUsers = async (userIds) => {
    const promises = userIds.map(id => fetchUserData(id));
    const users = await Promise.all(promises);
    return users;
};

Sonuç

ES6+ özellikleri JavaScript'i modern ve güçlü bir programlama dili haline getirdi. Bu özellikler sayesinde:

  • Daha temiz ve okunabilir kod yazabiliyoruz
  • Daha az hata yapıyoruz
  • Kod tekrarını azaltıyoruz
  • Daha iyi performans elde ediyoruz
  • Modern web standartlarına uygun geliştirme yapabiliyoruz

Bu özellikleri öğrenmek ve kullanmak, modern web geliştirme için kesinlikle gerekli. Projelerinizde bu özellikleri kullanmaya başlayarak kod kalitenizi artırabilirsiniz.

JavaScript ES6 Modern Web
Blog'a Dön