JavaScript has been around quite a while now and we can almost consider it part of the ”old wide web”. But the JavaScript we use now has evolved immensely since its first days. We could better say that what really evolved were the projects that had JavaScript as their core and that made the web as rich and dynamic as we know it now. So everybody working on web development and design have to learn it, sooner or later, and before starting, a couple of tips may help avoid wasting precious time and energies.
Reading a lot is not enough and not reading at all is bad as well
People who start learning a web language may have two different approaches: some start off with a problem to solve (just a sticky header, for example) and frantically browse boards and forums for code examples about the problem and, eventually, they come to the solution by copy/paste, trying and discarding. Others prefer a slower but more pragmatic approach and, before taking the first steps, they spend time researching the best sources and arrange them following a linear order of increasing difficulty. These two learning models are frequently seen in JavaScript since the language has virtually endless resources on the web and can offer numerous occasions of practical applications on web pages, even on very small scales.
Both approaches have their pros and cons: the first group of learners, who start to practice JavaScript directly “in the field” will eventually find out that they miss an understanding of the fundamental notions; this will make it very hard for them to get into more advanced JavaScript concepts. The other group of learners, on the other hand, will spend too much time on reading the basics that, if not followed by immediate practice, may turn out to be too abstract to grasp, therefore seriously slowing down the learning pace.
Don’t be afraid to leave your comfort zone
The concept of “comfort zone” is everywhere and in whatever we do, and it is used to describe the attitude of directing our effort inside the area of our competences. As long as we work on something we know quite well, we diminish the risk of failure but without failures, we never make new discoveries and this will greatly hamper our chance to learn. When learning a new programming language, it is absolutely necessary to leave the comfort zone quite often, since there are so many different concepts to master that they can form an impenetrable barrier between a basic JavaScript accordion and a JavaScript web application.
When writing an algorithm, plain text may be helpful
When coding complex algorithms there’s a great risk that, after a certain point, you will miss the logic and that can happen for many reasons. A good practice when dealing with complex algorithms is to write them down in plain text, before starting to code them. This minimizes the risk to miss the logic when the coding part becomes complex.
Stop using alerts and embrace console.log
Doing tests is always good but when you start learning JavaScript there’s the tendency to test every bit of code, putting alerts everywhere, but there’s a better method: using the console. Given this HTML structure:
<input type="text" value="input-1">
<input type="text" value="input-2">
<input type="text" value="input-3">
<button id="trigger">Run</button>
And this JavaScript code:
$(document).ready( function() {
var $nInputs = $("input");
$('#trigger').on('click', function() {
alert($nInputs.length)
console.log($nInputs.length, $nInputs)
});
});
The console, not only less intrusive than an alert, can give us much more information and many more benefits like: it does not block processes, its results are nicely formatted, and if you forget to delete the output, you can live with that – though it’s not recommended, of course –, while you can’t afford to forget the alerts in your code. Lastly, you will love the possibility to chain multiple queries.
Get some basic concepts clear
When learning JavaScript through practice and examples, a common danger is to misunderstand some concepts: JavaScript, sometimes, can be a permissive language and it won’t return an error but some habits may become dangerous in more advanced steps. Here are some useful hints:
- Always declare a variable with the var keyword. You can create one even omitting the keyword, but this will result in a global variable and, probably, this not what you want.
- The operators === and == are not the same, though sometimes they produce the same effect. But, in detail, the operator == performs a unit conversion, while === simply compares values: ‘10’ == 10 will return true, while ‘10’ === 10 will return false.
- We have seen many inline events in the past but a code string like <a href=”#” id=”trigger” onclick=”doSomething(this)” > is hardly maintainable and it’s much better to write something like: document.getElementById(“trigger”).onclick = function(doSomething) {alert(‘ok’)}
This list can be virtually endless and it changes as you progress in your JavaScript knowledge; as you dive deeper into the language, you will look back at the code you had written in the beginning and you will realize that there’s always a better way to write it. So it’s totally fine to have bad habits, correcting them and gain new bad habits again: it’s the way humans learn, but a couple of tips will surely help you to progress faster.