Ecmascript 6 Nedir ? React’la ne alakası var ?

Arif Köken
2 min readAug 1, 2017

--

Merhaba sevgili yazılım aşıkları,

Konuyu dallandırmadan anlatmak istiyorum fakat react ve react native projelerimizi geliştirirken kullanmamız gerektiği için Ecmascript 6 konusunda kısaca giriş yapmak istiyorum.

Ecmascript, Javascript dilinin standartlaştırılmış sürümünün adıdır. React projelerinde biz Ecmascript 6 versiyonu ile kod yazacağız. Fakat tarayıcılar hala bu versiyona tam destek vermiyor. O yüzden kodlarımızı Ecmascript 5 dönüştürmemiz gerekiyor. Bu dönüşüm işlemi için BabelJs kullanmamız gerekiyor.

BabelJs’e https://babeljs.io adresinden ulaşabilirsiniz.

Sanki BabelJS kütüphanesini biraz daha ayrıntılı anlatmam gerekiyor :) Javascript geliştiricileri bu senaryoda yapılan işlemlerin benzerlerini uygulamalarında uzun süredir kullanıyorlar. Coffescript ve Typescript gibi teknolojilerle dilin standartlarında olmayan özellikler kullanılarak uygulamalar geliştiriliyor. Böylece ileriye dönük ve tekrar kullanılabilirlik açısından önemli bir adım atılmış oluyor. Uygulama tarayıcı üzerinde gösterilme aşamasına geldiğinde ise kodlarımız uygun bir Ecmascript versiyonuna dönüştürülüyordu. Şu an her tarayıcı için en uygun versiyon Ecmascript 5.

Özetlemek gerekirse Babeljs’in tek yaptığı iş Ecmascript 6 ile yazdığımız kodları Ecmascript 5 kodlarına dönüştürmek

Aşağıdaki örnekte Ecmascript 6 ile fonksiyona default değer atama işmini inceleyebilirsiniz.

Yukarıdaki örneğin ecmascript 5 karşığığı aşağıdaki gibidir.

BabelJs dönüşümlerini incelemek için http://babeljs.io sitesindeki online dönüşüm aracını kullanabilirsiniz.

Let ve Const Farkı

Uygulama içerisinde hiç değiştirilmeyecek değişkenlerimizi const la değiştirilebilecek değişkenlerimizi let le tanımlamalıyız.

Desctructing

Ecmascript 6 ile çalışırken değişken tanımlama işlemlerinde array ve object formatlarını kullanabiliyoruz.

Spread Operatörü

Dizi değişkenleri üzerinde atama işlemlerini kolay bir şekilde yapabilme imkanı sağlamaktadır. Dizi değişkeninin önüne 3 nokta koyarak kullanabiliriz

Hala okumaya devam ettiğinize göre Ecmascript 6'yı öğrenmeye kararlısınız demektir. Gelin sizinle github projesi üzerinden devam edelim :)

İşte adresi :https://github.com/arifkoken/Ecmascript6

--

--