Do you know those hidden JS features?

Time to get into the rare stuff! 😀

This article is also available on Medium.

Web development has gotten more complex these past few years, especially with the arrival of all those new JS frameworks both for front and backend. But did you know that the good old vanilla JS still has a lot of secrets worth sharing? 🙂

Today, let’s have a look at some features of JavaScript that have fallen under the radar, but can be quite powerful or fun to use!

#1: Who said anything about passing in arguments?

JS is known for being quite lenient on a lot of things. In particular, since it is not a strongly typed language, you’re not required to be that specific about your function prototypes.

You probably know how you can call a function with less parameters than it has arguments, and those will automatically be filled with the undefined value:

But did you know you can actually access your arguments without even declaring them? We could rewrite our previous functions like this, and we can now add as many values as we want when we call it!

#2: Making private functions

Nope, JavaScript doesn’t have any accessors like C, C++, Java, C# and plenty others. But you can still limit the scope of some variables, and also some functions, by enclosing them into a specific context.

We’re used to it with “normal” variables: by using the let keyword, we can make local variables that don’t exist outside of a function. For example, here, the first console.log() works fine but the second one will crash saying that i is “not defined”:

And since JS functions can actually be used just like variables, the same trick helps us avoid any unwanted access to our logic:

#3: Playing around with functions a bit more!

On this topic, don’t forget that there are several ways of defining a function in JS:

  1. with the function keyword followed by the name of the function, like shown above for myFunction
  2. with the name of the function on the left of an assignment, using the same syntax as for a variable, like shown above for localFunc
  3. with the Function object, like this:

Except that the third possibility is hardly a recommendation: just like the eval() function, it makes your program at the disposal of whatever is inputted as an argument. So use it at your own risk, and only if you’re absolutely sure of what’s passed to your function!

Also, once we’ve prepared your function, you can pass it around like any other variable, which makes it really easy to factorise code 🙂

That’s typically how you can use the Array.filter() built-in to check for a variety of conditions without having to create a different filter() function for each:

#4: Warning for all the C-users!

If you’re familiar with C and C++, then you probably know that those languages let us use block scopes to isolate variables:

Code like won’t even compile — instead, it will crash with a nasty error saying that we are using an “undeclared identifier ‘j’”.

In JavaScript, it’s a bit more tricky. If you use the var keyword to declare your variables, then block-scoping won’t work. Meaning that if you put brackets around a variable, it will still be accessible afterwards:

But this is yet another cool reminder for using let: usually, it gets us out of a lot of trouble by insuring a better (well, stricter) scoping 😉

And finally, to get yet another taste of the power of functions — did you know that, since they are objects under the hood, they can have properties?

This can be interesting when you want some delay to be controllable from a distance, from example. However, again: itcan quickly get out of hand! Be sure not to get crazy with those parameters, and to properly protect them from your users, or they might completely freak out your program!

#5: Learning the bases

You’ve surely already seen the parseInt() built-in. It is a convenient way to easily convert annoying incoming strings into proper IDs, or process inputs. Like if you need to use something from your URL and you have to turn it into a number:

This is fine as long as you’re working with “easy” numbers. But sometimes, you’ll have some leading zeros, or other funky stuff that can lead to parseInt() doing the right conversion.

Suppose for example I’m playing around with hexadecimal numbers. Then I can actually force my conversion to use this 16 base (or radix) by passing in a second argument:

#6: IIFEs for the win!

This feature has gotten more advertisement when some libs and famous tools like jQuery decide to bring it to the spotlight, and regard it as one of the best practises for making plugins.

Immediately Invoked Function Expressions (IIFEs) are again a great way to insure you’re working inside a well-defined scope that won’t affect the rest of the logic:

They avoid global namespace pollution and are also nice when you want to define and run self-sufficient logic somewhere…

Conclusion

And here you are — those were just a few of JavaScript “secret” features! There are plenty more, and some of those are more an opportunity to remember dangerous processes than really learn a good pattern…

But anyway: what do you think? Did I forget you favourite? Do you have some JS tricks to share? Feel free to tell me in the comments!

As always, thanks a lot for reading 🙂

Leave a Reply

Your email address will not be published.