Around this time of the year there is a tendency to have more people trying to learn JavaScript (JS) or other programming language, probably because of work/school vacations, and the questions I see being asked in places like reddit or twitter are usually something like “Where should I start”, “What should I use” or “What to read”.

I will not teach you how to code, I’m gonna assume you know the basic like what is a cycle, function and conditions. Hopefully I can answer some of those frequent questions helping you accelerating the process of learning.

Where to start

Start by choosing in what environment you want to code, JS was, some years ago, used mostly only on the browser, nowadays you can find it in servers, mobile, hardware, software applications, you name it and probably there is something available out there that allows you to use JS.

This makes whatever knowledge you acquire of the concepts of JS to be applied in another sector, what I’m trying to say is that if you start in the front-end and later decide you want back end or mobile you can make the switch without having to worry about learning everything from zero.

The environment, tools, frameworks and libraries may change, the core concepts of the language will not.

I would recommend starting in either front end (easier to visualize) or back end with Node.js (harder to visualize but no need for the DOM and CSS knowledge) and only add libraries when you are repeating a lot of work between projects.

I don’t like libraries/frameworks when starting to learn since they abstract the language to facilitate the development but can easily become a spiral of eternally adding and learning libraries instead of learning the core of the language and shipping projects.

I’m gonna give you a very simplified overview of what are the necessities in case of starting with the front end before going back to only JS so we don’t deviate to much from the original topic.

Front end

When you start with front end development you have to understand the interaction between the DOM, JS and CSS.

DOM — Document Object Model, is where we mount the area of our website, that search bar up there or this article are all part of sections created in the DOM using HTML;

CSS — Cascaded Style Sheet, is what makes the websites look fancy, what gives them life, color, animations (most of the times since this can also be done with JS);

JS — Javascript, used to obtain data from a server, to create actions like the click to open an article here on medium or the action to redirect to another page when you click the logo of the webpage, it is also used to create more areas to the DOM and change the style made by the CSS.

So the DOM is were you keep the text boxes, containers, buttons and so on of a page, it can read from one or multiples css files to give it some style and equally from JS files to give it functionality like button clicks.

Sample here.

You can see what methods and properties JavaScript has available for the browser in MDN.

Also when developing you should always search what browsers support the methods you are using, let’s say you wanna use a map to iterate an array and you want to support IE 6 (for some reason) then you will have to use something else like a for because map is not supported in that browser, you can check the compatibility in websites like caniuse which will show you what is supported for different browsers.

To make tests on you webpage and check what is going on you can use the developer tools of the browser (usually by hitting F12 or right-click > inspect).

You can poly fill or transpile your code so you don’t have to worry about the support and just use whatever methods with tools like babel but I won’t be focusing on that.

You can find an awesome road map of some of the stuff you should learn for front end, back end and devOps here. Nonetheless when starting focus on one, their big enough on their own.

Core Concepts

Like I was previously saying, the core concepts are common to the JS ecosystem so you should learn them until you can identify them in the mist of code. Keep applying them in your projects one at the time, when you fell comfortable with one add another when possible.

What I would consider the basic:

Types

JS is a loose typing language meaning that, contrary to strong typing like Java or C#, you don’t have to say explicitly the type of a variable. So when you define something and add it an initial value it will be internally (implicitly) coerced to one of the following six primitive types:

Boolean — simply true or false;

Null — just right null it means the variable exists with no value;

Undefined — Can be found when trying to access something that does not exist or has no assigned value, like a property or an object;

Number —Has the name states a number like 1,2,3…;

String — When “” or ‘’ are found anything within are considered strings;

Symbol — It’s used mostly meta programming and in my opinion should be avoided when starting (unless you’re starting with meta programming) but you can see it as being an “hidden” object property.

Everything that is not primitive falls in the category of:

Object — Which is normally represented like var obj={prop: 'value'} and accessed with obj.prop .

First class functions

In JS you can assign a function to a variable since functions are treated like objects and pass it has an argument, meaning that you can use it like so:

function bar(fn) {

fn();

} var foo = function() {

console.log('Hello!!!');

} bar(foo);

The function in a variable will only be called when you either use () or .call()/.apply().

You can also check out this for more on the topic.

Coercion

When doing equality checks it’s preferable to use ‘===’ instead of ‘==’, the first is strict and checks the content of a variable and it’s type, the second is more loose so it checks the content of a variable after converting to a common type.

true === true // true

false === 0 // false true == true // true

false == 0 // true

