Minifikasi Kode

Ketika melepas kode Javascript kita ke khalayak, atau mode produksi, pengguna tidak akan terlalu mempersalahkan kode yang kita buat. Oleh karena itu, ada beberapa cara mengompresi kode agar dapat menghemat penggunaan karakter. Semakin hemat karakter, semakin kecil file kodenya, semakin cepat file tersebut diunduh ke browser, dan semakin cepat halaman web akan tersaji.

Menghemat kode yang berulang

function toggleImage(id) {
    if (document.getElementById(id).src.indexOf("1.png") > -1) {
        document.getElementById(id).src = document.getElementById»(id).src.replace("1.png", "2.png");
    }
}

Menjadi

function toggleImage(id){
  var image = document.getElementById(id);
    if (image.src.indexOf("1.png") > -1){
      image.src = image.src.replace("1.png", "2.png");
    }
}

Lalu

function toggleImage(b) {
    var a = document.getElementById(b);
    if (a.src.»indexOf("1.png") > -1) {
        a.src = a.src.replace("1.png", "2.png")
    }
};

Mengurangi penyebutan var pada variabel

var image = document.getElementById("myImage");
var div = document.getElementById("myDiv");

menjadi

var image = document.getElementById("myImage"),
  div = document.getElementById("myDiv");

Mengurangi penyebutan ulang kata return

function getValueFor(data) {
    if (firstCondition(data)) {
        return 1;
    } else if (secondCondition(data)) {
        return 2;
    } else if (thirdCondition(data)) {
        return 3;
    } else {
        return 4;
    }

}

Menjadi

function getValueFor(data) {
    var value;
    if (firstCondition(data)) {
        value = 1;
    } else if (secondCondition(data)) {
        value = 2;
    } else if (thirdCondition(data)) {
        value = 3;
    } else {
        value = 4;
    }
    return value;

}

Atau bahkan sedikit lebih sederhana menjadi

function getValueFor(data) {
    var value = 4;
    if (firstCondition(data)) {
        value = 1;
    } else if (secondCondition(data)) {
        value = 2;
    } else if (thirdCondition(data)) {
        value = 3;
    }
    return value;

}

Melokalkan variabel global

function createMessageElement(message) {
    var div = document.createElement("div");
    div.innerHTML = message;
    document.body.appendChild(div);
}

Menjadi

function createMessageElement(message) {
    var doc = document,
        div = doc.createElement("div");
    div.innerHTML = message;
    doc.body.appendChild(div);
}

Self Invocating Function

function doSomething(){
  //code here
}
doSomething();

Menjadi

(function(){
  //code here
})();