JavaScript Fundamentals / JavaScript Basics

Data Types

🗂️ Different Data Types in JavaScript

JavaScript has two different types of values:

  • Primitive values

  • Reference values

Primitive values are atomic pieces of data while Reference values are objects that might consist of multiple values.

JavaScript has the Primitive data types:

  1. undefined

  2. null

  3. boolean

  4. number

  5. string

  6. symbol

  7. bigint

JavaScript has Reference data types:

  1. Object

  2. Array

  3. Function

  4. Date

  5. Map

  6. Set

and etc.

✅ Primitive Data Type

🎗️ The undefined type

The undefined type is a primitive type that has only one value undefined. By default, when a variable is declared but not initialized, it defaults to undefined.

Consider the following example:

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

In this example, the counter is a variable. Since counter hasn’t been initialized, it is assigned the value undefined .

⚡️ The null type

The null type is the second primitive data type that also has only one value null. For example:

let obj = null;
console.log(obj); // object

JavaScript defines that null is equal to undefined as follows:

console.log(null == undefined); // true

♦️ The number type

JavaScript uses the number type to represent both integer and floating-point numbers.

  • The following statement declares a variable and initializes its value with an integer:

let num = 100;

  • To represent a floating-point number, you include a decimal point followed by at least one number. For example:

let price = 12.5;
let discount = 0.05;

❇️ NaN

NaN stands for Not a Number. It is a special numeric value that indicates an invalid number.

For example, the division of a string by a number returns NaN:

console.log('a'/2);  // NaN

The NaN has two special characteristics:

  • Any operation with NaN returns NaN.

  • The NaN does not equal any value, including itself.

console.log(NaN/2);           // NaN
console.log(NaN == NaN);     // false

💠 The string type

In JavaScript, a string is a sequence of zero or more characters. A string literal begins and ends with either a single quote(') or a double quote (").

  • A string that begins with a double quote must end with a double quote.

let message  = "Bye";

  • A string that begins with a single quote must also end with a single quote.

let greeting = 'Good Morning';

  • If you want to use single quotes or double quotes in a literal string, you need to use the backslash to escape them.

let message = 'I\\'m also a valid string';

// use \\ to escape the single quote (')

  • JavaScript strings are immutable, meaning that they cannot be modified once created. However, you can create a new string from an existing one. For example:

let str = 'JavaScript';
str = str + ' String';

🔰The boolean type

The boolean type has two literal values: true and false in lowercase. The following example declares two variables that hold the boolean values.

let inProgress = true;
let completed = false;

  • JavaScript allows values of other types to be converted into boolean values of true or false.

  • To convert values of other types into boolean values, you use the Boolean() function.

The following table displays the conversion rules:

Type

true

false

Example

string

non-empty string

empty string

console.log(Boolean('Hi')); //true

number

non-zero number and Infinity

0, NaN

console.log(Boolean(20)); //true

object

non-null object

null

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

🏷️ The symbol type

JavaScript introduced a new primitive type in ES6: the symbol. Unlike other primitive types, the symbol type does not have a literal form.

To create a symbol, you call the Symbol function as follows:

let s1 = Symbol();

The Symbol function creates a new unique value every time you call it.

console.log(Symbol() == Symbol());   // false

🪄 The bigint type

The bigint type represents the whole numbers that are larger than 253 – 1. To form a bigint literal number, you append the letter n at the end of the number:

let pageView = 9007199254740991n;
console.log(typeof(pageView));   // 'bigint'

✅ Reference Data Type

♦️ The Object type

In JavaScript, an object is a collection of key-value pairs where keys are strings (or Symbols) and values can be any type.

  • Creating an object using object literal syntax:

let person = {
  name: "Alice",
  age: 25,
};

  • Accessing properties:

console.log(person.name);     // "Alice"
console.log(person["age"]);   // 25

  • Dynamic Properties

You can add or remove properties anytime:

person.city = "New York";
delete person.age;

♦️ The Array type

An array is a special type of object used to store ordered collections.

  • Creating an array:

let colors = ["red", "green", "blue"];

  • Accessing elements by index:

console.log(colors[0]);  // "red"

  • Arrays are zero-indexed

The first element has index 0, second is 1, and so on.

colors[1] = "yellow";  // Modifies the second element

♦️ The Function type

Functions are first-class objects in JavaScript. They can be stored in variables, passed as arguments, or returned from other functions.

  • Declaring a function:

function greet(name) {
  return "Hello, " + name;
}

  • Storing in a variable:

const sayHi = greet;
console.log(sayHi("Sam")); // "Hello, Sam"

  • Functions can have properties too

greet.description = "Greets a person";

♦️ The Date type

JavaScript provides the Date object to handle dates and times.

  • Creating a new date:

let now = new Date();

  • Creating a specific date:

let birthday = new Date("1998-07-15");

  • Common date methods

now.getFullYear();  // Returns the 4-digit year
now.getMonth();     // Returns month (0-11)
now.getDate();      // Returns day of the month

♦️ The Map type

A Map is a collection of key-value pairs where keys can be of any type.

  • Creating and setting values:

let map = new Map();
map.set("name", "Bob");
map.set(1, "One");

  • Getting and checking keys:

map.get("name");     // "Bob"
map.has(1);          // true

♦️ The Set type

A Set is a collection of unique values.

  • Creating a Set and adding values:

let set = new Set();
set.add(1);
set.add(2);
set.add(1);  // Duplicate, will be ignored

  • Checking and deleting:

set.has(2);     // true
set.delete(1);  // removes 1