JavaScript değer atamasının farklı kullanımları

Normal JavaScript koduna baktığınızda, atamaların her yerde olduğunu görürsünüz.

Nesne özelliklerini okumak ve dizi öğelerine erişmek sık yapılan işlemlerdir. bu işlemleri çok daha kolay ve özlü hale getirir.

Bu yazıda, temel kullanımın ötesinde, JavaScript’te değer atamasının 5 ilginç kullanımını anlatacağım.

Değişkenleri değiştirme

2 değişkeni değiştirmenin olağan yolu, ek bir geçici değişken gerektirir. En basit bir senaryo görelim:

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp, a değerini tutan geçici bir değişkendir. Daha sonra a’ya b değeri atanır ve sonuç olarak b’ye temp değeri atanır.

Yıkıcı atama ile, herhangi bir geçici değişkene ihtiyaç duymadan değişkenlerin değiştirilmesini basitleştirebiliriz:

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

[a, b] = [b, a] bir yıkım atamasıdır. Sağ tarafta bir dizi [b, a], yani [2, 1] oluşturulur. Bu dizi 2’nin ilk öğesi a’ya, ikinci öğe 1 ise b’ye atanır.

Yine de geçici bir dizi oluştursanız da, yıkıcı atamayı kullanarak değişkenleri değiştirmek daha özlüdür.

Aynı anda 2’den fazla değişkeni değiştirebilirsiniz. Şunu deneyelim:

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

İstediğiniz kadar değişken değiştirebilirsiniz! Bununla birlikte, 2 değişkeni değiştirmek en yaygın senaryodur.

Dizi öğesine erişim

Potansiyel olarak boş olabilecek bir dizi öğeniz var. Dizinin birinci, ikinci veya n. öğesine erişmek istiyorsunuz, ancak öğe yoksa varsayılan bir değer almalı.

Normalde dizinin uzunluk özelliğini kullanırsınız:

const renkler = [];

let ilkRenk = 'beyaz';
if (renkler.length > 0) {
 ilkRenk = renkler[0];
}

ilkRenk; // => 'beyaz'

Neyse ki, dizi yok etme aynı şekilde daha kısa elde etmenize yardımcı olur, şöyle ki:

const renkler = [];
const [ilkRenk = 'beyaz'] = renkler;

ilkRenk; // => 'beyaz'

const [ilkRenk = 'beyaz'] = renkler yok etme, renkler dizisinin ilk öğesini ilkRenk değişkenine atar. Dizinin ilk elemanı olarak öğesi yoksa, ‘beyaz’ varsayılan değeri atanır.

Ama çok daha fazla esneklik var. Yalnızca ikinci öğeye erişmek istiyorsanız, bu da mümkündür:

const renkler = [];
const [, ikinciRenk = 'siyah'] = renkler;

ikinciRenk; // => 'siyah'

Yıkmanın sol tarafındaki virgüle dikkat edin: bu, ilk öğenin yok sayıldığı anlamına gelir. ikinciRenk, renkler dizisinden dizin 1’deki öğeyle atanır.

Değiştirilemez Özellikler (Immutable)

React’i ve daha sonra Redux’u kullanmaya başladığımda, değişmezliğe saygı duyan kod yazmak zorunda kaldım. Başlangıçta bazı zorluklar yaşasam da sonradan faydasını gördüm: Tek yönlü veri akışıyla uğraşmak daha kolay.

Değişmezlik, nesnelerin mutasyona uğramasını yasaklar. Neyse ki, yıkım, bazı işlemleri değişmez bir şekilde kolayca gerçekleştirmenize yardımcı olur.

… rest işleciyle birlikte tahribat, bir dizinin başlangıcındaki öğeleri kaldırır:

const sayilar = [1, 2, 3];

const [, ...birinciHaric] = sayilar;

birinciHaric; // => [2, 3]
sayilar; // => [1, 2, 3]

[, …birinciHaric] = sayilar, sayılardan ancak ilki hariç öğeleri içeren yeni bir dizis oluşturur.

