Top 10 JavaScript Hacks That Every Developer Should Know

Hello Dear, Today we will learn about 10 JavaScript hacks for make life easy and comfortable. Our code will be get more optimized and cleaner.

1. Errors Will Happen!

The “try…catch”

If you are a boss at JavaScript or programming but error will find you in a organic way. No matter you are good in programming, sometimes you have the error in your script. Errors can be coding errors made by the programmer, errors due to wrong input, and other unforeseeable things. Now to handle this error you have to use try…catch.

try…catch syntax:

try {
     Block of code to try
 }
 catch(err) {
     Block of code to handle errors
 }

The try statement allows you to define a block of code to be tested for errors while it is being executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

2. Clean The Code —

If you don’t clean and optimize your code, your code will be not readable for other developer even you are not able to read it after a month after. So clean the code and it will be easy to read as possible.

Coding Style

3. Cross Browser —

Different web browsers parse website code differently. It’s not necessary that the application we are running for our local browser that will run smoothly in the others browsers too. There are limitations and restrictions too. So this whole concept is known as cross browser.

So it is totally difficult and impossible to fulfill all browsers requirements. But we developers actually do not need to do 100% perfect rather we have to fulfill as much as possible. This is a challenging case for web developers to meet the expectations of users of different devices.

There are few reasons why cross browser issue occurs.

Let’s have a look:

i) Different features for different level of technology support.
ii) Because of bugs and different implementing features.
iii) Because of some constraints like huge loading time, heavy animation, sets.

4. Maintain Testing —

It’s not too hard as we generally think rather we have to be little more careful in this case. Maintaining some steps we can overcome it. Such as, for big projects we have do testing as a regular basis for making it easier. We can do it as we think of . But I am going to provide a rough working process.

They are:

i) Initial planning
ii) Development
iii) Lack of Testing on Real Devices
iv) Testing/discovery
v) Outdated Browser Detection

5. Initial planning —

• Keep exploring the audience who are going to use this application either by research or by your intuition.
• Decision making phase for some important criteria. Like- meeting with the owner for discussing overall plan, costing, time limitations, resources, etc.
• Include features for latest devices such as latest desktop, laptop and mobile with different browsers such as Chrome, Firefox, Opera, etc.
• Review the whole plan so that nothing left for future bugs.

6. Development —

• Explore the whole project into small parts such as — home page, booking page, shipment page etc.
• Use different functionality, prolifically, libraries, frameworks, different phases of code etc.
• Accepting that some issues may not resolved at all, try possible solutions.
• Move on if it does not work in older browsers.

7. Lack of Testing on Real Devices—

Nothing beats the real thing. No matter what your website is like, the best way to make it bug-free.

• Finally fix if there is any issues left out.
• Test based on your check list of different devices.
• Add new code snippet if needed.

8. Testing/ Discovery —

• Test code in different browsers.
• Try to use only keyboard testing or only reading mode
• Test in different mobile devices like android, iOS etc.

9. Outdated Browser Detection —

If there is a updated version then there is a outdated version too. To fix this issues if an old browser is used, it is possible that JavaScript has failed to detect the browser.

Now we will discus about ES6 Feature:

10. Arrow Function (ES6)—

First arrow function introduced in ES6 (2015)

Arrow function is a compact version of traditional function. It’s just a shorter function syntax. Arrow function returns value by default.

Traditional Function:

hello = function() {
  return "Hello World!";
}

Arrow Function:

hello = () => "Hello World!";

11. Hoisting —

If a variable is declared and initialized after using it, the value will be undefined. JavaScript only hoists declarations, not initialization.

Example:

console.log(num); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage
var num; // Declaration
num = 6; // Initialization

That’s all for today. Thank You