How to become a JavaScript Genius?

“Information technology and business are becoming inextricably interwoven. I don't think anybody can talk meaningfully about one without talking about the other.”
                                                                            ^{_{-Bill Gates}}
In the past decade, technology has evolved so much in all sectors, be it robotics, biotech, or be it safety and security. Similarly, there has been a boom in Web Development Technologies as well. Now, we have even more advanced browsers with advanced protection layers, new programming languages, frameworks libraries, and more.

Why JavaScript?

With the introduction of headless architecture, JavaScript (JS) has apparently become the heart of web development and its adoption continues to grow exponentially. New frameworks are being developed. New libraries are being published on a daily basis. There is a continuous improvement of old libraries such as jQuery and Underscore. Moreover, present-day browsers have enhanced compatibility with the latest ECMAScript. Even more, companies such as Google and Facebook are developing their own JavaScript Frameworks, i.e., Angular and React. 

JavaScript has not only become the frontend champion but also the backend conqueror. Node.js has revolutionized the backend world with the introduction of JavaScript that was previously only used for client-side scripting. These days there is nothing that JavaScript can’t do. Right from frontend/backend development to mobile application development, cross-platform desktop application development, IoT (Internet of Things), and Robotics development, JavaScripts has its footprints everywhere.

How JavaScript?

Many of the developers are curious to learn how they can be an expert in JavaScript. How can they learn about JavaScript? How can they use JavaScript to keep up with the pace up with the latest industry trends? Well, the answer is really simple.

“Stick to the basics.”

Basics? Does it confuse you? Make no guesses. It simply means that developers should always focus on their core concepts because ultimately all frameworks and libraries compile their code purely into JavaScript. Browsers can’t understand each and every new framework; therefore, the code has to be compiled into JavaScript so that browsers can understand it. For instance, in Angular (2+), we use TypeScript to write the code, and then Angular uses TypeScript compiler to convert to code in JavaScript.

The best way to practice your basics is to visualize how JavaScript actually works and how the browser might read your code. Once you know how JavaScript internally works, only then you can achieve a higher understanding of JS. Here is a small example of variable hoisting:

function jsHoisting() {
   console.log(x);
   var x = 10;
}
jsHoisting();

If you run this code on your browser’s console, then you will get the output as ‘undefined,’ but the code will not stop running as it is a valid code and there is no error in this. But ‘undefined’ occurs when I have clearly defined the variable ‘x’ and has given it the value 10?

To unravel the answer to the above-stated question, we need to visualize how our JS will work and how the browser will understand this code using a variable hoisting concept. When this code is executed on the console the browser will actually hoist the variable ‘x’ on the top of the function. This means that JS will actually declare the variable ‘x’ in the first line of function. Here is the code that will actually execute in the console:

function jsHoisting() {
   var x;
   console.log(x);
   x = 10;
}
jsHoisting();

In the example above, we can clearly see that in the first line, ‘x’ has been declared but not initialized and hence it will always print ‘undefined.’

 So, this is how you can actually conceptualize how the hoisting works in JS.

The following are a few more tips on how to improve on your JavaScript concepts and if you are not a JS developer then how can you actually start developing simple and complex applications in JS.

1. Read and Learn From Others Code
As we all know that JavaScript is an open-source scripting language. It means that you have an abundance of code online and you can go to GitHub, Stack Overflow, and other platforms to read and learn from other developers’ code. If you are new and have learned a new concept, then also you can visit multiple websites and learn how more and more developers are implementing those concepts.

2. Whatever You Read/Learn, Try to Implement it in Code
Always try to implement whatever you have learned or read somewhere. This will give you first-hand experience of various basic concepts. Always try to push the code to your GitHub repo, so that you can actually track your progress. 

3. Know Browser Tools (Network and Console)
Always know the development tools of your browser. It is the most important part of being a JavaScript developer (or a frontend developer). There will be a lot of times when you might need to debug the code. Put a console.log here and there to check the variable values and track the outgoing API (Application Programing Interface) calls and see what response those API’s get.

4. Cross-Browser Compatibility

As a web developer, you would face many instances when a piece of code would work on one browser but not on others. Here is an example: 

function crossBrowser() {
   var str = "check";
   if (str.includes('e')) {
       console.log(`${str} includes e`);
   }
}
crossBrowser();

This is a valid code for most of the browsers but it doesn’t work in ‘IE.’ To make it work in ‘IE,’ we don’t use the function includes, instead we use indexOf. The code here will perform exactly in the same functionality for all the browsers including ‘IE.

function crossBrowser() {
   var str = "check";
   if (str.indexOf('e') > -1) {
       console.log(`${str} inlcudes e`);
   }
}
crossBrowser();
 

5. Check Out Various Online Interviews and Q & A Sections
Keep looking to explore the internet to find out new interview questions and answers. This will help you keep updated. Also, there are a lot of YouTube videos that feature online interviews for JavaScript. Try to watch and understand those videos. This will help you boost up your knowledge as well as your confidence.

6. Bookmark Important and Reliable Sources
As a JavaScript developer, one should constantly look for various online reliable sources to get the latest updates, which may include Stack Overflow, medium, Reddit, and more. If you read something interesting or new somewhere, make sure to implement it as soon as possible. Furthermore, you can bookmark those informative pages and articles and also subscribe to various online channels and hashtags related to JavaScript.

7. Communication and Interaction  
The most important point of all is to communicate with fellow developers. It is the key to everything. Continuous interaction gives you the best understanding as co-developers can explain to you a situation in the best possible way. It also improves your creativity and enhances your performance as you learn new ways to implement the same old code. Exchanging various online articles with each other is also a good idea. Besides, you should also do mock interviews with your fellow developers to improve your confidence and knowledge. Take it for sure that free flow of communication, and constant interaction is the best source of information.

8. Last But Not Least, Remember the Stages
There are three absolute stages in becoming a JavaScript developer. The first stage is the learning stage where you learn new concepts, code structures, and ultimately, the language. The second is the implementation stage where you try to implement whatever you learn in the previous stage. Remember to practice, practice, and practice. In the end, it’s the expertise stage. In this stage, you should try to expand your knowledge by learning new frameworks, libraries, and more. The third stage doesn’t mean the end, but it actually means that now you need to enhance your knowledge exponentially by reading technical articles and try to implement more and more algorithms. Just make sure you keep evolving.