Super Powerful JavaScript Tips and Tricks - Part 2
Table Of Content
This article is the Part 2 of the JavaScript tricks series. Below is the list of all the parts of the series-
I will be adding tricks to this series as I learn them. Keep in mind these tricks and tips are specifically for ES5.
Let's directly dive in.
1. Constructor like thingy in JavaScript
Developers coming from class-based languages are too much used to implementing constructors for initializing their class members. But, we don't have constructors in JavaScript.
What you can do instead, is use IIFE pattern to initialize your members when the object is first created.
function Foo(){ var name; // Constructor like thing in JavaScript (function(){ name = "FooName";
// Some other initialization logic })(); this.getName = function(){ return name; }}
var foo = new Foo();console.log(foo.getName()); // FooNameAlthough, you don't have to use the IIFE pattern if you don't want to. Because, in JavaScript, when you say new Foo() it executes all the expressions in the function Foo. But, adding IIFE to your code makes it more structured and is more readable.
2. Check if the argument is a Number
Below is a correct way to validate Number types in JavaScript.
function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n);}Let me know if you guys know any better way to do that.
3. Default Value
How do amateurs set default values?
if(bar){ foo = bar;}else { foo = default;}How do professionals set default values?
foo = bar != null ? bar : default;How do legends set default values?
foo = bar || default;4. TRUE sort your arrays
Have you ever had a facepalm moment when using the JavaScript sort function out-of-the-box?
If not, this is that moment.
[3,2,1,10,4].sort(); // 1, 10, 2, 3, 4Notice how JavaScript placed 10 between 1 and 2 when you sorted the array of numbers. Isn't JavaScript funny?
Here is the reason behind it. In short, JavaScript converts objects to strings and performs a lexicographical sort on it by default.
To fix this below is the correct way to sort your numbers-
[3,2,1,10,4].sort(function(a, b){ return a - b; }); // [1, 2, 3, 4, 10]In ES6, it becomes sexier-
[3,2,1,10,4].sort((a,b) => a-b); // [1, 2, 3, 4, 10]5. Disable Right click
Ever wanted to hide your implementation details from users?
Here is one super important blog post on how to make your JavaScript secure.
Another simple hack to add to it is to disable right click on the page so that users are not able to inspect your web app.
Of course, there are other workarounds to get away this. But, for most of the naive users- this should do the trick.
<body oncontextmenu="return false"> <div></div></body>The attribute oncontextmenu="return false" disables the right-click menu on your web page.
6. Load IE specific script or CSS sheet
I am sure your customer, at some point, has changed requirements on you to support the Internet Explorer browser. No one is so lucky not to. :(
Well, you don't have to update your existing JavaScript or CSS code. You just can write IE specific functionality in a separate file and load that file if the browser is Internet Explorer.
Here's how you can load files just for the Internet Explorer.
Well, it's not limited to only IE. You can target any platform and write code specific to that platform. Isn't that neat?!
Summary
These were more of my favorite JavaScript tricks I use regularly. It has made my life easy.
Let me know if you have come across similar situations. And what are your personal favorite JavaScript tricks that you're like to use?
Again, this article is the Part 2 of the JavaScript tricks series. Below is the list of all the parts of the series-
Further Resources We Recommend
