JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Datatypes
JavaScript variables stores different data types: numbers, strings, objects and more:
let length = 16; // Number
let lastName = “Johnson” // String
let x = {firstName:”John”, lastName:”Doe”}; // Object
The Concept of Data Types
In programming, data types are an important concept.
To allow to operate on variables, it is important to have knowledge about about the type.
Without data types, a computer will be unable to solve this:
let x = 16 + “Volvo”;
It will make no sense to add “Volvo” to sixteen.
JavaScript treat the example above as:
let x = “16” + “Volvo”;
When adding a number and a string, JavaScript treat the number as a string.
Example
<!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
When adding a number and a string, JavaScript will treat the number as a string.
16Volvo
Example
<!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
JavaScript evaluates expressions from left to right. Different sequences can generate different results.
Example
<!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
<!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
In the first example, JavaScript treats 16 and 4 as numbers, until it reaches “Volvo”.
In the second example, since the first operand is a string, all operands are treated as strings.
JavaScript Types are Dynamic
JavaScript has dynamic types. It means that the same variable can be used to store different data types:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Data Types</h2
<p>JavaScript has dynamic types. This means that the same variable can be used to hold different data types:</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>
Output
JavaScript Data Types
JavaScript has dynamic types. This means that the same variable can be used to hold different data types:John
JavaScript Strings
A string (or a text string) is a set of characters like “John Doe”.
Strings are written with quotes. Either single or double quotes can be used:
Example
<!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 XC60Quotes can be used within a string, as long as they don’t match the quotes surrounding the string.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can use quotes inside a string, as long as they don’t match the quotes surrounding the string:</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>
Output
JavaScript Strings
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
It's alright
He is called 'Johnny'
He is called "Johnny"
JavaScript Numbers
JavaScript consists of only one type of numbers.
Numbers can be written with, or without decimals.
Example
<!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>
Output
JavaScript Numbers
Numbers can be written with, or without decimals:
34
34
3.14
Extra large or extra small numbers are written with scientific (exponential) notation.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Extra large or extra small numbers can be written with 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>
Output
JavaScript Numbers
Extra large or extra small numbers can be written with scientific (exponential) notation:
12300000
0.00123
JavaScript Booleans
Booleans consists of only two values: true or false.
Example
<!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 used in conditional testing.
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code defines (creates) an array called cars, consisting of three items (car names):
Example
<!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
JavaScript Objects
JavaScript objects are written with curly braces {}
Object properties are written as name:value pairs, separated by commas.
Example
<!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
Using the JavaScript typeof operator to find the type of a JavaScript variable
The typeof operator returns the type of a variable or an expression:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</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 “” + “<br>” +
typeof “John” + “<br>” +
typeof “John Doe”;
</script>
</body>
</html>
Output
JavaScript typeof
The typeof operator returns the type of a variable or an expression.
string
string
string
Undefined
In JavaScript, a variable without a value, consist of the value undefined. The type is also undefined.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</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
The value (and the data type) of a variable with no
undefined
undefined
By, setting the value to undefined make any variable empty. The type will also be undefined.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</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>
Output
JavaScript
Variables can be emptied if you set the value to undefined.
undefined
undefined
Empty Values
An empty value has nothing to do with undefined.
An empty string consists of both a legal value and a type.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>An empty string has both a legal value and a 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>
Output
JavaScript
An empty string has both a legal value and a type:
The value is:
The type is: string