DEV Community

loading...
Cover image for 5 Trik Javascript yang paling berguna

5 Trik Javascript yang paling berguna

Aldi Pranata
・4 min read

Pada tulisan kali ini, gua akan berbagi tentang beberapa tips dan trik yang gua pribadi sendiri sering gunakan, dan gua yakin setelah kalian menggunakan trik-trik berikut penulisan kode JavaScript kamu akan semakin mudah, simpel, dan jauh lebih rapi.

1. Mengkonversi tipe data String ke Number

Ada pepatah bilang 'Banyak jalan menuju roma'. Persis banget dalam kasus ini, kalo kamu ingin mengkonversi sebuah value dari tida data string menjadi number di JavaScript kamu bisa menggukanakan beberapa cara.

Unary + operator

Cara paling mudah, sederhana dan paling banyak digunakan untuk kasus ini adalah dengan menggunakan Unary Plus (+) Operator.

const age = '39'; // string

console.log(+age) // 39 -> number
Enter fullscreen mode Exit fullscreen mode

Operasi unary adalah operasi dengan hanya satu operan. Operand ini datang sebelum atau sesudah operator.

Unary Plus (+) Operator berfungsi mengkonversi sebuah value dari sebuah operand dan mengkonversinya menjadi tipe data berbentuk number apabila operand itu tidak memiliki tipe data number.

+true  // 1
+false // 0
+null  // 0
Enter fullscreen mode Exit fullscreen mode

Number

Number adalah primitive wrapper object yang digunakan untuk membuat dan memanipulasi value dengan tipe data number. Ketika kita menggunakan Number sebagai sebuah method Number(value) maka method ini akan mengkonversikan sebuah string atau tipe data lain yang merupakan bukan angka menjadi tipe data number. Apabila value yang di insert sebagai parameter tidak dapat dikonversikan menjadi sebuah tipe data number maka Number(value) akan menghasilan NaN (Not a Number).

Number('42')   // 42
Number('1.3')  // 1.3
Number('tax')  // NaN
Enter fullscreen mode Exit fullscreen mode

parseInt

parseInt() adalah sebuah method yang membutuhkan value dengan tipe data string. Method ini akan menghasilkan sebuah value dengan tipe data number

parseInt('1234', 10)       // 1234
parseInt('11 players', 10) // 11
parseInt('player 2', 10)   // NaN
parseInt('10.81', 10)      // 10
Enter fullscreen mode Exit fullscreen mode

Pada sample kode diatas bisa dilihat bahwa, parseInt() akan berjalan apabila memenuhi dua kondisi yaitu; pada string yang dimasukan sebagai parameter tersebut terdapat sebuah angka; dan string tersebut diawali dengan angka. Apabila dua kondisi ini tidak terpenuhi maka method ini akan menghasilkan NaN.

2. Mengelola Object pada JavaScript

Destructuring adalah fitur baru yang diperkenalkan oleh ECMAScript 2015 atau sering disebut ES6. Fitur ini memungkinkan kita 'membongkar' isi sebuah array atau isi dari sebuah object kemudian disimpan pada satu atau beberapa variable. Dengan menggukana fitur ini, kalian dapat menulis kode dengan lebih rapih serta menghemat baris kode secara signifikan.

const selectedItem = { itemName : 'Parfum', itemPrice : 97000 };
const { itemName, itemPrice } = selectedItem;

console.log(itemName) // 'Parfum'
console.log(itemPrice) // 97000
Enter fullscreen mode Exit fullscreen mode

Kita bahkan bisa mengganti nama properti didalam object yang sebelum kita assign menjadi sebuah variabel.

const selectedItem = { itemName : 'Parfum', itemPrice : 97000 };
const { itemName : selectedItemName, itemPrice : selectedItemPrice } = selectedItem;

console.log(selectedItemName) // 'Parfum'
console.log(selectedItemPrice ) // 97000
Enter fullscreen mode Exit fullscreen mode

Destructuring juga dapat digunakan pada sebuah function yang menghasilkan sebuah object

function getCustomer() {
  return {
    firstName: 'Max',
    lastName: 'Best',
    age: 42
  }
}

const { age } = getPerson();
console.log(age); // 42
Enter fullscreen mode Exit fullscreen mode

Dengan menggunakan Desctruciton pada function yang menghasilkan object, kita memiliki fleksibilats untuk mengambil data-data yang ingin kita gunakan dan disimpan sebagai variable.

