JavaScript Data Types (Live Playground)
In JavaScript, data types can be broadly categorized into two groups: primitive data types and reference data types.
Primitive Data Types
Primitive data types are the basic building blocks of the language and include strings, numbers, booleans, undefined, null, and symbols.
String
Strings are used to represent textual data in JavaScript. You can create a string using single quotes (' '), double quotes (" "), or backticks (``).
Example:
const firstName = 'John';
const lastName = 'Doe';
const greeting = `Hello, ${firstName} ${lastName}!`;
console.log(greeting); // Output: Hello, John Doe!
In the example above, we declare three string constants using different types of quotes.
Number
Numbers in JavaScript can be integers or floating-point values. JavaScript uses a single Number type to represent both types of numbers.
Example:
const age = 30;
const weight = 75.5;
const sum = age + weight;
console.log(sum); // Output: 105.5
In the example above, we declare two number constants and calculate their sum.
Boolean
Booleans represent true or false values in JavaScript. They are used in conditional statements and other logic-based operations.
Example:
const isActive = true;
const isRegistered = false;
if (isActive && isRegistered) {
console.log('User is active and registered.');
} else {
console.log('User is not active or not registered.');
}
In the example above, we declare two boolean constants and use them in a conditional statement.
Undefined
In JavaScript, a variable that has been declared but not assigned a value is undefined. The undefined value represents the absence of a value.
Example:
let user;
console.log(user); // Output: undefined
In the example above, the user variable is declared but not assigned a value, so it's undefined.
Null
The null value in JavaScript represents the intentional absence of any object value. It's often used to indicate that a variable should have no value.
Example:
const emptyVar = null;
console.log(emptyVar); // Output: null
In the example above, we declare a constant with the null value, indicating that it should be empty.
Symbol
Symbols are unique and immutable values that can be used as identifiers for object properties. They were introduced in ECMAScript 2015 (ES6).
Example:
const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // Output: false
In the example above, we declare two symbol constants with the same description, but they are not equal because symbols are unique.
Reference Data types
Reference data types include objects, arrays, and functions.
Objects
Objects are used to store collections of key-value pairs in JavaScript. You can create an object using the object literal notation or the new Object() constructor.
Example:
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
};
console.log(person.firstName); // Output: John
In the example above, we create a person object using the object literal notation and access one of its properties.
Arrays
Arrays are used to store ordered collections of elements in JavaScript. You can create an array using the array literal notation or the new Array() constructor.
Example:
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[1]); // Output: banana
In the example above, we create a fruits array using the array literal notation and access one of its elements.
Functions
Functions in JavaScript are objects that can be called to execute a block of code. Functions can be created using the function declaration, function expression, or arrow function syntax.
Example:
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('John'); // Output: Hello, John!
In the example above, we create a greet function using the function declaration syntax and call it with an argument.
Reference vs. Primitive Data Types
One key difference between reference and primitive data types is how they are stored and accessed in memory. Primitive data types are stored by value, while reference data types are stored by reference.
Example:
let num1 = 10;
let num2 = num1;
num1 = 20;
console.log(num1); // Output: 20
console.log(num2); // Output: 10
const obj1 = { value: 10 };
const obj2 = obj1;
obj1.value = 20;
console.log(obj1.value); // Output: 20
console.log(obj2.value); // Output: 20
In the example above, num1 and num2 are primitive data types, while obj1 and obj2 are reference data types. When we change the value of num1, it does not affect the value of num2. However, when we change the value of obj1, it also affects the value of obj2 because they both reference the same object.
Conclusion
Understanding data types in JavaScript is crucial for working with data effectively in your programs. Primitive data types include strings, numbers, booleans, undefined, null, and symbols. Reference data types include objects, arrays, and functions. Familiarize yourself with each type and how to use them in your code, and be aware of the differences between reference and primitive data types when it comes to memory storage and access.