Bilmeniz Gereken 6 JavaScript Özelliği

Bir yıldan biraz daha uzun bir süre önce, Gutenberg'de rahatça geliştirmek için bilmeniz gereken 5 "yeni" JavaScript özelliğinden bahsetmiştik. Orada nesne ve dizi yok etmenin ne olduğunu, ok işlevlerinin nasıl oluşturulacağını, yayılma ve dinlenme operatörlerinin neler olduğunu vb. öğrendik. Şanslısınız, JavaScript'in hâlâ pek çok özelliği var, bunlara aşina olduğunuzda daha anlaşılır ve özlü kodlar yazmanıza yardımcı olacak.

Bugün size gerçekten harika altı JavaScript özelliği göstereceğim. Operatörler, değişken kapsam, vaatler, asenkron fonksiyonlar… hepsini öğrenmeye hazır mısınız?

#1 Operatör ile JavaScript'te Opsiyonel Zincirleme ?.

İsteğe bağlı zincirleme operatörü, bir nesnenin undefined veya null olma olasılığı olduğunda, bir nesnenin niteliklerine basitleştirilmiş erişim sağlar. Örneğin, aşağıdaki gibi bir nesneniz olduğunu varsayalım:

 const toni = { name: 'Antonio', details: { age: 35, }, };

toni age erişmek için, önce details özniteliğine, ardından da age erişmeniz gerekir:

 function getAge( person ) { return person.details.age; }

Önceki fonksiyonda sahip olduğumuz problem ve eminim sizin için yeni bir şey değildir, person sahip olmasını beklediğimiz özelliklerin her zaman orada olmamasıdır. Yani person veya person.details undefined ise, yukarıdaki işlev bir tür hatasını tetikleyecektir:

 getAge( toni ); // 35 getAge( {} ); // Uncaught TypeError: person.details is undefined

Genellikle, birkaç güvenlik görevlisi ekleyerek bu sorunun üstesinden geliriz:

 function getAge( person ) { if ( ! person ) { return; } if ( ! person.details ) { return; } return person.details.age; } getAge( toni ); // 35 getAge( {} ); // undefined

hangi açıkça düzeltin. Ne yazık ki, ortaya çıkan işlev daha karmaşıktır ve dikkatimizi gerçekten önemli olan şeylerden uzaklaştıran çok sayıda gürültülü kod içerir. İşe geri dönmek ve çözümü daha basit bir şekilde düzeltmek için tek yapmamız gereken isteğe bağlı zincirleme operatörünü kullanmaktır ?. :

 function getAge( person ) { return person?.details?.age; } getAge( toni ); // 35 getAge( {} ); // undefined

Esasen, bu operatör, undefined veya null olmadığı sürece her bir özelliğe erişmemize izin verir. Var olmayan bir nesnenin özelliğine erişmeye çalıştığımızı algıladığı anda, undefined değerini döndürür.

# 2 Nullish Coalescing Operatörü ( ?? )

JavaScript'te bu operatörü kullanarak bir değişkene varsayılan bir değer ayarlamak çok kolaydır: || , Sağ? Yanlış! Bunu hepimiz yaptık, ancak dikkatli olmazsanız beklenmedik yan etkilere neden olabilir…

Örneğin, Redux mağazamızda, kullanıcı tarafından ayarlanan bir değeri almamızı sağlayan bir seçicimiz olduğunu varsayalım. Kullanıcı henüz bir değer belirlemediyse (yani, değer undefined ise), || kullanarak varsayılan bir değer döndürürüz. :

 function getValue( state ) { return state.value || 5; }

Şimdi, kullanıcı bir değer veya başka bir değer belirledikten sonra, önceki işlevle ne elde edeceğimize dair birkaç örnek görelim:

 // No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 5

Eyvah! Son davaya ulaşana kadar her şey yolunda gitti! Görünüşe göre, kullanıcı değeri 0 olarak ayarlarsa, işlevin sonucu 5 olur. Niye ya? Eh, mantık oldukça ürkütücü: x||y y y'yi döndürür, ancak ve yalnızca x bir "yanlış" değerse. undefined bir falsey değeri olduğundan, bu genellikle iyi çalışır. Ama örneğin false veya 0 da öyle.

Gerçekte, yalnızca default bir değer olmadığında ayarlamak istedik. Böylece bir değer olup olmadığını kontrol etmek için bir güvenlik görevlisi ekleyebiliriz:

 function getValue( state ) { if ( undefined === state.value ) return 5; return state.value; }

