JavaScript: Variables and Data types.
Tags: javascript, webdev, beginners, programming
Published: 2023-08-15 14:30:48

Before we deep-dive into the details, let's look at an overview of what we'll cover in this article. 
1. [A better understanding of binary](#A-better-understanding-of-binary)
2. [Linking JavaScript to HTML](#linking-javascript)
3. [What is a variable?](#what-is-a-varibale)
   - [Variable declaration](#declaration)
   - [Initializing a variable](#initialize)
   - [Var, let and const](#var-let-const)
4. [Data types](#data-types)
   - [Primitive types](#primitive)
   - [typeof Operator](#typeof)
   - [Reference types](#reference)


## <a id="A-better-understanding-of-binary">A better understanding of binary</a>
we've previously briefly explained binary and how some languages are compiled into binary before execution. You might be wondering how does a computer understand these series of 1s and 0s. 

A computer can understand binary (_a series of high or low electrical signals_) through transistors. 

A computer works with a very large number of bits and in order to keep track of them they are separated into pieces  of information and they are called values. Each value has a type but let's first understand how to link scripts and what variables are before moving on to types.

## <a id="linking-javascript">Linking JavaScript to HTML</a>
JavaScript either uses the tag `<script>/script>` which can be placed at the bottom of your HTML file or an external script that points to the separate file containing your JS script`<script src="path/script.js">`.

## <a id="what-is-a-variable">What is a variable?</a>
Simply put, a variable is a named container that refers to a value in the computer's memory. 
```javascript
 var name = "John";
```
Variables are essential, they give  you a way to refer to and modify data without having to hardcode values in your code.

### <a id="declaration">Variable declaration</a>
There are three different ways you can declare a variable and that is done by using `var`, `let` or `const` and each of which behaves differently.
- When a variable is declared, it simply receives a name without a value.
```javascript 
var name; 
```
Just like many programming languages, Javascript also has reserved keywords that cannot be used as variable names.
_A reserved keyword is special word that has a specific role and has a specific behavior._
Here's an example:
```javascript
var
let 
const
typeof
for
class
break
try
throw
default
case
//and many more...
```
### <a id="initialize">Initializing a variable.</a>
Initializing a variable simply means giving it a value.
You assign a value to your variable using the assignment operator `=`.
```javascript
var name = "John";
```
### <a id="var-let-const">Var, let and const.</a>
#### Var
- The `var` keyword allows you to re-declare the variable's meaning, overwriting it, as it was in earlier versions of ECMAScript. 
```javascript
var name = "John";
var age = "Jane" ;
```
The code snippet above, rather than throwing an error the re-declaration of the variable `name` will replace "John" with "Jane". Because of this behavior, finding bugs and fixing them becomes more difficult.
#### Let 
- The problem caused by the var keyword was resolved in ES6 by introducing the keyword `let`.
```javascript
let name = "John";
let age = "Jane" ;
```
The snippet above will now throw an error since using let, a variable can only be declared once.
#### Const
`const` are read-only and immutable. A variable declared with `const` has a constant value, so once they are assigned, they cannot be changed.
```javascript
const ICE_CREAM_FLAVOR = "vanilla";
ICE_CREAM_FLAVOR = "chocolate";
```
This snippet will throw an error since constants cannot be altered.

_It is advised to use let instead of var to avoid facing unexpected bugs._

The naming conventions for variable declarations when using the let and const keywords are uppercase for constants and CamelCase or lower case for let.

## <a id="data-types">Data types</a>
A data type is a categorization that indicates what kind of value a variable contains.
JavaScript has two categories of types, primitive types and reference types.

### <a id="primitive">Primitive types</a>
Primitive types represent these 5 types. 

|Primitive types| Description |
|------------------|:-----------:|
| undefined | the variable has not been assigned a value| 
| null | the variable has an empty value |
| boolean| returns either `true` or `false` |
| string | a series of characters |
| number| Integer or a decimal number |
| BigInt| BigInt is a special type of number that supports integers of any size without losing precision.|
|Symbol|Symbol offers a way to create a unique and immutable values that can be used as property keys in objects.|

While number, string and boolean behave in a similar way, undefined and null behave in a slightly different way. We'll get to that in a bit.

When a variable is initialized with a primitive value, the value is copied into that variable. 
When you set one variable to equal another, the value in the first variable is duplicated for second variable. Each variable that contains a primitive value uses its own storage space, so changes to one do not affect the other.

```javascript
let food1 = "Pizza";
let food2 = food1;

console.log(food1); //Pizza
console.log(food2); //Pizza

food1 = "Pasta";

console.log(food1); //Pasta
console.log(food2); //Pizza
```
### <a id="typeof">typeof Operator</a>
The `typeof` operator is used to determine the data type of a value that is stored inside a variable. `typeof` returns a string denoting the type of the data.
```javascript
console.log(typeof "John"); //string
console.log(typeof false); //boolean
console.log(typeof 1); //number
console.log(typeof undefined); //undefined
console.log(typeof null); //object

const symbol = Symbol("sym");
console.log(typeof symbol ); //symbol

const bigIntVal = 1541267803469812569871234576512347651890154n;
console.log(typeof bigIntValue); // Outputs: bigint
```
We'll be discussing how the `typeof` operator works in a future article.

_The `typeof null` behavior returning `object` is regarded as mistake or error by the maintainers of JavaScript. 
When checking for null, they unintentionally said it's an "object" rather than saying it's "nothing."_

### <a id="reference">Reference types</a>
The JavaScript concepts that are most similar to classes are reference types, which stand for objects.
Reference data types, as opposed to primitive data types, store references that point to the locations of the data in memory.

When an object is assigned to a variable, you are assigning one variable to another. Each variable receives a copy of the pointer, and both continue to refer to the same object in memory.

|Reference types| Description |
|------------------|:-----------:|
| Array | A list with indexed values| 
| Function | A function |
| Date| Date and time |
| Object | An Object |
| RegExp| A regular expression |

Do not worry if you are unfamiliar with these terms, everything will be explained in detail as we go with this series.

_The `typeof` operator is not limited to identifying the type of primitive values but can also be used to determine the type of reference values._

```javascript
let obj = {};
console.log(typeof obj); //object
```