Hello buddy 👋 , It actually took me a while to understand what to learn first in JavaScript and how to get started, and if you're in the same shoe right now, then this article is for you.

In this episode, I will be introducing you to JavaScript, what to expect and how to get started as a JavaScript developer.

Prerequisites

Before you continue with this introductory article, ensure you:

• Have a working knowledge of HTML and CSS
• Else check out the Skeleton of HTML, CSS and JavaScript

Because you will always see HTML, CSS, and JavaScript.

---

What is JavaScript

JavaScript is basically a programming language for the web, you can see JavaScript as the official language for web development and the only programming language that allows you to build frontend applications (web interface), backend applications (server+database) down to mobile applications, and machine learning.

This definition only means one thing, and it's that JavaScript knowledge can be applied in multiple fields, and their application also follows the same patterns.

---

Why Learn JavaScript?

Imagine a website showing the same profile information for every logged-in user, or a button not responding to the action it's labeled, these are properties of static web pages, and a static webpage does not interact with the user because they lack little or no JavaScript (programming).

With JavaScript we can add actions to our web pages, we can define what should happen when a button is clicked or a specific action is being taken or triggered on a web application.

What is a Static Webpage?

A static webpage inherently displays hardcoded contents from the HTML file that won't change based on any user actions.

The contents of the dashboard above can only be updated from the HTML document and not based on the currently logged-in user.

What is a Dynamic Webpage?

A dynamic webpage interacts with the user through triggered actions and a set of conditional rules, the contents of a dynamic web page change based on events and conditions.

The username and profile image are dynamic, which means the dashboard contents change each time a new user logs in.

---

Getting started with JavaScript

There are a few concepts you should be aware of in order to start creating interactive applications with JavaScript, these concepts are important whether you're interested in using JavaScript for frontend or backend development, mobile applications, or any other area that JavaScript can be applied.

---

Below are a few concepts you should learn first when learning JavaScript.

---

1. Learn JavaScript Data Types

Data types are basically the data that can be legally used in JavaScript or any specific programming language.

Just as we have A, B, C to Z as alphabets, and digit 0 to 9 as numerics, similarly JavaScript has a name for each of its acceptable data, which includes a string, number, array, object, undefined, null, and boolean, they are referred to as data types.

The difference between the data types in JavaScript is their syntax, structure, and the operations you can perform with them.

It is important to understand how each of these data types works in JavaScript so that you won't end up performing an addition operation on A, B, C alphabets instead of 0 to 9 numbers.

• Learn more about JavaScript data types on w3schools

• Check out JavaScript Syntax Profile

---

2. Learn JavaScript Variables

Variables are like containers that can hold items for later use, we use variables to store any data type in JavaScript so that we can make reference to them later in our code.

A variable can only hold one data type at a time.

• Learn more from Generations of JavaScript Variables article

---

2.1. Variable Declaration

Variable declaration in JavaScript is all about booking a space (allocating memory) for a data type or value that you're not ready to store yet, it's basically an act of keeping a container to keep a cube of sugar that you're yet to purchase.

There are three major techniques in which variables are created in JavaScript that you need to know, these techniques determine what operation or rules you want to allow for a particular variable you're declaring.

Variable keyword declaration technique includes:

1. The var keyword
2. The const keyword, and
3. The let keyword

---

2.2. Variable Initilization

Since variable declaration is the act of keeping space for later use, then variable initialization is the process of assigning or putting the value you're keeping the space for into the declared variable, which then means our container is not empty anymore.

Check out the Generations of JavaScript Variables for full explanations.

---

3. Learn JavaScript Scope

The term Scope in JavaScript refers to the current context of code, and it determines how variables can be referenced or accessed in the code.

There are 3 main types of JavaScript scopes, which includes:

1. Global scope
2. Local scope/function scope, and
3. Block scope

These 3 scopes provide ways to either secure a variable from being accessed outside or within a particular scope.

