7 JavaScript Shorthand Techniques that will Save your Time

In this article, we will discuss 7 cool shorthand tricks in JavaScript that will save the developer time.

Arrow Function: JavaScript Arrow functions were introduced in ES6. The main advantage of this function is, it has a shorter syntax.

Javascript

<script>
    // Longhand
    function add(a, b) {
    return a + b;
    }
    console.log(add(1,2))


    // Shorthand
    const add1 = (a, b) => a + b;
    console.log(add1(1,2))
</script>

Output:

3
3

Multi-line string: For multi-line string, we normally use the + operator with a new line escape sequence (\n). We can do it in an easier way by using backticks (`).

Javascript

<script>
    // Longhand
    console.log('JavaScript is a lightweight, interpreted, '
    + 'object-oriented language\nwith first-class '
    + 'functions, and is best known as the scripting '
    + 'language for Web \npages, but it is used in many'
    + 'non-browser environments as well.\n');


    // Shorthand
    console.log(`JavaScript is a lightweight, interpreted,
    object-oriented language with first-class functions,
    and is best known as the scripting language for Web
    pages, but it is used in many non-browser environments
    as well.`);
</script>

Output:

JavaScript is a lightweight, interpreted, object-oriented language
with first-class functions, and is best known as the scripting language for Web 
pages, but it is used in manynon-browser environments as well.

JavaScript is a lightweight, interpreted, 
object-oriented language with first-class functions, 
and is best known as the scripting language for Web 
pages, but it is used in many non-browser environments 
as well.

For loop: To loop through an array, we normally use the traditional for loop. We can make use of the for…of loop to iterate through arrays. To access the index of each value we can use for…in loop.

Javascript

<script>
    let myArr = [50, 60, 70, 80];

    // Longhand
    for (let i = 0; i < myArr.length; i++) {
      console.log(myArr[i]);
    }


    // Shorthand
    // 1. for of loop
    for (const val of myArr) {
      console.log(val);
    }

    // 2. for in loop
    for (const index in myArr) {
      console.log(`index: ${index} and value: ${myArr[index]}`);
    }
</script>

Output:

50
60
70
80
50
60
70
80
"index: 0 and value: 50"
"index: 1 and value: 60"
"index: 2 and value: 70"
"index: 3 and value: 80"

String into a Number: There are built-in methods like parseInt and parseFloat available to convert a string into a number. It can also be done by simply providing a unary operator (+) in front of the string value.

Javascript

<script>
    // Longhand
    let a = parseInt('764');
    let b = parseFloat('29.3');
    console.log(a,b)


    // Shorthand
    let c = +'764';
    let d = +'29.3';
    console.log(c,d)
</script>

Output:

764 29.3
764 29.3

Swap two variables: For swapping two variables, we often use a third variable. But it can be done easily with array de-structuring assignments.

Javascript

<script>
    //Longhand
    let x = 'Hello', y = 'World';
    const temp = x;
    x = y;
    y = temp;
    console.log(x,y)


    //Shorthand
    let a = 'Hello'
    let b = 'World'
    [a,b] = [b,a];
    console.log(a,b)
</script>

Output:

World Hello

Merging of arrays: To merge two arrays, the following can be used:

Javascript

<script>
    // Longhand
    let a1 = [2, 3];
    let a2 = a1.concat([6, 8]);
    console.log(a2)

    // Output: [2, 3, 6, 8]


    // Shorthand
    let a3 = [...a1, 6, 8];
    console.log(a3)

    // Output: [2, 3, 6, 8]
</script>

Output:

[2, 3, 6, 8]
[2, 3, 6, 8]

Multiple conditions checking: For multiple value matching, we can put all values in an array and use the indexOf() or includes() method.

Javascript

<script>
    let value = 1
        // Longhand
        if (value === 1 || value === 'hello' || value === 2 || value === 'world') {
        console.log("Done")
        }

        // Shorthand 1
        if ([1, 'hello', 2, 'world'].indexOf(value) >= 0) {
        console.log('Done')
        }

        // Shorthand 2
        if ([1, 'hello', 2, 'world'].includes(value)) {
        console.log('Done')
        }
</script>

Output:

Done
Done
Done