DEV Community

loading...
Cover image for Top 20 JavaScript tips and tricks to increase your Speed and Efficiency

Top 20 JavaScript tips and tricks to increase your Speed and Efficiency

Kapil RaghuwanshišŸ–„
Senior Developer! JavaScript HackeršŸ’›! Sharing JS Tips, Tricks, Hacks! Love React, Angular, Ionic & Node! Tech Writer 50K+ views! Public Speaker!
惻Updated on 惻6 min read

Convenient and useful techniques to reduce the lines of code and pace up your Dev Work!

In our daily tasks, we get to write functions such as sorting, searching, finding unique values, passing parameters, swapping values etc, so here I present my list of shorthand techniques to write all of them as a Pro!āœŒšŸ»

Increase Your Performance

JavaScript is truly an awesome languagešŸ’› to learn and work with. And there can be more than one approach to reach to the same solution for given problem. In this article, we will discuss only the quickest ones.šŸš€

These approaches will definitely help you in:

  • Reducing the number of LOC(lines of code),
  • Coding Competitions,
  • Hackathons or
  • Other time bound tasks.ā±

Most of these JavaScript Hacks uses techniques from ECMAScript6(ES2015) onwards, though the latest version is ECMAScript11(ES2020).

Note: All below tricks have been tested on the Console of Google Chrome.

1. Declare and Initialize Arrays

We can initialize array of particular size with default values like "", null or 0. You might have used these for the 1-D array but how about initializing 2-D array/matrix?

const array = Array(5).fill(''); 
// Output 
(5)Ā ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Output
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5
Enter fullscreen mode Exit fullscreen mode

2. Find out the sum, minimum and maximum value

We should make use of reduce method to quickly find basic maths operations.

const array  = [5,4,7,8,9,2];
Enter fullscreen mode Exit fullscreen mode
  • Sum
array.reduce((a,b) => a+b);
// Output: 35
Enter fullscreen mode Exit fullscreen mode
  • Max
array.reduce((a,b) => a>b?a:b);
// Output: 9
Enter fullscreen mode Exit fullscreen mode
  • Min
array.reduce((a,b) => a<b?a:b);
// Output: 2
Enter fullscreen mode Exit fullscreen mode

3. Sorting Array of String, Numbers or Objects

We have inbuilt methods sort() and reverse() for sorting strings but How about numbers or array of objects?
Let's check out sorting hacks for Numbers and Objects in Increasing and Decreasing order as well.

  • Sort String Array
const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Output
(4)Ā ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// Output
(4)Ā ["Steve", "Musk", "Kapil", "Joe"]
Enter fullscreen mode Exit fullscreen mode
  • Sort Number Array
const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => a-b);
// Output
(6)Ā [1, 5, 10, 25, 40, 100]

array.sort((a,b) => b-a);
// Output
(6)Ā [100, 40, 25, 10, 5, 1]
Enter fullscreen mode Exit fullscreen mode
  • Sort Array of Objects
