JAVASCRIPT’IN TARIHÇESI
JS ES6 Map/Set Veri Yapıları
Javascript Object var iken Neden Map, Array var iken neden Set yapısı geldi?
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 şekilde bir 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 blog yazımda özetle;
- Javascript’in sağladığı veri türlerinden bahsedeceğim.
- Object bize yetiyordu, Neden Map tipine ihtiyaç duyduk?
- Array bize yetiyordu, Neden Set tipine ihtiyaç duyduk ?
1. Javascript’in Sağladığı Veri Türleri Nelerdir?
JS farklı türde değerleri tutmak ve bu değerler üzerinde farklı işlemler yapabilmek için farklı tipler mevcuttur.
- Matematiksel işlemler gerçekleştirmek, Tarih Saat işlemleri gerçekleştirmek, Bir kişinin adı, adresi vb metinsel bilgileri tutmak, doğru veya yanlış şeklinde
her birisinde tutmak isteyeceğimiz değer türleri farklıdır. JS geliştiricilere
- Primitive types: string, number, boolean, null, undefined, object function, symbol gibi türler tanımlar.
Not 1: farklı türler farklı metotlara sahiptir. string.toLowerCase() number.toFixed() object.hasOwnProperty ve bu primitive türler otomatik olarak kendi Obje türlerine dönüştürülürler (String, Number, Boolean, Object, BigInt, Null, Undefined, Function, Symbol)
Not 2: Javascript dynamic typing bir dildir. yani aynı değişkene farklı türleri atayabilirsiniz. static type checking olan java, c vb dillerde bu işlemi yapamazsınız. JS dynamic typing sağladığı bir sürü avantaj vardır. Bunu ilerleyen konularda değineceğim. Fonksiyonel Programlama kısmındaki avantajlarından ileride bahsedeceğim. Typescript ile JS dilini static typing ile kullanabilirsiniz.
var val = 1000; // number assign
val = 'abc'; // string assign
val = true; // boolean assingBu yüzden kodlama sırasında değerin içeriğinin hangi türde olduğunu anlamak için type check(tip kontrolleri) yapabilirsiniz. typeof keyword bunun için kullanabilirsiniz.
typeof sss => string
typeof true => boolean
typeof 10.00 => number
typeof undefined => undefined
typeof {age: 15} // "object"
typeof function sum() {} // "function"
typeof undefined // "undefined"
typeof Symbol('x') // "symbol"
typeof NaN // "number" (Not a Number) is a number presentation
typeof [1,2,3] => object
typeof null => objectBu yöntemi Map, Array, String, Boolean, Date vb.. için kullanamazsınız .Bunlar için instanceof. yöntemini kullanabilirsiniz fakat bu yöntemde primitif türleri desteklemez
new String("aaa") instanceof String // true
"aaa" instanceof String // false
"aaa" instanceof string // Reference Error..Type check için constructor üzerinden yapacağınız bir kontrolü snippet tüm hepsini kapsayacak tip kontrolü yapabilirsiniz.
const is = (type, val) => ![, null].includes(val) && val.constructor === type;is(Array, [1]); // true
is(ArrayBuffer, new ArrayBuffer()); // true
is(Map, new Map()); // true
is(RegExp, /./g); // true
is(Set, new Set()); // true
is(WeakMap, new WeakMap()); // true
is(WeakSet, new WeakSet()); // true
is(String, ''); // true
is(String, new String('')); // true
is(Number, 1); // true
is(Number, new Number(1)); // true
is(Boolean, true); // true
is(Boolean, new Boolean(true)); // true
2. Object bize yetiyordu, Neden Map tipine ihtiyaç duyduk ?
Javascript’de Enhanced Object Literals yazısında Object kavramlarını anlatmıştım. Object tanımlamak oldukça basit ve Key/Value şeklinde istediğimiz map veri yapısını oluşturabiliyoruz. Peki neden Object yerine Map veri tipine ihtiyaç duyduk. Object yapamadıkları neydi ?
- Object key değeri olarak sadece String/Symbol verilebiliyor.
- Object elemanlarını iterate(gezmek) için for…in yöntemini kullanıyoruz. Diğer bir yöntem Object.keys, Object.values or Object.entries metodlar üzerinden gezinmek
- Object elemanlarına sıra ile erişme sorunu.
- Değer var mı yok mu için undefined ile kontrol ediyorduk.
- Set ve Get direk objeye array gibi davranarak veya . ulaşıyorduk.
- Obje elemanlarının sayısı için fonksiyon yazmamız gerekiyordu.
Object.size = function(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};Yukarıdan da anlaşılacağı gibi Object map gibi kullanma imkanımız da olsa bir Veri Yapısı API ihtiyaç duyuyordu geliştiriciler. Map API incelediğimizde;
new Map() =>constructorget(key) => key karşılığındaki value getiren fonksiyon. Burda key istenen tür olabiliyor. Rakam, Obj etc... has(key) => key değeri var mı?set(key,value) => key karşılığındaki value atanan fonksiyon. Burda key istenen tür olabiliyor. Rakam, Obj etc...size => eleman sayısıdelete(key) => key olan veriyi map silerclear() => tüm keyleri ve veriyi silerkeys(), values(), entries() => ilgili türleri array olarak döndürür.for (let pair of mapObj) { //Loop
var [key, value] = pair;
console.log(key + " = " + value);
}
2. Array bize yetiyordu, Neden Set tipine ihtiyaç duyduk ?
Array bildiğiniz gibi Object gibi JS basitçe tanımlanabilen bir veri yapısı.
const arr=["yaz","kis","kis","bahar","ilkbahar"]Ama bir küme değil. Kümeler içerisinde tekrar eden eleman içermez. Bu durumu array sağlamak için .filter ile unique sağlayabilirsiniz. Ama bu bir elemanı ekledikten sonra tüm sistemin üzerinden bir daha iterate etmek anlamına geliyor.
const arr=[“yaz”,”kis”,”kis”,”bahar”,”ilkbahar”]
var unique = arr.filter((value, index, self)=> self.indexOf(value) === index)
console.log(unique);
console.log([…new Set(arr)]);Bunun yerine Set veri yapısı bize zaten bu imkanı sunuyor. Set API
new Set() =>constructorhas(value) => key değeri var mı?size => eleman sayısıdelete(value) => elemanı silerfor (let value of setObj) { //Loop
console.log(value);
}
Burda bir önemli dönüşümde Arr →Set , Set → Arr dönüşümün çok basit olması gerekiyor Aşağıda bu 2 sinide tek satırda ne kadar basit bir şekilde yapıldığını görebilirsiniz.
[…new Set(arr)] Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
