EcmaScript 6 Nedir? Bilinmesi Gerekenler

Kategori: Javascript Dersleri, Node Js, React Js | 1

EcmaScript 6 ile javascript kodlarını daha anlaşılır şekilde yazabiliriz. EcmaScript 6 sürümü ile gelen yeni özellikler tarayıcılar tarafından desteklenmektedir. React Js, Node Js gibi modern javascript kütüphane/framework’lerinde kullanılıyor. Bu makalemde bilinmesi gereken özelliklerine değinip örnekler yapıcam geri kalan özellikler için yeni makale yazmayı düşünüyorum.

1 – Spread Operator

Yaymak anlamına gelmektedir. Objelerde, dizilerde kullanılabilir. 1-2 Örnek ile inceleyelim.

Kullanımının çıktısı ; 1,2,3,4,5 ‘dir. Eğer ” …sayilar ” yerine sadece “sayilar” değişkenini yazdırsaydık [1,2,3,4,5] çıktısı alırdık. Array üzerinde gezinip elemanlarını tek tek yazdırttık.

İki diziyi birleştirmek içinde kullanabiliriz.

Spread Operator’ü objelerde nasıl kullanıyoruz birde bunun için örnek yapalım.

Çıktısı verecektir.

2 – Array Map

Bir array üzerinde gezinmek ve bu array’i manipüle etmek için kullanmanız gereken en temel fonksiyonlardan birisidir.

Üstteki örneğimizde array map fonksiyonu ile array üzerinde gezindik. Şimdi yeni bir örnek ile gezinirken arary elemanları üzerinde değişiklik yapalım.

Bu örneğimiz ile array içerisindeki elemanları 2 ile çarpıp yazdırdık.

Bu örneğimizde ise array içerisindeki elemanları değiştirip yeni bir array’e atadık. Böylece eski array elemanlarını değiştirmeden üzerinde işlem yaparak yeni bir array oluşturduk.

3 – Array Filter

Array’i filteler. Örneklerle açıklayalım.

Array filter fonksiyonunda “numara => numara < 4 ” bölümünde numara bizim array elemanımız. ilk elemandan başlayıp son elemana kadar dönmektedir. Burada elemanın değeri 4’den küçük ise işlem yap diyerek filtreledik.

4 – Object.Assing

Objeleri birbirleri üzerine kopyalamaya yarayan bir fonksiyon. Örneklerle açıklayalım.

İki nesneyi birbirlerinin üzerine kopyaladık ve bir nesne oluşturduk. İstediğiniz kadar objeyi birleştirebilirsiniz.

Array ve objeler referans tipinde çalışmaktadır. Örneğin bir tane obje oluşturdunuz ve isim olarak mehmet verdiğiniz. Oluşturduğunuz objeyi obje2 diye başka bir objeye eşitlediniz. Obje2’de Değişiklik yaptığında ilk oluşturduğunuz objede değişmektedir. Örnekler ile daha iyi anlayacaksınız 🙂

Birinci datamızın içerisinde “Mehmet Maşa” vardı data2 objesine data’yı eşitledik ve isim değerini değiştirdik. Bizim beklediğimiz data’daki değer ‘Mehmet Maşa’ data2’deki değer ise ‘Ahmet’ Ama data ve arraylar referans alarak çalıştığı için çıktı farklı olacak 🙂

Programımız bize Birinci Datadaki ismide ‘Ahmet’ çıktısı olarak verecektir. Değerin referansı eşitlendiği için bu şekilde çıktı vermektedir. Bu durumdan kurtulmak için Object.assign kullanmalıyız.

Yukarıda ” const data2=Object.assign({}, data); ” olarak eşitleme yaptıktan sonra çıktılarımız istediğimiz gibi olacaktır.

İç içe objelerde Object.assign fonksiyonunu çalıştıramıyoruz. İçe içe objeler için; JSON.parse(JSON.stringify(data)) olarak kullanmalıyız. Bunun içinde bir örnek yapalım.

Olarak çıktımızı alacağız. Bir sonraki konumda EcmaScript 6 Modül Sistemini anlatıcam. Yukarıdaki örnekleri kendiniz yazıp üzerine ekleme yaparsanız hatırlamanız daha kolay olacaktır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir