Variables and Data types in JavaScript
Tags: webdev, javascript, beginners, codenewbie
Published: 2023-06-20 21:32:59

JavaScript is a dynamic programming language this is widely used in web development. One of the fundamental concepts of JavaScript is variables, which are used to store data in memory. In this article, we will explore the basics of variables and data types in JavaScript.

## Variables
A variable is a named container that stores data. It is defined using the **`var`**, `let`, or `const` keyword, followed by the variable name. There are two steps to follow when creating a variable in JavaScript

1. **Variable declarations**.

2.**Assigning a value to the variable**.
 Here is an example.

```
// A variable is a container for storing DataTransfer
// A variable behaves as if it was the value that it contains

//Two steps:
//1. Declaration (var,let,const)
//2 Assignment (= assignment operator)

var myVariable;//variable declaration
myVariable = 10;//Assigning value to the variable
console.log(myVariable);
```
Output:

```
10
```
In the above example, we have defined a variable called `myVariable` and assigned it the value of `10`, and also, we have used the `console.log(myVariable);` to display our output in the console. The `var` keyword declares the variable that has the function scope, while the `let` and `const` keywords declare variables that have block scope.

You can declare your variable and assign it a value in one line, and you will still have the same output.

```
var myVariable = 10;
console.log(myVariable);
```
Output:

```
10
```
To have the above output, make sure to create an index.html file and link the JavaScript to it like so.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variables and Data Types - JavaScript</title>
</head>
<body>
    

    <Script src="index.js"></Script>
</body>
</html>
```
You can open the `index.html` file on your browser, write click and select inspect then choose `console` to see your output. For more understanding if you are little bit confused you can read this article [Getting started with JavaScript for complete beginners](https://dev.to/bansikah/getting-started-with-javascript-for-complete-beginners-3del).
So, let's continue I will just go straight to explain what data types are and the various types, then we will now do an example that comprises of both variables and data types.

## Data Types
JavaScript supports several data types, including:

- *Numbers*: Used to store numeric values. Examples include `10`, `3.14`, and `-5`.

- *Strings*: Used to store text. Examples include `"hello"`, `"world"`, and "42".

- *Booleans*: Used to store true/false values. Examples include `true` and `false`.

- *Undefined*: Used to represent a variable that has not been assigned a value.

- *Null*: Used to represent a variable that has no value.

- *Objects*: Used to store collections of data. Examples include `{name: "John", age: 30}` and `["apple", "banana", "orange"].
`
- *Arrays*: Used to store lists of data. Examples include `["apple", "banana", "orange"]` and `[1, 2, 3]`.

### Type Coercion

JavaScript is a loosely typed language, which means that variables can change their data type. For example, we can assign a string value to a variable that previously held a number:

```

var myVariable = 10;
myVariable = "hello";

```
The example below is a combination of both variables and data types. This example will echo the name and age of a particular student or person.

```
let age; //step 1, declare variable
age = 20; //step 2, assigning a value 
console.log(age);
```
First, let's declare the variable age and assign a value of 20.
Output:

```
20
```
You can increase the value of your age like so.

```
let age = 20;
age = age + 1;
console.log(age); 
```
output:

```
21
```
Now let's add another variable called `firstName`

```
let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
console.log(firstName);
console.log(age); 
```
output:

```
Noel
21
```
Let's add another `Boolean` variable (true or false).

```
let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
let student = true;//of data type boolean(true or false)

console.log(firstName);
console.log(age); 
console.log(student);
```
Output:

```
Noel
21
true
```
Now if I am not a student it will display false, you can change the value of student to either true or false like so.

```
let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
let student = false;//of data type boolean(true or false)

console.log(firstName);
console.log(age); 
console.log(student);
```
output:

```
Noel
21
false
```
When coding you really need to be careful with the way you assign you variable, let's see the example below.

```

let firstName = "Noel";//of datatype String
let age = "20";//of data type String
age = age + 1;
let student = false;//of data type boolean(true or false)

console.log(firstName);
console.log(age); 
console.log(student);

```
if you put the value of `age` to "20", it now becomes a string and if you add a value to `age` like so `age = age + 1;` it concatenates the string and now gives you an our of **`201`**.
output.

```
Noel
201
false
```
So you should really take note of that when coding.
To spice output, we can add some text to it like so.

```

let firstName = "Noel";//of datatype String
let age = 20;//of data type number
age = age + 1;
let student = true;//of data type boolean(true or false)

console.log("Hello",firstName);
console.log("You are",age, "years old"); 
console.log("Enrolled",student);

```
output:

```
Hello Noel
You are 21 years old
Enrolled true
```
and we have a beautiful output. 
To display your output on your browser, you can use the DOM (Document object module), I will explain this in the future in details. So, let's see how we can do that. Within our index.html let's create 3 paragraphs tags(p tags) and give each a unique id.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variables and Data Types - JavaScript</title>
</head>
<body>
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>

    <Script src="index.js"></Script>
</body>
</html>
```
So now in our DOM, we have 3 p tags, to display the results in our browser let's see how we can do that using JavaScript.

```

let firstName = "Noel";//of datatype String
let age = 20; //of data type String
age = age + 1;
let student = true;//of data type boolean(true or false)

console.log("Hello",firstName);
console.log("You are",age, "years old"); 
console.log("Enrolled",student);


document.getElementById("p1").innerHTML = "Hello" + firstName;
document.getElementById("p2").innerHTML = "You are " + age + "years old";
document.getElementById("p3").innerHTML = "Enrolled" + student;
```
in the above example, we have used the `document.getElementById().innnerHTML` to output the firstName,age of student, and also whether the student has been enrolled or not.
output:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dgja3oj61jcydvxud9y.png)

Congratulations am glad you mad it to the end.

### Conclusion

In this article, we have explored the basics of variables and data types in JavaScript. Variables are used to store data in memory, while data types define the kind of data that can be stored. JavaScript is a loosely typed language, which means that variables can change their data type. Adios