• You can learn more about JavaScript scope from Mr. @Tapas Adhikary JavaScript Scope Fundamentals with Tom and Jerry

---

4. Learn JavaScript Functions

JavaScript functions are like procedures, they contain a set of instructions to be executed or invoked (called) when an event is been triggered.

Functions are capable of accepting inputs and generating output based on the logic in the function.

There are two types of JavaScript functions:

1. Regular function (ES5)

This is the default method of writing functions in JavaScript.

2. Arrow function (ES6)

JavaScript arrow functions came with the release of ECMAScript 2015, also known as ES6, arrow function has a concise syntax and it has some unique features that make it the favorite of several Javascript developers.

Do not bother much about arrow functions if you're still very new to it, you will figure the difference as you code more.

• Learn more about the difference between regular functions and arrow functions

---

5. Learn JavaScript Hoisting

Hoisting is the next concept to learn when you're done with learning variables scope in JavaScript.

Hoisting is a JavaScript mechanism where variable declarations are moved to the top of their scope before code execution.

This concept will expose you to how JavaScript handles variables in each scope before execution, JavaScript basically moves all the declared variables to the top of every scope whether global or local scope.

You need to know-how var, const, and let works to understand this concept better.

• Here is a detailed article to help you understand Variable Hoisting in Javascript by @Vivek Sharma

---

6. Learn JavaScript Closures

The JavaScript closure is basically a function inside of another function and this gives the inner function the ability to have access to the variable in the outer function.

• Learn about JavaScript closures here

7. Learn JavaScript Callback functions

A callback is any function that is being passed to another function as an argument (input) and is executed later.

• Learn callback here

8. Learn JavaScript Array and Array Methods.

Array is one of JavaScript's data types that you cannot do without when you're convenient with variables and have a grasp of how functions works then you can proceed to learn JavaScript Arrand its methods.

An array is also a container that can hold items, but unlike a variable that only holds a single data type at a time, the array data type on the other side can store as many collections of different data types at a time.

---

9. Learn JavaScript Fetch.

Chances are you will not be working with static data forever, learning JavaScript fetch will enable you to interact with backend APIs and perform some HTTPS calls.

• Learn JavaScript fetch

---

10. Learn JavaScript Promises and Async/Await.

While working with Fetch or backend generally, you need a way to resolve failure or success calls from the backend, which might take a while to arrive.

The JavaScript promises is a technique of handling asynchronous operations in JavaScript.

• Check out JavaScript Promises - Explain Like I'm Five by @Tapas Adhikary

• JavaScript async and await - in plain English, please by @Tapas Adhikary

---

11. Learn DOM manipulation

The Document Object Model is used to access HTML elements in JavaScript, this concept allows us to interact with the HTML elements directly from the JavaScript code.

DOM can be used to modify the text, color, background color, and other HTML element properties using JavaScript.

You can learn more about DOM manipulation from here

12. Build Projects

The best way to know you've really understood a concept is by implementing those concepts in a project. Ensure to apply all these concepts in a side project as your learning continues.

JavaScript projects you can work on.

1. Todo list.
2. Count down.
3. Tic Tac Toe.
4. Pong game.
5. Vanilla JavaScript stopwatch.
6. JavaScript clock.
7. JavaScript calculator.
8. A Quiz Application
9. A Game Application
10. Music App.
11. File Converter.
12. Interactive Map.

These projects will help you to make use of the JavaScript concepts that you've learned, you can proceed to build more advanced projects with JavaScript when you're convenient understanding how these applications work.

---

Conclusion

This article covers the important basics of JavaScript that are essential for you to know before proceeding to any of the JavaScript frameworks, I hope this article has helped you to know some concepts to focus on more in JavaScript.

See you in the next one.

---

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

• Twitter @unclebigbay143
• LinkedIn @unclebigbay

---

See you in the next article. Bye Bye 🙋‍♂️