Part 2 | A Piece of JavaScript Cake Series
A Beginner’s Guide | Javascript Data Types and Variables
Introduction
In the last part, we have looked over the differences between dynamic, and statically typed languages and why is the
Javascript is a powerful language. I am not saying it’s the best or it’s the only one you must ever use for
every possible scenario. You should never think like that for any library, framework, or programming
language because needs can be different over projects. But for web development, JS is an
industry-standard.
In this part, we are going to deep dive into Javascript Data Types and Variables.
Javascript Variables
Why do we need a programming language? Of course for giving instructions to a computer to achieve a goal. We can give those instructions with a specific grammatical structure which is Syntax. With the help of this language structure, we can give the computer some data like names, ages, occupations, numbers, colors, etc. whatever data we need in our resulting app.
First of all, we need to understand what a variable is in Javascript.
We can think of variables as empty boxes which can hold different types of goods like food, toys, clothing, important papers, etc. In Javascript and in other programming languages we are holding ur valuable data inside those variables which we can easily declare.
Once upon a time, before ES6, we declared our variables with only the “var” keyword.
As it’s no longer widely used in JS, we will look for the modern principles in that part. We will discuss “var” keyword when we are at the Scope and Hoisting part of our series.
In modern Javascript, we can declare variables by “let” and “const” keywords.
let
let keyword is not a replacement for the “var” keyword but an enhanced version with different features for declaring variables. As I said, I am not going to explain Scope and Hoisting for now because I am trying to make it simple; but until then keep those in mind:
let keyword has block scope which is only accessed from inside the block { } it's defined not outside.
It can not be redeclared.
It can be reassigned but only in our block scope.
It must be declared before its use.
It’s the best practice to use it in loops.
Declaration:
let myAge = 25;
// From now on myAge variable holds the 25 value as number data type.Redeclaration gives an error:
const
const is the same as “let” keyword and is used as holding various data inside but there is an important difference between the let and const. let keyword is “mutable” that you can reassign a value. But on the other hand, the const keyword is “immutable” and you cannot reassign a value. There is one exception for this, if we declare an object with const then we are allowed to change the value of its property.
But if you try to reassign a value like this, it gives us a type error:
car = { color: “green” }; // TypeErrorIn conclusion, variables do not associate with types in Javascript.
We must use “const” when we are able to because it’s the better use case for bug-free coding.
Javascript Data Types
Data types are basically what kinds of data can be stored or manipulated by the computer program.
In Javascript; there are 2 categories of data types which are primitive data types and non-primitive data types.
Primitive Data Types
Primitive data types are the most basic data types and can be used to build more complex data types in Javascript.
String
The string data type is textual data and holds basic text. You must surround text with single quotes, double quotes, or backticks to give identity to its string.
As you can see, we used backticks, some dollar signs($), and variable names inside parenthesis which we declared before in our third example. Wait!! What’s happening inside?
Template Literals
Template literals are a simple way to interpolate variables into strings. On the other hand, we can also use it for multi-line strings.
When we used backticks and write a string inside, from now on we are allowed to write some placeholders with $(variable_name) syntax.
Of course, variables had to be declared before being used as template literals. Then $(variable_name) will be interpolated with actual variable_name value.
We can also add our string variables to each other like:
We can use it like above but, template literal is a good practice way.
Before we declare the next data type, one last reminder. If you try to add strings to numbers, the number value will be converted to a string and gives us a result of the added value of two strings.
let favouriteColor = “red” + 9; // “red9”Number
The number data type can be an integer, a decimal(floating) number, a NaN value, or a positive, negative Infinity number. We can add, subtract, divide, and multiply numbers as always.
As a reminder; strings can not be divided by numbers, it gives NaN value as result.
let myColor = “green”;let result = myColor / 5; // returns NaN
We can hold number values like the below:
const myAge = 34; // Integer Value
const PI = 3.14; // Decimal NumberBoolean
Boolean data types are logical values and the value can be “true” or “false”. It’s like an open or closed door, or a light switch that can be “on” or “off”.
let sunnyDay = false;let rainyDay = true;
Null
The null data type is an empty or unknown value assigned to a variable. It’s not the same as undefined. Think of it like an empty container.
let count = null;
// we have an empty count variable ready to be filled.Undefined
The undefined data type is the value that is not assigned. Null is an empty container but in undefined, there is still no container. It can be assigned to a variable, but we will get an undefined value in return. If you need an empty value, then go for the null.
let name = undefined;
//That is not the best practice instead use null as an empty value.Bigint
Number types are the numbers less than (253–1) and more than -(253–1).
However, if we need to use a larger number, we can use the BigInt data type.
To create a BigInt, we need to append a “n” to the end of the integer.
const bigInteger = 7007131215124440596n;You can not add bigint to the number values.
Symbol
A symbol value is a unique and immutable value that can hold a primitive value which is called description. We can access Symbol value by dot notation and description.
const name = Symbol(‘John’);console.log(name.description)
We can use Symbol as an object key:
Non-Primitive Data Type
Object
In Javascript, objects are complex data entities that are stored, not just a single value but a collection of data.
After the declaration of the car object, we must present a key and then assign a value to it. This value can be any data type accepted by Javascript and a function which is called a method inside an Object. (In the above case it’s the description method)
We will look into the objects more detailed way when we get into the Objects part of our series.
typeof Operator
If you need to know what is the type of a variable, you can use “typeof” operator as below.
let herName = “Lisa”;typeof(herName) // returns “string”
null value returns as an object which is an issue since the JS early times.
The Conclusion of Part 2
In the conclusion of the data types and variables section, we mentioned all the data types which is used in modern Javascript and how to declare a variable and assign a value.
In the next part, we are going deeper inside String Methods and gaining a solid understanding of the Strings topic.
See you on the next one.
