Javascript in a Ninja Way
Tags: javascript
Published: 2019-10-18 09:19:12

Hi Dev,

Today I'm gonna share my 7 favorite Javascript shorthand tips that will look cool and clean on your code.

Alright, Let's begin.

#1) If Presence

Before getting into this shorthand, let me clear you about the Javascript falsy values.

A falsy value is something that evaluates to FALSE, for instance when checking a variable. There are only six falsy values in JavaScript: undefined, null, NaN, 0, "" (empty string), and false of course.
Other than these six everything is considered as a truthy value in Javascript.

**When doing “if checks”, assignment operators can sometimes be omitted.**

###Shorthand Expression

```javascript
if (myValue) // myValue can be any truthy value
```

The equivalent long hand expression will be
###Longhand Expression

```javascript
if (Boolean(myValue))
```

#2) Decimal Values with trailing zeroes

```javascript
const maxValue = 100000
```
Instead of writing numbers like this we can write those in a cooler way without trailing zeroes

```javascript
const maxValue = 1e5 // 100000
1e0 === 1
1e1 === 10
1e2 === 100
1e3 === 1000
1e4 === 10000
1e5 === 100000
```

#3) Function Return

In all Javascript functions, the default return value will be undefined. To return a value from a function we will use the return keyword. But in an arrow function with a single statement will implicitly return the result its evaluation (the function must omit the braces ({}) in order to omit the return keyword).

```javascript
// longhand

const add = (a, b) => {
  return a + b
}

// shorthand

const add = (a, b) => (a + b)

```

#4) Spread Operator

Of course, if we are talking about the shorthand tips, it won't be complete without spread operator. It's a ES6 syntax and its more fun and clean. It can be used to replace certain array functions. The spread operator is simply a series of three dots.


```javascript
const a = [1, 2, 3]
/* To concat a with b*/

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

// shorthand

const b = [4, 5, 6, ...a]

const c = [4, ...a, 5, 6] // You can use it anywhere inside an array

/* You can even use a spread operator to clone an array */

const copyOfA = [...a] // Traditional way is the use of slice method

```

#5) Mandatory Parameter

Since javascript variables are loosely typed, we cannot validate for a mandatory parameter in a function. By default, javascript will take undefined for a function parameter if it isn't passed as an argument. To validate it you need to use an if clause or you can do a default required assignment as shown below.

```javascript

// longhand
function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!!!');
  }
  return bar;
}

// shorthand

required = () => {
  throw new Error('Missing parameter!!!');
}

foo = (bar = required()) => {
  return bar;
}

```

#6) '+': Integer typecasting

Among all these, this short is the one I'll use a lot. We overload '+' operator for string concatenation often. Another use of the '+' operator that I find most useful is for Integer typecasting.

```javascript
// longhand
const num1 = parseInt("100")
const num2 =  parseFloat("100.01")

// shorthand
const num1 = +"100" // converts to int data type
const num2 =  +"100.01" // converts to float data type

```

#7) '~': Bitwise IndexOf

Another favorite one among these here is the use of the '~' operator with the indexOf function. The usage of ~ (bitwise NOT) operator is, takes one number and inverts all bits of it.
The **indexOf** method will return the first index of the occurrence in an array or string. Since 0 is a falsy value in Javascript, we cannot use the **indexOf** method directly inside if clause. So for 0, '~' operator will return -1 and for -1 it will return 0.

```javascript

// 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

}

```

Thanks for reading guys. Don't forget to comment on your favorite shorthand expression!!!

Happy Coding...:)