Beginner’s Guide: the Best Way to Learn JavaScript

JavaScript is probably world’s most misunderstood programming language. The name itself is misleading. It has no relation with Java, yet the name.

If you are beginning to learn JavaScript, it is advised to first familiarize yourself with what the language is about. You should plan your “to-learn” list to learn JavaScript properly and understand the best of the language.

The lexical grammar of JavaScript

There are a lot of quirks in JavaScript. Some parts of the syntax are pretty weird. Often it happens that, while you are looking at a tutorial, you would see some syntax that doesn’t make sense to you. It might be an operator, and you don’t know what it is called, and you don’t know where to read more about the specific syntax.

This could be terribly frustrating, so it is recommended that you read and understand the entire lexical grammar of JavaScript. This should eradicate 85% of the confusions you might have when reading JavaScript tutorials. A good article to read about the lexical grammar of JavaScript is this one hosted on MDN.
Read it thoroughly, play with the examples in the console, and try to grasp it as much as you can.

The browser developer tools

Have you ever hit F12 while viewing a webpage? Assuming you’re using a modern browser on a desktop, something will come up. Those are the browser developer tools. They are mostly designed to be used by front-end designers and programmers, to help them debug their code. But that is not all that there is to it.

You can learn a lot from speculating things through the browser developer tools. If you have already started learning a bit of JavaScript, chances are you would already be familiar with the console. Maybe with the DOM inspector as well, for some CSS. But there are some other very powerful things that a beginner can do in the dev tools to learn JavaScript, especially through the “Sources” tab.

Read the documentation for the chrome developer tools. Similar tools exist for Firefox, Safari, IE, and Opera as well.

Writing code should be more important for a beginner, than to write working code on the first try. If your code doesn’t work, you can use these tools and make it work. Once it works, you would most probably already understand what you were doing wrong, and avoid that mistake in future.

The “Good” parts

JavaScript is not the best language in the world, but it is very very popular, with a very large community (heck, it is the only language that browsers understand, so…). But if you consider the good parts of JavaScript, it is very powerful. You should know the different parts of the language, and what they do.

The core language itself is called ECMAScript, maintained by ECMA TC39 team. And the core is not tied to the browser. It is just a simple programming language, which can be used at pretty much any place. And one such place is the browser.

The core part refers to the syntactical structure of the language. For example, when you are using for loops, or if/else statements, you are using the core part. The different types of variables ("strings", Numbers, objects, functions, ["arrays"] etc.) are also defined under the core ECMAScript part. Major inbuilt functions and objects like JSON.parse, Math.random, etc. as well come under ECMAScript. These things can be used with any ECMAScript engine. They are not exclusive to the browser!

A beginner is advised to focus on the core ECMAScript part only, and not worry about the browser or any other environment.

So how does the browser actually use JavaScript?

The browser has about three languages to deal with. HTML, CSS and JavaScript. HTML constitutes what should be shown on the web-page. CSS is used to modify the appearance, add background, change color of text, etc. But this has little to no interactivity.

This is where JavaScript comes into play! But for JavaScript to interact with the HTML and CSS, there needs to be a way to bridge the gap between the two parts, right?

For this, browsers expose an API. API stands for Application Programming Interface. Such an interface provides methods and functions which can be called from one side of the code (in this case, it is JavaScript), to access or modify the other side (HTML/CSS, in our case).

This API in browsers is known as the DOM API (Document Object Model).

When the browser receives the HTML, it creates a document object based on the HTML. The document object has functions attached to it like getElementById etc. which you might have used. Through using these functions, your JavaScript code can now interact with the HTML and CSS part, and breathe life into your webpage!

If you have proper knowledge of the ECMAScript (core JavaScript), then using the DOM API would be very easy for you! In fact, not only the DOM API, but potentially any other API which any other environment exposes.

Other than the DOM, the browser also exposes some modern APIs like localStorage, History, notifications, etc. As you create more and more applications, you will get familiar with them in due course. Furthermore, if you’ve learned the core JavaScript properly, using any new number of APIs should be easy for you.

What’s more, your ease won’t just be limited to the browser, but you would also feel comfortable with other environments such as Node.js.

Now-a-days, ECMAScript is reigning all over. It is used at a large number of places to develop apps for different environments. Things like PhoneGap, Cordova, Node-webkit etc. allow you to use the same language for different operating systems and devices. The only thing that changes is the “API” part.

Presenting… "use strict";!

A while back, the ECMA Team announced a kind of “subset” of JavaScript, which most new browsers support – “strict mode”. It has slightly different semantics than the traditional mode.

It is still the same language, but just by adding the statement "use strict"; at the beginning of your code, you are telling the JavaScript engine to parse the script under this strict mode. For older JavaScript engines which do not support this mode, they will simply ignore the line.

The difference in the traditional mode and the strict mode is that strict mode converts “mistakes” into errors. Traditionally, JavaScript is known to be deceiving. For example, we know that the length property attached to a function is read-only. We can’t change it. But if we try…

This is what happens… somewhat confusing. But if we run the same script in strict mode, an error is raised.

Yes, an error is raised.

A similar thing happens when one tries to implicitly declare a variable as global, without the var keyword.

Further details about the strict mode and the difference in the semantics from the traditional quirks mode can be read on MDN’s article on Strict Mode.

The aim of strict mode is to eradicate some of the nuisances and weird parts of the JavaScript language and make it difficult to introduce bugs in the program. Thus, it is known as the “strict” mode.

It is highly encouraged to always use strict mode, since it helps in avoiding bad practices.

Some “must-know” things

• Pretty much everything in JavaScript is an object. Arrays, functions, null, regexps, etc. They are all objects.
• Functions in JavaScript are first class citizens. They can be stored in variables, passed around as parameters, assigned properties etc.
• There is nothing like object equality in JavaScript. new Number(5) !== new Number(5)!
• Always use the strict comparison operator (===), and avoid using (==).
• Learn how closures work, and practice using the “module revealing pattern”.

Tools to use

My first and foremost recommendation: “Browser Developer Tools”. Each and every thing you learn about the dev tools would be fruitful for life.

Also, use JSLint for linting your code and avoiding mistakes. You can also use the JSLint plugin for your text-editor.

Conclusion

JavaScript is not a difficult programming language, but it is slightly different than other ones. Concepts like Prototypal Inheritance, event model etc. might be new, even for students who have prior experience in programming. Not to mention, programming in general can be intimidating sometimes for newcomers!

It is always beneficial to introduce yourself to the language features first. Good luck!

About the author

Awal Garg is a web developer fluent in HTML/CSS and JavaScript for the frontend, and also uses JavaScript at the backend with node and express.