javascript

7 Javascript Shortcuts You Should Use in Your Next Project

You’ve probably heard it a lot: Work smart and not hard.

That advice couldn’t be more legit, especially when it comes to programming. Especially when it comes to Javascript.

Beyond just embracing the DRY (Do Not Repeat Yourself) concept, writing elegant and simple codes makes it easier for a codebase to be easily read and understood.

Here are 7 shortcuts you should use in your next Javascript project:

1. Template Literals

Template literals allow for multi-line and embedded string expressions. This can be especially useful when you want to concatenate 2 or more strings together, helping you to avoid the concatenation hell.

Hard way:

let fname, lname;
fname = "Lawson";
lname = "Luke";

console.log("Hello "+fname " "+ lname);

Smart way:

console.log(`Hello ${fname} ${lname}`);

2. For of Loop

Loops helps you to iterate through an array.

Hard Way:

let foods = ["rice", "beans", "egg", "bread", "meat"];
for(let i =0; i<foods.length; i++){
console.warn(foods[i]);
}

Smart way:

for(item of foods){
console.warn(item);
}

3. Recursion

Most times when a task is being executed, it can be in the process call other functions. But a recursive function is one which calls itself.

Let’s write a countdown function, one that counts down from a given number.

Hard way:

function countDown(num){
for(let i=num; i>0; i--){
console.log(i);
}
countDown(20);

Recursive Smart way:

function countDown(num){
if(num === 0){
return;
}
console.log(num);
counter(num - 1);
}
countDown(20);

4. Ternary Operators

Ternary operators allow for conditional rendering and can be executed with just one line of code.

Hard way:

const x = 50;
let answer;
if (x > 50) {
    answer = 'greater than 50';
} else {
    answer = 'less than 50';
}

Smart way:

const answer = x > 50 ? 'greater than 50' : 'less than 50';

5. Arrays Filter

Let’s assume we want to print out all multiples of 3 from a given array.

We could loop through the array and check for the required condition like so:

Hard way:

let num = [1,2,3,4,15,18,27,36];
         for(let i = 0; i<num.length; i++){
             if(num[i]%3 === 0){
                 console.log(num[i]);
             }
         }

Smart way:

  function getNum(val){
            return val%3 === 0
        }
        let result = num.filter(getNum);
        console.log(result);

6. Short-Circuit Evaluation

Sometimes when assigning a variable value to another variable, it is good to ensure that the source variable is not null, undefined or empty.

Hard way:

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

Smart way:

const variable2 = variable1  || 'new';

7. Object Property

With objects literals we can assign properties to objects.

Hard way:

const obj = { x:x, y:y };

Smart way:

const obj = { x, y };

Conclusion

Smart codes adds both elegance and readability to your codebase. This means your code can be easily understood and debugged afterwards.

Recent Posts

ReferenceError vs. TypeError: What’s the Difference?

When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…

10 hours ago

document.querySelector() vs. getElementById(): Which is Faster?

When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…

10 hours ago

npm vs. Yarn: Which Package Manager Should You Use in 2025?

When starting a JavaScript project, one of the first decisions you’ll face is: Should I…

3 days ago

Why Learn Software Development? (And Where to Start)

Software development is one of the most valuable skills you can learn. From building websites…

6 days ago

JavaScript Multidimensional Arrays

In JavaScript, arrays are used to store multiple values in a single variable. While JavaScript…

2 weeks ago

What is Containerization

Containerization is a lightweight form of virtualization that packages an application and its dependencies into…

2 weeks ago