DEV Community: Antonio

A Quick Overview Of JavaScript Data Types

Antonio — Tue, 27 Oct 2020 14:26:40 +0000

In JavaScript, you can assign any type of value to any variable. It is not a problem if a variable had a value type of string and now you want to store a number in it.
There are 8 types of values, separated into two groups: primitives and references.
The object type is a reference, and the rest are primitives.

The typeof Operator

  console.log(typeof "hello"); // string
  console.log(typeof 5); // number
  console.log(typeof null); // object
  console.log(typeof undefined); // undefined
  console.log(typeof true); // boolean
  console.log(typeof Symbol("hey")); // symbol
  console.log(typeof {}); // object
  console.log(typeof 1n); // bigint

You can use the typeof operator to see the type of each value.

String

const firstName = "Joe";
const lastName = 'Doe';
let age = `is 45 years old.`;

age = `${firstName} ${lastName} is 45 years old.`;
console.log(age); // Joe Doe is 45 years old.

A string is a text enclosed in double-quotes, single quotes, or backticks.
The strings enclosed in backticks are called template literals. They have extra functionality because we can put an expression between ${}.

Number

const age = 45;
console.log(age + 5); // 50

The number type is for both integers and floats. But there are 3 special numbers here:
infinity, -infinity, and, NaN.

console.log(Math.pow(2, 1024)); // Infinity
console.log(-Math.pow(2, 1024)); // -Infinity
console.log("hello" / 5; // NaN

Infinity is bigger than any other number, and -Infinity is smaller than any other number.

NaN stands for Not a Number but if we check its type with the typeof operator we get a number. It’s the result of a wrong calculation for example if we try to divide a string with a number we will get NaN.

BigInt

const bigNum = 1n;
const  bigNum2 = BigInt("9007199254740991");

The bigint type represents numbers bigger than 2⁵³ - 1. You can create a bigint by appending n to the end of a number, or by using the BigInt object.

Null

let number = null;

The null type stands for no value. One thing that is worth to note is that if we check its type with the typeof operator it will return object. This is a bug in JavaScript, and now it is too late to be fixed.

Undefined

let variable;
console.log(variable); // undefined

When a variable has not been declared with a value it has a type of undefined.

Boolean

const bool = true;
const bool2 = false;
console.log(8 < 4); // false
console.log(4 > 2); // true

Booleans can be true or false. They are used in conditionals with operators like ==, ===, >, <, and, more.

Symbol

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

The symbol type is used as a unique identifier. It has its own properties and each symbol value is unique. We create a symbol using the Symbol object.

Object

const object = {
  name: "Joe Doe",
  age: 45,
}

The object type is different than any other type because it has its own properties and methods. It is also mutable, while the others are not.

JavaScript Variables: Everything you need to know

Antonio — Sun, 11 Oct 2020 22:12:03 +0000

If you use the same value more than once you should store it into a variable.
Variables are boxes that store values like numbers, words, arrays, objects, and more.
In Javascript, we can declare a variable using three keywords: var, let, and const. Each keyword gives the variable a different functionality.

var number;
let name;

These are called variable declarations. Two variables called number and name exist in our code but no value is assigned to them. Let’s change that.

number = 43;
name = "Kevin Doe";
const currentYear = "2020";

When you assign a value to a variable for the first time, it is called initialization.
The number variable stores the number 43. The name variable stores the string “Kevin Doe”. And we declare a new variable currentYear initialized with the value “2020”.

var VS let

As I said each of these three keywords can make a variable to work differently. Let’s first discuss the differences between var and let variables.

console.log(city); // undefined
var city = “Lisbon”;
console.log(city); // Lisbon
console.log(lastYear); // error 
let  lastYear = 2019;
console.log(lastYear); // 2019

This is the concept of hoisting. When JavaScript executes our code, it moves all variables to the top of the file. Var variables are initialized with undefined while let and const variables remain uninitialized.

The variable city is hoisted and initialized with undefined. And when we try to print its value for the first time we get undefined. As the code continues to execute to the bottom city is assigned with “Lisbon”. And when it is printed for the second time we get “Lisbon”.

The variable lastYear is hoisted but uninitialized because it is a let variable. So, when we try to print it we get an error because lastYear has no value. And the code stops to run because of it. But if that line of code was not there lastYear would be assigned to 2019 and printed.

The second major difference is scope. But let’s first invite const to the party too, just to be more clear.

var a = “a”;
let b = “b”;
const c = “c”;

function hey() {
  var a = 1;
  let b = 2;
  const c = 3;
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

hey();

console.log(a); // a
console.log(b); // b
console.log(c); // c

First, we declare and initialize three variables a, b, c in the global scope. Think of the global scope as the file where we are writing our code.

We create a function called hey and we declare three variables. The names are the same as the previous ones but with different values. When we run the function hey we print the variables a, b, and c. We get 1, 2, and 3.

But why we don’t get “a”, “b”, and “c”?

Because the variables declared in the function hey are completely different. Those variables in the hey function are declared in the function scope. Every function has its scope. The variables declared in a function are only available inside that same function.

When we try to print the variables a, b, and c after running the hey function, in the global scope we get “a”, “b” and “c”.

var a = “a”;
let b = “b”;
const c = “c”;

if(true) {
  var a = 1;
  let b = 2;
  const c = 3;

  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

console.log(a); // 1
console.log(b); // b
console.log(c); // c

We have three variables a, b, and c with values “a”, “b”, and “c” in the global scope. We run an if statement which condition is always true. There we declare variables with the same names a, b, and c with values of 1,2, and 3. And when we print them, we get 1, 2, and 3.

After that, we print them in the global scope. And we get 1, “b”, and “c”.

But why 1?

Because var variables have only function scope while let and const have block scope.
Everything that is enclosed between a pair of curly braces is a block scope. So, for var variables, everything is a global scope except functions.

const

We saw that const is block-scoped. But the thing why const is special is because its value can’t be reassigned. Also, we can not declare a const variable without initialization.

var  a = 2;
a = 4;

let x = 5;
x = 1;

const  z; // error

const y = 10;
y = 33; // error

What keyword should I use?

I always try to use const, and use let when I am sure that the value will need to be reassigned, like in loops for example. Const keeps my code secure and less prone to errors because values cannot be reassigned. I avoid using var because of its weird, error-prone scope.