JavaScript merupakan salah satu bahasa pemrograman yang sangat populer saat ini. Javascript mempunyai banyak keunggulan sehingga membuatnya lebih cocok untuk para programmer pemula. Jika Kamu ingin membuat sebuah website, disarankan untuk belajar JavaScript. Tapi buat kamu yang sudah tahu tentang JavaScripst, berikut adalah tips dan trik JavaScript yang mudah dan berguna untuk mengurangi baris kode dan mempercepat Pekerjaan Dev Kamu!

JavaScript benar-benar bahasa yang luar biasa untuk dipelajari dan digunakan. Dan bisa ada lebih dari satu pendekatan untuk mencapai solusi yang sama untuk sebuah permasalahan. Pada artikel ini, hanya akan membahas cara yang tercepat.

Pendekatan ini pasti akan membantu dalam:

• Mengurangi jumlah LOC (baris kode),
• Kompetisi Pengkodean,
• Hackathon, atau
• tugas terikat waktu lainnya.

Sebagian besar Peretasan JavaScript ini menggunakan teknik dari ECMAScript6(ES2015) dan seterusnya, meskipun versi terbaru adalah ECMAScript11 (ES2020). Berikut ini tips dan trik JavaScript:

1. Deklarasi dan Inisialisasi Array

Kita dapat menginisialisasi array pada ukuran tertentu dengan nilai default seperti “”, null atau 0. Kamu mungkin telah menggunakan ini untuk array 1-D tetapi bagaimana dengan menginisialisasi array/matriks 2-D?

const array = Array(5).fill(''); 
// Output 
(5) ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Output
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5

2. Cari tahu jumlah, nilai minimum dan maksimum

Kita harus menggunakan metode pengurangan untuk menemukan operasi matematika dasar dengan cepat.

const array  = [5,4,7,8,9,2];

• Sum
  

  array.reduce((a,b) => a+b);
  // Output: 35

• Max

array.reduce((a,b) => a>b?a:b);
// Output: 9

• Min

  array.reduce((a,b) => a<b?a:b);
  // Output: 2

3. Sorting Array String, Numbers atau Objects

Kami memiliki metode inbuilt sort() dan reverse() untuk menyortir string tapi Bagaimana dengan angka atau array objek?

Mari kita periksa peretasan penyortiran untuk Angka dan Objek dalam urutan Naik dan Turun juga.

• Sort Sorting Array
  

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Output
(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// Output
(4) ["Steve", "Musk", "Kapil", "Joe"]

• Sort Number Array
  

const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => a-b);
// Output
(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => b-a);
// Output
(6) [100, 40, 25, 10, 5, 1]

• Sort Array of Object
  

  const objectArr = [ 
      { first_name: 'Lazslo', last_name: 'Jamf'     },
      { first_name: 'Pig',    last_name: 'Bodine'   },
      { first_name: 'Pirate', last_name: 'Prentice' }
  ];
  objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
  // Output
  (3) [{…}, {…}, {…}]
  0: {first_name: "Pig", last_name: "Bodine"}
  1: {first_name: "Lazslo", last_name: "Jamf"}
  2: {first_name: "Pirate", last_name: "Prentice"}
  length: 3

4. Perlu memfilter nilai palsu dari array?

Nilai palsu seperti 0, undefined, null, false, “”, ” dapat dihilangkan dengan mudah melalui trik di bawah ini

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// Output
(3) [3, 6, 7]

5. Gunakan Operator Logika untuk berbagai kondisi

Jika Kamu ingin mengurangi kasus bersarang if..else atau switch, Kamu cukup bermain dengan dasar operator logika AND/OR.

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// set arg1 to 10 as a default if it’s not already set
return arg1;
}

let foo = 10;  
foo === 10 && doSomething(); 
// is the same thing as if (foo == 10) then doSomething();
// Output: 10

foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// Output: 10

6. Hapus nilai Duplikat

Kamu mungkin telah menggunakan indexOf() dengan for loop yang mengembalikan indeks pertama kali ditemukan atau yang lebih baru include() yang mengembalikan boolean true/false dari array untuk mencari tahu/menghapus duplikat. Di sini kami memiliki 2 pendekatan yang lebih cepat.

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// Output: [5, 4, 7, 8, 9, 2]

7. Membuat Objek Counter atau Peta

