JavaScript Shorthand Techniques that save your life

 If you want a faster developer this blog guide is best for you. Any programming language helps you to write clean and optimized code, it helps to make code clean and concise with less coding. Here we are going to discuss longhand vs shorthand, lets get started.



1. Arrow Functions

An arrow function is my personal favorite function working with javascript. Let's see below an example, how short and sweet.

Longhand:


function sayHi(user){
  console.log(`Hi ${user}`);
}

items.map(function(value){
    console.log(value)
})


Shorthand:


sayHi = user => console.log(`Hi ${user}`)
items.map(value=>console.log(value))



2.Declearing Variable


Longhand:


let a;
let b;
let c = 5;



Shorthand:


let abc=3;



3. Ternary Operator

In ES6 we can write if else statement in one line.

Longhand:

  
const num = 20;
  let output;

  if (num > 7) {
    output = "The number is Greater than 7";
  } else {
    output = "The number is less than 7";
}


Shorthand:

  
                const output = x > 10 ? 
                        "The number is greater than 10" 
                        :"The number is less than 10";



4.Template Literals

We use the plus (+) sign to concat the string with variables. In ES6 template literals, we can contact string backtick (``).

Longhand:


let percent = 60;
console.log('Congratulation !! you got' + percent + ' % '); 



Shorthand:


console.log(`Congratulation !! you got ${percent}%`);



5.For Loop

We use the traditional for loop through the array. But in ES6 make it is easier, we can make use of them for...of the loop to iterate through arrays. To access the index of each value we can use for...in the loop.

Longhand:


const names = ['selisha''gita''ramita'];
for (let i = 0i < names.lengthi++)
{
  console.log(names[i]);
}


Shorthand:



for (let name of names)
    console.log(name)



6.Object property assignment

 ES6 provides an easier way of assigning properties to objects. If the variable name and object key name are the same then we can mention the variable name in object literals instead of both key and value. JavaScript will automatically set the key same as the variable name and assign the value as a variable value.

Longhand:


let firstname = 'Sophia'
let lastname = 'Khatri';
let obj = {firstnamefirstnamelastnamelastname}; 


Longhand:



let obj = {firstnamelastname};



7. Convert String into Number

In javascript, there are predefined methods like parseInt and parseFloat available to which are used to convert a string to a number. 
We can do even better by providing a unary operator (+) in front of a string value.

let totalAmount = parseInt('809'); 
let averageMark = parseFloat('78.9'); 

let totalAmount = +'809'
let averageMark = +'78.9';


8. Exponent Power

Math.pow() method is used to find the power of a number. There is an even shorter way to do find the power of numbers. We can simply use double-asterisk (**) instead of Math.pow().

Longhand:



const number = Math.pow(23); 




Shorthand:


const number = 2**3;


9. Default Parameter Values

In ES6, we can define the default values in the function declaration itself.

Longhand


function multiply(ab) {
    if (a === undefined)
      a = 2;
    if (b === undefined)
      b = 2;

    return a*b;
  }


Shorthand:

  
    multiply = (a,b=2 ) => (a*b);

    multiply(2//4




10. Destructuring Assignment Shorthand

In the web framework, it is popular for destructuring required data.  

Longhand:

  
 const person = {
    firstName'Hari',
    lastName'Chauhan',
  }

  const firstname = person.firstName;
  const firstlast = person.lastName;



Shorthand:


  const { firstNamelastName } = person
  console.log(firstName)





11. Swap two variables

In programming for swap two variables, we use a third variable. But we can swap two variables easily with array destructuring assignment.

Longhand:

  
   let a = 'Hey',
   b = 99;
  const temp = a;
  a = b;
  b = temp;


Shorthand:



[ab= [ba];
    


12. Multi-line String Shorthand

Longhand:


const demoText = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'



Shorthand:


const demoText = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt`



13. Double NOT bitwise operator (~~)

The double NOT bitwise operator is a substitute for Math.floor() method.

Longhand:

    
    const floorExample = Math.floor(5.8);


Shorthand:


    const floorExample = ~~5.8;



14. Spread Operator Shorthand

Spread Operator Shorthand is an ES6 feature. 

Longhand:

    
// For joining arrays
const oddNum = [357];
const numbers = [2 ,4 , 6].concat(oddNum);

// For cloning arrays
const arr1 = [1234];
const arr2 = arr1.slice()




Shorthand:


// For joining arrays
const oddNum = [357];
const numbers = [2 ,4 , 6, ...oddNum];
console.log(numbers); 

// For cloning arrays
const arr1 = [1234];
const arr2 = [...arr1];




15. Get character from string

Longhand:


let string = 'htmlspacecode'


string.charAt(2); // m


Shorthand:


string[2]; // m



16. Add your favorite.

........................................................

Thanks for reading 👏..

Recommend

Reactions

Post a Comment

1 Comments

  1. Quick note on #13...

    the double bitwise NOT ("~~") doesn't behave like Math.floor() when working with negative numbers. In those cases it more like Math.ceil() since all it does is drop everything after the decimal place.

    ReplyDelete

If you have any question please ask?