JavaScript DataTypes - What are the Different Data Types in JavaScript
JavaScript DataTypes
- JavaScript variables can hold different data types: numbers, strings, objects and more.
let length = 20; // Number
let lastName = "kaashiv"; // String
let x = {firstName:"kaashiv", lastName:"infotech"}; // Object
The Concept of Data Types
- In programming, data types is an important concept.
- To be able to operate on variables, it is important to know something about the type.
- Without data types, a computer cannot safely solve this.
let x = 16 + "Volvo";- When adding a number and a string, JavaScript will treat the number as a string.
Example 1
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When adding a number and a string, JavaScript will treat the number as a string.</p>
<p id="demo"></p>
<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Output
JavaScript
When adding a number and a string, JavaScript will treat the number as a string.
16Volvo
Example 2
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When adding a string and a number, JavaScript will treat the number as a string.</p>
<p id="demo"></p>
<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Output
JavaScript
When adding a string and a number, JavaScript will treat the number as a string.
Volvo16
Example 3
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>
<p id="demo"></p>
<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Output
JavaScript
JavaScript evaluates expressions from left to right. Different sequences can produce different results:
20Volvo
Example 4
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>
<p id="demo"></p>
<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Output
JavaScript
JavaScript evaluates expressions from left to right. Different sequences can produce different results:
Volvo164
JavaScript Types are Dynamic
- JavaScript has dynamic types. This means that the same variable can be used to hold different data types.
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
JavaScript Strings
- A string (or a text string) is a series of characters like "John Doe".
- Strings are written with quotes. You can use single or double quotes.
let carName1 = "Volvo XC60"; // Using double quotes
let carName2 = 'Volvo XC60'; // Using single quotes
- You can use quotes inside a string, as long as they don't match the quotes surrounding the string.
let answer1 = "It's good"; // Single quote inside double quotes
let answer2 = "He is called 'praveen'";// Single quotes inside double quotes
let answer3 = 'He is called "venkat"';// Double quotes inside single quotes
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written with quotes. You can use single or double quotes:</p>
<p id="demo"></p>
<script>
let carName1 = "Volvo XC60";
let carName2 = 'Volvo XC60';
document.getElementById("demo").innerHTML =
carName1 + "<br>" +
carName2;
</script>
</body>
</html>
Output
JavaScript Strings
Strings are written with quotes. You can use single or double quotes:
Volvo XC60
Volvo XC60
JavaScript Numbers
- JavaScript has only one type of numbers.
- Numbers can be written with, or without decimals:
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with, or without decimals:</p>
<p id="demo"></p>
<script>
let a1 = 43.00;
let a2 = 43;
let a3 = 1.13;
document.getElementById("demo").innerHTML = a1 + "<br>" + a2 + "<br>" + a3;
</script>
</body>
</html>
Output
Numbers can be written with, or without decimals:
43
43
1.13
Extra large or extra small numbers can be written with scientific (exponential) notation.
Sample Code
let y = 123e5; // 12300000
let z = 123e-5; // 0.00123
Output
12300000
0.00123
JavaScript Booleans
- Booleans can only have two values: true or false.
let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans can have two values: true or false:</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 5;
let z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
Output
JavaScript Booleans
Booleans can have two values: true or false:
true
false
- Booleans are often used in conditional testing.
- You will learn more about conditional testing later in this tutorial.
JavaScript Arrays
- JavaScript arrays are written with square brackets.
- Array items are separated by commas.
- The following code declares (creates) an array called cars, containing three items (car names):
const cars = ["Saab", "Volvo", "BMW"];
Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes are zero-based, which means the first item is [0].</p>
<p id="demo"></p>
<script>
const cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
Output
JavaScript Arrays
Array indexes are zero-based, which means the first item is [0].
Saab
- Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
JavaScript Object
- JavaScript objects are written with curly braces {}.
- Object properties are written as name:value pairs, separated by commas.
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};Sample Code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Output
JavaScript Objects
John is 50 years old.The typeof Operator
- You can use the JavaScript typeof operator to find the type of a JavaScript variable.
- The typeof operator returns the type of a variable or an expression.
typeof "John" // Returns "string"
typeof 314 // Returns "number"
typeof 3.14 // Returns "number"
Sample Code
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof 314 +
typeof "John Doe";
</script>
</body>
</html>
Output
JavaScript Operators
The typeof Operator
The typeof operator returns the type of a variable or an expression.
numberstringUndefined
- In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
let car; // Value is undefined, type is undefinedSample Code
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>
<p id="demo"></p>
<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
Output
JavaScript Operators
The typeof Operator
The value (and the data type) of a variable with no value is undefined.
undefined
undefined