15 Tip JavaScript yang Berguna

Artikel ini mengumpulkan beberapa Tips JavaScript umum dari seluruh web. Saya telah menggunakan semua tip ini dalam proyek saya dan merekomendasikannya hari ini.

1. Pemisah nomor

Untuk meningkatkan keterbacaan angka, Anda dapat menggunakan garis bawah sebagai pemisah.

const largeNumber = 1_000_000_000;

console.log(largeNumber); // 1000000000

Jika Anda ingin menambahkan event listener dan menjalankannya hanya sekali, Anda dapat menggunakan opsi sekali.

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});

Di console.log(), sertakan argumen dalam kurung kurawal sehingga Anda dapat melihat nama variabel dan nilai variabel.

const name = "Maxwell";
    console.log({ name });

      
                

                    
                    
                
            

Anda dapat menggunakan KeyboardEvent.getModifierState()untuk mendeteksi jika Caps Lock aktif.

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('keyup', function (event) {
    if (event.getModifierState('CapsLock')) {
        // CapsLock is open
    }
});

Anda dapat menggunakan Math.min() atau Math.max()dikombinasikan dengan operator ekstensi untuk menemukan nilai minimum atau maksimum dalam sebuah array.

const numbers = [5, 7, 1, 4, 9];

console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1

Anda dapat menggunakan nilai clientX dan clientY properti MouseEvent objek untuk mendapatkan informasi tentang koordinat posisi mouse saat ini.

document.addEventListener('mousemove', (e) => {
    console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});

Anda dapat menggunakan Clipboard API untuk membuat fungsi "Copy to Clipboard".

function copyToClipboard(text) {
    navigator.clipboard.writeText(text);
}

Jika fungsi dijalankan hanya ketika kondisinya benar, Anda dapat menggunakan singkatan &&.

// Common writing method
if (condition) {
    doSomething();
}

// Abbreviations
condition && doSomething();

Tata bahasa:

console.table(data [, columns]);

• data Menunjukkan data yang akan ditampilkan. Itu harus berupa array atau objek.
• columns Merupakan array yang berisi nama-nama kolom.

function Person(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    const p1 = new Person("Mark", "Smith");
    const p2 = new Person("Maxwell", "Siegrist");
    const p3 = new Person("Lucy", "Jones");

    console.table([p1, p2, p3], ["firstName"]);

       
                

                    
                    
                
            

const str = '508';

console.log(+str) // 508;

const numbers = [2, 3, 5, 5, 2];

console.log([...new Set(numbers)]); // [2, 3, 5]

const myArray = [1, undefined, NaN, 2, null, '@maxwell', true, 5, false];

console.log(myArray.filter(Boolean)); // [1, 2, "@maxwell", true, 5]

const myTech = 'JavaScript';
const techs = ['HTML', 'CSS', 'JavaScript'];

// Common writing method
if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // do something
}

// includes writing method
if (techs.includes(myTech)) {
    // do something 
}

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100

<div id="user" data-name="Maxwell" data-age="32" data-something="Some Data">
    Hello Maxwell
</div>

<script>
    const user = document.getElementById('user');
  
    console.log(user.dataset); 
    // { name: "Maxwell", age: "32", something: "Some Data" }
  
    console.log(user.dataset.name); // "Maxwell"
    console.log(user.dataset.age); // "32"
    console.log(user.dataset.something); // "Some Data"
</script>

Tertarik untuk menskalakan startup perangkat lunak Anda ? Lihat Sirkuit .