In this article, we will discuss 10 useful tips and tricks for working with JavaScript. These tips cover a range of topics including manipulating strings and arrays, detecting dark mode preferences, and scrolling to specific elements on a webpage. By learning these techniques, you can improve your efficiency and productivity when working with JavaScript.
1. Copy to clipboard
The code defines a function called "copyToClipboard" which takes in a text parameter. When the function is called and passed a string of text, it uses the clipboard API to write the text to the clipboard. This allows the user to easily copy and paste the provided text into another application or document.
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Text");
2. Make numbers easy to read.
You can insert the underscore (_) symbol anywhere within the number, it will ignored but make the number more easy to read.
const number = 218_4529_589_27_371;
3. Utilise array length as a setter function.
We can truncate arrays by array.length() as a setter function. (You can use this method to empty an array.)
let array = [1, 2, 3, 4, 5];
array.length = 3;
console.log(array);
[1, 2, 3]
4. Scroll to Top or Bottom
You can use window.scrollTo(0, 0) method to automatic scroll to top. Set both x and y as 0.
const goToTop = () => window.scrollTo(0, 0);
goToTop();
Scroll to bottom:
element.scrollIntoView(false);
To scroll a specific element to the bottom:
const scrollToBottom = (id) => {
const element = document.getElementById(id);
element.scrollTop = element.scrollHeight;
}
5. Replace all occusrence of string
Replace all occurrences by using a regular expression with a global flag. We can use the replaceAll method for the same purpose to make it more readable.
const replace_string = "human is great, human is powerful";
console.log(
replace_string.replace( /human/g, "super human" )
);
super human is great, super human is powerful
6. Detect dark mode preference
Check if a user's device is using dark mode as default preference with the following code.
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
7. Remove specific element from an array
To remove all occurence of an element from an array use this function.
const arr = [1, 80, 5, 7];
var i = 0;
while (i < arr.length) {
if (arr[i] === value) {
arr.splice(i, 1);
} else {
++i;
}
}
console.log(arr);
8. Easy Exchange Variables
You probably swap the two variables using a third variable temp. But this tip will show you a new way to exchange variables using destructuring.
var a = 2;
var b = 3;
[a,b] = [b,a]
console.log(a,b)
3 2
9. Shorten the Console log
Tired of writing console.log() again and again? This tip will show how to shorter your console log and speed up your coding.
var c = console.log.bind(document)
c(455)
c("text")
text
10. Flatten an array of array
Flattening an array is a process of reducing the dimensionality of an array. In other words, it a process of reducing the number of dimensions of an array to a lower number.
var arr = [97, 90, [9, 0, [67, 96, [977], 66]], 98, [2587]]
arr.flat(Infinity)
[97, 90, 9, 0, 67, 96, 977, 66, 0, 2587]
Conclusion
By using the tips and tricks outlined in this article, you can enhance your skills and knowledge when working with JavaScript. Whether you are a beginner or an experienced developer, these techniques can help you write cleaner, more efficient code and solve common problems more easily.
