20 Useful JavaScript Tips for Improved Development Efficiency
As a developer, you are always looking for ways to improve your skills and increase your efficiency. In this article, we will share 20 useful JavaScript tips that can help you do just that. From simple ways to improve readability to more advanced techniques, these tips are sure to come in handy in your projects.
1. Number Separator
When working with large numbers, it can be difficult to read and understand them at a glance. One simple way to improve their readability is to use underscores as separators.
const largeNumber = 1_000_000_000;
console.log(largeNumber); // 1000000000
2. Event Listeners Run Only Once
Sometimes you may want to add an event listener to an element, but you only want it to run once. You can use the once option to accomplish this:
element.addEventListener('click', () => console.log('I run only once'), {
once: true
});
3. Console.log Variable Wrapper
When using console.log(), you can enclose the arguments in curly braces to see both the variable name and the variable value. This can be helpful for debugging and understanding your code better.
const name = "Maxwell";
console.log({ name });
4. Check That Caps Lock Is On
You can use the KeyboardEvent.getModifierState()
method to detect if Caps Lock is on. This can be useful if you are working on a login form or other application where the case of letters matters.
const passwordInput = document.getElementById('password');
passwordInput.addEventListener('keyup', function (event) {
if (event.getModifierState('CapsLock')) {
// CapsLock is open
}
});
5. Get Min/Max Values from an Array
If you want to find the minimum or maximum value in an array, you can use the Math.min()
or Math.max()
functions in combination with the spread operator (...).
const numbers = [5, 7, 1, 4, 9];
console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1
6. Get the Mouse Position
The clientX
and clientY
properties of the MouseEvent
object can be used to get information about the coordinates of the current mouse position.
document.addEventListener('mousemove', (e) => {
console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});
7. Copy to Clipboard
The Clipboard API can be used to create a "Copy to Clipboard" function. Here's an example of how to do it:
function copyToClipboard(text) {
navigator.clipboard.writeText(text);
}
8. Shorten Conditional Judgment Statements
If you have a function that is only executed when a condition is true, you can use the &&
shorthand to write it more concisely. For example:
// Common writing method
if (condition) {
doSomething();
}
// Abbreviated
condition && doSomething();
9. Use Console.table()
for Formatted Tables
The console.table() method can be used to print data in a table format in the console. The syntax is:
console.table(data [, columns]);
Here's an example of how to use it:
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"]);
10. Convert Strings to Numbers
You can use the unary plus operator (+
) to quickly convert a string to a number. For example:
const str = '508';
console.log(+str) // 508;
11. De-duplicate an Array
You can use the spread operator and the Set
object to remove duplicates from an array. Here's an example:
const numbers = [2, 3, 5, 5, 2];
console.log([...new Set(numbers)]); // [2, 3, 5]
12. Filter Out Dummy Values from an Array
If you want to filter out dummy values (such as undefined
, null
, and NaN
) from an array, you can use the filter()
method. Here's an example:
const myArray = [1, undefined, NaN, 2, null, '@maxwell', true, false];
const filteredArray = myArray.filter(Boolean);
console.log(filteredArray); // [1, 2, '@maxwell', true, false]
13. Create a URL Query String
You can use the URLSearchParams
object to create a URL query string from an object. Here's an example:
const queryObject = {
page: 2,
search: 'javascript'
};
const searchParams = new URLSearchParams(queryObject);
const queryString = searchParams.toString();
console.log(queryString); // "page=2&search=javascript"
14. Check if an Element Is in the Viewport
You can use the getBoundingClientRect()
method and the window.innerWidth
and window.innerHeight
properties to check if an element is in the viewport. Here's an example:
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
);
}
15. Create a Throttled Function
If you want to limit the rate at which a function is called, you can use the setTimeout()
method to create a "throttled" function. Here's an example:
function throttle(callback, delay) {
let timeout;
return function() {
const context = this;
const args = arguments;
if (!timeout) {
timeout = setTimeout(function() {
callback.apply(context, args);
timeout = null;
}, delay);
}
};
}
const myThrottledFunc = throttle(function() {
console.log('I am throttled');
}, 1000);
myThrottledFunc(); // Will log "I am throttled"
myThrottledFunc(); // Will not log
setTimeout(myThrottledFunc, 1500); // Will log "I am throttled" after 1500ms
16. Use Array.includes()
for Quick Membership Checking
The Array.includes()
method can be used to quickly check if an element is in an array. It is more concise than using the indexOf()
method. Here's an example:
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false
17. Use Array.find()
to Get the First Matching Element
The Array.find()
method can be used to get the first element in an array that matches a specific condition. Here's an example:
const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(number => number % 2 === 0);
console.log(evenNumber); // 2
18. Use Object.values()
to Get an Array of an Object's Values
The Object.values()
method can be used to get an array of an object's values. This can be useful when you want to work with the values of an object in an array-like manner. Here's an example:
const person = {
firstName: 'Maxwell',
lastName: 'Siegrist',
age: 30
};
console.log(Object.values(person)); // ['Maxwell', 'Siegrist', 30]
19. Use Array.reduce()
to Sum Arrays
The Array.reduce()
method can be used to reduce an array to a single value by applying a function to each element. Here's an example of how to use it to sum an array:
const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;
console.log(myArray.reduce(reducer)); // 100
20. Access Element's Custom Data Attributes with the dataset Property
The dataset
property can be used to access an element's custom data attributes (data-*
). Here's an example:
<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>
Conclusion
In this article, we covered 20 useful JavaScript tips that can help you improve your development efficiency. These tips included:
- Using underscores as separators to improve the readability of large numbers
- Adding event listeners that run only once
- Wrapping
console.log
arguments in curly braces to see both the variable name and value - Using
KeyboardEvent.getModifierState()
to check if Caps Lock is on - Using
Math.min(
) andMath.max()
with the spread operator to find the minimum or maximum value in an array - Getting the mouse position with clientX and clientY properties of the MouseEvent object
- Copying to the clipboard with the Clipboard API
- Shortening conditional judgment statements with the && shorthand
- Printing tables in the console with console.table()
- Converting strings to numbers with the unary plus operator
- De-duplicating arrays with the spread operator and the Set object
- Filtering out dummy values from an array with the
filter()
method - Creating a URL query string with the
URLSearchParams
object - Checking if an element is in the viewport with
getBoundingClientRect()
andwindow.innerWidth
andwindow.innerHeight
- Creating a throttled function with
setTimeout()
- Using
Array.includes()
for quick membership checking - Using
Array.find()
to get the first matching element in an array - Using
Object.values()
to get an array of an object's values - Using
Array.reduce()
to sum arrays - Accessing an element's custom data attributes with the dataset property
I hope these tips will help you improve your development efficiency and take your skills to the next level. Happy coding!
Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.
Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.
Momo: NGUYỄN ANH TUẤN - 0374226770
TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)
All rights reserved