JavaScript'te ES6+ Yenilikleri: Let, Const, Arrow Functions ve Daha Fazlası

JavaScript, web geliştirmenin temel taşlarından biridir ve zamanla gelişerek daha modern ve okunabilir bir yapıya kavumuştur. ECMAScript 6 (ES6) ile birlikte gelen yenilikler, geliştiricilere daha temiz, etkili ve bakımı kolay kodlar yazma imkânı sunmuştur. Bu yazıda, ES6 ve sonrasında gelen önemli yenilikleri detaylıca inceleyeceğiz.

1. let ve const

var ile Yaşanan Sorunlar

ES6 öncesinde değii\u015ken tanımlamak için var kullanılıyordu. Ancak, var fonksiyon kapsamına sahiptir ve blok kapsamını desteklemez. Bu durum, beklenmeyen hatalara yol açabilir.

if (true) {
    var x = 10;
}
console.log(x); // 10

Yukarıdaki örnekte, x değişkeni blok dışında da erişilebilir durumda.

let Kullanımı

let, blok kapsamına sahip bir değişken tanımlama yöntemidir.

if (true) {
    let y = 20;
}
console.log(y); // ReferenceError: y is not defined

Bu sayede, değişkenler sadece tanımlandığı blok içerisinde erişilebilir.

const Kullanımı

const, sabit değişkenler tanımlamak için kullanılır. Bir const değişkenin değeri sonradan değiştirilemez.

const pi = 3.14159;
// pi = 3.14; // TypeError: Assignment to constant variable.

Ancak, const ile tanımlanan nesne veya dizilerin içerikleri değiştirilebilir.

const arr = [1, 2, 3];
arr.push(4); // Geçerli
console.log(arr); // [1, 2, 3, 4]

2. Arrow Functions (Ok Fonksiyonlar)

Arrow functions, daha kısa ve okunabilir fonksiyon tanımları yapmayı sağlar.

// Geleneksel Fonksiyon
function sayHello(name) {
    return `Hello, ${name}!`;
}

// Arrow Function
const sayHello = (name) => `Hello, ${name}!`;

console.log(sayHello("Ali")); // Hello, Ali!

this Bağlamı

Arrow fonksiyonlar, kendi this bağlamını kullanmaz, dış bağlamı kullanır. Bu, özellikle callback fonksiyonlarda kullanışılıdır.

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}

const p = new Person();

3. Template Literals (Template İfadeler)

Backtick (`) kullanarak daha okunabilir stringler oluşturabilir ve çok satırlı stringler yazabiliriz.

const name = "Ayşe";
const message = `Merhaba, ${name}!`;
console.log(message); // Merhaba, Ayşe!

4. Destructuring (Yapı Bozumu)

Diziler ve nesnelerden değerleri kolayca çekmek için kullanılır.

const person = { name: "Ali", age: 25 };
const { name, age } = person;
console.log(name); // Ali
console.log(age);  // 25

const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // 1
console.log(second); // 2

5. Spread ve Rest Operatörleri

Spread Operatörü (...)

Bir diziyi veya nesneyi kopyalamak veya birleştirmek için kullanılır.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

Rest Operatörü (...)

Fonksiyonlarda belirsiz sayıda argüman almak için kullanılır.

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6

6. Default Parameters (Varsayılan Parametreler)

Fonksiyonlara varsayılan değerler atanabilir.

function greet(name = "Ziyaretçi") {
    return `Merhaba, ${name}!`;
}
console.log(greet()); // Merhaba, Ziyaretçi!

7. Modules (Modüler)

Kodları modüler haline getirerek daha organize ve bakımı kolay hale getirebiliriz.

module.js

export const greet = (name) => `Merhaba, ${name}!`;

app.js

import { greet } from './module.js';
console.log(greet("Ali"));

Sonuç

ES6 ve sonrasında gelen yenilikler, JavaScript kodunu daha okunabilir, daha güvenli ve daha bakılabilir hale getirir. Bu yenilikleri etkin bir şekilde kullanarak, daha modern ve etkili uygulamalar geliştirebilirsiniz.

Sorularınız veya katkılarınız için yorum bölümünü kullanabilirsiniz!