Shorthand JavaScript Techniques you should know in 2021
If Presence
This is one of the common shorthand technique mostly used for
truth, null or undefined checks.
// Longhand
if (x === true) {
// do something
}
// Shorthand
if (x) {
// do something
}
If … else Ternary operator
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?
), then an expression to execute if the condition is truthy followed by a colon (:
), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if
statement.
// Longhand
let test: boolean;if (x > 10) {
test = true;
} else {
test = false;
}// Shorthand
let test = (x > 10) ? true : false;// or we can use directly
let test = x > 10;
If with multiple conditions
By using includes()
method determines whether an array includes a certain value among its entries, returning true
or false
as appropriate.
// Longhand
if (x === 'A' || x === 'B' || x === 'C' || x ==='D') {
// do something
}// Shorthand
if (['A', 'B', 'C', 'D'].includes(x)) {
// do something
}
Or we can use the indexOf()
method returns the first index at which a given element can be found in the array, or -1 if it is not present.
// Longhand
if (x === 'A' || x === 'B' || x === 'C' || x ==='D') {
// do something
}// Shorthand
if (['A', 'B', 'C', 'D'].indexOf(x) > -1) {
// do something
}// Or
if (~['A', 'B', 'C', 'D'].indexOf(a)) {
// do something
}
Optional Chaining
The optional chaining operator (?.
) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?.
operator functions similarly to the .
chaining operator
const data = { a: { b: { c: 10 } } }// Longhand
const result = data && data.a && data.a.b && data.a.b.c // 10// Shorthand
const result = data?.a?.b?.c // 10
I have an article more about optional chaining in Thai language
Conditions in the key-value objects
We can store the many conditions in the objects and used it based on the conditions by key in object like the switch
statement
// Longhand
switch (data) {
case 'A':
return func1(); case 'B':
return func2(); case 'C':
return func3(); default
return;
}// Shorthand
const data = {
A: func1,
B: func2,
C: func3
};
data?.[some_key]?.(); // Example data.['B']?.() an output is call func2
Destructuring Assignment
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
// Longhand
const x = data.x;
const y = data.y;
const z = data.z;// Shorthand
const { x, y, z } = data;
Assigning values to multiple variables
// Longhand
const x = 1;
const y = 2;
const z = 3;// Shorthand
const [x, y, z] = [1, 2, 3];
Swap two variables
We can swap two variables with array destructuring assignment
let x = 'A', y = 'B'; // Longhand
const temp = x;
x = y;
y = temp;// Shorthand
[x, y] = [y, x];// output: x = 'B' and y = 'A'
Object Property Assignment
const name = "Chris";
const age = 25;// Longhand
const obj = {
name: name,
age: age
}; // Shorthand
const obj = { name, age };// output: {
name: "Chris",
age: 25
}
Arrow Function
An arrow function expression is a compact alternative to a traditional function expression
// Longhand
function add(x, y) {
return x + y;
} // Shorthand
const add = (x, y) => x + y;add(1, 2) // output: 3
Default Parameter Values
Default function parameters allow named parameters to be initialized with default values if no value or undefined
is passed.
// Longhand
const add = (x, y) => {
if (x === undefined) {
x = 1;
} if (y === undefined) {
y = 2;
} return x + y;
}// Shorthand
const add = (x = 1, y = 2) => x + y;add() // output: 3
Short Function Calling
Using an IIFE (Immediately Invoked Function Expression) techniques that runs as soon as function is defined.
// Longhand
const func1 = () => console.log('foo');
const func2 = () => console.log('bar');const x = 1;if (x === 1) {
func1();
} else {
func2();
}// Shorthand
(x === 1 ? func1 : func2)(); // output: foo
Template Literals
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
// Longhand
const welcome = "Hi "+ firstName + " " + lastName + "."// Shorthand
const welcome = `Hi ${firstName} ${lastName}`;
Multi-line String
Any newline characters inserted in the source are part of the template literal.
// Longhand
const str = 'string text line 1\n'
+ 'string text line 2'// Shorthand
const str = `string text line 1
string text line 2`
String into a Number
// Longhand
const x = parseInt('123');
const y = parseFloat('12.3'); // Shorthand
const x = +'123';
const y = +'12.3';
Date into a Timestamp
const date = new Date()
// output: Wed Jan 20 2021 10:10:40 GMT+0700 (Indochina Time)// Longhand
const x = date.getTime() // output: 1611112240377// Shorthand
const x = +date; // output: 1611112240377
Non-boolean value to a boolean value
It is possible to use a Double NOT (!!
) operators in series to explicitly force the conversion of any value to the corresponding boolean primitive.
const expression = 'string or number'// Longhand
const isTrue = Boolean(expression) // output: true// Shorthand
const isTrue= !!expression; // output: true