In JavaScript, data types are broadly categorized into two categories: primitive and non-primitive (objects). Primitive values are basic data types that represent single values, and they are immutable, meaning they cannot be changed once created. These primitive types include numbers, strings, booleans, null, undefined, and symbols (added in ECMAScript 6). Let's delve into each of these primitive types with examples.
1. Numbers
Numbers in JavaScript are represented using the number primitive type. They can be integers, floating-point numbers, or even scientific notation numbers. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Primitive Values</title>
</head>
<body>
<script>
let num = 42; // Integer
let floatNum = 3.14; // Floating-point number
let scientificNum = 6.02e23; // Scientific notation
console.log(num); // Output: 42
console.log(floatNum); // Output: 3.14
console.log(scientificNum); // Output: 6.02e+23
</script>
</body>
</html>
2. Strings
Strings represent textual data and are enclosed in single (''), double ("") or backticks (``) quotes. They can contain letters, numbers, symbols, and spaces. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Primitive Values</title>
</head>
<body>
<script>
let firstName = 'John';
let lastName = "Doe";
let fullName = `John Doe`; // Using backticks for template literals
console.log(firstName); // Output: John
console.log(lastName); // Output: Doe
console.log(fullName); // Output: John Doe
</script>
</body>
</html>
3. Booleans
Booleans represent logical values, either true or false. They are often used in conditional statements and comparisons. Here's an example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Primitive Values</title>
</head>
<body>
<script>
let isLogged = true;
let hasPermission = false;
console.log(isLogged); // Output: true
console.log(hasPermission); // Output: false
</script>
</body>
</html>
4. Null and Undefined
Both null and undefined represent the absence of a value, but they are used in different contexts. null is explicitly assigned to indicate no value, while undefined is automatically assigned to variables that have not been initialized. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Primitive Values</title>
</head>
<body>
<script>
let nullValue = null;
let undefinedValue;
console.log(nullValue); // Output: null
console.log(undefinedValue); // Output: undefined
</script>
</body>
</html>
5. Symbols
Symbols are unique and immutable values introduced in ECMAScript 6. They are often used as property keys in objects to avoid naming collisions. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Primitive Values</title>
</head>
<body>
<script>
const symbol1 = Symbol('description');
const symbol2 = Symbol('description');
console.log(symbol1 === symbol2); // Output: false
</script>
</body>
</html>
Manipulating Primitive Values
Since primitive values are immutable, any operation that appears to modify a primitive value actually creates a new value. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Primitive Values</title>
</head>
<body>
<script>
let num1 = 5;
let num2 = num1 + 3; // Creates a new value, num2 = 8
let str1 = 'Hello';
let str2 = str1 + ' World'; // Creates a new string, str2 = 'Hello World'
console.log(num2); // Output: 8
console.log(str2); // Output: Hello World
</script>
</body>
</html>
In the example above, num2 and str2 are new values created from operations on the original primitive values num1 and str1.
Passing Primitive Values to Functions
When passing primitive values to functions, the value is passed by copy, meaning changes within the function do not affect the original value. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Primitive Values</title>
</head>
<body>
<script>
function modifyValue(val) {
val += 10;
return val;
}
let originalValue = 5;
let modifiedValue = modifyValue(originalValue);
console.log(originalValue); // Output: 5
console.log(modifiedValue); // Output: 15
</script>
</body>
</html>
In the example above, originalValue remains unchanged after passing it to the modifyValue function because primitive values are passed by copy.
Practice Excercise Practice now