JS Datatypes

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 XC60

Quotes 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