sayılar dizisi mutasyona uğramaz, bu da işlemi değişmez tutar.

Aynı değişmez şekilde, nesnelerden özellikleri silebilirsiniz. Büyük nesneden bir özelliğini silmeye çalışalım:

const obj = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...others } = obj;

others; // => { bar: 'value Bar' }
obj; // => { foo: 'value Foo', bar: 'value Bar' }

Nesne rest operatörü ile birlikte tahribat ataması, tüm özellikleri objeden sadece foo olmadan yeni bir nesne oluşturur.

Yinelenebilirleri yok etme (iterables)

Önceki kısımlarda dizilere yıkım işlemi uygulanmıştı. Ancak yinelenebilir protokolü uygulayan herhangi bir nesneyi yok edebilirsiniz.

Birçok tür ve nesne yinelenebilir: diziler, objeler, map ve set vs..

Örneğin, bir yazıyı karakterlere dönüştürebilirsiniz:

const ad = 'hamza';

const [ilkKarakter = ''] = ad;

ilkKarakter; // => 'h'

Yıkım mantığı, yinelenebilir protokol uygulanarak özelleştirilebilir.

Özel bir yineleyici uygulayalım:

const filmler = {
  list: [
    { filmAdi: 'Predestination' }, 
    { filmAdi: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].filmAdi;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [ilkFilminAdi] = filmler;
console.log(ilkFilminAdi); // => 'Predestination'

filmler nesnesi, Symbol.iterator yöntemini tanımlayarak yinelenebilir protokolü uygular. Yineleyici, filmlerin başlıklarını yineler.

Yinelenebilir bir protokole uymak, özellikle ilk filmin başlığını okuyarak, filmler nesnesinin başlıklara dönüştürülmesine olanak tanır: const [ilkFilminAdi] = filmler.

Dinamik özelliklerin yok edilmesi

Tecrübelerime göre, bir nesnenin özellikler tarafından tahrip edilmesi, dizilerin tahrip edilmesinden daha sık gerçekleşir.

Bir nesnenin yok edilmesi oldukça basit görünüyor:

const filmler = { filmAdi: 'Predestination' };
const { filmAdi } = filmler;

filmAdi; // => 'Predestination'

const { filmAdi } = filmler değişken bir başlık oluşturur ve buna filmler.filmAdi özelliğinin değerini atar.

Nesnelerin yok edilmesi hakkında ilk okuduğumda, özellik adını statik olarak bilmek zorunda olmamanıza biraz şaşırdım. Dinamik özellik adıyla bir nesneyi yok edebilirsiniz!

Dinamik yıkımın nasıl çalıştığını görmek için bir karşılama fonksiyonu yazalım:

function selamVer(obj, prop) {
 const { [prop]: ad = 'Tanımsız' } = obj;
 return `Selam, ${ad}!`;
}

selamVer({ isim: 'Hamza' }, 'isim'); // => 'Selam, Hamza!'
selamVer({ }, 'isim'); // => 'Selam, Tanımsız!'

selamVer() fonksiyonu 2 argümanla çağrılır: nesne ve özellik adı.

selamVer() içinde, yıkıcı atama const { [prop]: ad = ‘Tanımsız’ } = obj, dinamik özellik adını köşeli parantezler [prop] kullanarak okur. Ad değişkeni, dinamik özellik değerini alır.

Daha da iyisi, özelliğin mevcut olmaması durumunda varsayılan bir değeri belirtebilirsiniz.

Nesne özelliklerine ve dizi öğelerine erişmek istiyorsanız, yok etme harika çalışır.

Temel kullanımın yanı sıra, dizi yok etme, değişkenleri değiştirmek, dizi öğelerine erişmek, bazı değişmez işlemleri gerçekleştirmek için uygundur.

JavaScript, yineleyicileri kullanarak özel yıkım mantığı tanımlayabileceğiniz için daha da büyük olanaklar sunar.