const objectArr = [ 
    { first_name: 'Lazslo', last_name: 'Jamf'     },
    { first_name: 'Pig',    last_name: 'Bodine'   },
    { first_name: 'Pirate', last_name: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Output
(3) [{ā€¦}, {ā€¦}, {ā€¦}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3
Enter fullscreen mode Exit fullscreen mode

4. Ever need to filter falsy values out of an array?

Falsy values like 0, undefined, null, false, "", '' can be omitted easily through below trick

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// Output
(3)Ā [3, 6, 7]
Enter fullscreen mode Exit fullscreen mode

5. Use Logical Operators for various conditions

If you want to reduce nested if..else or switch cases, you can simply play with basic of logical operators AND/OR.

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// set arg1 to 10 as a default if itā€™s not already set
return arg1;
}

let foo = 10;  
foo === 10 && doSomething(); 
// is the same thing as if (foo == 10) then doSomething();
// Output: 10

foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// Output: 10
Enter fullscreen mode Exit fullscreen mode

6. Remove Duplicates values

You might have used indexOf() with for loop which return first found index or newer one includes() which returns boolean true/false from the array to find out/remove duplicates. Here's we have 2 quicker approaches.

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// Output: [5, 4, 7, 8, 9, 2]
Enter fullscreen mode Exit fullscreen mode

7. Create a Counter Object or Map

Most of the time, the requirement to solve problem by creating counter object or map which tracks variables as keys with their frequency/occurrences as values.

let string = 'kapilalipak';

const table={}; 
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// Output
{k: 2, a: 3, p: 2, i: 2, l: 2}
Enter fullscreen mode Exit fullscreen mode

and

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {
      countMap.set(string[i], 1);
    }
  }
// Output
Map(5)Ā {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}
Enter fullscreen mode Exit fullscreen mode

8. Ternary Operator is cool

You can avoid nested conditional if..elseif..elseif with ternary operators.

function Fever(temp) {
    return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Go Out and Play!!'
      : temp === 97 ? 'Take Some Rest!';
}

// Output
Fever(97): "Take Some Rest!" 
Fever(100): "Visit Doctor!"
Enter fullscreen mode Exit fullscreen mode

9. Quicker for loops compare to legacy onces

  • for and for..in gets you index by default, but you can use arr[index].
  • for..in accepts non numeric as well so avoid it.
  • forEach, for...of gets you element directly.
  • forEach can get you index also but for...of can't.
  • for and for...of considers holes in array but other 2 do not.

10. Merge 2 objects

Often we need to merge multiple objects in our daily tasks.

const user = { 
 name: 'Kapil Raghuwanshi', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };

const summary = {...user, ...college, ...skills};

// Output 
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"
Enter fullscreen mode Exit fullscreen mode

11. Arrow Functions

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations. Since they have lexical scope (parental scope) and does not have their own this and arguments hence they refer to the environment in which they are defined.

const person = {
name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// Output
"Kapil"
Enter fullscreen mode Exit fullscreen mode

But

const person = {
name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// Output
""
Enter fullscreen mode Exit fullscreen mode

12. Optional Chaining

The optional chaining ?. stops the evaluation if the value before ?. is undefined or null and returns undefined.

const user = {
  employee: {
    name: "Kapil"
  }
};
user.employee?.name;
// Output: "Kapil"
user.employ?.name;
// Output: undefined
user.employ.name
// Output: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined
Enter fullscreen mode Exit fullscreen mode

13. Shuffle an Array

Making use of inbuilt Math.random() method.

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return Math.random() - 0.5;
});
// Output
(9)Ā [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Call it again
(9)Ā [4, 1, 7, 5, 3, 8, 2, 9, 6]
Enter fullscreen mode Exit fullscreen mode

14. Nullish Coalescing Operator

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.

const foo = null ?? 'my school';
// Output: "my school"

const baz = 0 ?? 42;
// Output: 0
Enter fullscreen mode Exit fullscreen mode

15. Rest & Spread operators

Those mysterious 3 dots ... can rest or spread!šŸ¤“

function myFun(a,  b, ...manyMoreArgs) {
   return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");

// Output: 6
Enter fullscreen mode Exit fullscreen mode

and

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 

lyrics;
// Output: 
(5)Ā ["head", "shoulders", "knees", "and", "toes"]
Enter fullscreen mode Exit fullscreen mode

16. Default Parameters

const search = (arr, low=0,high=arr.length-1) => {
    return high;
}
search([1,2,3,4,5]);

// Output: 4
Enter fullscreen mode Exit fullscreen mode

17. Convert Decimal to Binary or Hexa

We can use some in-built methods like .toPrecision() or .toFixed() to achieve much of helping functionalities while solving problems.

const num = 10;

num.toString(2);
// Output: "1010"
num.toString(16);
// Output: "a"
num.toString(8);
// Output: "12"
Enter fullscreen mode Exit fullscreen mode

18. Simple Swap 2 values using Destructuring

let a = 5;
let b = 8;
[a,b] = [b,a]

[a,b]
// Output
(2)Ā [8, 5]
Enter fullscreen mode Exit fullscreen mode

19. Single-liner Palindrome check

Well, this is not a shorthand trick overall but it will give you clear idea to play with strings.

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Output: true
Enter fullscreen mode Exit fullscreen mode

20. Turn Object attributes into an Array of attributes

Using Object.entries(),Object.keys() and Object.values()

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// Output
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3)Ā ["a", "b", "c"]

Object.values(obj);
(3)Ā [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

So that's it guys for now! šŸ¤—

If you know few more hacks like above, let's collaborate through GitHub Repository, so that we can all learn them together.

If you really learned something new with this article or it really made your dev work faster than before, like it, save it and share it with your colleagues.

I have been writing tech blogs for quite a time now, and have mostly published through my Medium account, this is my first tech article/tutorial in Dev.to. Hope you guys will shower love to it!šŸ¤©

Letā€™s be connected on LinkedIn and Twitter for more such engaging Tech Articles and Tutorials.šŸ¤

Discussion (45)

Collapse
martinmuzatko profile image
Martin Muzatko

min: Math.min(...numbers)
max: Math.max(...numbers)

Collapse
tomy profile image
Tomy Smith

Exactly, not sure of the advantage of using reduce over these common functions.

Collapse
andrewbridge profile image
Andrew Bridge

I'd go further and agree with this thread and follow up video that advise against using reduce in nearly every situation. It's often used when a simpler or more readable alternative is available, and leads to harder to read, harder to maintain code. As proven with this example above.

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Well, of course above methods seems simpler for finding min/max but one should not underestimate the power of reduce in JavaScript. There are several technique where you can solve problems mostly in one reduce statements only.

Thread Thread
erasmuswill profile image
Wilhelm Erasmus

But in this case a helper method that does the full job exists so why bother with reduce for this use case? I admittedly do not use it enough but just saying

Collapse
liquorburn profile image
liquorburn • Edited

I've made a simple benchmark, it seems that reduce() is faster than Math.max()

dev-to-uploads.s3.amazonaws.com/up...

Thread Thread
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

That's awesome @liquorburn . I have added the fastest one only.

Thread Thread
tomy profile image
Tomy Smith • Edited

It's actually the spread operator that's taking the time there. Though admittedly, there aren't many cases you'd have a hardcoded list of values to find the max of, it's worth pointing out.

dev-to-uploads.s3.amazonaws.com/up...

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author • Edited

Thanks for reminding this tip @martinmuzatko .

const array = [4,5,7,2,3];
Math.min(...array)
// Output: 2
Math.max(...array)
// Output: 7
Enter fullscreen mode Exit fullscreen mode
Collapse
boydevelopr profile image
FredDev

Please what tool is used to make this code snippet embedment on the pages?

Thread Thread
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

These are just code test only. Use 3 backticks before and after your code. Check the preview.

Collapse
lexlohr profile image
Alex Lohr

About the logical operators in 5, you should always be aware of their defined behavior:

  • a && b yields b if a is truthy, otherwise false
  • a || b yields the first value of a, b that is truthy

This means that a || b && c will return a if it a is truthy. If you are using a tool like prettier, you can just use brackets everywhere and let it figure out where they can be removed safely.

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author • Edited

I second that @lexlohr ! Nice suggestion to keep in mind.

Collapse
snigo profile image
Igor Snitkin

Looks more like ā€œHey, I know a bit of JSā€ rather than tips really. Letā€™s start with one, can you think of a way to make the matrix in a bit more efficient manner (hint: 2 iterations less), so it starts looking like a tip that will make me more efficient as advertised

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Well thanks for the comment @snigo . And I didn't want to sound like ā€œHey, I know a bit of JSā€, if I did, share the points/sentences, will try to fix them.
However, as I pointed out earlier in the post that - there can be more than one approaches to the same problem, so feel free to share yours here.

Collapse
snigo profile image
Igor Snitkin

Enjoy:

const matrix = (x, y = x, fillValue = 0) => Array.from({ length: y }, () => Array(x).fill(fillValue));
Enter fullscreen mode Exit fullscreen mode

Now, number two: what's going to be the sum of an empty array in your example?

Thread Thread
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

How about these two?

const arr = Array.from(Array(4).fill('O'), () => new Array(4).fill('O'));
Enter fullscreen mode Exit fullscreen mode
const arr = [...Array(8)].map(() => Array(8).fill("0"))
Enter fullscreen mode Exit fullscreen mode
Thread Thread
snigo profile image
Igor Snitkin • Edited

If we talk about efficiency, then we first need to figure out .map or .from:

  • map: maps over elements returning new array šŸ‘Ž
  • from: mapFn maps over elements in place šŸ‘

So from, which leaves us with the question what we're going to create our array from, right? So if we compare:

// Array from array
Array.from(Array(3), () => Array(3).fill(0));

// Array from object
Array.from({ length: 3 }, () => Array(3).fill(0));
Enter fullscreen mode Exit fullscreen mode

...it will boil down to the question what's more efficient to create Array(3) or { length: 3 }, and given arrays in JS are just objects it really comes to the number of properties we need to create for the object. How many properties does Array(3) have? (hint: 4) How many properties does { length: 3 } have? (hint: 1)

I hope this will clear things a bit

Thread Thread
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Awesome and detailed explanation @snigo . āœŒšŸ»
I have created GitHub Repo, feel free to contribute to that.
Thanks!šŸ¤—

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy

Cool
Have a github too so other can collab.
Also fix the bug in

return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Feel Better!'
      : temp === 97 ? 'Take Some Rest!'
      : 'Go Out and Play!';
Enter fullscreen mode Exit fullscreen mode
Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Thanks @manoharreddyporeddy . Astonishing Idea of GitHub. Will create the repo and update the link in the post itself for further collaboration.

Nevertheless, what error are you pointing out in above snippet?

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy
return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Feel Better!'
      : temp === 97 ? 'Take Some Rest!'
      : 'Go Out and Play!';
Enter fullscreen mode Exit fullscreen mode

can be

return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Feel Better!'
      : 'Take Some Rest!' ;
Enter fullscreen mode Exit fullscreen mode

OR

return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Feel Better!'
      : 'Go Out and Play!';
Enter fullscreen mode Exit fullscreen mode

Reason is a number can only be < or > or === 97.
There can't be a 4th option.

Hope it's clear now.
Will wait for your github link.

Thread Thread
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Oh I got that one now! Updated.

Here is the link for the GitHub repo, github.com/kapilraghuwanshi/quick-.... Need to finalize the repo structure and PR etc, if you have suggestions please add to that repo.

Collapse
rockson profile image
Rok Zigon
   arg1 = arg1 || 10; 
// set arg1 to 10 as a default if itā€™s not already set 
Enter fullscreen mode Exit fullscreen mode

Comment should warn that if you use || to provide some default value, you may encounter unexpected behaviors if you consider some falsy values as usable (e.g., '' or 0).

Collapse
erasmuswill profile image
Wilhelm Erasmus

You're making me relive production drama right here :(

Collapse
bugb profile image
bugb • Edited

Unfortunately, in the real life, data are much more complex, I think if you can share about how to composite functions then it should be very helpful.

My tips

const string = 'kapilalipak';
[...string].reduce((m,n)=>({...m,[n]:-~m[n]}),{})
// {"k":2,"a":3,"p":2,"i":2,"l":2}

Enter fullscreen mode Exit fullscreen mode
Collapse
pazka profile image
Alexandre Weisser

I would advise to not use nested ternary operators as it is considered a code smell

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Can you share the disadvantages with code snippets ?

Collapse
pazka profile image
Alexandre Weisser

Sorry I don't have the time nor the patience at the moment but I can at least detail my answer :

Simply, if you think about the Signal-to-Noise ratio, nesting ternary operator will more often lead to error when sigh treading and ask more energy to be understood for the sake of a very few line of code.

In this particular case, writing a more explicit comparison will be better for the whole understanding of the code flow. with "ifs" or juste split it in more lines of ternary attribution.

Also, if you should write half a dozen comparison for the attribution of a variable, you should put it in a specific function that will be named accordingly and this will greatly improve this part of the code.

For more information, you can look in the ESLint documentation for this specific code smell : eslint.org/docs/rules/no-nested-te...

Also thank you for your post !

Collapse
erasmuswill profile image
Wilhelm Erasmus

Good article man, I just have a couple of comments further to the above:

6: I believe this approach only works if you are using strings or numbers, not objects

17: Earlier today, I learned that parseInt can also be used in this way. The second argument defines the number system base

Collapse
kiranrajvjd profile image
Kiran Raj R

Just add "javascript" after your opening code block backticks for syntax highlighting.

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Thanks @kiranrajvjd for the tip. Updated to make it more colourful!

Collapse
qq449245884 profile image
qq449245884

Dear Kapil Raghuwanshiļ¼Œmay I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Sure @qq449245884 , go ahead and share the GitHub link too, besides the article to contribute.

Collapse
qq449245884 profile image
qq449245884

ok,than you very much!

Collapse
youpiwaza profile image
max

Pretty gorgeous recap, definitly a must have for hackatons & dailycoding, thanks a lot !

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Thanks @youpiwaza . I have written for the same aim.

Collapse
joshternyak profile image
Josh Ternyak

Your post is well-written! I just launched a site bitcoinforecast.io and I developed it myself using ES6 JS. Your post covers the strategies I used to built the app. Keep up the great work Kapil.

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

Thanks @joshternyak . šŸ˜€

Collapse
vladimirc profile image
Vladimir C

Never use ternary operators to replace more than a single if...else. Otherwise, it quickly becomes unreadable and error-prone. The example from your post is an excellent proof of this :'D

Collapse
mohammadmesbaulhaque profile image
Mesbaul Haque

Thanks bro...

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

All my pleasure @mohammadmesbaulhaque !

Collapse
reememad profile image
ReemEmad

really amazing and helpful, thank u!!

Collapse
raulcg profile image
RaulC-G

2D matrix: Array(5).fill(Array(5).fill(0))

Collapse
techygeeky profile image
Kapil RaghuwanshišŸ–„ Author

@raulcg More crispier one!šŸ‘šŸ»