Got tired of learning and want to get some cool tricks up your sleeve to earn the right to show off? You have come to the right place. Here are neat tricks that can even make your life easier!
1. Readable numbers
Ever run into an unreadably long number where you had to put your finger on the screen to read it? Luckily, there is an easy solution to that by using _
within the bounds of the number.
const number = 123_456_789;
You can put _
anywhere within a number to make it easier to read, without hampering the number itself.
2. Truncate the end of arrays
Most people use Array.length
as a getter function. A little-known fact is: that it can also be used as a setter.
let array = [1, 2, 3, 4, 5];
console.log(array); // [1, 2, 3, 4, 5]
console.log(array.length); // 5
array.length = 3;
console.log(array); // [1, 2, 3]
3. Short circuit evaulation
No, we are NOT talking about those short circuits.
The &&
and ||
operators can be easily used to check for conditions and return values in a single line, which is known as short circuit evaluation.
Use case of &&
const showUserData = true;
const data = "not so secret data";
// will display false if showUserData is false
console.log(showUserData && data);
Use case of ||
const fallbackData =
"nothing to see folks";
const data = "random data";
// will display `fallbackData` if
// data is false-ish (eg: null, undefined, '', etc)
console.log(data || fallbackData);
4. Optional chaining
The optional chaining operator (
?.
) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid
It's a simple solution to get a deeply nested property without having to check the validity of each reference in the chain.
// usage (will return undefined if any of the items is not defined)
user.data?.name;
user.data?.addressList?.[0];
user.greet?.(time);
5. Get unique values in an array
Accessing the unique values in an array is a pretty common operation. There's a usual way, and there's a smart way of doing it
// USUAL WAY
// O(n^2) time complexity & O(n) space complexity
const uniqueValues = array.filter(
(value, index, self) =>
self.indexOf(value) === index
);
// SMART WAY
// complexity: O(n) time & space
const uniqueValues = [
...new Set(array),
];
6. Nullish coalescing
The nullish coalescing operator (
??
) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
Nullish coalescing is extremely useful when you want to return a default value when a variable might contain a null-ish value.
const getUserName = (user) => {
return user?.name ?? "Anonymous";
};
7. Replace all
The string.replace
method is typically used to replace the first occurrence of a substring, but there is a simple way to turn it into a function that can replace all occurrences by using a regular expression with a global flag.
const replace_string =
"Visit replacesoft. replacesoft is a software company";
console.log(
replace_string.replace(
/replace/,
"Micro"
)
); // "Visit Microsoft. replacesoft is a software company"
console.log(
replace_string.replace(
/replace/g,
"Micro"
)
); // "Visit Microsoft. Microsoft is a software company"
That's all folks!
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
I have moved to Bali, Indonesia as a Digital Nomad. Follow me on Instagram to check out what I am up to.
Follow my blogs for Weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Top comments (15)
Think about 0 and "" with && and ||, the are also falsy and sometimes you do not want that. Thats the reason for ?? I would think.
Also sometimes nice but dangerous: monkey patching.
Gives also no error for value types like string and number, but looses the value.
Better forget it, its bad style. ;-)
Yeah I agree, it's NOT a recommended approach of resizing arrays. Added that just to showcase that it's also a setter which most people don't know
I think it is a best way to make the array empty. This can be used
array.length = 0
in place ofarray = []
because prior one is faster than the later one.We should not use the fastes method but the method who is understood.
Thats not monkey patching.
Wth?
length
is also a setter?My whole life is a lie...
Man...
You never know. ๐Life is a lie in general. But we move..
For "Replace all" you can also just use the
replaceAll
method - which could be considered more readable._Readable numbers _ is something which I never knew about, thanks a lot for that !!!
One more :
Swapping 2 array elements.
Hi Tapajyoti Bose,
thank you for your article.
I already knew two of the 7 tricks when reading your article.
The other five are pretty neat in my opinion :D!
first one is called grouping integers
The array length setter was really surprising.
Hi! Very useful tips.
Thank you very much for sharing. ๐
Already used some of your advises...
It's great