JavaScript Optimizasyon Teknikleri

Uzun süredir JavaScript ile kodlama yapıyor olabilirsiniz ancak bazen fazla kod yazmadan veya yapmadan sorunlarınızı çözebilecek en yeni özelliklerle kodunuzu güncel tutabilirsiniz. Bu teknikler temiz ve optimize edilmiş JavaScript Kodu yazmanıza yardımcı olabilir.

Burada, daha temiz ve optimize edilmiş JavaScript Kodu yazmanıza yardımcı olacak kısa gösterim tekniklerini kapsar.

Modern teknikler ve çeşitli ipuçlarını kullanarak JavaScript kodların nasıl optimize edileceğine kısaca göz atalım.

1. Birden Fazla Koşul Varsa

Bir dizide birden çok değer saklayarak include metodunu kullanarak if bloğunuzu daha kısa tutabilirsiniz.

// Uzun Yazım
if (gelen === 'aaa' || x === 'AAA' || x === 'bbb' || x === 'BBB'){
 // İşlemler
}

// Kısa Yazım
if (['aaa', 'AAA', 'bbb', 'BBB'].includes(gelen)){
  // İşlemler
}

2. If true … else Kısa Yazımı

Buna tek satırlık if’de deniyor.

// Uzun Yazım
let test = false;

if (x > 100){
   test = true;
}else{
   test = false;
}

// Kısa Yazımları
let test = (x > 100) ? true : false;
let test = (x > 100);

3. Değişken Tanımlama

Ortak değere veya ortak türe sahip iki değişken tanımlamak istediğinizde kullanışlıdır.

// Uzun Yazım
let test1;
let test2 = 1;

// Kısa Yazımları
let test1, test2 = 1;

4. null, undefined veya boş değer kontrolü

Yeni değişkenler tanımladığımızda, bazen değeri için başvurduğumuz değişkenin boş veya tanımsız olup olmadığını kontrol etmek isteyebilirsiniz. JavaScript’in bu işi yerine getirmek için iyi bir kısaltması vardır.

// Uzun Yazım
if (test1 !== null || test1 !== undefined || test1 !== ''){
    let test2 = test1;
}

// Kısa Yazımları
let test2 = test1 || '';

5. null değerine varsayılan değer atamak

let test1 = null,
     test2 = test1 || '';

// Aynı durum undefined değeri için de geçerlidir. 
let test1 = undefined,
     test2 = test1 || '';

6. nullish birleştirme operatörü

nullish birleştirme operatörü ?? ‘in sol taraf boş veya tanımsız ise sağ taraf değerini döndürür. Varsayılan olarak sol taraftaki değer döner.

const test = null ?? 'default';
console.log(test) // default değer döner. 

const test1 = 0 ?? 2;
console.log(test1); // 0 değer döner.

7. Tek satırda birden çok değişkene değer atama.

Birden çok değişkenle uğraşırken ve farklı değişkenlere farklı değerler atamak istediğinizde, bu kısaltma tekniği gerçekten çok kullanışlıdır.

// Uzun Kullanımı
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;

// Kısa kullanımı
let [test1, test2, test3] = [1, 2, 3];

8. Değişkenlere kısa atamalar.

Programlamanızda bir çok aritmatik operatörle ilgileniyorsa bu teknik gerçekten sizin için kullanışlıdır.

// Uzun Kullanımı
test1 = test + 1;
test2 = test2 - 1;
test3 = test3 * 20;

// Kısa kullanımı
test1++;
test2--;
test *= 20;

9. If karşılaştırmalarında kısa gösterim

Bu bir çok programcının kullandığı ortak kısaltmalardan birisidir.

// Uzun Kullanımı
if (test1 === true)
if (test2 === false)

// Kısa kullanımı
if (test1)
if (!test2)

10. AND (&&) öperatörü ile çoklu koşullar.

Bir işlevi yalnızca değişken doğruysa çağırıyorsak şu şekilde kullanabiliriz.

// Uzun Kullanımı
if (test1) {
     callMethod();
}

// Kısa kullanımı
test1 && callMethod();

11. forach döngüsünün kısa kullanımı

// Uzun Kullanımı
for (var i = 0; i < testData.length; i++)


// Kısa kullanımı
for(let i in testData)
//veya
for(let i of testData)

// Dizideki her değer için fonksiyon

function testData(element, index, array){
     console.log('test[' + index + '] = ' + element);
}

[11, 20, 50].forEach(testData);

