JavaScript: Variables and Data types.

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
2. Linking JavaScript to HTML
3. What is a variable?
   • Variable declaration
   • Initializing a variable
   • Var, let and const
4. Data types
   • Primitive types
   • typeof Operator
   • Reference types

A better understanding of binary

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.

Linking JavaScript to HTML

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">.

What is a variable?

Simply put, a variable is a named container that refers to a value in the computer's memory.

 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.

Variable declaration

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.

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:

var
let 
const
typeof
for
class
break
try
throw
default
case
//and many more...

Initializing a variable.

Initializing a variable simply means giving it a value.
You assign a value to your variable using the assignment operator =.

var name = "John";

Var, let and const.

Var

• The var keyword allows you to re-declare the variable's meaning, overwriting it, as it was in earlier versions of ECMAScript.

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.

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.

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.

Data types

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.

Primitive types

Primitive types represent these 5 types.

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.

let food1 = "Pizza";
let food2 = food1;

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

food1 = "Pasta";

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

typeof Operator

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.

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."

Reference types

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.

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.

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