BBlogspage

JavaScript Data Types in Web Technology for Begginers

Pasting text from a plain text editor like Notepad successfully kills the hidden HTML bugs, but as you are experiencing, it leaves you with a completely flat wall of text. Manually highlighting and clicking toolbar buttons for every single heading and code snippet is incredibly tedious.

Here is a senior developer workflow hack for Sanity Studio: The Portable Text editor automatically parses Markdown. If you copy properly formatted Markdown text and paste it directly into the Sanity content box, the editor will instantly and automatically convert it into native H2, H3, bullet, and code blocks. No manual highlighting required.

I have taken your raw text, fixed the minor spelling typos (e.g., "sequance", "Non-Pimitive"), structured the headings, and wrapped your code examples in proper code blocks.

Copy the entire block of text below and paste it directly into your Sanity Studio Content field:

Understanding JavaScript Data Types with Examples: A Guide for Beginner JavaScript Developers

As we all know, data is the backbone of everything. Data can exist in various forms, and with the help of programming languages, we can perform multiple operations on it. The behavior and structure of these operations may vary depending on the type of data, which leads to different outcomes.

In JavaScript, data is categorized into two main types, primarily based on how it is stored in memory.

Two main Data Types in JavaScript

  • Primitive Data Types
  • Non-Primitive Data Types

JavaScript Primitive Data Types

The actual value of the variable will be assigned, not the memory reference. Primitive data types cannot be changed once created; this behavior is called Immutability.

JavaScript is a dynamically typed language, meaning the type of a variable is determined at runtime by JavaScript, rather than the developer explicitly specifying the data type when declaring the variable in the code.

Below are the 7 types of primitive data types:

1. Number

The Number data type represents integer numbers as well as floating-point numbers.

JavaScript

let num = 10; // variable num stores value 10
let age = 26; // variable age stores value 26

The above statement refers to the declaration of a primitive number. Additionally, there is a Number Object (non-primitive). The example of the Number Object is below:

JavaScript

let age = new Number(26); // number 26 stored in number object age

Programmers prefer to declare the number in the primitive way (let num = 10;) unless there is a special requirement to declare the number as an Object (let num = new Number(10);). Primitive numbers are lightweight, easy to use, and perform better, while non-primitive numbers are heavier, harder to use, and can slow down the program.

When invalid mathematical operations are performed, the result will be NaN (Not-a-Number).

JavaScript

console.log("Hello" / 15); // Output: NaN

2. String

A String is a sequence of characters. The characters can be enclosed in single quotes ('), double quotes ("), or backticks (`).

JavaScript

let firstName = "John"; // String enclosed in double quotes
let city = 'London'; // String enclosed in single quotes

JavaScript provides the option to insert an expression within a string called Template Literals. Template literals are always enclosed in backticks.

JavaScript

let age = 25;
let feedback = `Learning is fun, I am currently ${age + 10} years old`;

The above statements refer to the declaration of a primitive value string. Additionally, there is a String Object (non-primitive). Declaring a string as an object provides access to multiple advanced string methods.

JavaScript

let name = new String("John");

It is always suggested to use the primitive type of String instead of the Object type of String unless there is a special requirement.

3. Boolean

The Boolean data type stores a logical value of true or false in the variable.

JavaScript

let isActive = true; // Boolean variable holds value true.

In JavaScript, the zero (0) is coerced to false, and non-zero numbers are coerced to true. Similarly, an empty string is coerced to false, and a non-empty string is coerced to true.

JavaScript

let emptySpace = ''; // It's an empty String
console.log(emptySpace == false); // Output: true. Here emptySpace boolean value is false.

let name = 'John'; // Not an empty string
console.log(name == true); // Output: true. Here name boolean value is true.

let justBornAge = 0;
console.log(justBornAge == false); // Output: true. Here justBornAge boolean value is false.

let updatedAge = 2;
console.log(updatedAge == true); // Output: true. Here updatedAge boolean value is true.

4. Undefined

When a programmer declares a variable without defining it—meaning the variable name is mentioned but no value is assigned—the data type of that variable is undefined.

JavaScript

let age; // Variable is only declared and not yet defined
console.log(age); // Output: undefined

Because JavaScript is dynamically typed, it determines the variable’s data type at runtime based on the assigned value. Since no value is provided, JavaScript cannot determine a specific type, resulting in the variable having an undefined type.

5. Null

Null is explicitly assigned by the programmer to indicate the absence of a value, and this is done intentionally.

JavaScript

// Example 1
let temp = null; // Here temp variable is assigned to null

// Example 2
let person = {
name: "john",
age: 12
};
person = null; // Cleared the reference of object person

When we check the data type of null with typeof(), it shows object as the data type. Null will always be applied explicitly to a variable. The most common use case of null is to reset the value of a variable.

6. BigInt

The BigInt data type was introduced in ES2020 and is used for working with integers beyond the safe range (2^53 – 1). In most cases, if there are no extremely large numbers, the standard Number data type is sufficient instead of BigInt.

JavaScript

let largeNumber = 123456789012345678901234567890n;
console.log(largeNumber + 10n); // Works with BigInt

7. Symbol

The Symbol data type was introduced in ES6. It is used to create unique and immutable identifiers. Each symbol is unique, even if two symbols have the exact same description.

JavaScript

let uniqueId = Symbol("id");
let user = {
name: "Alice",
[uniqueId]: 12345 // Symbol as a unique key
};

console.log(user[uniqueId]); // Output: 12345

The most common use case for a symbol is as an Object property key. A Symbol can be converted to a Boolean (it is truthy), but a Symbol cannot be converted into a Number.

Non-Primitive Data Types

When dealing with non-primitive data types, a memory reference is assigned to the variable instead of the actual value from memory. The Object is the fundamental non-primitive data type in JavaScript, and all other complex non-primitive data types fall under the Object data type. Non-primitive data types are mutable.

1. Object

An Object stores complex data as key-value pairs in a block. Whenever we change the value of a key, it updates the original value in memory. Objects do not point to the actual value directly; instead, they point to the memory reference of that original value.

JavaScript

let person = {
name: "Mike",
age: 25
}

How are Objects mutable in JavaScript? In the code above, we created an object called person. When we try to update the value of a key, the actual value in memory updates.

JavaScript

person.age = 20;
console.log(person); // Output: {name: 'Mike', age: 20}

If we assign an object to another variable using the = operator, only the reference of the object is assigned to the new variable. Because of this, you should always clone the Object to avoid mutating the original data unexpectedly using Object.assign() or the spread operator.

JavaScript

const newPerson = Object.assign({}, person); // object.assign() method
const newPerson1 = { ...person }; // Spread operator

2. Arrays

Arrays are collections of data types that store an ordered collection of elements. Arrays are iterable and accessed using indexes. In the example below, the variable staff holds the memory reference where the staff names are actually stored.

JavaScript

let staff = ["mike", "Rosie", "Alice"];

3. Function

A function is a block of code designed to execute and return a specific value. Functions are also objects in JavaScript and are mutable. The variable addNumber holds the memory address where the block of code actually resides.

JavaScript

function addNumber(a, b) {
return a + b;
}

Learning and understanding the data types of JavaScript means creating a strong base to learn the language.

Also Read: Type conversion VS Type coercion in JavaScript