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? 🙂
#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
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
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:
- with the
functionkeyword followed by the name of the function, like shown above for
- with the name of the function on the left of an assignment, using the same syntax as for a variable, like shown above for
- with the
Functionobject, 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’”.
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…
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 🙂