JavaScript skills today are in more demand than ever before. For the past five years, JavaScript has become the most popular web technology.
In GitHub, which is an open source community, more JavaScript codes are uploaded, than any other language. Also the JavaScript packages uploaded to NPM have grown faster than any other languages.
Not only this, the JavaScript libraries like jQuery and React, and frameworks like Vue and Angular have revolutionaries the way applications are made.
You will find JavaScript everywhere from websites to mobile apps.
In this tutorial I will tell you some of the very best JavaScript Hacks which you can use to great results. So let’s get started.
1. Anonymous Function
An anonymous function is a function without a name.
Example: To return a cube of a number
var getCube = function funName(variable) {return variable * variable * variable;}console.log(getCube(3));
2. Self-Invoking Function
These function are automatically invoked i.e. you don’t have to call these function to invoke them.
Example: Show alert message automatically when page is loaded
(function () {alert("Hello! I called myself");})();
3. Arrow Function
The JavaScript Arrow function helps reducing the number of lines in a function.
Example: Multiplying 2 numbers
var funcMulti = (num1,num2) => num1 * num2funcMulti(3,5);
I have also written a Complete Reference of JavaScript Arrow Function which you should not miss to read.
4. One-liner while some condition is true without having to specify a body
This will make your code short.
Example: Print a value 3 times
var i = 2;while (console.log("Value"), i-- != 0);
The code will print string ‘Value’ 3 times.
5. Finding which alert is Activating
In big projects you have multiple JavaScript files applied. If you see yourself getting alerts on a page but don’t know where the alert comes from, then you can write alert = console.log.bind(console); at starting of your page.
Now, instead of alert message, you would get a message displayed in the console with a line and column number and which file the alert comes from.
I have also written an article on jQuery Optimization Techniques which will come out to be handy for your during development tasks.
6. Use an array to swap variables
Before Code
var a=1,b=2,c;c=a;a=b;b=c
After Code
var a=1,b=2;a=[b,b=a][0]
7. ”in” Keywork
The “in operator” returns true if the specified property is in the specified object.
console.log(0 in [1, 2, 3, 6]) // prints true as 0(index and not number) is in the array.8. Array Filter
It is a small hack to filter out null elements from the array.
Example: Filtering ‘null’ values from array
schema = ["hi", "peta", "i love", null, null, "you"]schema = schema.filter(function (n) {return n});console.log(schema)
Array will be removed with null values. Console.log will print — [“hi”, “peta”, “i love”, “you”]
9. String Replace method to replace all string
The string.replace method will replace the string at the first occurrence only.
var string = "login login";console.log(string.replace("in", "out")); // logout login
If you want to replace all then use ‘/g’ at the end of Regex.
var string = "login login";console.log(string.replace(/in/g, "out")); // logout logout
10. Getting to the last item of an Array
Pass -1 to the slice method to find the last item of the array.
var array = [1, 2, 3, 4, 5];console.log(array.slice(-1)); // [5]
11. Converting to Number using +operator
Use ‘+’ operator to convert a string to a number.
function toNumber(strNumber) {return +strNumber;}console.log(toNumber("999")); // 999console.log(toNumber("FOX")); // NaN
12. Array Concatenation instead of concat method
Consider these 3 arrays:
const one = ['a', 'b', 'c']const two = ['d', 'e', 'f']const three = ['g', 'h', 'i']
You can use the concat method to concatenate these 3 arrays:
const result = [].concat(one, two, three)Instead of concat use three dots (…) to concatenate them as shown below:
const result = [...one, ...two, ...three]Conclusion
I hope you like these listed JavaScript hacks. If you know any other then please use the comments sections. Also please don’t forget to clap for the article — it only takes a second of your time.
Thanks and good day.