Kegunaan lain dari Desctruction ini adalah kita bisa mengambil data-data yang kita gunakan dan mengabaikan data-data yang tidak perlu. Kita bisa melakukan ini dengan cara meng-assign object tersbebut ke dalam variabel baru bernama *person*, seperti berikut :

function getPerson() {
  return {
    firstName: 'Max',
    lastName: 'Best',
    age: 42
  }
}

const { age:_, ...person } = getPerson();

console.log(person) // {firstName: "Max", lastName: "Best"}
Enter fullscreen mode Exit fullscreen mode

Pada kode diatas bisa dilihat bahwa variable *person* memiliki semua data properti yang berasal dari function getPerson() kecuali properti*age*, karena kita melakukan pengecualian dengan cara age:_.

3. Menukar dua variabel

Di JavaScript kita bisa melakukan penukaran value antara dua variable dengan trik sederhana seperti berikut :

let me = 'happy', you = 'sad';
[me, you] = [you, me];
// me = 'sad', you = 'happy'
Enter fullscreen mode Exit fullscreen mode

4. Default Variabel dan Parameter

Adakalanya ketika kita membuat sebuah function, didalam function tersebut kita melakukan pengecekan berulang kali untuk memastikan parameter yang akan diterima oleh function tersebut tidak kosong atau tidak memiliki value, sehingga function kita tidak error ketika dipanggil. Hal ini menyebabkan banyak sekali perkondisian if dan else statement untuk memastikan bahwa function tersebut tidak menerima parameter kosong. Kita bisa menghindari ini dengan menggunakan default value.

Default Parameter

Perhatikan function dibawah ini :

function calculateArea(width, height) {
    return width * height;
}

const area = calculateArea(50);
console.log(area) // NaN
Enter fullscreen mode Exit fullscreen mode

Function diatas mewajibkan kita memasukan dua parameter, width dan height untuk mendapatkan hasil kalkulasi dari width * height. Tetapi pada kode diatas kita hanya memasukan satu parameter saja calculateArea(50). Sehingga function tersebut tidak berjalan dengan baik karena kekurangan data untuk melakukan kakulasi dan menghasilkan value NaN (Not a Number). Untuk menghindari hal ini terjadi kita bisa memberikan default value pada salah satu parameter yang akan diterima oleh function tersebut.

function calculateArea(width, height = 100) {
    return width * height;
}

const area = calculateArea(50);
console.log(area) // 5000
Enter fullscreen mode Exit fullscreen mode

Pada kode diatas kita memberikan default value pada parameter height dengan nilai 100. Sehingga apabila calculateArea() dipanggil hanya dengan satu parameter saja. Maka secara otomatis nilai dari height pada function tersebut menjadi 100.

Apabila calculateArea() dipanggil dengan dua parameter, maka nilai dari height akan mengikuti nilai yang di-asssign ketika function tersebut dipanggil, seperti kode berikut :

function calculateArea(width, height=100) {
    return width * height;
}

const area = calculateArea(50,12);
Enter fullscreen mode Exit fullscreen mode

Default Objects Property

Ada trik lain ketika kita melakukan desctruction pada sebuah object, yaitu kita dapat memberikan default value sebelum kita menyimpan nilai dari properti tersebut menjadi variable.

const box= { height: 400 };
const { height = 750, width = 500 } = box;
console.log(height); // 400 - berasal dari object box
console.log(width);  // 500 - default value dari width, karen tidak ada pada object box
Enter fullscreen mode Exit fullscreen mode

5. Menyingkirkan duplicate value pada Array.

Ada banyak cara untuk menyingkirkan duplicate data pada sebuah array. Namun menurut gua cara yang paling sederhana adalah menggunakan method Set yang akan menyimpan unique value dengan segala bentuk tipe data. Dengan kata lain Set akan menyingkirkan values yang terdeteksi sebagai duplicate data.

const names = ['John', 'Paul', 'George', 'Ringo', 'John'];

let uniqueName = [...new Set(names)];
console.log(uniqueName ); // 'John', 'Paul', 'George', 'Ringo'
Enter fullscreen mode Exit fullscreen mode

Atau dengan menggunakan filter()

const names = ['John', 'Paul', 'George', 'Ringo', 'John'];

let x = (names) => names.filter((v,i) => names.indexOf(v) === i)
x(names); // 'John', 'Paul', 'George', 'Ringo'
Enter fullscreen mode Exit fullscreen mode

Discussion (0)