Photo by Garett Mizunaka on Unsplash

JAVASCRIPT’IN TARIHÇESI

Javascript’de Enhanced Object Literals

Javascript’ de Obje tanımlamanın nasıl gerçekleştini? Enhanced Object Literals bu işlemin daha nasıl basitleştirildiği anlatılmaktadır.

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.

Bu konuda özetle aşağıdaki konulara değinmeyi düşünüyorum.

• Object nasıl tanımlarız?
• Enhanced Object Literals nasıl avantajlar sağlar.

Object Nasıl Tanımlarız?

Javascript object tanımlamak oldukça basittir.

{} //empty Object
{name: "Onur" , age:39} //key value pairs

Burda biz bu değerleri dışarıdan değişken olarak vermek istediğimizde aşağıdaki şekilde nesneyi tanımlamamız gerekir.

const name="Onur"; const age=39; 
console.log({name:name, age:age});

Aşağıdaki örnekte değişkenleri dışarıdan alan fonksiyonda objenin nasıl oluşturulduğunu görebilirsiniz. Key-value ikililerini nesnenin içerisinde sürekli tanımlamanız gerekiyor.

const name = "Onur"; const age = 39;
//Default Object Initiation
callFunc = (fn, name, age) => {fn({ fn:fn, name: name, age: age })}
callFunc(console.log, name,age);

Peki bu durumu biraz daha geliştirelim. Dinamik değişken isminide dışarıdan alsın dediğimiz durumda nesneyi bir prop olarak bunu tanımlamanız gerekir.

const name = "Onur"; const age = 39; h='height';
//Default Object Initiation
callFunc = (fn, name, age, hProp, height) => {
  const obj={ fn:fn, name: name, age: age};
  obj[hProp]=height;
  fn(obj);
}
callFunc(console.log, name, age, h, 180);

Enhanced Object Literals nasıl avantajlar sağlar?

Aşağıdaki kodda göreceğiniz gibi key-value pair vermeden de objeyi tanımlayabiliyoruz. Bu kodun daha okunabilir olmasını sağlıyor.

const name = "Onur"; const age = 39; h='height';
//Enhanced Object Literals
callFuncEnhanced = (fn, name, age) => {fn({ fn, name, age })}
callFuncEnhanced(console.log, name, age);

Diğer örneğimizde değişken ismini dışarıdan aldığı durumda da [h] şeklinde obje initialize sırasında kullandığımızda çok basit bir şekilde objeyi tanımlayabiliyoruz.

const name = "Onur"; const age = 39; h='height';
//Enhanced Object Literals
callFuncEnhanced = (fn, name, age, h, height) => {fn({ fn, name, age,[h]:height});}
callFuncEnhanced(console.log, name, age, h, 180);

Referanslar

• MDN Object

Okumaya Devam Et 😃

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