Are you learning JavaScript? - Here's the only guide you'll ever need
Tags: javascript, beginners, programming, webdev
Published: 2021-07-28 17:17:29

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](https://ubahthebuilder.tech/complete-web-development-roadmap-for-newbies) , 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](https://gum.co/js-50)

Here are some other JavaScript articles you might like:

-  [Understanding the JavaScript 'this' keyword with four binding rules](https://ubahthebuilder.tech/javascript-this-keyword-four-rules-to-know) 
-  [20 Free eBooks to learn JavaScript in-depth](https://ubahthebuilder.tech/20-free-ebooks-to-learn-javascript-in-depth)
-  [How to use ES6 Array iterator methods ](https://ubahthebuilder.tech/how-to-use-es6-array-methods-to-loop-over-an-array-collection)
-  [Introduction To Asynchronous JavaScript ](https://ubahthebuilder.tech/how-to-use-es6-array-methods-to-loop-over-an-array-collection)

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