Sebagian besar waktu, kebutuhan untuk memecahkan masalah dengan membuat objek counter atau peta yang melacak variabel sebagai kunci dengan frekuensi/kejadian sebagai nilai.

let string = 'kapilalipak';

const table={}; 
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// Output
{k: 2, a: 3, p: 2, i: 2, l: 2}

dan

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {
      countMap.set(string[i], 1);
    }
  }
// Output
Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. Operator Ternary keren

Kamu bisa menghindari nested conditional if..elseif..elseif dengan operator ternary.

function Fever(temp) {
    return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Go Out and Play!!'
      : temp === 97 ? 'Take Some Rest!';
}

// Output
Fever(97): "Take Some Rest!" 
Fever(100): "Visit Doctor!"

9. Perulangan lebih cepat untuk loop dibandingkan dengan yang lama

• for dan for..in lama membuat Anda terindeks secara default, tetapi Anda dapat menggunakan arr[index].
• for..in menerima non numerik juga jadi hindari.
• forEach, for…of memberi Anda elemen secara langsung.
• forEach bisa membuat Anda mengindeks juga tetapi for…of tidak bisa.
• for dan for…dari mempertimbangkan lubang dalam larik tetapi 2 lainnya tidak.

10. Menggabungkan 2 objek

Seringkali kita perlu menggabungkan beberapa objek dalam tugas sehari-hari.

const user = { 
 name: 'Kapil Raghuwanshi', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };

const summary = {...user, ...college, ...skills};

// Output 
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"

11. Fungsi Arrow

Ekspresi fungsi arrow adalah alternatif ringkas untuk ekspresi fungsi tradisional, tetapi terbatas dan tidak dapat digunakan di semua situasi. Karena mereka memiliki lingkup leksikal (lingkup parental), tidak memiliki this dan arguments sendiri, maka mereka merujuk pada lingkungan di mana mereka didefinisikan.

const person = {
name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// Output
"Kapil"

atau

const person = {
name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// Output
""

12. Rantai Opsional

Rantai opsional?. menghentikan evaluasi jika nilai sebelumnya ?. tidak terdefinisi atau nol dan mengembalikan tidak terdefinisi.

const user = {
  employee: {
    name: "Kapil"
  }
};
user.employee?.name;
// Output: "Kapil"
user.employ?.name;
// Output: undefined
user.employ.name
// Output: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

13. Acak Array

Memanfaatkan metode Math.random() bawaan.

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return Math.random() - 0.5;
});
// Output
(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Operator Penggabungan Nullish 

Operator penggabungan nullish (??) adalah operator logika yang mengembalikan operan sisi kanannya ketika operan sisi kirinya null atau tidak terdefinisi, dan sebaliknya mengembalikan operan sisi kirinya.

const foo = null ?? 'my school';
// Output: "my school"

const baz = 0 ?? 42;
// Output: 0

15. Operator Rest & Spread

3 titik misterius itu … bisa istirahat atau menyebar!

function myFun(a,  b, ...manyMoreArgs) {
   return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");

// Output: 6

dan

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 

lyrics;
// Output: 
(5) ["head", "shoulders", "knees", "and", "toes"]

16. Parameter Default
    

    const search = (arr, low=0,high=arr.length-1) => {
        return high;
    }
    search([1,2,3,4,5]);
    
    // Output: 4

17. Konversi Desimal ke Biner atau Hexa

Kita dapat menggunakan beberapa metode built-in seperti .toPrecision() atau .toFixed() untuk mencapai banyak fungsi yang membantu sambil memecahkan masalah.

const num = 10;

num.toString(2);
// Output: "1010"
num.toString(16);
// Output: "a"
num.toString(8);
// Output: "12"

18. Sederhana Swap 2 nilai menggunakan Destructuring
    

    let a = 5;
    let b = 8;
    [a,b] = [b,a]
    
    [a,b]
    // Output
    (2) [8, 5]

19. Single-liner Palindrome check

Nah, ini bukan trik singkatan secara keseluruhan tetapi akan memberikan ide yang jelas untuk bermain dengan string.

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Output: true

20. Ubah atribut Object menjadi Array atribut

Menggunakan Object.entries(),Object.keys() dan Object.values()

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// Output
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3) ["a", "b", "c"]

Object.values(obj);
(3) [1, 2, 3]