12. Karşılaştırmalı Geri Dönüşler

Karşılaştırmayı dönüş ifadelerinde de kullanabilirsiniz. Aşağıdaki örnekte 5 satırlık kodumuzu 1 satıra düşecektir.

// Uzun kullanımı
let test;

function checkReturn() {
     if( !(test === undefined)) {
          return test;
     }else{
          return callMe('test');
     }
}

var data = checkReturn();
console.log(data); // ekrana test yazar. 

function callMe(val){
     console.log(val);
}

// Kısa Kullanımı
function checkReturn(){
    return test || callMe('test');
}

13. Arrow (ok işaretli) fonksiyonlar

// Uzun kullanımı
function add(a, b){
     return a + b;
}

// Kısa Kullanımı
const add = (a, b) => a + b;

// Örnek 2
function callMe(name){
     console.log('Hello', name);
}

callMe = name ==> console.log('Merhaba', name);

14. Fonksiyonları Kısa Şekilde Çağırmak

Bu işlemi gerçekleştirme için tek satırlık if yazım şeklinden faydalanabilirsiniz.

// Uzun kullanımı
function test1(){
     console.log('test1');
}

function test2(){
     console.log('test2');
}

var test3 = 1;
if (test3 === 1){
     test1();
}else{
     test2();
}

// Kısa Kullanımı
(test3 == 1?test1:test2)();

15. Switch – Case ‘in kısa şekilde kullanımı

Koşulları anahtar-değer nesnelerine kaydedebilir ve koşullara göre kullanabilirsiniz.

// Uzun kullanımı
switch(data){
     case 1: 
          test1();
     break;
     
     case 2:
          test2();
     break;

     case 3:
          test();
     break;
}

// Kısa Kullanımı
var data = {
     1: test1,
     2: test2,
     3: test
};

data[1] && data[1]();

16. Kesin dönüşlerin kısa kullanımı

Arrow (ok işaretli fonksiyonlar) kullanımıyla, bir geri dönüş ifadesi yazmak zorunda kalmak değeri doğrudan döndürebilirsiniz.

// Uzun kullanımı
function calculate(diameter){
     return Math.PI * diameter
}

// Kısa Kullanımı
calculate = diameter =>{Math.PI * diameter}

17. Ondalık taban üslerini kullanarak büyük sayıları kısa yazma

// Uzun kullanımı
for(var x = 0 ; x < 10000; x++){
 ...
}

// Kısa Kullanımı
for(var x = 0; x < 1e4; x++){
  ...
}

18. Fonksiyonlarda varsayılan parametre değerini atamak

// Uzun kullanımı
function add(test1, test2){
     if (test1 === undefined){
          test1 = 1;
     }
    if (test2 === undefined){
         test2 = 2;
    }
    return test1 + test2; 
}

// Kısa Kullanımı
add (test1 = 1; test2 = 2)=>(test1 + test2);

19. Dizileri birleştirmek

// Uzun kullanımı
const data = [1, 2, 3];
const test = [4, 5, 6].concat(data);


// Kısa Kullanımı
const data = [1, 2, 3];
const test = [4, 5, 6 ...data];
console.log(test) // [4, 5, 6, 1, 2, 3];

20. Şablonlar

Birden çok değişeni tek bir dizede birleştirmek için + kullanmaktan yorulduysanız bu kısaltma tam size göre.

// Uzun kullanımı
const welcome = 'Merhaba' + test1 + ' ' + test2 + '.';

// Kısa Kullanımı
const welcome = `Hi ${test1} ${test2}.`

20. Nesneye atama yapmak

let test1 = 'a';
let test2 = 'b';

// Uzun kullanımı
let obj = {test1: test1, test2: test2};

// Kısa Kullanımı
let obj = {test1, test2};

21. String ifadeleri Number ifadelere çevirmek

// Uzun kullanımı
let test1 = parseInt('123');
let test2 = parseFloat('12.3');

// Kısa Kullanımı
let test1 = + '123';
let test2 = + '12.3';

22. Nesneden değişkenlere atama yapmak.

// Uzun kullanımı
const test1 = this.data.test1;
const test2 = this.data.test2;
const test3 = this.data.test3;

// Kısa Kullanımı
const {test1, test2, test3} = this.data;

23. Dizilerden içerik bulma

Bir dizi nesneye sahip olduğumuzda ve nesne özelliklerine göre belirli bir nesneyi bulmak istediğimizde find yöntemini kullanabiliriz.

