JavaScript has 8 Datatypes
1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object
The Object Datatype
The object data type can contain:
1. An object
2. An array
3. A date
Examples
let length = 16;
let weight = 7.5;
let color = "Yellow";
let lastName = "Johnson";
let x = true;
let y = false;
const person = {firstName:"John", lastName:"Doe"};
const cars = ["Saab", "Volvo", "BMW"];
const date = new Date("2022-03-25");
Note :
A JavaScript variable can hold any type of data.
The Concept of Data Types
In programming, understanding data types is crucial.
In order to work with variables, it's essential to have some knowledge about their type.
Data types are crucial for a computer to solve this problem securely :
Is it logical to include 'Volvo' with the number sixteen? Will this action lead to an error, or will it yield a result?
In JavaScript, the provided code will be understood like this:
Note :
When adding a number and a string, JavaScript will treat the number as a
string.
JavaScript reads expressions in order, starting from the left. Using various orders can lead to distinct outcomes:
In the initial example, JavaScript sees 16 and 4 as numbers, but when it encounters "Volvo", it changes how it understands things.
In the second example, when the initial item is a string, all following items are also considered as strings.
JavaScript Types are Dynamic
JavaScript uses dynamic types, which means a single variable can store various types of data:
JavaScript Strings
A string, also known as a text string, is basically a bunch of characters put together, just like when we say "John Doe."
Text is put inside quotes. You can use either single or double quotes:
You're allowed to include quotation marks within a text, as long as they differ from the ones enclosing the text itself:
You will learn more about strings later in this tutorial.
JavaScript Numbers
All numbers used in JavaScript are kept as decimal numbers (floating point).
You can write numbers in two ways: with decimals or without decimals.
Exponential Notation
You can express really big or really small numbers using scientific (exponential) notation in this way:
Note :
Most programming languages have many number types:
Whole numbers (integers):
byte (8-bit), short (16-bit), int (32-bit), long (64-bit)
Real numbers (floating-point):
float (32-bit), double (64-bit).
Javascript numbers are always one type:
double (64-bit floating point).
You will learn more about numbers later in this tutorial.
JavaScript BigInt
JavaScript numbers are kept in a special way using 64 bits, and they are not whole numbers.
JavaScript BigInt is a fresh kind of data (introduced in ES2020) that you can employ to save really large whole numbers, which cannot be held in a typical JavaScript Number.
You will learn more about BigInt later in this tutorial.
JavaScript Booleans
Booleans can only be one of two things: either true or false.
Booleans are commonly employed in conditional checks.
You will learn more about booleans later in this tutorial.
JavaScript Arrays
In HTML, you can create JavaScript arrays using square brackets.
Array items are separated by commas.
The code below makes a list called "cars" with three car names inside it:
In arrays, we start counting from zero. So, the first item is at index [0], the second is at index [1], and it continues like this.
In this tutorial, you'll discover additional information about arrays.
JavaScript Objects
In HTML, when we talk about JavaScript objects, we represent them using curly braces like this: {}.
In HTML, we describe object properties by using name-value pairs separated by commas.
In the previous example, there is an object, which is a person. This person has four things that describe them: their first name, last name, age, and the color of their eyes.
You will learn more about objects later in this tutorial.
The typeof Operator
You can use JavaScript to figure out what type a variable is by using the typeof operator.
The typeof operator tells you what kind of thing a variable or something you're looking at is.
You will learn more about typeof later in this tutorial.
Undefined
In JavaScript, when a variable doesn't have a value assigned to it, it is considered as having the value undefined. This means that the variable doesn't hold any specific data. The type of such a variable is also undefined.
You can make any variable empty by setting its value to undefined. The variable's type will also become undefined.
Empty Values
A value that is empty has no connection to undefined.
An empty string can be seen as both acceptable and possessing a specific category.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When you add a number and a string in JavaScript, the number is treated like a string.</p>
<p id="demo"></p>
<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When you combine a string and a number in JavaScript, the number will be treated as if it's also a string.</p>
<p id="demo"></p>
<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript reads and calculates things one by one, starting from the left. The order in which things are done can change what the outcome is.</p>
<p id="demo"></p>
<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript looks at sentences one by one. If you change the order of the words, you get different answers.</p>
<p id="demo"></p>
<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Data Types</h2>
<p>JavaScript uses dynamic types. This means that a variable in JavaScript can store different types of data at different times.</p>
<p id="demo"></p>
<script>
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are words written with quotation marks. You can use either 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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can put quotation marks inside a sentence, but they must be different from the ones already used to start and end the sentence.</p>
<p id="demo"></p>
<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML = answer1 + " <br> " +
answer2 + " <br> " +
answer3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with, or without decimals:</p>
<p id="demo"></p>
<script>
let x1 = 34.00;
let x2 = 34;
let x3 = 3.14;
document.getElementById("demo").innerHTML = x1 + " <br> " + x2 + " <br> " + x3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Large or small numbers can be written in a special way called scientific (exponential) notation.</p>
<p id="demo"></p>
<script>
let y = 123e5;
let z = 123e-5;
document.getElementById("demo").innerHTML = y + " <br> " + z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavScript Bigint</h1>
<p>A BigInt can not have decimals.</p>
<p id="demo"></p>
<p>You can't do math with a BigInt and a regular number.</p>
<script>
let x = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!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>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes start from zero. So, the initial item is at position [0].</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
<!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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The "typeof" operator tells you what type a variable or expression is.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof "" + " <br> " +
typeof "John" + " <br> " +
typeof "John Doe";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator tells you what type a variable or expression is.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof 0 + " <br> " +
typeof 314 + " <br> " +
typeof 3.14 + " <br> " +
typeof(3) + " <br> " +
typeof(3 + 4);
</script>
</body>
</html>
<!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>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>. </p>
<p id="demo"></p>
<script>
let car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML = car + " <br> " + typeof car;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>In Javascript, an empty string is valid and has a specific type.</p>
<p id="demo"></p>
<script>
let car = "";
document.getElementById("demo").innerHTML = "The value is: " + car + " <br> " +
"The type is: " + typeof car;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery