20 JavaScript tips to help you improve development efficiency

1. Declare and initialize arrays
2. Perform summation, minimum and maximum
3. Sort arrays of strings, numbers, or objects
4. Do you need to filter out useless values from an array?
5. Use logical operators for various conditions
6. Remove duplicate values
7. Create a counter object or Map
8. Ternary Operator is Cool
9. For loop is faster than traditional once loop.
10. Merge two objects
11. Arrow Functions
12. Optional Chaining
13. Shuffle an array
14. Nullish Coalescing Operator
15. Rest & Spread Operators
16. Default Parameters
17. Convert decimal to binary or hexadecimal
18. Use destructuring to simply swap two values
19. Single-line palindrome check
20. Convert an object's properties into an array's properties
Summarize

Techniques to reduce lines of code and speed up development!

During development, we often need to write some functions, such as sorting, searching, finding unique values, passing parameters, exchanging values, etc. Here I have listed some technical resources I have collected, so that you can write these functions like a master!

These methods will definitely help you:

Reduce the number of LOC (Lines of Code)
Coding Competition
hackathon
Or other time-limited tasks

Most of these JavaScript hacks use techniques from ECMAScript 6 (ES2015) onwards, although the latest version is ECMAScript 11 (ES2020).

Note: All the following tips were tested in the Google Chrome console.

1. Declare and initialize arrays

You can initialize an array of a specific size with a default value, such as "", null, or 0. You may have used these for 1D arrays, but how do you initialize a 2D 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

2. Perform summation, minimum and maximum

Use the reduce method to quickly perform basic mathematical operations.

const array = [5,4,7,8,9,2];

Sum

array.reduce((a,b) => a+b);
// Output: 35

Maximum

array.reduce((a,b) => a>b?a:b);
// Output: 9

Minimum

array.reduce((a,b) => a<b?a:b);
// Output: 2

3. Sort arrays of strings, numbers, or objects

There are built-in sort() and reverse() methods to sort strings, but what about sorting arrays of numbers or objects?
Skill in sorting numbers and objects, both in increasing and decreasing order.

String Sorting

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Output
(4) ["Joe", "Kapil", "Musk", "Steve"]
stringArr.reverse();
// Output
(4) ["Steve", "Musk", "Kapil", "Joe"]

Numeric sorting

const array = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => ab);
// Output
(6) [1, 5, 10, 25, 40, 100]
array.sort((a,b) => ba);
// Output
(6) [100, 40, 25, 10, 5, 1]

Object sorting

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

4. Do you need to filter out useless values from an array?

Values like 0, undefined, null, false, "", '' can be easily filtered by following trick.

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

5. Use logical operators for various conditions

If you want to reduce nesting, such as if...else or switch, you can use 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

6. Remove duplicate values

You may have used indexOf() in a for loop, which returns the first found index, or the newer includes(), which returns a boolean true/false from an array, to find/remove duplicate values. Here we have two quicker methods.

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]

7. Create a counter object or Map

Many times, you need to solve the problem by creating a counter object or a Map that keeps track of the variable using the variable as the key and its frequency/occurrence count as the value.

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}

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}

8. Ternary Operator is Cool

You can avoid nested if...elseif...elseif conditions by using ternary operator.

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!"

9. For loop is faster than traditional once loop.

for and for...in get the index by default, but you can use arr[index] instead.

for...in also accepts non-numbers, so avoid it.

forEach, for...of can get elements directly.

forEach can also get the index, but for...of cannot.

10. Merge two objects

In our daily work, we often need to merge multiple objects.

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"

11. Arrow Functions

Arrow function expressions are a compact alternative to traditional function expressions, but they have limitations and cannot be used in all cases. Because they have lexical scope (parental scope), they do not have their own this and arguments, so they refer to the environment in which they are defined.

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

The arrow function is rewritten as:

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

12. Optional Chaining

If the value before the ? is undefined or null, optional chaining ? stops evaluating 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

13. Shuffle an array

Use the built-in 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]

14. Nullish Coalescing Operator

The null coalescing operator (??) is a logical operator that returns its right-hand operand when its left-hand operand is null or undefined, otherwise it returns its left-hand operand.

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

15. Rest & Spread Operators

Those mysterious 3 dots... can be Rest or Spread!

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

and

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 
lyrics;
// Output: 
(5) ["head", "shoulders", "knees", "and", "toes"]

16. Default Parameters

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

17. Convert decimal to binary or hexadecimal

We can use some built-in methods like .toPrecision() or .toFixed() to help with this kind of problem.

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

18. Use destructuring to simply swap two values

let a = 5;
let b = 8;
[a,b] = [b,a]
[a,b]
// Output
(2) [8, 5]

19. Single-line palindrome check

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

20. Convert an object's properties into an array's properties

Use Object.entries(), Object.key(), 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]