Deepan

Posted on Oct 18, 2019 • Edited on Oct 20, 2019

Javascript in a Ninja Way

#javascript

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

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

The equivalent long hand expression will be

Longhand Expression

if (Boolean(myValue))

2) Decimal Values with trailing zeroes

const maxValue = 100000

Instead of writing numbers like this we can write those in a cooler way without trailing zeroes

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).

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

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.


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

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


// 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...:)

Top comments (18)

SavagePixie • Oct 18 '19

The equivalent long hand expression will be
if (myValue === true)

Wouldn't the equivalent longhand expression be if (myValue == true)? Your example will return false unless myValue is a boolean.

Other than that, all those are great features of JavaScript.

Blake Mealey • Oct 19 '19

Came to the comments to say this 😃

Patrick • Oct 18 '19

Yea I agree, that part is very misleading... its equiv to if (Boolean(myValue)) {...}

Deepan • Oct 20 '19 • Edited

Yeah, you are right. I'll change it right away. Thanks, patrik, Blake

Deepan • Oct 18 '19

I assumed that it's a boolean. I was just trying to explain the truthy expressions.
I'll put appropriate comments. Thanks for the feedback.

SavagePixie • Oct 18 '19

Oh, gotcha! I assumed you were checking that it was a truthy value.

Michael Laufer • Oct 18 '19

I would never use "2) Decimal Values with trailing zeroes" and would strongly advise against using this in anything other than personal projects. The only benefit you get is confusing other developers, especially juniors.

Deepan • Oct 20 '19

I think that up to one's perspective. We can easily see those expressions in mathematics.

Sam Holmes • Oct 22 '19 • Edited

Cool trick for #5. You could even include parameters for require like so:

required = (f, p) => {
  throw new Error(`Parameter ${p} for ${f} required.`);
}

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

Eugene Karataev • Oct 20 '19

Nice list.
In the last example I prefer to use [1,2,3].includes(1) instead of ~[1,2,3].indexOf(1)

Juan F Gonzalez • Oct 20 '19

Wow, guess I became a ninja and didn't even realize it... 6 out of 7 tricks. Not bad

jacobdo • Oct 18 '19

Mandatory parameter seems very useful

Ryan Walker • Oct 20 '19

const num1 = +"100" Does this shorthand work in all browsers?

Deepan • Oct 20 '19

It's just usage of a unary operator '+'. So, I believe it will work the same on all browsers. But you cannot use const, instead of const use var since const is introduced in ES6.