The weird in this example is the last one, what happens is that ‘==’ does something like false == Boolean(0) which means that the evaluation ends up being false == false which is true.

You can check the equality table here

What I consider more advanced but essential:

Closures

In JS function memorize the scope where they are declared, meaning that even if you call a function inside another later in your code it can still access the variables declared in is upper scope.

In this example, the blue has access to every declaration above it so a, b and c variables can be accessed, red has access to both red and green and green can only access anything above itself (in this case there is nothing else aside from the window .

An awesome explanation of closures can be read here

Callbacks

A callback is simply a function that is called after our code is finished, since we can send functions as arguments we can execute some code and later execute or argument function.

function handleResult(sum) {

console.log(sum);

} function addTwo(value, callback) {

var result = value + 2;

callback(result);

} addTwo(5, handleResult); // will log 7

If a function can receive another function as an argument we call it an higher order function.

Promises

In JS there are some functions that are asynchronous, meaning that the code continues to run and when the async function finishes a callback is executed later.

// code here setTimeout(function() {

console.log('happens after 10 seconds')

}, 10000); // code after // 10 seconds later the setTimeout callback is executed

Promises are what allow you to have your code run synchronously, meaning that the code after will only execute when the sync code finishes, using the above example:

// code before var promise = new Promise(function(resolve, reject) {

setTimeout(function() {

console.log('after 10 seconds');

resolve();

}, 10000);

}); promise.then(function() {

// code after

})

There is yet another article that explains it in detail here.

Event loop

Javascript uses a concurrency model which is based on an event loop, it’s what makes JS, which is single threaded (only uses one thread of the CPU), be able to do async code, this is awesomely explained in this video.

“this”

“this” represents the context of an object at the moment where it is being called/executed.

var foo = {

value: 1,

bar: {

value: 2,

baz: function() {

return this.value;

}

}

}

In this example if you call foo.bar.baz() “this” will have the the value of the previous method of baz, in this case 2. You could change the context by using call, apply or bind when calling baz for instance, foo.bar.baz.call({value: 3}) would make it return 3 instead of 2.

You can see a more in depth explanation here.

Struggles

I might be a bit obvious in this next part but for what I see this are some factors that make people give up or demotivate while learning to program:

Unknown unknowns — Not knowing what is out there is one of the ways people get stuck, what I would recommend is to stick to learning what you know you don’t know and the rest will come while you keep researching to ways to solve your problems;

Not knowing what is out there is one of the ways people get stuck, what I would recommend is to stick to learning what you know you don’t know and the rest will come while you keep researching to ways to solve your problems; Impossible to keep up — Everyday someone makes a new awesome library that everybody seems to be using, don’t worry about keeping up with the shiny new tool, focus on honing your basics and use the libraries when you feel it can automate something you do frequently;

— Everyday someone makes a new awesome library that everybody seems to be using, don’t worry about keeping up with the shiny new tool, focus on honing your basics and use the libraries when you feel it can automate something you do frequently; The problem is too big — Decomposing a problem is one of the first things you should do when starting something, go by order “final product > features > details in the feature”, start with the details and learning what you are missing to create them, over time you will have a feature done and after some more time you will have the “final product”;

Decomposing a problem is one of the first things you should do when starting something, go by order “final product > features > details in the feature”, start with the details and learning what you are missing to create them, over time you will have a feature done and after some more time you will have the “final product”; Perfect over shipping — I can’t stress enough how important it is to finish something and ship it if it is the case, it will give you a boost in motivation since you will have a feeling of accomplishment on the other hand, focusing on making it perfect will most of the time just make you feel that you aren’t advancing.

Knowledge acquisition

You can find out what is going on in the world of JS by visiting places like:

I recommend you read at least one of the following:

If you prefer video you can take a look at funfunfunction.

Practice makes perfect

Whatever you do, keep practicing, if you find yourself being lost just challenge yourself to something you think you can’t do, decompose the problem and advance little by little.

You can find some ideas for projects here.

You can also do some katas in:

Or you can try boot camps like freeCodeCamp.

When you find yourself in a position were you can try and help out someone that is stuck that is probably the best way you will have to “test” your acquired knowledge since people tend to ask the most unexpected questions which make us notice how far do we really know about something.

Conclusion

There is a lot to learn whatever path you choose in JS and that can be overwhelming, having problems along the way means you most probably are doing something right, or at least, something that you didn’t knew before.

Keep going, have patience, learning something takes time but I’m sure you will make it.