Vue.js'den 3 JavaScript ipucu!

3 ay önce , Okuma süresi 2 dakika.

Gelişmiş frameworkler ile geliştiricisi seviyemizi attırdığımız bir gerçek. Vue.js'yi incelediğimizde yararlı olacağını düşündüğümüz 3 JavaScript ipuclarını sizler için derledik.
Vue.js'den 3 JavaScript ipucu!

Herhangi bir nesnenin türünü belirleme

Yazılım ile ilgilenen herkesin bileceği üzere JavaScriptte de 6 farklı değişken türü bulunmaktadır. Bunlar : Boolean, Number, String, Null, Undefined, Symbol.
Ancak bir nesne veri türünün bir çok alt türe bölünebileceğini biliyor muydunuz? 

Bir nesne Function, Arrray, Map vb. olabilir. Peki tüm bunları göz önünde bulunduğumuzda bir nesne türünü elde etmek istiyorsak ne yapmalıyız? 

Bu konuya girmeden başka bir soru ile konuyu pekiştirelim. 

Aşağıdaki iki kod arasındaki fark nedir? 

Object.prototype.toString.call(arg)
// VE
String(arg)

Her iki ifade de bir parametreyi dizeye dönüştürmeye çalışır, ancak aralarında bir fark vardır.

String(arg) komutu arg.toString() ve rg.valueOf() öğlerini çağırmaya çalışır . Bu nedenle bu iki methodu yeniden yazılırsa farklı sonuçlar ortaya çıkmaktadır. 

Sonuçlar ; 

const _toString = Object.prototype.toString
var obj = {}
obj.toString()  // [object Object]
_toString.call(obj) // [object Object]


Yukarıdaki durumda, String (arg) ve Object.prototype.toString.call (arg) aynı etkiye  sahipken aşağıdaki durumda farklı sonuçlara sahiptirler. 

const _toString = Object.prototype.toString
var obj = {}
obj.toString = () => '111'
obj.toString()  // 111
_toString.call(obj) // [object Object]
/hello/.toString() // /hello/
_toString.call(/hello/) // [object RegExp]


Ayrıca Object.prototype.toString() öğesinin döndürme değeri her zaman ‘[object ’ + ‘tag’ +‘] ’ biçimindedir. Fakat yanlızca orta etiketi istiyorsak karekterleri normal ifade veya String.prototype.slice(). ile silebiliriz. 

Sonuca gelecek olursak aşağıdaki fonksiyon ile bir JavaScript değişkeni türünü alabiliriz.

function toRawType (value) {
    const _toString = Object.prototype.toString
    return _toString.call(value).slice(8, -1)
}
toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"


Önbellek fonksiyon hesaplama sonuçları

Elimizde böyle bir fonksiyon var diyelim; 

function computed(str) {    
    // Suppose the calculation in the funtion is very time consuming        
    console.log('2000s have passed')
    return 'a result'
}

Bu fonksiyon sonucunu ön belleğe almak istiyoruz diyelim. Bunu daha sonradan çağırdığımızda eğer parametreler aynı ise sonucu ön bellekten  döndürmek istiyoruz diyelim peki ne yapmalıyız? 

Öncelikle yapmamız gereken fonksiyonumuzu ön belleğe alacak bir fonksiyon yapmak olacaktır. Bu önbellek fonksiyonu, hedef fonksiyonu bağımsız değişken olarak alır ve yeni bir sarılmış fonksiyon olarak döndürür. Önbelleğe alınan fonksiyonun içinde, önceki fonksiyon çağrısının sonucunu bir Object veya Map ile önbelleğe alabiliriz.

Örnek bir ön bellek alma fonksiyonu ise ; 

function cached(fn){
  // Create an object to store the results returned after each function execution.
  const cache = Object.create(null);

  // Returns the wrapped function
  return function cachedFn (str) {

    // If the cache is not hit, the function will be executed
    if ( !cache[str] ) {
        let result = fn(str);

        // Store the result of the function execution in the cache
        cache[str] = result;
    }

    return cache[str]
  }
}

 

Stil Değiştirme 

Diyelim ki büyük bir projede yer alıyorsunuz. Bu tür projelerde ortak bir yazım dili yapılması gereklidir. Bu tür projelerde her geliştirinin yazımını belirli bir standarta dönüştürmek JavaScript ile mümkün.  Mesela bir geliştiricinin yazdığı  merhaba-dunya çıktısını merhabaDunya olarak değiştirmek istiyorsak ; 
 

const camelizeRE = /-(w)/g
const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
camelize('merhaba-dunya')
// "merhabaDunya"


Bu tür temel değişken çıktı türleri arasında geçişler yapmak için pratik ipuçları vermeye gaayret gösterdik. 

Esen kalın...

#javascript