⚡️20 Essential JavaScript Shortcuts to Streamline Your Coding Efficiency⚡️

Elevate Your Code: Mastering JavaScript Shorthand for More Elegant and Efficient Scripting 🚀✨

Whether you’re a seasoned developer or just starting out, JavaScript shorthand techniques are a vital skill that can shorten your code, reduce redundancy, and improve readability and maintainability. This guide introduces 20 powerful JS abbreviation techniques that will have you bidding farewell to “code mountains” and embracing elegant, streamlined coding!

🧹 Remove False Values from an Array

You can simplify the removal of false values from an array with the filter() method combined with the Boolean constructor.

📜 Traditional Writing:

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];
let filterArray = arr.filter(value => {
    if(value) {
      return value;
    };
});

Result: [12, 'xyz', -25, 0.5]

🚀 Simplified Writing:

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];
let filterArray = arr.filter(Boolean);

Result: [12, 'xyz', -25, 0.5]

🔎 Array Search

Use the indexOf() method to locate the position of items in an array, replacing complex conditional statements.

📜 Traditional Writing:

if (arr.indexOf(item) > -1) { }
if (arr.indexOf(item) === -1) { }

🚀 Simplified Writing:

if (~arr.indexOf(item)) { }
if (!~arr.indexOf(item)) { }

✨ Null Value Coalescing Operator

Use the null coalescing operator ?? to provide default values for potentially null or undefined variables.

📜 Traditional Writing:

const username = data !== null && data !== undefined ? data : 'Guest';

🚀 Simplified Writing:

const username = data ?? 'Guest';

🔄 Logical OR Assignment Operator

Assign a value to a variable only if it’s currently a falsy value.

📜 Traditional Writing:

javascript

let count;
if (!count) {
  count = 0;
}

🚀 Simplified Writing:

let count;
count ||= 0;

🤹‍♂️ Multiple Value Matching

Place all values into an array and use includes() to check for a match more succinctly.

📜 Traditional Writing:

if (value === 1 || value === 'one' || value === 2 || value === 'two') { /* ... */ }

🚀 Simplified Writing:

if ([1, 'one', 2, 'two'].includes(value)) { /* ... */ }

🔗 Ternary Expression

A ternary expression can greatly simplify if...else statements.

📜 Traditional Writing:

let isAdmin;
if (user.role === 'admin') {
  isAdmin = true;
} else {
  isAdmin = false;
}

🚀 Simplified Writing:

const isAdmin = user.role === 'admin';

💡 Short Circuit Evaluation

Utilize short-circuit evaluation to cleanly assign values based on the existence (truthiness) of another variable.

📜 Traditional Writing:

let variable2;
if (variable1 !== null && variable1 !== undefined && variable1 !== '') {
    variable2 = variable1;
}

🚀 Simplified Writing:

const variable2 = variable1 || 'default';

🧮 Scientific Notation

Use scientific notation to simplify working with large numbers in JavaScript.

📜 Traditional Writing:

for (let i = 0; i < 10000000; i++) {}

🚀 Simplified Writing:

for (let i = 0; i < 1e7; i++) {}

😎 Exponential Exponentiation

Simplify exponential operations with ** instead of Math.pow().

📜 Traditional Writing:

Math.pow(2, 3); // 8

🚀 Simplified Writing:

2**3; // 8

📌 Arrow Functions

Transform classical function expressions into concise arrow functions.

📜 Traditional Writing:

function sayHello(name) {
  console.log('Hello', name);
}

🚀 Simplified Writing:

const sayHello = name => console.log('Hello', name);

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture
• More content at PlainEnglish.io