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.

codeflare