EcmaScript 6

October 15, 2020

Bu yazımda sizlere EcmaScript den bahsedeceğim. Daha sonra ise EcmaScript 6 ile gelen yenilikleri anlatacağım.

EcmaScript önceden javascript in resmi adı idi. Tarayıcalar EcmaScript i sistemlerine entegre edip kullanıyorlardı. Bu entegre edilmiş haline de javascript denilmeye başlandı. EcmaScript ise javascriptin kurallarını belirleyen bir standart.

EcmaScript 6 yı şuan tarayıcı tarafında kararlı bir şekilde kullanamıyoruz. Ama Babel ile ES6 ile yazdığımız kodu ES5 çevirerek kullanabiliyoruz. Node tarafında ise güncel versiyon ile ES6 problemsiz bir şekilde kullanabiliyoruz.

EcmaScript 6 ile gelen yenilikler

Let ve Const: Önceden değişkenleri var ile oluştururduk. Ama ES6 ile let ve const kavramlarını kullanıyoruz. Peki var ile let farkı nedir ? Örneğin bir tane fonksiyon yazıp, fonksiyonun içinde var ile bir değişken tanımladık. Bu değişkene fonksiyon dışından da erişebiliriz. Tanımlanan değişken global dir. Bu değişken let ile tanımlanır ise dışarıdan erişilemez. Değişkene sadece fonksiyon içinden erişilebilir.

for( var i = 0; i < 3; i++){

}

console.log(i) //  3 çıktısını verir

 for( let i = 0; i < 3; i++){

}

console.log(i) //  i is not defined çıktısını verir

Örnekte de görüldüğü gibi i değişkeni var ile tanımlandığı zaman erişilebildi ama let ile tanımlandığı zaman erişilemedi.

Değişkenin değerini program akışı sırasında bir yerlerde değiştirecekseniz let ile tanımlamalıyız. Ama değiştirmeyeceğimiz değişkeni const ile tanımlamalıyız. Let ile const arasında ki fark da budur.

Template Literal: Birleştirme operatörüne gerek kalmadan değişkenleri yazabilmeyi sağlar. Bu konuyu örnek üzerinden daha iyi anlatabilirim.

let x = 10;
let y = 20;

console.log('x = ' + x + ' y = ' + y ) // eskiden böyle yazardık.
console.log(`x = ${x} y = ${y}`) // es6 ile böyle yazabiliyoruz.
// ikiside x = 10 y = 20 çıktısını veriyor.

Spread Operator: “…” şeklinde üç noktadan oluşan bir operatördür. Bir array içerisinde ki tüm elemanları elde etmemizi sağlar.

const data = ['ozgun', 'ozdemir', 'software', 'developer'];
console.log(...data);
// çıktı
// ozgun ozdemir software developer

Yukarıda spread operatörü kullanım örneğinde de gördüğümüz gibi data arrayinin bütün elemanlarına console.log da spread operatörünü kullanarak eriştik.

Arrow Functions: Eskiden fonksiyonlarımızı aşağıda paylaştığım gibi yazıyorduk.

var ecmascript =  function () {
  return 10;
}

var result = ecmascript()
console.log(result);

ES6 ile birlikte daha temiz bir yapıya kavuştuk. Artık fonksiyonlarımızı aşağıdaki paylaşımda ki gibi de tanımlayabiliyoruz.

const ecmascript = () => {
  return 10;
 } // arrow function

const result = ecmascript()
console.log(result);

Destructing: ES6 ile gelen destructing kavramınıda sizlere bir örnek ile anlatıcam. Bir tane user diye objemiz olsun. İçerisinde firstName, lastName, age alanları olsun. Bu user objesi içerisinde ki firstName ve lastName alanlarını yeni değişkenlere atayalım. Eskiden bu işlemi şu şekilde yapıyorduk.

var user = {
  firstName: "ozgun",
  lastName: "ozdemir",
  age: 26
}

var name = user.firstName;
var surname = user.lastName;
console.log(name); // çıktı: ozgun
console.log(surname); // çıktı: ozdemir

ES6 ile birlikte bu işlem biraz daha kolaylaştı ve daha temiz bir kod haline geldi. Aşağıda nasıl destructing yapıldığını paylaşıyorum.

const user = {
   firstName: "ozgun",
   lastName: "ozdemir",
   age: 26
}

const { firstName, lastName } = user;
console.log(firstName); // çıktı: ozgun
console.log(lastName); // çıktı: ozdemir

EcmaScript 6 ile anlatmak istediklerim şimdilik bu kadar. Aslında promise ve async / await yapılarını da anlatmak istemiştim ama yazı yeterince uzamaması, promise ve async / await yapısının da çok önemli bir konu olmasından dolayı başka bir yazıda anlatmaya karar verdim.

Umarım yazı faydalı olmuştur. Elimden geldiğince anlatmaya çalıştım. Eksik taraflar kalmış olabilir. Yorumda bana bildirirseniz o detaylarıda eklemek isterim.

Şimdilik görüşmek üzere…

Share: