Become a JavaScript Master: Essential 10 Tips for Mastery the Language!

This post has been republished via RSS; it originally appeared at: Microsoft Tech Community - Latest Blogs - .

JavaScript is a programming language that has been gaining many followers year after year! In this article I will be giving some fundamental tips on how you can become a master in this powerful, versatile programming language that is present everywhere.

Ah, JavaScript! The language is present in all spheres of Technology. Whether in Front-end, Back-end, Mobile, Desktop, IoT and even in Artificial Intelligence. The fact that the language is present on the Web, which is the largest technology ecosystem in the world, makes it the most popular language in the world.

In 2019, I wrote an article on the same topic but in Portuguese, which you can check out here. However, as it has been almost 4 years since the last publication, I decided to update and write another one in English. Just to be of help to the technical community. The first article was very helpful to many people, as it became a guide for those who were just starting to learn JavaScript. Because of this, annually - always at the end of the year - I will be updating the article including: new tips, new links and study resources.

So, let's go!

Tip #1: Study and Learn the Basics

This tip is interesting because we all know that, to learn anything, we need to grasp the basic concepts. However, many people end up skipping this crucial part.

Let's compare studying a new programming language to learning a new spoken language. When we learn a new language, we always start with the basics, and through a lot of practice, we progress to more advanced aspects of that language.

The same applies when we want to learn a new programming language. It's futile to try to learn a new framework/library in JavaScript, whether it's React, Angular, or Vue, without knowing the fundamentals of JavaScript. (This tip applies to any programming language you want to learn!) Skipping the basic concepts means not understanding the language's core, leading to a hindrance in further studies.

What do these basic concepts encompass? It involves learning variables, data types, functions, looping structures (for, for in, while) – how and when to use each of them, decision structures, local and global scopes, understanding the structure of ES5 and ES6, among other fundamental topics.

Another important point to mention is to understand how the web functions, know how HTTP requests work, and understand how the internet operates. Why? Because JavaScript is a language focused on the web, and you indeed need to understand these concepts.

But where can you find resources to learn these basic JavaScript and web concepts?

A great place to learn, from the basics to advanced, about JavaScript and the web is the Mozilla Developer documentation. For those unfamiliar, I highly recommend the link below:

Official Mozilla Documentation

The coolest thing about this documentation is that it's all in Portuguese!! There's no excuse not to learn!

And for those who don't enjoy reading but prefer learning through videos, I recommend a course that we, here at Microsoft, created with the intention of demystifying and helping those who want to learn JavaScript in a simple, practical, and direct way! This content covers everything from basic to intermediate concepts and is an excellent starting point for delving into the language! You can find the more than 50 videos at the link below. In the repository, I've tried to organize and structure them in the best possible way for you and, better yet, including the next steps to excel in the JS world!

And finally, a very cool tip that I even shared on my Twitter is a website where you can learn JavaScript dynamically and, better yet, online. The great thing is that as you progress through the lessons, there are numerous exercises for you to do. Check out how cool it is:

Learn JavaScript Online course

Tip #2: Practice is everything in this life!

There's no way around it. The best way for you to become proficient, regardless of the language you are studying, is to practice. Again, drawing an analogy to learning a new language, we only start to feel more comfortable and confident speaking with a foreigner if we begin to practice, right?

The same applies when learning a new programming language. And with JavaScript, it won't be any different.

What do I recommend for this second tip? After understanding the syntax and basic concepts of JavaScript, now is the time to learn algorithms and data structures.

You might say, 'Oh Glaucia... but there are so many algorithms...' Yes, it's true, and I have to confirm that. But, just like learning a new language, you need to be patient, and the same will apply to a new programming language.

What I recommend everyone to do is: dedicate 1 hour/day to study or take on a JavaScript algorithm challenge. It may not seem like much, but rest assured that in the end, it will make all the difference for you.

Oh... and remember one thing: quality is better than quantity. So, it's not useful to study, let's say, 8 consecutive hours in JavaScript one day and then not touch that subject again. What really matters is the quality of your studies. Study for a few hours each day. But, try to maintain the routine! #justsaying But where can I find resources to learn algorithms and data structures in JavaScript?

I recommend the video below that already covers: Data Structures and Algorithms in Javascript&colon;

And two websites that I highly recommend as well are:

CodeWars
HackerRank

Both of them offer daily challenges in many languages, including JavaScript. It's worth taking a look!

Tip #3: Study JavaScript with a Book

For many, reading a book may seem tedious. However, there comes a time when we will need it. Just like when we learn a new language, we need to refer to a dictionary or some grammar book for that language.

The same thing happens when we are learning a new programming language. We have to move beyond the basics and start consuming more substantial content. And what would these 'more substantial things' be? They are the books! There are numerous books that are highly recommended for those who are learning JavaScript. To mention a few:

Important Tip: Read the book and just only move on to the next chapter after you complete the exercises and truly understand what you've studied. If you don't understand, don't skip ahead. Try to comprehend, research, and only move on to the next chapter once you've grasped the content.

Tip #4: Understand Asynchronous Programming in JS & DOM

It is of utmost importance to grasp asynchronous programming since JavaScript extensively employs the use of asynchronous functions.

For this type of topic, I recommend the video below:

And regarding the DOM?! It's also very important to have a mastery of the DOM if you want to become a Master in JavaScript. Why? Because the DOM (Document Object Model) is the best way to manipulate HTML pages, especially for those working in Front-End; it's essential to know the DOM.

Here are some interesting resources to learn the DOM:

Tip #5: Hands-On — Build Projects

After going through the previous tips, you'll now be more prepared to develop personal projects related to JavaScript.

What I always recommend in my talk presentations that every Developer should create a GitHub account. Why? Some companies, especially abroad, as soon as they see your resume, immediately check your GitHub portfolio. What's their goal? To see what you've been working on, how careful you are in developing a project, and if you contribute to any open-source projects.

And the best place to host your personal projects is definitely the GitHub. But you might say, "Oh, Glaucia, but I don't have knowledge in Git." That's not a problem at all. There are excellent free courses on Git and GitHub that you can take. Below, I recommend some very good ones!

Developing projects is the best way to showcase what you've learned to the world and will also help you improve your JavaScript skills much more. Not to mention, it's the best way to practice.

So, get your hands dirty and start developing many projects!

Tip #6: Learn OOP for JavaScript

Another important point that you will certainly encounter at some point while programming in JavaScript is Object-Oriented Programming (OOP) with JavaScript.

Try to understand what it is, how it works, and how to do it. Why? Because OOP in JavaScript is entirely different from the concept of OOP in, for example, C#, Java, PHP, Python, and other languages that have OOP concepts. Since JavaScript is a multi-paradigm language (functional + imperative + scripts), it ends up being quite different from most other languages we know.

But if it supports functional programming, why should I learn OOP for JavaScript? It's an excellent question. However, due to modern JavaScript, especially after ES5/6, we see OOP paradigms being adopted in JavaScript.

Where can I learn OOP with JavaScript? Below are some links that can help you in this study:

The video above is excellent, and it's just 1 hour of explanation on how to learn OOP with JavaScript, including the concepts of ES5 & ES6.

Tip #7: Learn Functional Programming

As mentioned in tip #6, JavaScript is a multi-paradigm programming language that supports functional programming. Therefore, it's also extremely important to learn functional programming.

When you learn functional programming, you gain a better understanding of the core concepts of languages, as functional programming helps you avoid using state changes and mutable data. Moreover, Functional Programming emphasizes mathematical functions, making it particularly helpful in projects that involve extensive calculations and memory allocation.

Here are some important links to learn Functional Programming with Javascript&colon;

We're approaching the final stretch of our list. What would be the Top 3?! Let's find out now!

Tip #8: Learn Design Patterns in JavaScript

If you've made it this far, you're finishing up your training and getting close to becoming a JavaScript ninja.

Design Patterns are crucial in any language specialization or work context.

When you have a solid understanding of Design Patterns, you'll be able to define the best project architecture for a given situation.

Want to learn Design Patterns in JavaScript? Below, I list some very interesting links that are worth checking out:

The Facade Pattern
JavaScript Design Patterns
Build A Simple Javascript App The MVC Way

Tip #9: Learn a JavaScript Framework/Library

Now that you're approaching the end and have learned everything you need to become a Master in JavaScript, it's time to dive into a JavaScript framework or library.

There are several frameworks/libraries in the market, including Angular, React, and Vue.js. Don't make the mistake of trying to learn them all at once! Choose one framework/library to learn and specialize in! By studying one of the top 3 in the market, you'll find it easier to learn or migrate (if necessary) to another framework or library.

Below, I'll list some key courses for Angular, React, and Vue.js:

I also recommend learning Next.js because there are many job opportunities and projects that have adopted this tool. Below are some resources to learn Next.js:

On the Back-End side (or even on the Front-End side), I would strongly recommend learning Node.js and TypeScript as well. There's some free trainings that you learn it! Check it out below:

Now if you like to learn watching videos, below some good videos to learn Node.js and TypeScript:

Tip #10: Support Open Source Projects

The best way to keep progressing and not stay stagnant is by actively supporting Open Source Projects. Moreover, you'll be in contact with the JavaScript community's experts, and, even better, you can contribute to a project by submitting a Pull Request for a new feature.

This way, you'll learn from others, learn more about yourself, and, most importantly, contribute to the technical community.

Another point to mention here is that you don't need to be a genius to help or support an open source project. For example, In the past I could make some good contributions helping to make some translations (from English to Portuguese) for the Reactjs.org page. Of course, if you feel comfortable and want to submit a PR for improving a feature in a library, great! But if not, don't hesitate to contribute in other ways!

But where can you support Open Source Projects in JavaScript? Below, I'll provide some resources and projects that you can start to make Open Source contributions:

Extra Tip!

Now, I'll leave you with an extra tip! Regardless of the language you're learning, whether it's C#, Java, Python, or even JavaScript, it's crucial to have knowledge of Cloud and A.I.!

But why? Because cloud computing and artificial intelligence are present everywhere. And if you want to become a high-level software developer, you need to understand these two subjects.

I'll provide some links to free courses related to these topics:

Cloud

Artificial Intelligence

Final Words

Phew! We've reached the end of our list! Remember: Quality is better than quantity. I know there's a lot to study here. But, if you dedicate, for example, 1 hour per day to study the resources I've posted here, in a period of 15 to 18 months, you will undoubtedly become a Master in JavaScript.

Microsoft has an official page about the JavaScript world where you can see the latest developments in the language's use with Cloud and A.I. If you want to see the latest updates, click in the image below!

JavaScript at Microsoft Hub Page

Oh, I almost forgot to mention! Don't forget to subscribe to my YouTube Channel! In 2023/2024, there will be many exciting new things on the channel!

Some of the upcoming content includes:

Microsoft Learn Live Sessions (Microsoft Reactor YouTube Channel)
Weekly Tutorials on Node.js, TypeScript, & JavaScript
And much more!

If you enjoy this kind of content, be sure to subscribe and hit the notification bell to be notified when new videos are released.

And also subscribe in the Microsoft Reactor YouTube Channel to learn everything related to Cloud and Artificial Intelligence!

If this article/guide has been and continues to be helpful to you, spread the word to your friends and to the world!

And see you in the next article!