JavaScript Ultimate Guide 01: The fundamentals.
Tags: javascript, webdev, beginners, programming
Published: 2022-04-22 04:58:54

JavaScript is called the language of the web. If you want to become a web developer you have to learn JavaScript. But, learning JavaScript is not that easy. 

So, to make the process of learning JavaScript a little easier I am writing this JavaScript Ultimate guide series. In this series, we’ll discuss javaScript from the fundamentals to the advanced, including ES6, OOP, Asynchronous JavaScript, and many more. 

This is Part 1. In this part, I’ll discuss the fundamentals of JavaScript. I’ll cover concepts like variables, functions, loops, and conditionals. 


### Table Of Content

[01. Variables](#01-variables)

[02. Data Types](#02-data-types)

[03. Operators](#03-operators)

[04. Conditionals](#04-conditionals)

[05. Functions](#05-functions)

[06. Loops](#06-loops)

[07. Arrays and Objects](#07-arrays-and-objects)


<br>

### 01. Variables

Variables are a way to store data for later use. In JavaScript, you can declare a variable in three ways. 

Using `var`, `let`, and `const`. 

Var, let and const have their different use cases. Here’s a quick overview: 

**Var**: var is the old way of declaring a variable. It is compatible with all the older browsers. 

**Let and const**: these were introduced in 2015. If you want to change the value of the variable use Let. And if you don’t want to change the value use Const. 

Learn more:

[https://javascript.info/variables](https://javascript.info/variables)

[https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/)

<br>

### 02. Data Types.

Every data in javaScript has a type. For example, a number is a number type and a text is a string type. 

There are 8 data types in JavaScript: 

1. **String:** Represent text-based data. 
2. **Number:** Represent Numbers. An integer or a floating-point number. 
3. **BigInt:** Represents arbitrary length of integer. 
4. **Boolean:** True or False value
5. **Undefined:** Value of a data whose value is not assigned yet. 
6. **Null:** Represents unknown values. 
7. **Symbol:** Represents unique and immutable values.  
8. **Object:** Key-value pairs of data

Learn more:

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)

[https://www.programiz.com/javascript/data-types](https://www.programiz.com/javascript/data-types)

<br>

### 03. Operators.

Operators perform operations on two or more data values and produce a result. 

There are a lot of operators in javaScript. Here’s a quick overview. 

1. Assignment Operators: =, +=, -=. 
2. Arithmetic Operators: +, -, *, / and %(modulo operator). 
3. Comparison Operators: ==, !=, ===, !==. >, <. 
4. Logical Operators: &&, || and ! 

 

Learn more: 

[https://www.programiz.com/javascript/operators](https://www.programiz.com/javascript/operators)

[https://javascript.info/operators](https://javascript.info/operators)

<br>

### 04. Conditionals. 

In JavaScript, you can write conditional with If-else, if-else if-else. 

You use the comparison operators to make the decision. 

example: 

```javaScript
const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}
```

Learn more:

[https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals)

[https://www.freecodecamp.org/news/javascript-if-else-and-if-then-js-conditional-statements/](https://www.freecodecamp.org/news/javascript-if-else-and-if-then-js-conditional-statements/)


<br>


### 05. Functions.

Functions are reusable blocks of code. Once you declared a function you can call it anywhere you want. 

You can declare a function in JavaScript with the function keyword. Like this: 

```javaScript
function showMessage() {
  return "Hello World!";
}
```

You can call a function by just calling the function name with a set of parenthesis. 

```javaScript
ShowMessage();
```

Learn more: 

[https://javascript.info/function-basics](https://javascript.info/function-basics)

[https://www.programiz.com/javascript/function](https://www.programiz.com/javascript/function)

<br>

### 6. Loops

Loops are a way to repeat an action in programming. In JavaScript, you can write loops in 5 ways. 

Here’s a quick overview. 

1. **for** — loops through a block of code until the counter reaches a specified number.
2. **do…while** — loops through a block of code once; then the condition is evaluated. If the condition is true, the statement is repeated as long as the specified condition is true.
3. **for…in** — loops through the properties of an object.
4. **for…of** — loops over iterable objects such as arrays, strings, etc.
5. **while**: loops through a block of code as long as a specified condition evaluates to true. 

Learn more:

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)

[https://www.programiz.com/javascript/for-loop](https://www.programiz.com/javascript/for-loop)

[https://javascript.info/while-for](https://javascript.info/while-for)

<br>

### 07. Arrays and Objects

Arrays: An array is a special type of variable, used to store more than one value. 

example:

```javaScript
const array = [1, 2, 3, 4, 5, 6, 7, 8]
```

Objects:  An object is a data structure that is used to store key-value pairs. 

example:

```javaScript
const user = { name: "John", age: 30 };
```

Learn more:

[https://javascript.info/array](https://javascript.info/array)

[https://www.programiz.com/javascript/array](https://www.programiz.com/javascript/array)

[https://javascript.info/object](https://javascript.info/object)

[https://www.programiz.com/javascript/object](https://www.programiz.com/javascript/object)

<br>

### Conclusion

In this article, I discussed the fundamental concepts of javascript. We talked about, variables, functions, loops, and objects. 

In the next part, we will talk about DOM. 

To stay in touch follow me on Twitter at [@coderamrin](https://twitter.com/CoderAmrin)

Happy coding.