// Uzun kullanımı
const data = [{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]
function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === 'test1' && data[i].name === name) {
            return data[i];
        }
    }
}

// Kısa Kullanımı
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

24. Gelen türe göre yöntem çağırma

Türü kontrol eden bir kodumuz varsa ve türe bağlı olarak farklı yöntemler çağırmamız gerekiyorsa kodunuzu ya if kullanarak devam ettirebilirsiniz yada switch kullanabilirsiniz. Fakat bundan daha iyi bir kısaltmamız var.

// Uzun kullanımı
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}

// Kısa Kullanımı
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
 
var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

25. IndexOf yerine Bitwise kullanmak

Belirli bir değeri bulmak için bir diziyi yenilediğimizde indexOf() yöntemini kullanırız, peki bunun için daha iyi bir yaklaşım varsa?

// Uzun kullanımı
if(arr.indexOf(item) > -1) { 
     // item var 
}
if(arr.indexOf(item) === -1) { 
     // item yok
}

// Kısa Kullanımı
if(~arr.indexOf(item)) { 
     // item var
}

if(!~arr.indexOf(item)) { 
     // item yok
}

Bitwise (~) operatör -1 dışında her şey için doğru değer döndürecektir. Olumsuzluk yapmak için başına ! işareti koyduk. Alternatif olarak ES6 ‘da gelen include() işlevini de kullanabiliriz.

if (arr.includes(item)) { 
     // Eğer nesne bulursa çalışacak komutlar. 
}

25. Object.entries() methodu

Bu özellik, nesneyi bir dizi nesneye dönüştürmeye yarar.

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

26. Object.values() methodu

Bu aynı zamanda ES8’de sunulan ve Object.entries() ile benzer bir işlev yerine getiren yeni bir özelliktir. Object.keys() methodu bir nesnedeki key’leri döndürürken, Object.values() methodu keylere ait değerleri dizi nesnesi olarak döndürür.

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/

27. Bitwise kullanarak sayıyı alt tam sayıya yuvarlama.

Not : Bu işlev sadece 32 bit sayılar için geçerlidir.

// Uzun kullanımı
Math.floor(1.9) === 1 // true

// Kısa Kullanımı
~~1.9 === 1 // true

28. Tekrar eden stringler oluşturmak.

Aynı karakter ve kelimeleri tekrar tekrar tekrarlamak için for döngüsünü kullanabilir ve onları aynı döngüye ekleyebiliriz. Bunun kestirme yolu şu şekildedir.

// Uzun kullanımı
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 

// Kısa Kullanımı
'test '.repeat(5);

28. Dizideki en yüksek ve en düşük sayıları bulmak.

const arr = [1, 2, 3]; 
Math.max(…arr); // 3
Math.min(…arr); // 1

28. Üs almak

// Uzun kullanımı
Math.pow(2,3); // 8

// Kısa Kullanımı
2**3 // 8

29. String bir sayı mı?

String olarak elinizde bulunan değerin geçerli sayı olup olmadığını kontrol etmek için bir çok çözüm vardır. Ancak geçerli bir sayı olup olmadığını kontrol etmek istersek aşağıdaki gibi kısa bir fonksiyon yazabiliriz.

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

console.log(isNumeric(123456898898912345678912)); // true
console.log(isNumeric('2 '));                 // true
console.log(isNumeric('-42.2 '));             // true
console.log(isNumeric(-562.2));                // true
console.log(isNumeric(undefined));            // false
console.log(isNumeric(''));                   // false
console.log(isNumeric(null));                 // false
console.log(isNumeric([]));                   // false

29. Seçilen text nasıl panoya aktarılır?

Aşağıdaki bir div’den panoya metin kopyalamak istediğimizce en basit haliyle şu şekilde yapılır.

function CopyToClipboard(containerid) {
    if (window.getSelection) {
        if (window.getSelection().empty) { // Chrome
            window.getSelection().empty();
        } else if (window.getSelection().removeAllRanges) { // Firefox
            window.getSelection().removeAllRanges();
        }
    } else if (document.selection) { // IE?
        document.selection.empty();
    }
if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select().createTextRange();
        document.execCommand("copy");
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
        document.execCommand("copy");
    }
}

Kaynaklar:

0 cevaplar

Cevapla

Want to join the discussion?
Feel free to contribute!

JavaScript Optimizasyon Teknikleri

Cevapla

Bir yanıt yazın Yanıtı iptal et