JavaScript’te “Destructuring Assignment” İşlemi
JavaScript’te “destructuring assignment“, nesne (object) içindeki özellikleri (property) veya dizi (array) içindeki elemanları (element) ayrıştırmak için kullanılan bir özelliktir.
JavaScript’te “Destructuring Assignment”
“Destructuring assignment” kelime anlamı olarak “yapısını bozarak atama” ya da “parçalara ayırarak atama” anlamına gelir.
JavaScript bağlamında bu terim, bir nesnenin ya da dizinin içerisindeki elemanları veya özellikleri tek bir işlemle ayrı ayrı değişkenlere atama işlemine denir. Yani, nesne veya dizinin yapısını “parçalayarak” belirli elemanları veya özellikleri doğrudan değişkenlere “atama” işlemi gerçekleştirmemize olanak tanır. Hem dizilerde hem de nesnelerde nasıl kullanıldığı ayrı başlıklarda inceleyelim.
Dizilerde “Destructuring” İşlemi
Dizilerde “Destructuring assignment” işlemi, bir dizinin elemanlarını doğrudan değişkenlere atamamızı sağlar. Bu özellik, dizilerdeki belirli elemanları kolayca ve hızlı bir şekilde çıkarmamıza yardımcı olur.
Diyelim ki, const numbers = [1, 2, 3]; içerisindeki elemanları bir değişkene atamamız gerekti. Bu işlemi eskiden aşağıdaki gibi yapacaktık:
// eski usül
const numbers = [1, 2, 3];
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];
console.log(a, b, c); // 1, 2, 3“Destructuring assignment” işlemi ile ise aşağıdaki gibi yapabiliriz:
//yeni usül (destructiring)
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1, 2, 3
Her iki örnekte de sonuç aynı olacaktır. Ancak “destructuring” kullanarak, üç ayrı satırda her bir değişkeni ayarlamak yerine, bir satırda tüm değişkenleri ayarlayabiliyoruz. Haliyle bu işlem, daha büyük yapılarda kullanıldığında kodun okunabilirliğini büyük ölçüde artırabilir. Zira “destructuring” ile tek yapmamız gereken köşe parantezler [ ] içine bunları değişken olarak yerleştirmektir. Böylece her seferinde index adını yazmak zorunda kalmayız. Ancak belirtmek isterim ki, değişkenlerin bildirilme sırası önemlidir. Bakınız:
//Dizilerde Destructuring Assignment İşlemi
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c);
//1 2 3Sadece a ve c‘yi istiyorsak, b’yi dışarıda bırakabilir, ancak virgülü (,) korumamız gerekir. Aksi takdirde c, 3 yerine 2 olarak atanır:
//Dizilerde Destructuring Assignment İşlemi
const numbers = [1, 2, 3];
const [a, , c] = numbers;
console.log(a, c);
//1 3Destructuring sırasında varsayılan değerler de belirleyebiliriz. Aşağıdaki örneği inceleyiniz:
const colors = ['red'];
const [first = 'default1', second = 'default2'] = colors;
console.log(first); // red
console.log(second); // default2Yukarıdaki örnekte, colors dizisinde yalnızca bir eleman bulunmaktadır, bu nedenle ikinci değişkene atanacak değer olmadığı için varsayılan değeri kullandık.
Dizinin geri kalan elemanlarını bir dizi olarak almak istiyorsak, pekala “rest” operatörünü (...) kullanabiliriz. Bakınız:
const colors = ['red', 'green', 'blue', 'yellow'];
const [first, ...restColors] = colors;
console.log(first); // red
console.log(restColors); // ['green', 'blue', 'yellow']Bu örneğimizde ise, ilk elemanı first değişkenine atadık ve geri kalan elemanları restColors adlı değişkene bir dizi olarak atadık.
Dizilerde destructuring işlemi, dizi döndüren bir fonksiyonla beraber kullanıldığında işe yarar bir hale gelir. Aşağıdaki örneği inceleyiniz:
//Dizilerde Destructuring Assignment İşlemi
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
}
const [add, subtract, multiply, divide] = calculate(5, 10);
console.log(`Toplama: ${add}`); //15
console.log(`Çıkarma: ${subtract}`); //-5
console.log(`Çarpma: ${multiply}`); //50
console.log(`Bölme: ${divide}`); //0.5
Bu örnekte, dizilerdeki “Destructuring Assignment” özelliğinin nasıl kullanılacağını ve bir fonksiyondan dönen birden çok değeri kolayca nasıl değişkenlere atayabileceğimizi görmüş olduk.
Nesnelerede “Destructuring” İşlemi
Dizilerde olduğu gibi, nesnelerde de bu özellik sayesinde nesnenin özelliklerini (properties) kolayca değişkenlere atayabiliriz. Örneğin, const person = { name: 'John', age: 30 }; şeklinde bir nesnemiz olsun. Nesnemizin sahip olduğu özelliklere erişmek istediğimizde aşağıdaki gibi bir yol izlemekteyiz:
//Nesnelerede Destructuring Assignment İşlemi
const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;
console.log("name: ", name, "age: ", age);
//name: John age: 30Yukarıdaki işlemi “destructuring assignment” ile daha basit bir şekilde yapabiliriz. Tek yapmamız gereken süslü parantezler { } içine bunları değişken olarak yazmaktır. Bu sayede her seferinde nesne adını (bu örnekte person) yazmak zorunda kalmayız. Bakınız:
//Nesnelerede Destructuring Assignment İşlemi
const person = { name: 'John', age: 30 };
const { name, age } = person; //Destructuring
console.log("name: ", name, "age: ", age);
//name: John age: 30Eğer değişkenlerimizin isimlerini nesnede kullanılan özellik adlarından farklı yapmak istersek, değişkenlere atanacak isimleri : karakteriyle özelleştirebiliriz. Aşağıdaki örneği inceleyiniz:
const person = {
name: "John",
age: 30,
occupation: "Engineer"
};
const { name: personName, age: personAge, occupation: personJob } = person;
console.log(personName); // John
console.log(personAge); // 30
console.log(personJob); // EngineerPekala nesne özellikleri için de varsayılan değerler belirleyebiliriz. Örneğin:
const person = {
name: "John",
age: 30
};
const { name = "Bilinmiyor", age = 25, occupation = "Bilinmiyor" } = person;
console.log(name); // John
console.log(age); // 30
console.log(occupation); // BilinmiyorYukarıdaki örneğimizi maddeler halinde analiz edersek;
- Eğer
nameözelliğipersonnesnesinde bulunmazsa, “Bilinmiyor” olarak kabul edilecek. - Eğer
ageözelliğipersonnesnesinde bulunmazsa, 25 olarak kabul edilecek. occupationözelliğipersonnesnesinde bulunmamakta ve bu durumda “Bilinmiyor” olarak kabul ediliyor.
Ancak person nesnesi içerisinde name ve age özellikleri bulunmaktadır. Bu nedenle:
nameiçin “Bilinmiyor” değil, “John” değeri atanır.ageiçin 25 değil, 30 değeri atanır.
Sonuç olarak occupation özelliği person nesnesinde tanımlı değil, bu nedenle “Bilinmiyor” varsayılan değeri atanır.
❗ Fonksiyon parametrelerinde kullanılan destructuring’de fonksiyon çağrısı sırasında fazladan bir değer gönderilirse, bu değerler varsayılan olarak atama yapılmaz ve görmezden gelinir. Örneğin:
//Nesnelerede Destructuring Assignment İşlemi
function printPersonInfo({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const person = { name: 'John', age: 30, city: 'New York' };
printPersonInfo(person); // "Name: John, Age: 30"Yukarıdaki örnekte görüleceği üzere, printPersonInfo fonksiyonuna person nesnesi parametre olarak gönderildi. Her ne kadar person nesnesinde city özelliği de yazılmış olsa da fonksiyonda bu özellik belirtilmemiştir. Bu durumda, fonksiyon sadece name ve age özelliklerini kullanacak ve city özelliğini görmezden gelecektir.
❗ Birden fazla parametre girilmesi gerektiğinde “destructuring” ile birlikte “rest parametresi” kullanabiliriz. Bu sayerde fonksiyonlara değişken sayıda parametre geçmek mümkündür.
//Nesnelerede Destructuring Assignment İşlemi
const sum = ({ num1, num2, ...rest }) => {
let otherNumsSum = 0;
for (let num in rest) {
otherNumsSum += rest[num];
}
return num1 + num2 + otherNumsSum;
};
const numbers = {
num1: 25,
num2: 4,
num3: 17,
num4: 9,
num5: 11
};
const result = sum(numbers);
console.log(result); // 66
Sonuç olarak, JavaScript’te “Destructuring assignment” özelliği, kodun okunabilirliğini artırarak ve geliştirme sürecini hızlandırarak modern web geliştirmede büyük bir kolaylık sağlar.