💻 15 JavaScript Techniques to Enhance Your Code

As a popular programming language for web development, JavaScript offers a lot of features and functionalities. Whether you’re a seasoned developer or just getting started, there are always new tips and tricks to learn that can help you write more efficient and effective code. In this blog post, we’ll explore fifteen JavaScript techniques that can help you write better code. Let’s get started.

1-Reverse a String

The following one-liner will reverse a string in JavaScript:

const reversedString = str.split('').reverse().join('');

This code first splits the string into an array of characters, then reverses the order of the characters, and finally joins them back together into a string.

2-Sum of Array Elements

To find the sum of an array in JavaScript, you can use the reduce() method. The reduce() method iterates over each element in the array and reduces it to a single value, which in this case is the sum of all the elements.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 15

The first argument of the reduce() method is a callback function that takes two parameters: total and number. The total parameter is the running total of the array, and number is the current element being processed. The second argument of the reduce() method is the initial value of the total parameter. In this case, it’s set to 0.

3-Largest and Smallest Number in Array

To find the largest and smallest number in an array using JavaScript, you can use the following one-liner:

const numbers = [11, 2, 9, 6, 19];
console.log(Math.max(...numbers)); // 19
console.log(Math.min(...numbers)); // 2

This code uses the spread operator (…) to pass each value in the array as an argument to the Math.max() and Math.min()methods. These methods in turn return the largest and smallest numbers in the array, respectively.

4-Remove Duplicates from Array

To remove duplicate values from an array in JavaScript, you can utilize the Set object and the spread operator (…).

const numbers = [2, 3, 7, 7, 2];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [2, 3, 7]

By creating a new Set object and passing the array as its parameter, you can ensure that only unique values are kept. Then, using the spread operator, you can convert the set back into an array.

5-Looping Objects

The Object.entries() method is used to return an array of an object’s key-value pairs. You can use this method to loop through an object’s properties and perform operations on them.

const person = {
  name: 'Rabi Siddique',
  age: 25,
  city: 'Gujranwala'
};

for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

In this code, we have an object person with three properties: name, age, and city. We use the Object.entries() method to create an array of the key-value pairs of the person object. Then, we use a for...of loop to iterate over the array and destructure each key-value pair into variables key and value. Finally, we log the key and value to the console using a template literal.

6-Copy to ClipBoard

The Clipboard API provides a simple and efficient way to copy text to the clipboard in JavaScript.

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

Inside the function, the navigator.clipboard.writeText() method is called with the text argument to write the content to the clipboard.

7-Offline/Online Status

To check the user’s online/offline status in a web application using JavaScript, you can use the navigator.onLine property.

if (navigator.onLine) {
  console.log('User is online');
} else {
  console.log('User is offline');
}

This property returns a boolean value indicating whether the browser is currently online or offline.

8-Remove Falsy Values

In JavaScript, you can remove falsy values from an array using the filter() method. Falsy values include false, 0, '', null, undefined, and NaN.

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // [1, 2, 3]

In this code, Boolean is passed as the callback function to filter(). The Boolean() function is a built-in function in JavaScript that returns true for truthy values and false for falsy values. By passing Boolean as the callback function, filter() will remove all falsy values from the array arr and return a new array filteredArr with only truthy values.

9-Flattening an Array

To flatten a multi-dimensional array in JavaScript, you can use the flat() method. The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);

console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]

In this code, multiDimensionalArray is a two-dimensional array with two nested arrays. By calling the flat() method with a depth of 2, all sub-array elements are concatenated into a single flat array. The resulting flattenedArray contains all the elements of the original multi-dimensional array in a single dimension.

10-Accessing Custom Attributes

In HTML, data attributes provide a way to store additional data in an element. To access these data attributes in JavaScript, you can use the dataset property of the element.

For example, consider the following HTML element:

<div id="myDiv" data-name="Rabi Siddique" data-age="25"></div>

To access the data-name and data-age attributes of the div element using the dataset property, you can use the following JavaScript code:

const myDiv = document.getElementById('myDiv');
const name = myDiv.dataset.name;
const age = myDiv.dataset.age;

console.log(name); // "Rabi Siddique"
console.log(age);  // "25"

In this code, myDiv.dataset returns an object that contains the values of all the custom data attributes on the div element. We can access a specific data attribute by using its name as a property of the dataset object.

11-Create Array from Iterables

Array.from() is a built-in method in JavaScript that creates a new array from an iterable object or an array-like object.

// Converting String to an array
const str = "Rabi";
const arr = Array.from(str);
console.log(arr); // Output: ["R", "a", "b", "i"]

// Converting Set to an array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

This method can be used to convert various data structures such as strings, Sets, and Maps into an array.

12-Destructuring Arrays

Destructuring assignment is a way to extract values from arrays or objects and assign them to variables in a more concise and readable way. For example, consider the following array:

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

Instead of accessing each element using index notation, we can use destructuring assignment to extract specific values:

const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

In this code, we use square brackets to create a pattern that matches the shape of the array. The commas in the pattern allow us to skip over elements that we’re not interested in. We can then assign the extracted values to new variables (first, second, and fourth) in a single line.

13-Destructuring Objects

We can also use destructuring assignments with objects:

const person = {
  name: 'Rabi Siddique',
  age: 25,
  email: 'rabi@example.com'
};

const {name, age, email} = person;

console.log(name); // 'Rabi Siddique'
console.log(age); // 25
console.log(email); // 'rabi@example.com'

In this code, we use curly braces to create a pattern that matches the shape of the object. The variable names (name, age, and email) match the property names in the object, so the corresponding values are extracted and assigned to the variables.

14-Promise.all()

Promise.all() allows multiple promises to be executed in parallel. It takes an array of promises as input, and returns a new promise that resolves when all the input promises have resolved.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(responses => {
    // handle responses from both requests here
    const response1 = responses[0];
    const response2 = responses[1];
    // do something with the responses
  })
  .catch(error => {
    // handle errors from either request here
    console.error(error);
  });

In this code, we create two promises using the fetch() method to fetch data from two different endpoints. We then pass an array of promises to Promise.all() which returns a new promise that resolves when all of the promises in the array have resolved.

We can then use the responses array in the then() block to handle the responses from both requests. If either promise rejects, the catch() block will handle the error.

15-Detecting Right Clicks in the Browser

To detect a right-click event in JavaScript, you can listen for the contextmenu event which is fired when the user right-clicks on an element. Here's an example code snippet that logs a message to the console when the user right-clicks on the document:

document.addEventListener('contextmenu', (event) => {
  event.preventDefault(); // Prevent the default context menu from showing up
  console.log('Right-click detected!');
});

In this code, we use the addEventListener method to add a contextmenu event listener to the document object. When the event is fired, the callback function is executed, and we prevent the default context menu from showing up by calling the preventDefault() method on the event object. Finally, we log a message to the console to indicate that a right-click event has been detected.

A cool use case for detecting a right-click event in JavaScript could be to create a custom context menu. For example, you could disable the browser’s default context menu and instead create your own menu that appears when the user right-clicks on a specific element or area of your website.

Thank you for reading. I hope this post is helpful to you. If you have any further questions, don’t hesitate to reach out. I’m always happy to help.

Let’s connect:
LinkedIn
Twitter

Level Up Coding

Thanks for being a part of our community! Before you go:

• 👏 Clap for the story and follow the author 👉
• 📰 View more content in the Level Up Coding publication
• 💰 Free coding interview course ⇒ View Course
• 🔔 Follow us: Twitter | LinkedIn | Newsletter

🚀👉 Join the Level Up talent collective and find an amazing job