DEV Community

MD Hasan Patwary
MD Hasan Patwary

Posted on

JavaScript Tips and Tricks for Developers

JavaScript is a versatile language with numerous features that can make coding more efficient and enjoyable. Here are some useful tips and tricks every developer should know, complete with code snippets and detailed descriptions to help you understand and implement them easily.

1. Swapping Values

Swapping values in an array or between variables can be done in multiple ways. Here are three methods:

Using a Temporary Variable
Using a temporary variable is a straightforward method for swapping values.

let array = [1, 2, 3, 4, 5];
let temp = array[0];
array[0] = array[4];
array[4] = temp;
console.log(array); // Output: [5, 2, 3, 4, 1]
Enter fullscreen mode Exit fullscreen mode

Using Array Destructuring
Array destructuring is a concise and modern way to swap values.

[array[0], array[4]] = [array[4], array[0]];
console.log(array); // Output: [5, 2, 3, 4, 1]
Enter fullscreen mode Exit fullscreen mode

Using Arithmetic Operations
This method uses arithmetic operations to swap values without a temporary variable.

let a = 1, b = 2;
b = a + (a = b) - b;
console.log(a, b); // Output: 2 1
Enter fullscreen mode Exit fullscreen mode

2. Copy to Clipboard

Copying text to the clipboard can be done using the following function, which creates a temporary textarea element, selects its content, and executes the copy command.

function copyToClipBoard(str) {
  const element = document.createElement("textarea");
  element.value = str;
  document.body.appendChild(element);
  element.select();
  document.execCommand("copy");
  document.body.removeChild(element);
}

function handleClick() {
  let text = document.querySelector("#text");
  copyToClipBoard(text.innerText);
}
Enter fullscreen mode Exit fullscreen mode

When handleClick is called, it copies the text content of the element with the id text to the clipboard.

3. Destructuring Aliases

Destructuring objects with aliases allows you to rename properties when extracting them, making your code cleaner and more readable.

const language = {
  name: "JavaScript",
  founded: 1995,
  founder: "Brendan Eich",
};

const { name: languageName, founder: creatorName } = language;
console.log(languageName, creatorName); // Output: JavaScript Brendan Eich
Enter fullscreen mode Exit fullscreen mode

4. Get Value as Data Type

You can retrieve the value of an input element as a specific data type, such as a number, using valueAsNumber.

const element = document.querySelector("#number").valueAsNumber;
console.log(typeof element); // Output: number
Enter fullscreen mode Exit fullscreen mode

5. Remove Duplicates from Array

Removing duplicates from an array can be easily achieved using a Set, which only stores unique values.

const array = [1, 2, 2, 2, 3, 5, 6, 5];
console.log([...new Set(array)]); // Output: [1, 2, 3, 5, 6]
Enter fullscreen mode Exit fullscreen mode

6. Compare Two Arrays by Value

To check if two arrays have the same elements in the same order, you can use the following function:

const hasSameElements = (a, b) => {
  return a.length === b.length && a.every((v, i) => v === b[i]);
};

console.log(hasSameElements([1, 2], [1, 2])); // Output: true
console.log(hasSameElements([1, 2], [2, 1])); // Output: false
Enter fullscreen mode Exit fullscreen mode

7. Shuffling Array

Shuffle an array using sort and Math.random to randomize the order of elements.

const numbers = [1, 2, 3, 4, 5, 6];
console.log(numbers.sort(() => Math.random() - 0.5)); // Output: [3, 5, 1, 6, 4, 2] (example, output may vary)
Enter fullscreen mode Exit fullscreen mode

8. Comma Operator

The comma operator allows you to include multiple expressions in a context where only one is expected. It evaluates each expression from left to right and returns the value of the last expression.

let x = 1;
x = (x++, x);
console.log(x); // Output: 2

let y = (2, 3);
console.log(y); // Output: 3

let a = [[1, 2, 3, 4], [3, 4, 5], [5, 6], [7]];
for (let i = 0, j = 3; i <= 3; i++, j--) {
  console.log("a[" + i + "][" + j + "] = " + a[i][j]);
  // Output:
  // a[0][3] = 4
  // a[1][2] = 5
  // a[2][1] = 6
  // a[3][0] = 7
}
Enter fullscreen mode Exit fullscreen mode

Additional Tips

Converting NodeList to Array
You can convert a NodeList to an array using the spread operator or Array.from().

const nodeList = document.querySelectorAll("div");
const nodeArray = [...nodeList]; // or Array.from(nodeList);
console.log(Array.isArray(nodeArray)); // Output: true
Enter fullscreen mode Exit fullscreen mode

Using Default Parameters

Default parameters allow you to initialize a function parameter with a default value if no value is provided.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Guest!
greet("John"); // Output: Hello, John!
Enter fullscreen mode Exit fullscreen mode

Finding Unique Elements in Arrays

Use the filter method along with indexOf and lastIndexOf to find unique elements in an array.

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.filter((value, index, self) => {
  return self.indexOf(value) === self.lastIndexOf(value);
});
console.log(uniqueNumbers); // Output: [1, 3, 5]
Enter fullscreen mode Exit fullscreen mode

These tips and tricks can help you write more efficient and cleaner code in JavaScript. Keep experimenting and exploring to find more ways to enhance your coding skills!

Top comments (3)

Collapse
 
kaushal_g profile image
Kaushal Gohil

Nice Explanation!! will give it a try

Collapse
 
ohuton55 profile image
Yuuka Kumai

I didn't know these tips and I surprised to efficiency. Thanks your knowledge!

Collapse
 
mdhassanpatwary profile image
MD Hasan Patwary

Thank you for your kind words! I'm glad to hear you found the tips helpful.