# JavaScript Basics

JavaScript is a programming language used (mostly) for Web Development. It's the programming language responsible for a large lot of the interactions you perform when you're clicking around (submitting forms, dragging and dropping etc) on a Webpage.

All modern browsers can interpret JavaScript and all you need to get started is a text editor (e.g TextEdit, Notepad), but you're advised to get a slightly fancier kind of text editor called an IDE (Integrated Development Environment) like SublimeText, Atom or VS Code.

In this chapter, you'll be getting an introduction to writing the latest version of JavaScript.

## Variables

A *variable* is where (dynamic) information is stored in a computer program. Say you're signing up for a social network and you're required to submit your email address, the web developer who made the social network needs a way to be able to reference whatever email address you submit in the code. This is done with a variable. The developer creates a variable called `email` to store whatever you submit as your email address.

A variable has two important aspects; it's **name** and it's **value**. In the scenario above, the name of the variable is `email` and that is what the developer needs to remember to reference the value stored in that variable. The value might be your email address or someone else's, depending on who just submitted the sign up form.

This is how to create a variable in JavaScript.

```
let email = "your@email.com";
```

We used the `let` statement to create a variable called `email` with a value of "your@email.com".

To change the value of that variable, all we need to write is:

```
email = "lol@email.com";
```

There are however different kinds of variable values. These are called **Primitive Data Types**. The reason for this separation of types is that, there are certain operations that you can perform on a particular kind of value but not on others. This will become clearer as we go on.

Here are some of the **Primitive Data Types** you should know about:

###  1. String

A `String` is a type used to represent textual data. The variables in the examples above are all `String`s. You can easily tell if a variable is a `String` if it's surrounded by single (') or double (") quotation marks. With `Strings` you can do text manipulation stuff like prepend it to another `String`, remove all it's vowels, etc

###  2. Number

This represents all kinds of numbers. You can create variables of the `Number` type like this.

```
let age = 25;
let width = 12.678;
```

With `Number` type variables, you can perform the kinds of mathematical operations you'd expect. Stuff like:

```
age * width;
age + width;
age - width;
```

You can even assign the value(s) of any of these operations into another `Number` type variable.

```
result = age + width;
```

However, you can't perform these operations on a `String` type variable.

### 3. Boolean

`Boolean` types can only be one of two values; `true` or `false`.

Finally, there's a special type of variable called a **constant**, and what makes it special is that it's value cannot change once it's set.

```
const age = 39;
```

Above, we created a constant `age` and set it's value to a `Number` 39. This means that throughout the lifetime of that program, `age` will always be 39 and it's value cannot be changed.


## Arrays

An *Array* is a special variable that allows you to store multiple values in it.

Say you have a list of names to store. You could store them in individual variables like this:

```
let name1 = "Timi";
let name2 = "Tolu";
let name3 = "Tade";
```

If you had to count the names, or loop through each one for whatever reason, it'd be really difficult to do that with one variable for each name.

An array will let you hold many values under a single variable name.

```
let names = ["Timi", "Tolu", "Tade"];
```

You can access the individual values in the array using the *index*. The *index* of a value in an array is it's position in that array. The quirk with indexes in JavaScript is that we start count from 0, instead of 1.

This means that the value `"Timi"` is at `names[0]` and `"Tolu'` is at `names[0]` and so on and so forth.

To get the number of *elements* in an array, you use the `length` property as follows

```
names.length;
```

You can also edit values in the array by using the *index* of the position you're trying to change.

```
names[1] = "John";
```

The above code will change the value at that position from `"Tolu"` to `"John"`.

You can also combine the `length` property with the ability to edit values at certain positions to add a new item to the end of the array, as follows:

```
names[names.length] = "Ire";
```

The array will now become:

```
["Timi", "John", "Tade", "Ire"]
```

One neat thing about arrays in JavaScript is that you can have elements of different data types.

```
let randomStuff = [ 1, "Hello", true, false, 1098, "Hey"];
```

The above is a perfectly valid JavaScript array.


## Conditionals

*Conditionals* help you control what happens if certain criteria or conditions are fulfilled.

### A little bit more about Booleans: Comparison Operators

There are certain JavaScript *operators* that allow you to compare two values or two variables. The outcome of those comparisons is always a `Boolean`; either `true` or `false`.

| Operator | Description  | Example         | Outcome |
|----------|--------------|-----------------|---------|
| >        | Greater than | 1 > 0           | true    |
| <        | Less than    | 300 < 200       | false   |
| ===      | Equal to     | "hey" === "hey" | true    |
| !=       | Not equal to | true != false   | true    |

The above are some of the operators you use in conditionals to determine equality or difference between variables or values.

### If

```
if (age > width){
	let result = "Age is greater than width";
}
```

In the above example:

- `(age > width)` is the condition we're testing for, this will be  `true` because `25` *is* greater than `12.678`.
- The `if` statement tells JavaScript to execute what it is within the curly braces if the condition to be checked is `true`.
- `let result = "Age is greater than width"` is the code within curly braces. This will be run only if `age` is greater than `width`, which it is. As such the value of `result` will now be `"Age is greater than width"`

### else

```
if (1 === 0){
	let result = "Everything I know is a lie.";
} else {
	let result = "All is well";
}
```

You can add to an `if` statement by using the `else` statement which does runs a block of code when the `if` condition is `false`.

Because `1` is NOT equal to `0`, the code in the `else` block will run and the value of `result` will now be `"All is well"`.

### else if

An `else if` statement is similar to the `else` statement. But it lets you specify another condition to be tested for. If that condition is `true`, JavaScript will run the code in that block.

```
if (false) {
	let result = "if block";
} else if (true) {
	let result = "else if block";
} else {
	let result = "else block";
}
```

Because the condition preceding the `else if` statement is `true`, the value `result` will be `"else if block"`.


## Loops

*Loops* provide a way to do something repeatedly (until a certain condition is fulfilled).

### For Loop

```
for (statement 1; statement 2; statement 3) {
    code block to be executed
}
```

The above shows the general format of a `for` loop.

- **Statement 1** is executed before the loop starts.
- **Statement 2** is a condition. For as long as this condition is `true`, it will continue to run the code block.
- **Statement 3** will run each time after the code block in the loop has been executed.


```
let randomArray = []

for (i = 0; i < 5; i++) {
    randomArray[randomArray.length] = i;
}
```

In the above example, a couple of things are going on:

- First of all, we create an empty array for reasons that will become apparent soon.
- Now to the loop, our **Statement 1** sets the value of variable `i` to `0`.
- Our **Statement 2** is the condition. For as long as `i` is less than `5`, JavaScript will keep running the code in between the curly braces.
- **Statement 3** just simply increased the value of `i` and this happens each time the code block in the loop has been executed.
- Finally, our code block; Each time this runs, we put the value of `i` at the time into `randomArray`.

As a result, the value of `randomArray` should be.

```
[0, 1, 2, 3, 4]
```


### While Loop

This is similar to the `for` loop, but a bit simpler to construct.

```
while (i < 10) {
    randomArray[randomArray.length] = i;
    i++;
}
```

The above simply instructs JavaScript to keep running the code between the curly braces as long as the variable `i` is less than `10`.