Destructuring, Spread, Rest — JavaScript: Başlangıçtan İleri Seviyeye

Destructuring (yapı bozma)

Bir obje veya diziden değerleri tek satırda çıkarma.

Obje destructuring

const user = { name: "Furkan", age: 28, role: "admin" };
 
const { name, age } = user;
// name = "Furkan", age = 28

Yeniden adlandırma

const { name: ad, age: yas } = user;
// ad = "Furkan", yas = 28

Varsayılan değer

const { name, country = "TR" } = user;
// country anahtarı yoksa "TR"

İç içe destructuring

const user = { name: "F", address: { city: "IST", zip: "34" } };
 
const { address: { city, zip } } = user;
// city = "IST", zip = "34"

Dizi destructuring

const colors = ["kırmızı", "mavi", "yeşil"];
const [first, second] = colors;
// first = "kırmızı", second = "mavi"
 
// Bazılarını atla
const [, , third] = colors;
// third = "yeşil"

Fonksiyon parametrelerinde

Yaygın bir pattern:

function greet({ name, age = 0 }) {
  return `${name} (${age})`;
}
 
greet({ name: "Furkan", age: 28 });

Spread (`...`)

İçeriği "yayar". 3 yerde kullanılır.

Diziyi yayma

const a = [1, 2, 3];
const b = [0, ...a, 4]; // [0, 1, 2, 3, 4]
 
const copy = [...a]; // sığ kopya

Objeyi yayma

const a = { x: 1, y: 2 };
const b = { ...a, z: 3 }; // {x:1, y:2, z:3}
 
// Override
const c = { ...a, y: 99 }; // {x:1, y:99}  ← sonuncu kazanır

Fonksiyon argümanı olarak

function topla(a, b, c) { return a + b + c; }
const args = [1, 2, 3];
topla(...args); // 6
 
Math.max(...[5, 9, 2, 7]); // 9

Rest (`...`)

Görsel olarak spread'le aynı, anlamı tersi: birden çok şeyi tek bir yapıda toplar.

Fonksiyon parametresinde

function topla(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
 
topla(1, 2, 3, 4); // 10

Destructuring'de

const [first, ...rest] = [1, 2, 3, 4];
// first = 1, rest = [2, 3, 4]
 
const { a, ...others } = { a: 1, b: 2, c: 3 };
// a = 1, others = { b: 2, c: 3 }

💬Spread vs Rest

Aynı ... ama bağlama göre anlamı değişir:

Spread: bir şeyi parçalara ayırıp dağıtır
Rest: parçaları toplar, bir yapı oluşturur

İmzaya bak: f(...args) çağrıda spread, function f(...args) tanımda rest.

Kombo örnekleri

// Bir property'yi kaldır
const { password, ...safe } = user;
// safe = user'ın password'süz hali
 
// Bir array'in başını/sonunu al
const [head, ...tail] = list;
const init = list.slice(0, -1);
const last = list.at(-1);
 
// Function args'ı yönlendir
function logla(...args) {
  console.log(...args);
}