DEV Community

loading...
Cover image for Master Javascript dengan Shorthand Teknik

Master Javascript dengan Shorthand Teknik

Aldi Pranata
・2 min read

Sebagai seorang developer penting banget buat kita untuk selalu menghemat waktu dalam proses penulisan kode. Kalo ada cara yang lebih mudah dan lebih efektif untuk mencapai suatu tujuan, why not we using it? Berikut gua sharing beberapa teknik shorthand dalam penulisan kode dengan JavaScript.

Deklarasi Variable

Kamu bisa mendeklarsikan lebih dari satu variabel hanya dengan menulis satu barus kode.


//Long version  
let a;   
let b = 1; 
let c = 'Ketoprak';

//Shorthand  
let a, b = 1, c = 'Ketoprak';
Enter fullscreen mode Exit fullscreen mode

Assign values dengan multiple Variable

let x = 1;   
let y = 2;   
let z = 3; 

//Shorthand  
let [x, y, z] = [1, 2, 3];
Enter fullscreen mode Exit fullscreen mode

Default Value

You can set default values with the || (OR) operator. If the value onn the left side is falsy it will use the one on the right.

// Long Version
let finalName;   
let name = getName();   
if(name !== null && name !== undefined && name !== '') {  
    finalName = name;   
} else {  
    finalName = 'Pranata'  
}

// Shorthand  
let finalName = getName() || 'Pranata';
Enter fullscreen mode Exit fullscreen mode

Ternary Operator

Kamu bisa menuliskan if else statements dalam satu baris kode dengan menggunakan ternary (?:) operator.

//Long version  
let points = 70;   
let result;   
if(marks >= 50){  
    result = 'Pass';   
}else{  
    result = 'Fail';   
}

//Shorthand  
let points = 70;   
let result = marks >= 50 ? 'Pass' : 'Fail';
Enter fullscreen mode Exit fullscreen mode

Template Literals

Biasanya kita menggunakan + (plus) operator untuk menggabungkan string dengan sebuah variable. Dengan ES6 kita bisa menggunakan fitur template literals.

// Long version  
console.log('Hello ' + name +', it is ' + day); 

//Shorthand  
console.log(`Hello ${name}, it is ${day}`);
Enter fullscreen mode Exit fullscreen mode

Menukar dua variabel

let x = 1, y = 2;
//Long version
const temp = x;
x = y;
y = temp;

//Shorthand
[x, y] = [y, x];
Enter fullscreen mode Exit fullscreen mode

AND(&&) Short circuit evaluation

Kamu bisa menggunakan operator && apabila kamu ingin mengeksekusi sebuah function berdasarkan sebuah variable yang bernilai true

// Long version
if (isLoggedin) {
    redirectToHomepage();
}

//Shorthand
isLoggedin && redirectToHomepage();
Enter fullscreen mode Exit fullscreen mode

Multipe Condition

Ketika kita akan melakukan pengecekan pada sebuah variable yang memiliki kondisi terpenuhi lebih dari satu (OR ||), maka kita bisa menggunakan teknik shorthand dengan array.

//Long version 
const value = 'ADMIN';
if (value === 'ADMIN' || value === 'STAFF' || value === 'MANAGER') {  
    //Eksekusi Kode 
}

//Shorthand version
const value = 'ADMIN';
if(['ADMIN', 'STAFF', 'MANAGER'].includes(value)){
    //Eksekusi Kode 
}
Enter fullscreen mode Exit fullscreen mode

Konversi String ke Number

Kamu bisa mengkonversi sebuah string menjadi tipe data number hanya dengan menambahkan operator + (plus) sebelum string tersebut.

// Long version  
let total = parseInt('45');   
let average = parseFloat('421.6'); 

//Shorthand  
let total = +'45';   
let average = +'421.6';
Enter fullscreen mode Exit fullscreen mode

Discussion (0)