ve eğer kendimizi iyi hissediyorsak, üçlü operatörü kullanarak bile yazabiliriz:

 function getValue( state ) { return undefined === state.value ? 5 : state.value; }

ancak, bir kez daha, her iki çözüm de kodu gereksiz yere karmaşıklaştırır. Bir değişkene varsayılan bir değer atamak için nullish birleştirme operatörünü kullanmalıyız ?? , bu, yalnızca ve yalnızca sol kısım null veya undefined ise sağ kısmı döndürür:

 function getValue( state ) { return state.value ?? 5; }

ve, sürpriz-sürpriz!, sonuç tam olarak istediğimiz şeydi:

 // No setValue( x )... getValue(); // 5 setValue( 2 ); getValue(); // 2 setValue( 1 ); getValue(); // 1 setValue( 0 ); getValue(); // 0

Oh, ve bu arada, bu operatörü bir atama ile birlikte kullanabilirsiniz. Örneğin, bu:

 value = value ?? 5;

buna eşdeğerdir:

 value ??= 5;

#3 Sözler ve eşzamansız işlevler

Sözler, asenkron işlemlerle, yani sonuçları hemen mevcut olmayan işlemlerle çalışırken kaynak kodumuzu basitleştirmemize izin veren JavaScript'te uygulanan bir mekanizmadır. Örneğin, sunucumuzdan veri almak istiyorsak, sunucunun isteği almasını, işlemesini ve yanıtı bize geri göndermesini beklemek zorunda olduğumuz için yanıtın anlık olmayacağı açıktır.

Daha eski JavaScript sürümlerinde ve kitaplıklarında (örneğin, jQuery) bunu geri aramalarla uygulardık. Fikir oldukça basitti: isteğin kendisiyle birlikte, yanıt hazır olduğunda çağrılması gereken işlevi (geri arama) tanımlayın. Bu şekilde, eşzamansız işlem (yani sunucudan veri alma) tamamlandığında, kitaplık işlevi çağıracak ve mantığımız devam edecektir:

 jQuery.ajax( { url: 'https://server.com/wp-json/wp/users/1', success: ( user ) => { console.log( user ); }, } );

Yalnızca tek bir yalıtılmış isteği tetikliyorsak, bu çözüm oldukça zarif ve kullanışlıdır. Ancak, daha fazla istek yapmamız gerektiğinde, işler hızla kirleniyor. Örneğin, iki farklı kullanıcı talep etmek istiyorsak, iç içe geri aramalar yapmamız gerekir:

 jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/1', success: ( user1 ) => { jQuery.ajax( { url: 'https://server.com/wp-json/wp/v2/users/2', success: ( user2 ) => { console.log( user1, user2 ); }, } ); }, } );

Sözler bu sorunun çözümüdür: Belirli bir sonucu elde etmek hemen değilse (örneğin, bir sunucudan bir şey aldığımızda), hemen bir JavaScript vaadi verebiliriz. Bu nesne, gerçek değerin bir sarmalayıcısıdır ve söz konusu değerin gelecekte bir noktada mevcut olacağına dair “söz”ü ifade eder.

Örneğin, vaatleri kullanarak ilk snippet'imizi yeniden yazacak olsaydık, şöyle görünürdü:

 const promise = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); promise.then( ( user ) => console.log( user ) );

Gördüğünüz gibi wp.apiFetch , sunucudan kullanıcı 1'i getirmek zorunda, ancak hemen bir sonuç veriyor. Ancak sonuç, kullanıcının kendisi değil, istekler tamamlandıktan sonra kullanıcıya çözülecek bir sözdür. Bu nedenle, tek yapmamız gereken, çözüldüğünde sözün yanıtını işleyecek bir geri arama yazmak.

Şimdi bunun daha önce sahip olduğumuzdan o kadar da zor olmadığını düşünüyor olabilirsiniz, değil mi? Sonuçta, hala geri arama kullanıyoruz… ancak birden çok isteği birleştirmeye başladığımızda bunun ne kadar yararlı olduğunu görebilirsiniz:

 const promise1 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/1', } ); const promise2 = wp.apiFetch( { url: 'https://server.com/wp-json/wp/v2/users/2', } ); Promise.all( [ promise1, promise2 ] ).then( ( [ user1, user2 ] ) => console.log( user1, user2 ); );

Sözleri kullanarak, 1. ve 2. kullanıcıları almak için iki paralel istek başlatabildik ve her iki sözün de çözülmesini beklemek için Promise.all kullanabildik. İç içe geçmiş geri aramalar içeren spagetti kodu yok.

