Data types play a crucial role in JavaScript programming as they define the type of data a variable can store. This article will change the way you understand data type. We will explore the types of data types in JavaScript: primitive and reference types. We'll delve into each type, and examine their characteristics, and examples to deepen your understanding of data types and the differences between them.
Types of Data Types in JavaScript
We have two types of data type in javascript.
Primitive Data type
Reference Data type
Let's understand each data type comprehensively;
Primitive Data type
Primitive data types are not objects and have no methods or properties. They are stored directly in the variable's location and are immutable. The following are the seven primitive data types in JavaScript:
a. String:
Represents textual data.
A sequence of characters used to represent text.
Can be represented with single quotes (' ') or double quotes (" ").
const firstName = "Ayodele"; // Using double quotes
const lastName = 'Ayoola'; // Using single quotes
b. Number:
Represents numeric values, both integers and floating-point numbers.
Integers do not have a decimal point, while floats do.
const age = 30; // Integer
const pie = 3.142; // Float
c. Boolean:
- Represents logical values: true or false.
const isLoggedIn = true;
d. Undefined:
- Denotes a variable that has been declared but not initialized.
const isLoggedIn = true;
e. Null:
- Denotes the intentional absence of any object value.
const container = null;
f. Symbol:
- Represents a unique and immutable value.
let value = Symbol('hi');
g. BigInt:
Represents integers with arbitrary precision. An example of bigInt is database IDs
BigInts are created by appending "n" to the end of an integer.
const bigNum = 1234567890123456789012345678901234567890n;
const huge = 204358463868098362274673n
const num = 5
console.log(huge * num) //Cannot mix BigInt and other types.
//Note: You cannot mix BigInt with a regular number.
Reference Data Types
Reference Data Types are used to group data and functionality together. They are accessed by reference and are not stored directly in variables. The main reference data types in JavaScript include:
a. Object:
Ideally suited for storing and transmitting data within an application.
Objects can be created using either the Object constructor or object literal notation.
const person = {
name: 'Ayodele',
age: 30
};
b. Array
Represents ordered lists of data.
Can store any type of data in each slot allowing for flexible storage
const colors = ['red', 'blue', 'green'];
c. Function:
Blocks of code that perform a specific task.
Can be created using function declaration, function expression, or arrow function syntax.
//Function Declaration
function sum(a, b) {
return a + b;
}
//Function Expression
const sum1 = function(a, b) {
return a + b;
}
//Arrow function
const sum2 = (a, b) => a + b;
d. Date:
Stores dates as the number of milliseconds since January 1, 1970 UTC.
Can be created using various methods such as
new Date(),new Date(milliseconds), and others.
// Creating a new Date object
const currentDate = new Date();
console.log(currentDate); // Output: Current date and time
Difference between Primitive and Reference Types
i. When you assign a primitive value to a new variable, the value itself is duplicated and stored in the new variable.Let's look at code example to solidify this.
// Assigning a primitive value (number) to a new variable
let x = 20;
let y = x;
console.log(x); // Output: 20
console.log(y); // Output: 20
// Modifying the value of x
x = 10;
console.log(x); // Output: 10
console.log(y); // Output: 20 (y retains the original value)
Now, let's further break down the code above:
We first assign the primitive value 20 to the variable x. Then we assign the value of x to the variable y. At this point, both x and y hold the value of 20. However, when we later change the value of x to 10, the value of y remains unchanged at 20. This demonstrates that the two variables store separate copies of the value. This means that each variable has its own memory space where it stores the value.
ii. When assigning a reference value from one variable to another, the reference to the object is copied, resulting in both variables pointing to the same object.
Let's explore some code examples together to solidify our understanding
// Assigning a reference value (object) to a new variable
const obj1 = { name: 'Ayodele' };
const obj2 = obj1;
console.log(obj1); // Output: { name: 'Ayodele' }
console.log(obj2); // Output: { name: 'Ayodele' }
// Modifying the object through obj1
obj1.name = 'Lanre';
console.log(obj1); // Output: { name: 'Lanre' }
console.log(obj2); // Output: { name: 'Lanre' } (obj2 reflects the change)
What does the code above mean?
In the code example, we create an object obj1 with a property name set to Ayodele. Then we assign obj1 to obj2. Both variables now reference the same object in memory. When we change the value of the name property through obj1, the change is also reflected in obj2. This is because both variables point to same object in memory.
JavaScript's typeof Operator
The typeof operator enables us to identify the data type of a variable.
It returns a string indicating the data type.
const person = "Ayo";
console.log(typeof person); // string
const isLoggedIn = true;
console.log(typeof isLoggedIn); // boolean
const age = 30;
console.log(typeof age); // number
let car;
console.log(typeof car); // undefined
Conclusion
Understanding data types in JavaScript is crucial for effective programming. We explored the two main categories of data types: primitive and reference types. We discussed each type in detail, providing examples along the way. By grasping the nuances of data types, you'll be better equipped to write robust JavaScript code and manipulate data effectively in your programs.