Photo by Dan Meyers on Unsplash

JAVASCRIPT’IN TARIHÇESI

Javascript’de Destruction Assignments

Javascript’ de Destruction Assignments Nesnelerde ve Arraylar de nasıl Kullanılır ve Ne gibi kolaylıklar sağlar?

Bu yazıyı daha önceden yazmış olduğum Javascript’in Tarihçesi yazısının bir devamı olarak yazıyorum. Bir çok kavramı tek bir yazıda ele almanın yaratacağı karmaşıklıktan kaçmak için bu yönteme başvurdum. Bu yazılardaki amacım önceden Javascript’in varolan hangi özelliklerinin yetmediğini ve bu geliştirmeyle neyi hedeflediklerini anlatacağım.

Destruction bizim bir obje veya array içerisinde oluşturduğumuz(paketlediğimiz) yapıların içerisindeki değişkenlere erişim ihtiyacımız olduğunda bu değişkenlere daha kolay erişebilmek için bildiğimiz atama/assign yöntemi yerine Destruction denen bir kavramla paketten hızlı ve daha kolay çıkarma yöntemleri oluşturulmuştur. Bu kodun hem daha okunabilir hemde daha kısa bir şekilde yazılmasına olanak sağlar.

Basit ve anlaşılır olması için aşağıdaki örnekte bir props nesnesi içerisindeki name ve surname erişimin ne kadar kolay bir şekilde yapıldığını görebilirsiniz. Aynısını array işleminde de görebilirsiniz. Bizim tek tek bir çok satırda yapacağımız atamaları tek satırda yapabilmemize olanak sağlar.

Obje Deconstruction İşlemi

props={ name:’Hello’, surname:’World’}  
state={ age:12} . 
//Deconstruction 
const {name,surname}=props; //>> const name=props.name
const {age}=state; //>>const age=state.age
console.log(`My name is ${name} ${surname} and ${age} years old`)

Array Deconstruction İşlemi

colors=[‘red’,’green’,’blue’];
let [val1,val2,val3]=colors //>> let val1=colors[0] ...
console.log(val1,val3) //red blue

Obje Destruction İşlemlerini Detaylı İncelersek

1. Destruction Değişkenlere Farklı İsimler Atamak

Bu ihtiyaca React kullanırken componentWillReceiveProps elinizde this.props ve nextProps nesneleri olduğunda yani aynı nesneden elinizde o anda 1 den fazla olduğu durumlarda kullanma ihtiyacınız olur.

const props={ name:'Hello', surname:'World'}
const {name:adi,surname:soyadi}=props;
console.log(`Adım ${adi} ${soyadi}`)

2. Default Değer Atamak

Destruct sırasında karşıdan bir değişken gelmeyebilir ama sisteminizin buna karşı duyarlı olması için değişkenlere default değerler atayabilirsiniz. Örneğin aşağıdaki örnekte surname karşılığı olmasın ve biz buna baştan bir varsayılan değer atayarak undefined çıkmasının önüne geçmiş oluruz. Tabiki değer var olsaydı onu kullanacaktı.

const props={ name:'Hello'}
const {name,surname="Unknown"}=props;
console.log(`My Name ${name} ${surname}`)

3. Function Değer olarak Geçirilirken Destruction işlemi

Bu yöntemde oldukça kullanışlıdır. Elinizde bir obje var ve bunun sadece belli değerleri bu fonksiyon için anlamlı. Daha bu nesne geçirilirken bu parçalama işlemini yapmanız kodun daha kolay bir şekilde kullanılmasına olanak sağlar.

function sayHello({name,surname,other:{age}}){
    console.log(`My name is ${name} ${surname} and age ${age}`)
}
const props={
    name:'Deniz',surname:'Dayibasi',other:{age:8,height:128} }
sayHello(props);

Benzer bir özelliği elinizde bir kullanıcı array varsa döngü sırasında bu işlemi yapabilirsiniz.

for (const {name: n, surname: s, other{age:a}} of people) {

4. …Rest Kullanmak

Sadece belli değişkenlerle uğraşıp diğer kalanları rest içerisine atmak isteyebilirsiniz.

const props={name:'Deniz',surname:'Dayibasi',other:{age:8, height:128} }
const {name,...rest}=props;
console.log(rest)

Array Destruction İşlemlerini Detaylı İncelersek

1. Belirli indeksleri atlayarak atama yapma

Aşağıdaki örnekte val2 olmasadan değer ataması yapılabilir. Ara değerleri ,, işareti ile atlanabilir.

colors=[‘red’,’green’,’blue’];
let [val1,,val3]=colors //>> let val1=colors[0] ...
console.log(val1,val3) //red blue

2. Default Değer Atama

const colors=['red','green','blue'];
let [val1,,val3,val4='orange']=colors 
console.log(val1,val3,val4) //red blue orange

3. …Rest Kullanmak

const colors=['red','green','blue'];
let [val1,...rest]=colors
console.log(rest) //green , blue

Yorum

Yukarıdaki örneklerden de anlaşılacağı gibi kod yazımını daha aza indirgerken daha fazla mantıksal kısmı geliştiriciden soyutladığını görebilirsiniz. İleride anlatacağım Functional Programming kapsamında bir çok konu hep bunun üzerine. Geliştiriciden soyutlanarak geliştiricilerin gelecekte daha fazla kalıplaşmış kod yazması hedeflenmektedir.

Ben bu tip kod geliştirme ihtiyaçlarını React sırasında çok kullanıyorum. Bir kodu kısaltıyor bir yandan da daha okunabilir hale getiriyor bence.

Referanslar

• MDN Destructuring assignment

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.