Şey, vaatlerle ilgili harika şey henüz gelmek üzere. JavaScript vaatleriyle çalışmak ve senkronize görünen asenkron kod yazmak için biraz sözdizimsel şeker kullanabiliriz. Tek yapmanız gereken, async anahtar sözcüğünü kullanarak eşzamansız bir işlev tanımlamaktır ve aniden işler çok, çok daha kolay hale gelir:

 async function logTwoUsers( id1, id2 ) { const user1 = await wp.apiFetch( { url: '…' + id1 } ); const user2 = await wp.apiFetch( { url: '…' + id2 } ); console.log( user1, user2 ); }

Asenkron bir fonksiyon içinde asenkron bir işlem çağırdığınızda, await anahtar sözcüğünü kullanarak sonucunu bekleyebilirsiniz. Aklınızda bulundurmanız gereken tek şey, bir async işlevi tanımladığınızda sonucunun her zaman bir söz olacağıdır:

 async function getNumberFive() { return 5; } const p = getNumberFive(); // a promise p.then( console.log ); // prints "5"

#4 let ve const kullanılırken Değişken Kapsam

Muhtemelen zaten bildiğiniz gibi, artık let ve const anahtar sözcüklerini kullanarak değişkenleri bildirebilirsiniz. İlki bir değişken tanımlar ve ikincisi bir sabit tanımlar:

 let x = 1; console.log( x ); // 1 x = 2; console.log( x ); // 2 const y = 1; console.log( y ); // 1 y = 2; // Uncaught TypeError: invalid assignment to const 'y' console.log( y ); // 1

Her iki anahtar kelime de sabit olmayan bir değişken tanımlamamıza izin verdiğinden, let ve var aynı şey olduğunu düşünmek isteyebilirsiniz. Ancak aralarında önemli bir fark var: kapsamları. let ve const ile değişkenin kapsamı, tanımlandığı bloktur. var içinde, tüm işlev budur.

 function fn() { if ( true ) { var x = 1; let y = 2; const z = 3; }//end if console.log( x ); // 1 console.log( y ); // Uncaught ReferenceError: y is not defined console.log( z ); // Uncaught ReferenceError: z is not defined }

# 5 JSON.parse Kullanırken Veri Dönüşümü

JSON.parse işlevi, bir JSON dizesini ayrıştırır ve bir JavaScript nesnesi oluşturur. Örneğin:

 const x = JSON.parse( '{"x":1,"a":[1,2,3]}' ); // Object { x: 1, a: [ 1, 2, 3 ] }

Çoğu insanın bu konuda bilmediği şey, reviver adlı ikinci bir argümanı desteklemesidir. Bu parametre, ayrıştırılmakta olan her öğe için yürütülecek ve değeri istediğiniz gibi değiştirmenize olanak tanıyan bir işlevdir. Örneğin, aşağıdaki gibi bir JSON dizesi hayal edin:

 const json = '{"name":"David","birthday":"1985-12-01T10:00:00.000Z"}';

JSON.parse olduğu gibi kullanırsak, iki dize özniteliğine sahip bir nesne oluşturacaktır: name ve birthday . Ancak JSON.parse bir reviver işlevi sağlarsak, birthday Date olarak ayrıştırıldığından emin olabiliriz:

 const user = JSON.parse( json, ( key, value ) => 'birthday' === key ? new Date( value ) : value )

# 6 Undesrcore Karakterini Kullanarak Kaynak Kodunda Sayısal Ayırıcı ( _ )

Bugünkü son ipucumuz sayısal ayırıcıdır. Rakamları insanların anlamasını kolaylaştıracak şekilde yazmayı mümkün kılan bir öneri (şu anda 4. aşamada) var. Örneğin, aşağıdaki sayıların ne kadar büyük olduğunu gerçekten söyleyebilir misiniz?

 10000000000 2189719.25

Binler ayırıcısını kullanabilseydik, yorumlaması çok daha kolay olurdu! Ve alt çizgiyi _ kullanarak tam olarak bunu yapabiliriz:

 10_000_000_000 2_189_719.25

Özet

JavaScript'in içerdiği tüm yeni araçlara ve özelliklere alışırsanız daha iyi JavaScript kodu yazmanız mümkün. Bugün bu programlama diliyle nelerin mümkün olduğuna dair birkaç örnek gördük. Umarım yeni bir şeyler öğrenmişsinizdir ve hoşunuza gittiyse iş arkadaşlarınızla paylaşmayı unutmayın. Yakında görüşürüz!

Unsplash'ta Sam Dan Truong'un öne çıkan görseli.