JavaScript’te spread operatörü ( … ) genellikle nesne veya dizilerin kopyalarını oluşturmak, birleştirmek veya döndürmek için kullanılır. Spread operatörü, özellikle modern JavaScript (ES6 ve sonrası) üzerinde yaygın olarak kullanılmaktadır. İşte spread operatörünün bazı kullanım alanları:
1. Nesne Kopyalama:
1 2 3 4 |
const originalObj = { key1: 'value1', key2: 'value2' }; const copyObj = { ...originalObj }; // originalObj ve copyObj bağımsızdır |
2. Nesne Birleştirme:
1 2 3 4 5 |
const obj1 = { key1: 'value1' }; const obj2 = { key2: 'value2' }; const mergedObj = { ...obj1, ...obj2 }; // mergedObj, obj1 ve obj2'nin birleşimini içerir |
3. Dizi Kopyalama:
1 2 3 4 |
const originalArray = [1, 2, 3]; const copyArray = [...originalArray]; // originalArray ve copyArray bağımsızdır |
4. Dizi Birleştirme:
1 2 3 4 5 |
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const mergedArray = [...array1, ...array2]; // mergedArray, array1 ve array2'nin birleşimini içerir |
5. Fonksiyon Parametrelerini Toplama:
1 2 3 4 5 6 7 |
function exampleFunction(...args) { console.log(args); } exampleFunction(1, 2, 3, 4); // args: [1, 2, 3, 4] |
6. Nesne Literalleri İçinde Kullanma:
1 2 3 4 |
const obj1 = { key1: 'value1' }; const obj2 = { ...obj1, key2: 'value2' }; // obj2, obj1'in kopyası ve key2 eklenmiş halidir |
7. Destructuring ile Kullanma:
Spread operatörü, destructuring (yapısal ayrıştırma) işlemleri sırasında da kullanılabilir.
1 2 3 4 |
const { key1, ...rest } = { key1: 'value1', key2: 'value2', key3: 'value3' }; // key1: 'value1' // rest: { key2: 'value2', key3: 'value3' } |
8. Default Değerlerle Kullanma:
Spread operatörü, default değerlerle birleştirilerek kullanılabilir.
1 2 3 4 5 6 |
const defaultSettings = { theme: 'light', fontSize: 14 }; const userSettings = { fontSize: 16, showSidebar: true }; const mergedSettings = { ...defaultSettings, ...userSettings }; // mergedSettings: { theme: 'light', fontSize: 16, showSidebar: true } |
9. Array ve Object Rest Spread Operatörleri:
Destructuring veya object rest spread operatörleriyle birlikte kullanılabilir.
1 2 3 4 5 6 7 |
const { key1, ...rest } = { key1: 'value1', key2: 'value2', key3: 'value3' }; console.log(key1); // 'value1' console.log(rest); // { key2: 'value2', key3: 'value3' } const [first, ...restOfArray] = [1, 2, 3, 4, 5]; console.log(first); // 1 console.log(restOfArray); // [2, 3, 4, 5] |
10. Function Arguments Destructuring:
Fonksiyon parametrelerini daha temiz ve açık bir şekilde almak için kullanılabilir.
1 2 3 4 5 6 |
function exampleFunction({ prop1, prop2 }) { console.log(prop1, prop2); } const myObject = { prop1: 'value1', prop2: 'value2' }; exampleFunction({ ...myObject }); |
11. More Examples:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], }; // Spread Operatör olmadan dizi birleştirme const arr = [7, 8, 9]; const badArr1 = [1, 2, arr[0], arr[1], arr[2]]; console.log(badArr1); // Spread ile birleştirme const arr1 = [1, 2]; const arr2 = [7, 8, 9]; const arr3 = [...arr1, ...arr2]; console.log(arr3); console.log(...arr3, ...arr3); // 1 2 7 8 9 console.log(1, 2, 7, 8, 9); // 1 2 7 8 9 // İki diziyi birleştirme const newMenu = [...restaurant.mainMenu, 'Abc']; console.log(newMenu); const allMenus = [...restaurant.mainMenu, ...restaurant.starterMenu]; console.log(allMenus); const name1 = 'UĞUR'; console.log(name1); const arrName = [...name1]; const [a1, a2, a3, a4] = [...name1]; console.log(a1, a2, a3, a4); console.log(...name1); //[a,b,c] const ingredients = [ prompt('Yemek 1='), prompt('Yemek 2='), prompt('Yemek 3='), ]; /* { "yemek1": "a", "yemek2": "b", "yemek3": "c" } */ const ingredientsObject = { yemek1: prompt('Yemek 1='), yemek2: prompt('Yemek 2='), yemek3: prompt('Yemek 3='), }; console.log(...ingredients); console.log(ingredientsObject); |
PERFECT
Teşekkürler…