JavaScript Data Types: Syntax, Usage, and Examples
JavaScript data types define the kind of values that variables can hold. JavaScript has both primitive and composite data types that help you store and manipulate different types of data.
How to Use JavaScript Data Types
You declare a variable using let, const, or var and assign a value of a specific type.
Primitive Data Types
Primitive data types in JavaScript are immutable and store simple values.
jsx
let name = "Alice"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let value = null; // Null
let result; // Undefined
let symbol = Symbol("id"); // Symbo
- Strings represent text enclosed in quotes.
- Numbers store integers and floating-point values.
- Booleans hold
trueorfalsevalues. - Null represents an intentional empty value.
- Undefined means a variable has been declared but not assigned a value.
- Symbols create unique identifiers.
Composite Data Types
Composite data types in JavaScript can store multiple values or complex structures.
jsx
let person = { name: "John", age: 30 }; // Object
let numbers = [1, 2, 3, 4, 5]; // Array
let greet = function() { return "Hello"; }; // Function
- Objects store key-value pairs.
- Arrays hold ordered lists of values.
- Functions are reusable blocks of code.
When to Use JavaScript Data Types
- Managing user data – Use objects to store user details like name and age.
- Handling collections – Arrays help store lists of items like products or messages.
- Performing calculations – Numbers allow you to perform mathematical operations.
Examples of JavaScript Data Types
Working with Strings
Strings store and manipulate text.
jsx
let message = "Hello, World!";
console.log(message.length); // 13
console.log(message.toUpperCase()); // "HELLO, WORLD!"
Performing Math Operations
Numbers are useful for calculations.
jsx
let price = 10.5;
let quantity = 3;
let total = price * quantity;
console.log(`Total price: $${total}`); // Total price: $31.5
Storing and Accessing Objects
Objects store multiple properties.
jsx
let car = { brand: "Tesla", model: "Model S", year: 2022 };
console.log(car.brand); // Tesla
console.log(car["year"]); // 2022
Using Arrays for Lists
Arrays store multiple values.
jsx
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana
fruits.push("Orange"); // Adds a new item
console.log(fruits.length); // 4
Learn More About JavaScript Data Types
Type Checking with typeof
You can check a variable’s type using typeof.
jsx
console.log(typeof "Hello"); // string
console.log(typeof 42); // number
console.log(typeof true); // boolean
console.log(typeof null); // object (JavaScript bug)
console.log(typeof undefined); // undefined
console.log(typeof { name: "Alice" }); // object
console.log(typeof [1, 2, 3]); // object
console.log(typeof function() {}); // function
Dynamic Typing
JavaScript variables can hold different types of values at different times.
jsx
let variable = 42;
console.log(typeof variable); // number
variable = "Now it's a string";
console.log(typeof variable); // string
Primitive vs. Composite Data Types
Primitive data types store a single value, while composite types hold multiple values.
jsx
let a = 10; // Primitive
let b = a; // Copy by value
b = 20;
console.log(a); // 10 (unchanged)
let obj1 = { value: 10 }; // Composite
let obj2 = obj1; // Copy by reference
obj2.value = 20;
console.log(obj1.value); // 20 (both point to the same object)
Converting Between Data Types
Use parseInt, parseFloat, Number(), or String() to convert values.
jsx
let strNum = "42";
console.log(Number(strNum)); // 42
console.log(parseInt("100px")); // 100
console.log(parseFloat("3.14")); // 3.14
console.log(String(25)); // "25"
console.log(Boolean(0)); // false
Null vs. Undefined
null represents an empty value, while undefined means a variable has not been assigned.
jsx
let a;
console.log(a); // undefined
let b = null;
console.log(b); // null
Using Symbol for Unique Identifiers
Symbols create unique values, even with the same description.
jsx
let id1 = Symbol("id");
let id2 = Symbol("id");
console.log(id1 === id2); // false
JavaScript Data Types in JSON
Objects and arrays are useful when working with JSON.
jsx
let user = { name: "Alice", age: 25 };
let jsonString = JSON.stringify(user); // Convert object to JSON
console.log(jsonString); // {"name":"Alice","age":25}
let parsedUser = JSON.parse(jsonString); // Convert JSON to object
console.log(parsedUser.name); // Alice
Handling Different Data Types in Functions
Functions can accept and return different data types.
jsx
function add(a, b) {
return a + b;
}
console.log(add(5, 10)); // 15
console.log(add("Hello, ", "World!")); // Hello, World!
Checking If a Value is an Array
Arrays are technically objects, so typeof returns “object”. Use Array.isArray() to check.
jsx
let list = [1, 2, 3];
console.log(Array.isArray(list)); // true
console.log(typeof list); // object
JavaScript Data Types Use Cases
- User Profiles – Objects store user information like name, email, and preferences.
- Lists and Collections – Arrays store product lists, to-do tasks, or chat messages.
- Mathematical Computations – Numbers help with currency calculations, statistics, and measurements.
JavaScript’s flexibility with data types makes it easy to handle different kinds of values. Understanding how to use and manipulate them is key to writing efficient code.