Are you learning JavaScript? - Here's the only guide you'll ever need

Getting started with JavaScript can be both fun and overwhelming at the same time. Fun because it is not just one of the most popular programming languages in existence but also because the basics are quite easy to get started with as a beginner.

It can also be overwhelming because there is just a lot to learn. In one of my past articles , I outlined the steps anyone can take to get started with web development.

In this post, I am going to highlight the various concepts and topics you will need to learn to become good at writing JavaScript programs.

Enjoy.

VARIABLES

All programming languages work with data. Variables are containers for these data. A variable can hold a string data, a number or any of the various other data types. These keywords used to define these variables in JavaScript are let, const and var.

Learn:

• let
• const
• var

ASYNCHRONICITY

Normally, computer code runs immediately, one after the other. However, Asychronicity is a code execution situation in which a piece of code or function is paused midway for something else to occur first. At that point, the next instruction starts to run instead. This technique is implemented in JavaScript by using any of the following constructs in your code:

Learn:

• Callbacks
• Async functions
• await directive
• Promises
• Generators

SCOPES

Scopes simply entails the rules and laws with determines the accessibility of variables to a function, or part of a code.

Learn:

• Global scope
• Function scope
• Lexical scope

DOCUMENT OBJECT MODEL

Document Object Model is the browsers representation of a web page. DOM is an interface provided by the browser which allows you access and manipulate your HTML elements from your JavaScript.

Learn:

• document object
• DOM tree
• document (DOM) properties
• document (DOM) methods
• DOM traversal
• Virtual DOM (VDOM)

OOP

Object Oriented Programming (OOP) is a software programming architecture modeled after real life objects with properties and methods (behaviors or actions). Objects are constructed out of a class design.

Learn:

• Classes
• Objects
• Inheritance
• Polymorphism
• Prototypes

ARRAYS

Arrays are simple data collections. Items stored in an array are indexed. Hence, an array can remember what position an item is positioned at when iterating through it with a loop.

Learn:

• Array methods
• Array properties
• Array Destructuring
• Array index looping
• Array Iterators (static methods)

DATA OPERATORS

Data operators allow you operation on data. You can do operations like addition, substaction, string concatenation, type checking and so on.

Learn:

• Addition and Substraction
• Multiplication
• Assignment
• Strict equals and Loose equals
• Concatenation
• Increment and Decrement
• typeof(), type checking
• Less than,
• Greater than
• logical operators ( && and || )

OBJECTS

Objects are data collections which stores data or properties in key/value pairs. Objects in JavaScript can be created either via the new constructor call or with object literal method.

Learn:

• Properties
• Methods
• getters and setters
• static properties and methods
• Object looping
• Object destructuring
• JSON

ERRORS

Errors are statements which stops or inhibits the program from running properly. There are three main types of errors that can occur while compiling a JavaScript program, they include syntax errors, runtime errors, and logical errors.

Learn:

• try
• catch
• throw
• finally
• console object
• console properties and methods
• RangeError.
• ReferenceError
• SyntaxError
• TypeError
• URIError
• EvalError
• InternalError

EVENTS

Events occurs when a user does something o There are many kinds of events capable of occurring in the browser. Some of them are click, mouseover, scroll, right-click and more.

Learn:

• User (DOM) events
• Event listener methods
• Event capturing and bubbling
• event object and properties

CONDITIONALS

When writing your JavaScript program, you will definitely need to create conditional statements. These are just if and elses. For a simple if…else statement, when a condition is true, the code in the if block runs. Otherwise, the code in the else block runs.

Learn:

• if
• if…else
• if…else if…else
• ternary operators

MODULES

A module is a function or group of similar functions. They are grouped together within a file and contain the code to execute a specific task when called into a larger application.

Learn

• import
• export
• default keyword
• file organization

LOOPS

Loops are programming constructs which allow you loop or iterate through an iterable data collection such as an array. You can then specify a consistent action which would be performed on each iteration until maybe a condition is met.

Learn:

• while
• do while
• for index
• for..in
• for…of
• switch

MAP and SET Collections

Map and Set are new data collections part of the ES6 Spec. Map is similar to JavaScript objects in that it accepts key/value properties. However, Map allows for keys of different data types and not just strings. Set only accepts one instance of a value, and ignores duplicates.

Learn:

• add()
• delete()
• clear()
• get()

STRINGS

Strings are inbuilt data types in JavaScript whose values starts with the comma notation ‘’ or double commas “ “.

Learn:

• String properties
• String methods
• Template literals

FUNCTIONS

A Function in JavaScript is an object containing blocks of code and which can be called at any part of a program to perform a particular task.

For example, a SayHi() functions is expected to display ‘Hi” when invoked. A getUsername() function is expected to retrieve a username from the DOM or a database. The in-built setTimeout() function actually sets a timeout before doing something else.

Learn:

• Normal functions
• Async functions
• Arrow functions
• Callback functions
• Generator functions

At a basic level, understanding these JavaScript concepts will help significantly improve your coding skills.

Recently, I created an eBook in why I explained most of these JavaScript concepts with short notes and visual illustrations. Check it out here

Here are some other JavaScript articles you might like:

• Understanding the JavaScript 'this' keyword with four binding rules
• 20 Free eBooks to learn JavaScript in-depth
• How to use ES6 Array iterator methods
• Introduction To Asynchronous JavaScript

Thank you for reading. Follow this blog to stay updated with my latest posts.