In our daily tasks, we write functions like sorting, searching, finding unique values, passing parameters, exchanging values, etc., so here I have compiled a list of my shorthand tips!
JavaScript is truly a great language to learn and use. For a given problem, there can be more than one way to arrive at the same solution. In this article, we will only discuss the fastest ones.
These methods will definitely help you:
Most of these JavaScript Hacks use ECMAScript6 (ES2015) and later technologies, although the latest version is ECMAScript11 (ES2020).
==Note==: All tips below have been tested on Google Chrome's console.
We can initialize an array of a specific size using a default value (such as "", null or 0). You may already be using 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 We should use the reduce method to quickly find basic mathematical operations.
const array = [5,4,7,8,9,2];
array.reduce((a,b) => a+b); // Output: 35
array.reduce((a,b) => a>b?a:b); // Output: 9
array.reduce((a,b) => a<b?a:b); // Output: 2
We have built-in methods sort() and reverse() for sorting strings, but what about arrays of numbers or objects?
Let’s look at ascending and descending sorting techniques for numbers and objects.
const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // Output(4) ["Joe", "Kapil", "Musk", "Steve"] stringArr.reverse(); // Output (4) ["Steve", "Musk", "Kapil", "Joe"]
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]
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 Falsy values like 0 , undefined , null , false , "" , '' can be easily omitted by
const array = [3, 0, 6, 7, '' , false]; array.filter(Boolean); // Output (3) [3, 6, 7]
If you want to reduce nested if...else or switch cases, you can simply use the basic logical operators AND/OR .
function doSomething(arg1){
arg1 = arg1 || 10;
// Set arg1 to 10 as default if 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 You may have used indexOf() with a for loop that returns the first found index or the newer includes() which returns a boolean true/false from an array to find Out/remove duplicates. This is where we have two faster 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]
Most of the time, you need to solve the problem by creating a counter object or map that tracks variables as keys , and track its frequency/occurrence as a 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} you can avoid nested conditionals using the ternary operator if…elseif…elseif.
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!" for and for..in which gives you an index by default, but you can use arr[index].for..in also accepts non-numbers, so avoid it.forEach , for...of directly obtain elements.forEach can also give you an index, but for...of cannot.for and for...of consider holes in the array, but not the other 2.Usually we need to merge multiple objects in 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" Arrow function expressions are compact alternatives to traditional function expressions, but have limitations and cannot be used in all situations. Since they have lexical scope (the parent scope) and do not have their own scope this arguments therefore refer to the environment in which they are defined.
const person = {
name: 'Kapil',
sayName() {
return this.name;
}
}
person.sayName();
// Output "Kapil" but
const person = {
name: 'Kapil',
sayName : () => {
return this.name;
}
}
person.sayName();
// Output "" chaining Optional chaining?. Stops evaluation if the value comes 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 Use the built-in Math.random() method to scramble the array.
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] Null coalescing operator (??) is a logical operator, when its left operand is empty or undefined, returns its right operand, otherwise returns its left operand.
const foo = null ?? 'my school'; // Output: "my school" const baz = 0 ?? 42; // Output: 0
Those mysterious 3 points ... can 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"]
const search = (arr, low=0,high=arr.length-1) => {
return high;
}
search([1,2,3,4,5]);
// Output: 4 While solving the problem, we can use some built-in methods such as .toPrecision() or .toFixed() to implement many helper functions.
const num = 10; num.toString(2); // Output: "1010" num.toString(16); // Output: "a" num.toString(8); // Output: "12"
let a = 5; let b = 8; [a,b] = [b,a] [a,b] // Output(2) [8, 5]
Well, this is not a whole shorthand tip, but it will give you a good idea of how to use strings.
function checkPalindrome(str) {
return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Output: true 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]