Welcome to our curated collection of JavaScript tricks, which will help you optimize your code, make it more readable, and save you time.
Let’s dive into the depths of JavaScript functionalities and hacks that go beyond the conventional and discover the full potential of this powerful programming language.
1. Using !! to Convert to Boolean
Quickly convert any value to a boolean by using double negation.
let truthyValue = !!1; // true
let falsyValue = !!0; // false
2. Default Function Parameters
Set default values for function parameters to avoid undefined errors.
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
3. The Ternary Operator for Short If-Else
A shorthand for the if-else
statement.
let price = 100;
let message = price > 50 ? "Expensive" : "Cheap";
4. Template Literals for Dynamic Strings
Use template literals for embedding expressions in strings.
let item = "coffee";
let price = 15;
console.log(`One ${item} costs $${price}.`);
5. Destructuring Assignment
Easily extract properties from objects or arrays.
let [x, y] = [1, 2];
let {name, age} = {name: "Alice", age: 30};
6. The Spread Operator for Array and Object Cloning
Clone arrays or objects without referencing the original.
let originalArray = [1, 2, 3];
let clonedArray = [...originalArray];
7. Short-circuit Evaluation
Use logical operators for conditional execution.
let isValid = true;
isValid && console.log("Valid!");
8. Optional Chaining (?.)
Safely access nested object properties without an error if a reference is nullish
.
let user = {name: "John", address: {city: "New York"}};
console.log(user?.address?.city); // "New York"
9. Nullish Coalescing Operator (??)
Use ??
to provide a default value for null
or undefined
.
let username = null;
console.log(username ?? "Guest"); // "Guest"
10. Using map
, filter
, and reduce
for Array Manipulation
Elegant ways to handle arrays without traditional loops.
// Map
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);
// Filter
const evens = numbers.filter(x => x % 2 === 0);
// Reduce
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
11. Tagged Template Literals
Function calls using template literals for custom string processing.
function highlight(strings, ...values) {
return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, '');
}
let price = 10;
console.log(highlight`The price is ${price} dollars.`);
12. Using Object.entries() and Object.fromEntries()
Convert objects to arrays and back for easier manipulation.
let person = {name: "Alice", age: 25};
let entries = Object.entries(person);
let newPerson = Object.fromEntries(entries);
13. The Set Object for Unique Elements
Use Set to store unique values of any type.
let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];
14. Dynamic Property Names in Objects
Use square brackets in object literal notation to create dynamic property names.
let dynamicKey = 'name';
let person = {[dynamicKey]: "Alice"};
15. Function Currying Using bind()
Create a new function that, when called, has its this keyword set to the provided value.
function multiply(a, b) {
return a * b;
}
let double = multiply.bind(null, 2);
console.log(double(5)); // 10
16. Using Array.from() to Create Arrays from Array-like Objects
Convert array-like or iterable objects into true arrays.
let nodeList = document.querySelectorAll('div');
let nodeArray = Array.from(nodeList);
17. The for…of Loop for Iterable Objects
Iterate over iterable objects (including arrays, maps, sets, etc.) directly.
for (let value of ['a', 'b', 'c']) {
console.log(value);
}
18. Using Promise.all() for Concurrent Promises
Run multiple promises concurrently and wait for all to settle.
let promises = [fetch(url1), fetch(url2)];
Promise.all(promises)
.then(responses => console.log('All done'));
19. The Rest Parameter for Function Arguments
Capture any number of arguments into an array.
function sum(...nums) {
return nums.reduce((acc, current) => acc + current, 0);
}
20. Memoization for Performance Optimization
Store function results to avoid redundant processing.
const memoize = (fn) => {
const cache = {};
return (...args) => {
let n = args[0]; // assuming single argument for simplicity
if (n in cache) {
console.log('Fetching from cache');
return cache[n];
}
else {
console.log('Calculating result');
let result = fn(n);
cache[n] = result;
return result;
}
};
};
21. Using ^ for Swapping Values
Swap the values of two variables without a temporary variable using the XOR bitwise operator.
let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1
22. Flattening Arrays with flat()
Easily flatten nested arrays using the flat()
method, with the depth of flattening as an optional argument.
let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);
23. Converting to Numbers with Unary Plus
Quickly convert strings or other values to numbers using the unary plus operator.
let str = "123";
let num = +str; // 123 as a number
24. Template Strings for HTML Fragments
Use template strings to create HTML fragments, making dynamic HTML generation cleaner.
let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
25. Using Object.assign() for Merging Objects
Merge multiple source objects into a target object, effectively combining their properties.
let obj1 = { a: 1 }, obj2 = { b: 2 };
let merged = Object.assign({}, obj1, obj2);
Optimize your programming setup with an ergonomic mouse, tailored for comfort and long coding sessions.
26. Short-circuiting for Default Values
Utilize logical operators to assign default values when dealing with potentially undefined or null variables.
let options = userOptions || defaultOptions;
27. Dynamically Accessing Object Properties with Bracket Notation
Access properties of an object dynamically using bracket notation, useful when the property name is stored in a variable.
let property = "name";
let value = person[property]; // Equivalent to person.name
28. Using Array.includes() for Presence Check
Check if an array includes a certain value with includes(), a clearer alternative to indexOf.
if (myArray.includes("value")) {
// Do something
}
29. The Power of Function.prototype.bind()
Bind a function to a context (this value) and partially apply arguments, creating more reusable and modular code.
const greet = function(greeting, punctuation) {
return `${greeting}, ${this.name}${punctuation}`;
};
const greetJohn = greet.bind({name: 'John'}, 'Hello');
console.log(greetJohn('!')); // "Hello, John!"
30. Preventing Object Modification
Prevent modifications to an object using Object.freeze()
, making it immutable. For deeper immutability, consider libraries that enforce immutability more thoroughly.
let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mode
I hope these JavaScript tricks provide you with new perspectives on how to approach JavaScript programming.
From leveraging the concise power of template literals to mastering the efficiency of map
, filter
, and reduce
, these JavaScript hacks will enrich your development workflow and inspire your next project.
Let these JavaScript tricks not only refine your current projects but also spark inspiration for future innovations in your coding journey.
Support Our Tech Insights
Note: Some links on this page might be affiliate links. If you make a purchase through these links, I may earn a small commission at no extra cost to you. Thanks for your support!
Top comments (26)
If the premise is to "help you optimize your code, make it more readable, and save you time", then I'd steer clear of some of these.
Using !! to convert to boolean
This is probably less readable, especially for people new to Javascript. There's nothing wrong with using a truthy value directly or casting things explicilty.
"short-circuit" evaluation
Again, there's nothing wrong with using more characters to make things easier to read, and in fact there are good reasons to keep separate things on separate lines (like always using a block for
if
).Using ^ for Swapping Values
This hasn't been useful for at least 30 years unless you're trying to impress someone in a coding interview. It's not readable, and it doesn't save any time or effort.
Converting to Numbers with Unary Plus
Same deal as before. Be explicit.
Thank you for taking the time to share your excellent thoughts. I truly appreciate your perspective and understand the concerns about readability, particularly for those new to JavaScript.
The intention behind showcasing these techniques, such as using
!!
to force a boolean context or the unary+
for type conversion, was to present a spectrum of approaches that developers might encounter in practice or find useful in specific scenarios.It’s a valid point that explicit casting and traditional methods can enhance clarity, especially for less experienced developers. The utility of these tips often depends on the context in which they’re used and the audience interpreting the code.
Regarding the bitwise
XOR
for value swapping, I agree that it’s not a common practice in every day coding. It’s indeed more of a fun trick that could be useful to understand when reading legacy code or preparing for interviews, as you mentioned.Ultimately, the goal is to inspire developers to think critically about the tools at their disposal and to choose the best tool for the task, balancing efficiency and readability.
Thanks again for providing friendly suggestions and feedback.
Regarding the use of !!, I find Boolean(isThisAtruthyValue) to be more expressive and easier to read.
Absolutely, using
Boolean(isThisTruthyValue)
is indeed more expressive and can be clearer to read, especially for those who are not as familiar with the nuances of JavaScript’s type coercion. It’s great that you’ve highlighted an alternative that prioritizes readability and self-documenting code.The choice between
!!
andBoolean()
often comes down to personal or team preference, and the context in which the code will be read and maintained. I appreciate you bringing this up — it’s always beneficial for developers to be aware of different options that can make their intent more explicit.Thank you for adding to the conversation with your insightful suggestion!
As a counter-point for short circuit evaluation, I've mostly switched over to it for conditionally rendering things in JSX. I stuck to ternary for years but have gradually switched over.
I'd now say that:
is at least as clear as:
I agree, for things like JSX (which still look uncomfortable to me even after a few years) it is still readable - provided you keep things simple.
True. And the way to convert to Boolean is
Boolean(value)
.Was about to comment the exact same thing
Nice list, even though I wouldn't call these code snippets hacks but shortcuts?
Couple of things to note.
Hack # 1:
!!
is called a double bang. I don't use it as it looks a bit weird. I prefer to useBoolean()
.Hack # 11. example you provided for tagged template literals could be better as it just outputs what was passed. Looks like a copy of Wes Bos' article back in 2016:
Hack #21. swapping values is much easier this way:
Hack #23. converting the way you do it can cause issues if variable holds non numerical characters. Prefer .
parseInt
over plus.Hope this helps!
Simply note, that #21 is more readable (for me both is good), but not easier for PC.
In case of XOR swap we working with numbers as bits represented in memory. In case of array swap we created 2 arrays.
You're right but it only creates one array actually: a temp array
[b, a]
.JS then destructures it to assign values to a and be respectively.
This is what code looks like after being transpiled:
Yes, it uses more memory but we're talking about 2 numbers here so the diff in memory footprint is very minimal and not worth loosing readability.
Cool! I never knew about #11. It took me a while to figure it out - and, as another poster (@joolsmcfly) mentioned, your example just returns the same string you passed in. However, the sample he provided has an empty span at the end and doesn't use reduce...
So, here's my submission as a better example (which is entirely subjective of course):
console.table() :))))
In dev terms, "tricky" is bad. Nothing you do in code should ever be "tricky". That's a fail. Hacks should also be avoided except in extraordinary circumstances.
But most of these are not "hacks" and most are not "tricky". How these listicles that have nothing but collections of old info keep getting onto the DEV Community Digest list while far better and more interesting articles languish in obscurity is quite disturbing.
What is up with that?
@chasm - Yes, the article might be slightly mistitled- but it is a good list. I've been writing code for 30+ years and I learned from #11 (even though it wasn't a great example - it piqued my interest and made me look more). I may even have already known that info but forgotten it.
As a listicle I could scan it quickly (and I cringed at #21!) - it's actually one of the better articles because it's so terse.
The constant publishing of "old" information is thus useful because it can remind all of us of little bits and pieces. As to why other articles languish - who knows? Maybe, just maybe, that's more the subjectivitiy of what you think is interesting?
@mmainulhasan - perhaps a better title "30 useful JS tips and tricks" ?
For cloning objects with depth I prefer structuredClone() instead of the spread operator (#6) so you don’t store references to objects inside the old object in the clone.
The article is very practical, I want to reprint your article, will mark the source of the article, if there is something wrong, please contact me, I will immediately delete
Many things got to know from this blog. Thank you so much.
Hi M Mainul Hasan,
Your tips are very useful
Thanks for sharing
Thanks for you article.