Javascript Shorthands Tips

These Javascript shorthand tips will make your code look more cool and clean. Let's begin.

1. '+': Integer typecasting

Most of use do not known that "+" can be use for Integer typecasting. Like this example:

// longhand
let num = parseInt('69');
let float = parseFloat('69.69');

// shorthand
let num = +'69';
let float = +'69.69';

2. Merge array, object by Spread Operator

ES6 intro us the most powerful syntax is Spread Operator, I think. It can be used to replace centain array, object functions. The spread operator is simply a series of three dots.

const a = [1, 2, 3];

// longhand
const x = [4, 5, 6].concat(b);

// shorthand
const x = [4, 5, 6, ...b];
const y = [4, ...b, 5, 6]; // you can use it anywhere inside an array

// Merge two object
const k = { hi: 'there', val: 100 };
const o = { ...k, foo: 'baz' };

// Copy
const aa = [...a];

3. Function Return

To return a value from a function we use the return keyword, but we can skip that with arrow function with a single statement.

// longhand
const mul = (a, b) => {
  return a * b;
};

// shorthand
const mul = (a, b) => a * b;

4. Decimal Values

We can write the long number without trailing zeroes, like this

// longhand
const max = 1000000;

// shorthand
const max = 1e6;

1 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

Bonus:

const max = 1_000_000;
const num = 1_246_357; // cool, lah?

5. '~': Bitwise IndexOf

~ (bitwise NOT) takes one number and inverts all bits of it. The usage of ~ and indexOf is, 

// longhand
if (arr.indexOf(item) > -1) {
  /* Confirm item IS found */
}
if (arr.indexOf(item) === -1) {
  /* Confirm item IS NOT found */
}

// shorthand
if (~arr.indexOf(item)) {
  /* Confirm item IS found */
}
if (!~arr.indexOf(item)) {
  /* Confirm item IS NOT found */
}

You can use it as a replacement for Math.floor()

// longhand
Math.floor(4.9) === 4; // true

// shorthand
~~4.9 === 4; //true

6. Object Property Value

If you want to define an object who's keys have the same name as variables pass-in as properties, try this tip.

const cat = 'Miaow';
const dog = 'Woof';

// longhand
const obj = {
  cat: cat,
  dog: dog,
  bird: 'Peet',
};

// shorthand
const obj = {
  cat,
  dog,
  bird: 'Peet',
};

source: https://alligator.io/js/object-property-shorthand-es6/

7. String template

Aren't you tired of using + to concatenate multiple variables into a string?

// longhand
const url = 'http://' + host + ':' + port + '/' category + '?' + params

// shorthand
const url = `http://${host}:${port}/${category}?${params}`

Writing multi-line strings in code, just use the backticks

// longhand
const long_text =
  'Lorem ipsum dolor sit amet, consectetur' +
  'adipisicing elit, sed do eiusmod tempor incididunt' +
  'ut labore et dolore magna aliqua. Ut enim ad minim';

// shorthand
const long_text = `Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim`;

8. Exponent Power Shorthand

Like python

// longhand
Math.pow(2, 3); // 2^3 = 8

// shorthand
2 ** 3; // 2^3 = 8

Thanks for reading, happy coding <3

•Web•WebJavascript•