Javascript Tutorial: Examples in Each Chapter

JavaScript Tutorial
❮ HomeNext ❯
JavaScript is the programming language of HTML and the Web.
JavaScript is easy to learn.
This tutorial will teach you JavaScript from basic to advanced.
Examples in Each Chapter

With our "Try it Yourself" editor, you can edit the source code and view the
result.
Example
My First JavaScript
Click me to display Date and Time
Try it Yourself »
We recommend reading this tutorial, in the sequence listed in the left menu.
Learn by Examples
Examples are better than 1000 words. Examples are often easier to understand
than text explanations.
This tutorial supplements all explanations with clarifying "Try it Yourself"

examples.
JavaScript Examples
If you try all the examples, you will learn a lot about JavaScript, in a very short
time!
Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Web pages are not the only place where JavaScript is used. Many desktop and
server programs use JavaScript. Node.js is the best known. Some databases,
like MongoDB and CouchDB, also use JavaScript as their programming
language.
Did You Know?

JavaScript and Java are completely different languages, both in concept and
design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA

standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name
of the language.
You can read more about the different JavaScript versions in the chapter JS
Versions.
Learning Speed
In this tutorial, the learning speed is your choice.
Everything is up to you.
If you are struggling, take a break, or reread the material.
Always make sure you understand all the "Try-it-Yourself" examples.
JavaScript References
W3Schools maintains a complete JavaScript reference, including all HTML and
browser objects.
The reference contains examples for all properties, methods and events, and is
continuously updated according to the latest web standards.
Complete JavaScript Reference
JavaScript Exercises
Test Yourself With Exercises
Exercise:
Create a variable called carName and assign the value Volvo to it.
var = " ";
Submit Answer »
Start the Exercise
JavaScript Quiz Test

Test your JavaScript skills at W3Schools!
Start JavaScript Quiz!

JavaScript Exam - Get Your Diploma!
W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and
career building.
More than 25 000 certificates already issued!
Get Your Certificate »
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML

DOM.
The Python Certificate documents your knowledge of Python.
The jQuery Certificate documents your knowledge of jQuery.
The SQL Certificate documents your knowledge of SQL.
The PHP Certificate documents your knowledge of PHP and MySQL.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The Bootstrap Certificate documents your knowledge of the Bootstrap

framework.
JavaScript Introduction
❮ PreviousNext ❯
This page contains some examples of what JavaScript can do.
JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo") and
changes the element content (innerHTML) to "Hello JavaScript":
Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
Try it Yourself »
JavaScript accepts both double and single quotes:
Example
document.getElementById('demo').innerHTML = 'Hello JavaScript';
Try it Yourself »
JavaScript Can Change HTML Attribute

Values
In this example JavaScript changes the value of the src (source) attribute of
an <img> tag:
The Light Bulb

Turn on the light Turn off the light
Try it Yourself »
JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML
attribute:
Example
document.getElementById("demo").style.fontSize = "35px";
Try it Yourself »
JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:
Example
document.getElementById("demo").style.display = "none";
Try it Yourself »
JavaScript Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style:
Example
document.getElementById("demo").style.display = "block";
Try it Yourself »
JavaScript Where To
The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Try it Yourself »
Old JavaScript examples may use a type attribute: <script

type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in
HTML.
JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when
"called" for.
For example, a function can be called when an event occurs, like when the user
clicks a button.
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or

in both.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML
page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Try it Yourself »
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML
page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
}
</script>
</body>
</html>
Try it Yourself »
Placing scripts at the bottom of the <body> element improves the display
speed, because script interpretation slows down the display.
External JavaScript
Scripts can also be placed in external files:
External file: myScript.js

}
External scripts are practical when the same code is used in many different web
pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source)
attribute of a <script> tag:
Example
<script src="myScript.js"></script>
Try it Yourself »
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is

located.
External scripts cannot contain <script> tags.
External JavaScript Advantages

Placing scripts in external files has some advantages:
 It separates HTML and code

 It makes HTML and JavaScript easier to read and maintain
 Cached JavaScript files can speed up page loads
To add several script files to one page - use several script tags:
Example
<script src="myScript1.js"></script>
External References
External scripts can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a script:
Example
<script src="https://www.w3schools.com/js/myScript1.js"></script>
Try it Yourself »
This example uses a script located in a specified folder on the current web site:
Example
<script src="/js/myScript1.js"></script>
Try it Yourself »
This example links to a script located in the same folder as the current page:
Example
Try it Yourself »
You can read more about file paths in the chapter HTML File Paths.
JavaScript Output
JavaScript Display Possibilities

JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
Using innerHTML
To access an HTML element, JavaScript can use
the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the

HTML content:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Try it Yourself »
Changing the innerHTML property of an HTML element is a common way to
display data in HTML.
Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>

<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Try it Yourself »
Using document.write() after an HTML document is loaded, will delete all
existing HTML:
Example
<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Try it Yourself »
The document.write() method should only be used for testing.
Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>

<script>
window.alert(5 + 6);
</script>
</body>
</html>
Try it Yourself »
Using console.log()
For debugging purposes, you can use the console.log() method to display data.
You will learn more about debugging in a later chapter.
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Try it Yourself »
JavaScript Statements
Example
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
Try it Yourself »
JavaScript Programs
A computer program is a list of "instructions" to be "executed" by a computer.
In a programming language, these programming instructions are

called statements.
A JavaScript program is a list of programming statements.
In HTML, JavaScript programs are executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element
with id="demo":
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
Try it Yourself »
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are
written.
JavaScript programs (and JavaScript statements) are often called JavaScript

code.
Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
var a, b, c; // Declare 3 variables

a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
Try it Yourself »
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
Try it Yourself »
On the web, you might see examples without semicolons.

Ending statements with semicolon is not required, but highly recommended.
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script to
make it more readable.
The following lines are equivalent:
var person = "Hege";
var person="Hege";
A good practice is to put spaces around operators ( = + - * / ):
var x = y + z;
JavaScript Line Length and Line Breaks

For best readability, programmers often like to avoid code lines longer than 80
characters.
If a JavaScript statement does not fit on one line, the best place to break it is
after an operator:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly!";
Try it Yourself »
JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.
The purpose of code blocks is to define statements to be executed together.

One place you will find statements grouped together in blocks, is in JavaScript
functions:
Example
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
Try it Yourself »
In this tutorial we use 2 spaces of indentation for code blocks.

You will learn more about functions later in this tutorial.
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
Visit our Reserved Words reference to view a full list of JavaScript keywords.
Here is a list of some of the keywords you will learn about in this tutorial:
Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the debugging fun
do ... while Executes a block of statements, and repeats the block, while a condition is
for Marks a block of statements to be executed, as long as a condition is true
function Declares a function
if ... else Marks a block of statements to be executed, depending on a condition
return Exits a function
switch Marks a block of statements to be executed, depending on different cases
try ... catch Implements error handling to a block of statements
var Declares a variable
JavaScript keywords are reserved words. Reserved words cannot be used as

names for variables
JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are

constructed:
var x, y, z; // How to declare variables

x = 5; y = 6; // How to assign values
z = x + y; // How to compute values
JavaScript Values
The JavaScript syntax defines two types of values: Fixed values and variable
values.
Fixed values are called literals. Variable values are called variables.
JavaScript Literals
The most important rules for writing fixed values are:
Numbers are written with or without decimals:
10.50
1001
Try it Yourself »
Strings are text, written within double or single quotes:

"John Doe"
'John Doe'
Try it Yourself »
JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the var keyword to declare variables.
An equal sign is used to assign values to variables.
In this example, x is defined as a variable. Then, x is assigned (given) the value

6:
var x;
x = 6;
Try it Yourself »
JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values:
(5 + 6) * 10
Try it Yourself »
JavaScript uses an assignment operator ( = ) to assign values to variables:
var x, y;
x = 5;
y = 6;
Try it Yourself »
JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:
5 * 10
Try it Yourself »
Expressions can also contain variable values:
x * 10
Try it Yourself »
The values can be of various types, such as numbers and strings.
For example, "John" + " " + "Doe", evaluates to "John Doe":
"John" + " " + "Doe"
Try it Yourself »
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The var keyword tells the browser to create variables:
var x, y;
x = 5 + 6;
y = x * 10;
Try it Yourself »
JavaScript Comments
Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
var x = 5; // I will be executed
// var x = 6; I will NOT be executed
Try it Yourself »
You will learn more about comments in a later chapter.
JavaScript Identifiers
Identifiers are names.
In JavaScript, identifiers are used to name variables (and keywords, and

functions, and labels).
The rules for legal names are much the same in most programming languages.
In JavaScript, the first character must be a letter, or an underscore (_), or a

dollar sign ($).
Subsequent characters may be letters, digits, underscores, or dollar signs.
Numbers are not allowed as the first character.

This way JavaScript can easily distinguish identifiers from numbers.
JavaScript is Case Sensitive
All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables:
var lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
Try it Yourself »
JavaScript does not interpret VAR or Var as the keyword var.
JavaScript and Camel Case

Historically, programmers have used different ways of joining multiple words
into one variable name:
Hyphens:
first-name, last-name, master-card, inter-city.
Hyphens are not allowed in JavaScript. They are reserved for subtractions.
Underscore:
first_name, last_name, master_card, inter_city.
Upper Camel Case (Pascal Case):
FirstName, LastName, MasterCard, InterCity.
Lower Camel Case:
JavaScript programmers tend to use camel case that starts with a lowercase
letter:
firstName, lastName, masterCard, interCity.

JavaScript Character Set
JavaScript uses the Unicode character set.
Unicode covers (almost) all the characters, punctuations, and symbols in the
world.
For a closer look, please study our Complete Unicode Reference.

JavaScript Comments
JavaScript comments can be used to explain JavaScript code, and to make it

more readable.
JavaScript comments can also be used to prevent execution, when testing

alternative code.
Single Line Comments

Single line comments start with //.
Any text between // and the end of the line will be ignored by JavaScript (will
not be executed).
This example uses a single-line comment before each code line:
Example
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
Try it Yourself »
This example uses a single line comment at the end of each line to explain the
code:
Example
var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2
Try it Yourself »
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
This example uses a multi-line comment (a comment block) to explain the

code:
Example
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
Try it Yourself »
It is most common to use single line comments.

Block comments are often used for formal documentation.
Using Comments to Prevent Execution

Using comments to prevent execution of code is suitable for code testing.
Adding // in front of a code line changes the code lines from an executable line
to a comment.
This example uses // to prevent execution of one of the code lines:

Example
//document.getElementById("myH").innerHTML = "My First Page";
Try it Yourself »
This example uses a comment block to prevent execution of multiple lines:
Example
/*
*/
Try it Yourself »
JavaScript variables are containers for storing data values.
In this example, x, y, and z, are variables:
Example
var x = 5;
var y = 6;
var z = x + y;
Try it Yourself »
From the example above, you can expect:
 x stores the value 5

 y stores the value 6
 z stores the value 11
Much Like Algebra

In this example, price1, price2, and total, are variables:
Example
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
Try it Yourself »
In programming, just like in algebra, we use variables (like price1) to hold

values.
In programming, just like in algebra, we use variables in expressions (total =
price1 + price2).
From the example above, you can calculate the total to be 11.
JavaScript variables are containers for storing data values.
JavaScript Identifiers
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age,
sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and dollar signs.

 Names must begin with a letter
 Names can also begin with $ and _ (but we will not use it in this tutorial)
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names
JavaScript identifiers are case-sensitive.
The Assignment Operator

In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to"
operator.
This is different from algebra. The following does not make sense in algebra:
x = x + 5
In JavaScript, however, it makes perfect sense: it assigns the value of x + 5 to
x.
(It calculates the value of x + 5 and puts the result into x. The value of x is
incremented by 5.)
The "equal to" operator is written like == in JavaScript.
JavaScript Data Types

JavaScript variables can hold numbers like 100 and text values like "John Doe".
In programming, text values are called text strings.
JavaScript can handle many types of data, but for now, just think of numbers
and strings.
Strings are written inside double or single quotes. Numbers are written without
quotes.
If you put a number in quotes, it will be treated as a text string.
Example
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
Try it Yourself »
Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.
You declare a JavaScript variable with the var keyword:
var carName;
After the declaration, the variable has no value (technically it has the value
of undefined).
To assign a value to the variable, use the equal sign:
carName = "Volvo";
You can also assign a value to the variable when you declare it:
var carName = "Volvo";
In the example below, we create a variable called carName and assign the value

"Volvo" to it.
Then we "output" the value inside an HTML paragraph with id="demo":
Example
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = carName;
</script>
Try it Yourself »
It's a good programming practice to declare all variables at the beginning of a
script.
One Statement, Many Variables

You can declare many variables in one statement.
Start the statement with var and separate the variables by comma:
var person = "John Doe", carName = "Volvo", price = 200;

Try it Yourself »
A declaration can span multiple lines:

var person = "John Doe",
carName = "Volvo",
price = 200;
Try it Yourself »
Value = undefined
In computer programs, variables are often declared without a value. The value
can be something that has to be calculated, or something that will be provided
later, like user input.
A variable declared without a value will have the value undefined.
The variable carName will have the value undefined after the execution of this
statement:
Example
var carName;
Try it Yourself »
Re-Declaring JavaScript Variables

If you re-declare a JavaScript variable, it will not lose its value.
The variable carName will still have the value "Volvo" after the execution of
these statements:
Example
var carName;
Try it Yourself »
JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using
operators like = and +:
Example
var x = 5 + 2 + 3;
Try it Yourself »
You can also add strings, but strings will be concatenated:
Example
var x = "John" + " " + "Doe";
Try it Yourself »
Also try this:
Example
var x = "5" + 2 + 3;
Try it Yourself »
If you put a number in quotes, the rest of the numbers will be treated as
strings, and concatenated.
Now try this:
Example
var x = 2 + 3 + "5";
Try it Yourself »

Exercise:
Create a variable called carName and assign the value Volvo to it.
var = " ";
Submit Answer »
Start the Exercise

JavaScript Operators
Example
Assign values to variables and add them together:
var x = 5; // assign the value 5 to x

var y = 2; // assign the value 2 to y
var z = x + y; // assign the value 7 to z (x + y)
Try it Yourself »
The assignment operator (=) assigns a value to a variable.
Assignment
var x = 10;
Try it Yourself »
The addition operator (+) adds numbers:
Adding
var x = 5;
var y = 2;
var z = x + y;
Try it Yourself »
The multiplication operator (*) multiplies numbers.
Multiplying
var x = 5;
var y = 2;
var z = x * y;
Try it Yourself »
JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic on numbers:
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
Arithmetic operators are fully described in the JS Arithmetic chapter.
JavaScript Assignment Operators

Assignment operators assign values to JavaScript variables.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
The addition assignment operator (+=) adds a value to a variable.
Assignment
var x = 10;
x += 5;
Try it Yourself »
Assignment operators are fully described in the JS Assignment chapter.
JavaScript String Operators

The + operator can also be used to add (concatenate) strings.
Example
var txt1 = "John";
var txt2 = "Doe";
var txt3 = txt1 + " " + txt2;
The result of txt3 will be:
John Doe
Try it Yourself »
The += assignment operator can also be used to add (concatenate) strings:
Example
var txt1 = "What a very ";
txt1 += "nice day";
The result of txt1 will be:
What a very nice day

Try it Yourself »
When used on strings, the + operator is called the concatenation operator.
Adding Strings and Numbers

Adding two numbers, will return the sum, but adding a number and a string will
return a string:
Example
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
The result of x, y, and z will be:
10
55
Hello5
Try it Yourself »
If you add a number and a string, the result will be a string!
JavaScript Comparison Operators

== equal to
=== equal value and equal type

!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Comparison operators are fully described in the JS Comparisons chapter.
JavaScript Logical Operators

&& logical and
|| logical or
! logical not
Logical operators are fully described in the JS Comparisons chapter.
JavaScript Type Operators

typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type
Type operators are fully described in the JS Type Conversion chapter.
JavaScript Bitwise Operators

Bit operators work on 32 bits numbers.
Any numeric operand in the operation is converted into a 32 bit number. The
result is converted back to a JavaScript number.
Operator Description Example Same as Result
& AND 5&1 0101 & 0001 0001
| OR 5|1 0101 | 0001 0101
~ NOT ~5 ~0101 1010
^ XOR 5^1 0101 ^ 0001 0100
<< Zero fill left shift 5 << 1 0101 << 1 1010
>> Signed right shift 5 >> 1 0101 >> 1 0010
>>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010
The examples above uses 4 bits unsigned examples. But JavaScript uses 32-bit
signed numbers.
Because of this, in JavaScript, ~ 5 will not return 10. It will return -6.
~00000000000000000000000000000101 will return
11111111111111111111111111111010
Bitwise operators are fully described in the JS Bitwise chapter.

Exercise:
Multiply 10 with 5, and alert the result.
alert(10 5);
Submit Answer »
Start the Exercise

JavaScript Arithmetic
JavaScript Arithmetic Operators

Arithmetic operators perform arithmetic on numbers (literals or variables).
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
Arithmetic Operations
A typical arithmetic operation operates on two numbers.
The two numbers can be literals:
Example
var x = 100 + 50;
Try it Yourself »
or variables:
Example
var x = a + b;
Try it Yourself »
or expressions:
Example
var x = (100 + 50) * a;
Try it Yourself »
Operators and Operands

The numbers (in an arithmetic operation) are called operands.
The operation (to be performed between the two operands) is defined by

an operator.
Operand Operator Operand
100 + 50
Adding
The addition operator (+) adds numbers:
Example
var x = 5;
var y = 2;
var z = x + y;
Try it Yourself »
Subtracting
The subtraction operator (-) subtracts numbers.
Example
var x = 5;
var y = 2;
var z = x - y;
Try it Yourself »
Multiplying
The multiplication operator (*) multiplies numbers.
Example
var x = 5;
var y = 2;
var z = x * y;
Try it Yourself »
Dividing
The division operator (/) divides numbers.
Example
var x = 5;
var y = 2;
var z = x / y;
Try it Yourself »
Remainder
The modulus operator (%) returns the division remainder.
Example
var x = 5;
var y = 2;
var z = x % y;
Try it Yourself »
In arithmetic, the division of two integers produces a quotient and

a remainder.
In mathematics, the result of a modulo operation is the remainder of an
arithmetic division.
Incrementing
The increment operator (++) increments numbers.
Example
var x = 5;
x++;
var z = x;
Try it Yourself »
Decrementing
The decrement operator (--) decrements numbers.
Example
var x = 5;
x--;
var z = x;
Try it Yourself »
Exponentiation
The exponentiation operator (**) raises the first operand to the power of the
second operand.
Example
var x = 5;
var z = x ** 2; // result is 25
Try it Yourself »
x ** y produces the same result as Math.pow(x,y):
Example
var x = 5;
var z = Math.pow(x,2); // result is 25
Try it Yourself »
Operator Precedence
Operator precedence describes the order in which operations are performed in
an arithmetic expression.
Example
var x = 100 + 50 * 3;
Try it Yourself »
Is the result of example above the same as 150 * 3, or is it the same as 100 +
150?
Is the addition or the multiplication done first?
As in traditional school mathematics, the multiplication is done first.
Multiplication (*) and division (/) have higher precedence than addition (+) and
subtraction (-).
And (as in school mathematics) the precedence can be changed by using
parentheses:
Example
var x = (100 + 50) * 3;
Try it Yourself »
When using parentheses, the operations inside the parentheses are computed
first.
When many operations have the same precedence (like addition and
subtraction), they are computed from left to right:
Example
var x = 100 + 50 - 3;
Try it Yourself »
JavaScript Operator Precedence Values

Pale red entries indicates ECMAScript 2015 (ES6) or higher.
Value Operator Description Example
20 () Expression grouping (3 + 4)

19 . Member person.name
19 [] Member person["name
19 () Function call myFunction()
19 new Create new Date()

17 ++ Postfix Increment i++
17 -- Postfix Decrement i--

16 ++ Prefix Increment ++i
16 -- Prefix Decrement --i
16 ! Logical not !(x==y)
16 typeof Type typeof x

15 ** Exponentiation (ES2016) 10 ** 2

14 * Multiplication 10 * 5
14 / Division 10 / 5
14 % Division Remainder 10 % 5

13 + Addition 10 + 5
13 - Subtraction 10 - 5

12 << Shift left x << 2

12 >> Shift right x >> 2
12 >>> Shift right (unsigned) x >>> 2

11 < Less than x < y
11 <= Less than or equal x <= y
11 > Greater than x>y
11 >= Greater than or equal x >= y
11 in Property in Object "PI" in Math
11 instanceof Instance of Object instanceof Arr

10 == Equal x == y
10 === Strict equal x === y
10 != Unequal x != y
10 !== Strict unequal x !== y

9 & Bitwise AND x&y
8 ^ Bitwise XOR x^y
7 | Bitwise OR x|y
6 && Logical AND x && y
5 || Logical OR x || y
4 ?: Condition ? "Yes" : "No"

3 += Assignment x += y
3 /= Assignment x /= y
3 -= Assignment x -= y
3 *= Assignment x *= y
3 %= Assignment x %= y
3 <<= Assignment x <<= y
3 >>= Assignment x >>= y
3 >>>= Assignment x >>>= y
3 &= Assignment x &= y
3 ^= Assignment x ^= y
3 |= Assignment x |= y

2 yield Pause Function yield x
1 , Comma 5,6
Expressions in parentheses are fully computed before the value is used in the
rest of the expression.

Exercise:
Divide 10 by 2, and alert the result.
alert(10 2);
Submit Answer »
Start the Exercise

JavaScript Assignment
JavaScript Assignment Operators

Assignment operators assign values to JavaScript variables.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
<<= x <<= y x = x << y

>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y
&= x &= y x=x&y
^= x ^= y x=x^y
|= x |= y x=x|y
**= x **= y x = x ** y
The **= operator is an experimental part of the ECMAScript 2016 proposal

(ES7). It is not stable across browsers. Do not use it.
Assignment Examples
The = assignment operator assigns a value to a variable.
Assignment
var x = 10;
Try it Yourself »
The += assignment operator adds a value to a variable.
Assignment
var x = 10;
x += 5;
Try it Yourself »
The -= assignment operator subtracts a value from a variable.
Assignment
var x = 10;
x -= 5;
Try it Yourself »
The *= assignment operator multiplies a variable.
Assignment
var x = 10;
x *= 5;
Try it Yourself »
The /= assignment divides a variable.
Assignment
var x = 10;
x /= 5;
Try it Yourself »
The %= assignment operator assigns a remainder to a variable.
Assignment
var x = 10;
x %= 5;
Try it Yourself »
Exercise:
Use the correct assignment operator that will result in x being 15 (same as x = x +
y).
x = 10;
y = 5;
x y;
Submit Answer »
Start the Exercise


JavaScript variables can hold many data types: numbers, strings, objects and
more:
var length = 16; // Number

var lastName = "Johnson"; // String
var x = {firstName:"John", lastName:"Doe"}; // 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:
var x = 16 + "Volvo";
Does it make any sense to add "Volvo" to sixteen? Will it produce an error or
will it produce a result?
JavaScript will treat the example above as:
var x = "16" + "Volvo";
When adding a number and a string, JavaScript will treat the number as a
string.
Example
var x = 16 + "Volvo";
Try it Yourself »
Example
var x = "Volvo" + 16;
Try it Yourself »
JavaScript evaluates expressions from left to right. Different sequences can

produce different results:
JavaScript:
var x = 16 + 4 + "Volvo";
Result:
20Volvo
Try it Yourself »
JavaScript:
var x = "Volvo" + 16 + 4;
Result:
Volvo164
Try it Yourself »
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. This means that the same variable can be used
to hold different data types:
Example
var x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
Try it yourself »
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:
Example
var carName1 = "Volvo XC60"; // Using double quotes
var carName2 = 'Volvo XC60'; // Using single quotes
Try it yourself »
You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:
Example
var answer1 = "It's alright"; // Single quote inside double
quotes
var answer2 = "He is called 'Johnny'"; // Single quotes inside double
quotes
var answer3 = 'He is called "Johnny"'; // Double quotes inside single
quotes
Try it yourself »
You will learn more about strings later in this tutorial.
JavaScript Numbers
JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:
Example
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
Try it yourself »
Extra large or extra small numbers can be written with scientific (exponential)
notation:
Example
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
Try it yourself »
You will learn more about numbers later in this tutorial.
JavaScript Booleans
Booleans can only have two values: true or false.
Example
var x = 5;
var y = 5;
var z = 6;
(x == y) // Returns true
(x == z) // Returns false
Try it Yourself »
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):
Example
var cars = ["Saab", "Volvo", "BMW"];
Try it Yourself »
Array indexes are zero-based, which means the first item is [0], second is [1],
and so on.
You will learn more about arrays later in this tutorial.
JavaScript Objects
JavaScript objects are written with curly braces {}.
Object properties are written as name:value pairs, separated by commas.
Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Try it Yourself »
The object (person) in the example above has 4 properties: firstName,

lastName, age, and eyeColor.
You will learn more about objects later in this tutorial.
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:
Example
typeof "" // Returns "string"
typeof "John" // Returns "string"
typeof "John Doe" // Returns "string"
Try it Yourself »
Example
typeof 0 // Returns "number"
typeof 314 // Returns "number"
typeof 3.14 // Returns "number"
typeof (3) // Returns "number"
typeof (3 + 4) // Returns "number"
Try it Yourself »
Undefined
In JavaScript, a variable without a value, has the value undefined. The type is
also undefined.
Example
var car; // Value is undefined, type is undefined
Try it Yourself »
Any variable can be emptied, by setting the value to undefined. The type will
also be undefined.
Example
car = undefined; // Value is undefined, type is undefined
Try it Yourself »
Empty Values
An empty value has nothing to do with undefined.
An empty string has both a legal value and a type.
Example
var car = ""; // The value is "", the typeof is "string"
Try it Yourself »
Null
In JavaScript null is "nothing". It is supposed to be something that doesn't
exist.
Unfortunately, in JavaScript, the data type of null is an object.
You can consider it a bug in JavaScript that typeof null is an object. It should

be null.
You can empty an object by setting it to null:
Example
person = null; // Now value is null, but type is still an object
Try it Yourself »
You can also empty an object by setting it to undefined:
Example
person = undefined; // Now both value and type is undefined
Try it Yourself »
Difference Between Undefined and Null

undefined and null are equal in value but different in type:
typeof undefined // undefined
typeof null // object
null === undefined // false

null == undefined // true
Try it Yourself »
Primitive Data
A primitive data value is a single simple data value with no additional properties
and methods.
The typeof operator can return one of these primitive types:
 string
 number
 boolean
 undefined
Example
typeof true // Returns "boolean"
typeof false // Returns "boolean"
typeof x // Returns "undefined" (if x has no value)
Try it Yourself »
Complex Data
The typeof operator can return one of two complex types:
 function
 object
The typeof operator returns "object" for objects, arrays, and null.

The typeof operator does not return "object" for functions.
Example
typeof {name:'John', age:34} // Returns "object"
typeof [1,2,3,4] // Returns "object" (not "array", see note
below)
typeof null // Returns "object"
typeof function myFunc(){} // Returns "function"
Try it Yourself »
The typeof operator returns "object" for arrays because in JavaScript arrays
are objects.

Exercise:
Use comments to describe the correct data type of the following variables:
var length = 16; //

var lastName = "Johnson"; //
var x = {
firstName: "John",
lastName: "Doe"
}; //
Submit Answer »
Start the Exercise

JavaScript Functions
A JavaScript function is a block of code designed to perform a particular

task.
A JavaScript function is executed when "something" invokes it (calls it).
Example
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
Try it Yourself »
JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
The parentheses may include parameter names separated by commas:

(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {

// code to be executed
}
Function parameters are listed inside the parentheses () in the function
definition.
Function arguments are the values received by the function when it is

invoked.
Inside the function, the arguments (the parameters) behave as local variables.
A Function is much the same as a Procedure or a Subroutine, in other

programming languages.
Function Invocation
The code inside the function will execute when "something" invokes (calls) the
function:
 When an event occurs (when a user clicks a button)

 When it is invoked (called) from JavaScript code
 Automatically (self invoked)
You will learn a lot more about function invocation later in this tutorial.
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to

execute the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back to
the "caller":
Example
Calculate the product of two numbers, and return the result:
var x = myFunction(4, 3); // Function is called, return value will end
up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
The result in x will be:
12
Try it Yourself »
Why Functions?
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce
different results.
Example
Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
Try it Yourself »
The () Operator Invokes the Function

Using the example above, toCelsius refers to the function object,
and toCelsius() refers to the function result.
Accessing a function without () will return the function definition instead of the
function result:
Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
Try it Yourself »
Functions Used as Variable Values

Functions can be used the same way as you use variables, in all types of
formulas, assignments, and calculations.
Example
Instead of using a variable to store the return value of a function:
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";
You can use the function directly, as a variable value:
var text = "The temperature is " + toCelsius(77) + " Celsius";

Try it Yourself »
You will learn a lot more about functions later in this tutorial.
Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Example
// code here can NOT use carName
// code here CAN use carName
}

Try it Yourself »
Since local variables are only recognized inside their functions, variables with
the same name can be used in different functions.
Local variables are created when a function starts, and deleted when the
function is completed.

Exercise:
Execute the function named myFunction.
alert("Hello World!");
}
;
Submit Answer »
Start the Exercise

JavaScript Objects
Real Life Objects, Properties, and Methods

In real life, a car is an object.
A car has properties like weight and color, and methods like start and stop:
Object Properties Met
car.name = Fiat car.s
car.model = 500 car.d
car.weight = 850kg car.b
car.color = white car.s
All cars have the same properties, but the property values differ from car to
car.
All cars have the same methods, but the methods are performed at different
times.
JavaScript Objects
You have already learned that JavaScript variables are containers for data
values.
This code assigns a simple value (Fiat) to a variable named car:
var car = "Fiat";
Try it Yourself »
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
var car = {type:"Fiat", model:"500", color:"white"};
Try it Yourself »
The values are written as name:value pairs (name and value separated by a

colon).
JavaScript objects are containers for named values called properties or

methods.
Object Definition
You define (and create) a JavaScript object with an object literal:
Example
Try it Yourself »
Spaces and line breaks are not important. An object definition can span multiple
lines:
Example
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Try it Yourself »
Object Properties
The name:values pairs in JavaScript objects are called properties:
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
Accessing Object Properties

You can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]
Example1
person.lastName;
Try it Yourself »
Example2
person["lastName"];
Try it Yourself »
Object Methods
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}
A method is a function stored as a property.
Example
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
The this Keyword
In a function definition, this refers to the "owner" of the function.
In the example above, this is the person object that "owns"

the fullName function.
In other words, this.firstName means the firstName property of this object.
Read more about the this keyword at JS this Keyword.
Accessing Object Methods

You access an object method with the following syntax:
objectName.methodName()
Example
name = person.fullName();
Try it Yourself »
If you access a method without the () parentheses, it will return the function

definition:
Example
name = person.fullName;
Try it Yourself »
Do Not Declare Strings, Numbers, and

Booleans as Objects!
When a JavaScript variable is declared with the keyword "new", the variable is
created as an object:
var x = new String(); // Declares x as a String object

var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object
Avoid String, Number, and Boolean objects. They complicate your code and slow

down execution speed.
You will learn more about objects later in this tutorial.

Exercise:
Alert "John" by extracting information from the person object.
var person = {
firstName: "John",
lastName: "Doe"
};
alert( );
Submit Answer »
Start the Exercise

JavaScript Events
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these

events.
HTML Events
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
 An HTML web page has finished loading

 An HTML input field was changed
 An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to

HTML elements.
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">
In the following example, an onclick attribute (with code), is added to

a <button> element:
Example
<button onclick="document.getElementById('demo').innerHTML = Date()">The
time is?</button>
Try it Yourself »
In the example above, the JavaScript code changes the content of the element
with id="demo".
In the next example, the code changes the content of its own element
(using this.innerHTML):
Example
<button onclick="this.innerHTML = Date()">The time is?</button>
Try it Yourself »
JavaScript code is often several lines long. It is more common to see event
attributes calling functions:
Example
<button onclick="displayDate()">The time is?</button>
Try it Yourself »
Common HTML Events

Here is a list of some common HTML events:
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
The list is much longer: W3Schools JavaScript Reference HTML DOM Events.
What can JavaScript Do?

Event handlers can be used to handle, and verify, user input, user actions, and
browser actions:
 Things that should be done every time a page loads

 Things that should be done when the page is closed
 Action that should be performed when a user clicks a button
 Content that should be verified when a user inputs data
 And more ...
Many different methods can be used to let JavaScript work with events:
 HTML event attributes can execute JavaScript code directly

 HTML event attributes can call JavaScript functions
 You can assign your own event handler functions to HTML elements
 You can prevent events from being sent or being handled
 And more ...
You will learn a lot more about events and event handlers in the HTML DOM
chapters.

Exercise:
The <button> element should do something when someone clicks on it. Try to fix it!
<button ="alert('Hello')">Click me.</button>
Submit Answer »
Start the Exercise

JavaScript Strings
JavaScript strings are used for storing and manipulating text.
JavaScript Strings
A JavaScript string is zero or more characters written inside quotes.
Example
var x = "John Doe";
Try it Yourself »
You can use single or double quotes:
Example
var carName1 = "Volvo XC60"; // Double quotes
var carName2 = 'Volvo XC60'; // Single quotes
Try it Yourself »
You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:
Example
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
Try it Yourself »
String Length
To find the length of a string, use the built-in length property:
Example
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
Try it Yourself »
Escape Character
Because strings must be written within quotes, JavaScript will misunderstand
this string:
var x = "We are the so-called "Vikings" from the north.";
The string will be chopped to "We are the so-called ".
The solution to avoid this problem, is to use the backslash escape character.
The backslash (\) escape character turns special characters into string
characters:
Code Result Description
\' ' Single quote

\" " Double quote
\\ \ Backslash
The sequence \" inserts a double quote in a string:
Example
var x = "We are the so-called \"Vikings\" from the north.";
Try it Yourself »
The sequence \' inserts a single quote in a string:
Example
var x = 'It\'s alright.';
Try it Yourself »
The sequence \\ inserts a backslash in a string:
Example
var x = "The character \\ is called backslash.";
Try it Yourself »
Six other escape sequences are valid in JavaScript:
Code Result
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t Horizontal Tabulator
\v Vertical Tabulator
The 6 escape characters above were originally designed to control typewriters,

teletypes, and fax machines. They do not make any sense in HTML.
Breaking Long Code Lines

For best readability, programmers often like to avoid code lines longer than 80
characters.
If a JavaScript statement does not fit on one line, the best place to break it is
after an operator:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly!";
Try it Yourself »
You can also break up a code line within a text string with a single backslash:
Example
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
Try it Yourself »
The \ method is not the preferred method. It might not have universal support.
Some browsers do not allow spaces behind the \ character.
A safer way to break up a string, is to use string addition:
Example
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
Try it Yourself »
You cannot break up a code line with a backslash:
Example
document.getElementById("demo").innerHTML = \
"Hello Dolly!";
Try it Yourself »
Strings Can be Objects

Normally, JavaScript strings are primitive values, created from literals:
var firstName = "John";
But strings can also be defined as objects with the keyword new:
var firstName = new String("John");
Example
var x = "John";
var y = new String("John");
// typeof x will return string
// typeof y will return object
Try it Yourself »
Don't create strings as objects. It slows down execution speed.

The new keyword complicates the code. This can produce some unexpected
results:
When using the == operator, equal strings are equal:
Example
var x = "John";
// (x == y) is true because x and y have equal values
Try it Yourself »
When using the === operator, equal strings are not equal, because

the === operator expects equality in both type and value.
Example
var x = "John";
// (x === y) is false because x and y have different types (string and

object)
Try it Yourself »
Or even worse. Objects cannot be compared:
Example
var x = new String("John");
// (x == y) is false because x and y are different objects
Try it Yourself »
Example
var x = new String("John");
// (x === y) is false because x and y are different objects
Try it Yourself »
Note the difference between (x==y) and (x===y).

Comparing two JavaScript objects will always return false.

Exercise:
Use the length property to alert the length of txt.
var txt = "Hello World!";

var x = ;
alert(x);
Submit Answer »
Start the Exercise

JavaScript String Methods
String methods help you to work with strings.
String Methods and Properties

Primitive values, like "John Doe", cannot have properties or methods (because
they are not objects).
But with JavaScript, methods and properties are also available to primitive
values, because JavaScript treats primitive values as objects when executing
methods and properties.
String Length
The length property returns the length of a string:
Example
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
Try it Yourself »
Finding a String in a String

The indexOf() method returns the index of (the position of) the first occurrence
of a specified text in a string:
Example
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
Try it Yourself »
JavaScript counts positions from zero.
0 is the first position in a string, 1 is the second, 2 is the third ...
The lastIndexOf() method returns the index of the last occurrence of a specified

text in a string:
Example
var pos = str.lastIndexOf("locate");
Try it Yourself »
Both indexOf(), and lastIndexOf() return -1 if the text is not found.
Example
var pos = str.lastIndexOf("John");
Try it Yourself »
Both methods accept a second parameter as the starting position for the
search:
Example
var pos = str.indexOf("locate", 15);
Try it Yourself »
The lastIndexOf() methods searches backwards (from the end to the beginning),

meaning: if the second parameter is 15, the search starts at position 15, and
searches to the beginning of the string.
Example
var pos = str.lastIndexOf("locate", 15);
Try it Yourself »
Searching for a String in a String
The search() method searches a string for a specified value and returns the
position of the match:
Example
var pos = str.search("locate");
Try it Yourself »
Did You Notice?

The two methods, indexOf() and search(), are equal?
They accept the same arguments (parameters), and return the same value?
The two methods are NOT equal. These are the differences:
 The search() method cannot take a second start position argument.

 The indexOf() method cannot take powerful search values (regular
expressions).
You will learn more about regular expressions in a later chapter.
Extracting String Parts

There are 3 methods for extracting a part of a string:
 slice(start, end)
 substring(start, end)
 substr(start, length)
The slice() Method
slice() extracts a part of a string and returns the extracted part in a new string.
The method takes 2 parameters: the start position, and the end position (end
not included).
This example slices out a portion of a string from position 7 to position 12 (13-
1):
Example
var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);
The result of res will be:
Banana
Try it Yourself »
Remember: JavaScript counts positions from zero. First position is 0.
If a parameter is negative, the position is counted from the end of the string.
This example slices out a portion of a string from position -12 to position -6:
Example
var res = str.slice(-12, -6);
Banana
Try it Yourself »
If you omit the second parameter, the method will slice out the rest of the
string:
Example
var res = str.slice(7);
Try it Yourself »
or, counting from the end:
Example
var res = str.slice(-12);
Try it Yourself »
Negative positions do not work in Internet Explorer 8 and earlier.
The substring() Method

substring() is similar to slice().
The difference is that substring() cannot accept negative indexes.
Example
var res = str.substring(7, 13);
Banana
Try it Yourself »
If you omit the second parameter, substring() will slice out the rest of the string.
The substr() Method

substr() is similar to slice().
The difference is that the second parameter specifies the length of the

extracted part.
Example
var res = str.substr(7, 6);
Banana
Try it Yourself »
If you omit the second parameter, substr() will slice out the rest of the string.
Example
var res = str.substr(7);
Banana, Kiwi
Try it Yourself »
If the first parameter is negative, the position counts from the end of the string.
Example
var res = str.substr(-4);
Kiwi
Try it Yourself »
Replacing String Content

The replace() method replaces a specified value with another value in a string:
Example
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
Try it Yourself »
The replace() method does not change the string it is called on. It returns a new
string.
By default, the replace() method replaces only the first match:
Example
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3Schools");
Try it Yourself »
By default, the replace() method is case sensitive. Writing MICROSOFT (with

upper-case) will not work:
Example
var n = str.replace("MICROSOFT", "W3Schools");
Try it Yourself »
To replace case insensitive, use a regular expression with an /i flag

(insensitive):
Example
var n = str.replace(/MICROSOFT/i, "W3Schools");
Try it Yourself »
Note that regular expressions are written without quotes.
To replace all matches, use a regular expression with a /g flag (global

match):
Example
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3Schools");
Try it Yourself »
You will learn a lot more about regular expressions in the chapter JavaScript
Regular Expressions.
Converting to Upper and Lower Case

A string is converted to upper case with toUpperCase():
Example
var text1 = "Hello World!"; // String
var text2 = text1.toUpperCase(); // text2 is text1 converted to upper
Try it Yourself »
A string is converted to lower case with toLowerCase():
Example
var text1 = "Hello World!"; // String
var text2 = text1.toLowerCase(); // text2 is text1 converted to lower
Try it Yourself »
The concat() Method

concat() joins two or more strings:
Example
var text1 = "Hello";
var text2 = "World";
var text3 = text1.concat(" ", text2);
Try it Yourself »
The concat() method can be used instead of the plus operator. These two lines
do the same:
Example
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");
All string methods return a new string. They don't modify the original string.
Formally said: Strings are immutable: Strings cannot be changed, only
replaced.
String.trim()
The trim() method removes whitespace from both sides of a string:
Example
var str = " Hello World! ";
alert(str.trim());
Try it Yourself »
The trim() method is not supported in Internet Explorer 8 or lower.
If you need to support IE 8, you can use replace() with a regular expression

instead:
Example
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
Try it Yourself »
You can also use the replace solution above to add a trim function to the
JavaScript String.prototype:
Example
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
alert(str.trim());
Try it Yourself »
Extracting String Characters
There are 3 methods for extracting string characters:
 charAt(position)
 charCodeAt(position)
 Property access [ ]
The charAt() Method

The charAt() method returns the character at a specified index (position) in a
string:
Example
var str = "HELLO WORLD";
str.charAt(0); // returns H
Try it Yourself »
The charCodeAt() Method

The charCodeAt() method returns the unicode of the character at a specified
index in a string:
The method returns a UTF-16 code (an integer between 0 and 65535).
Example
str.charCodeAt(0); // returns 72
Try it Yourself »
Property Access
ECMAScript 5 (2009) allows property access [ ] on strings:
Example
str[0]; // returns H
Try it Yourself »
Property access might be a little unpredictable:
 It does not work in Internet Explorer 7 or earlier

 It makes strings look like arrays (but they are not)
 If no character is found, [ ] returns undefined, while charAt() returns an
empty string.
 It is read only. str[0] = "A" gives no error (but does not work!)
Example
str[0] = "A"; // Gives no error, but does not work
str[0]; // returns H
Try it Yourself »
If you want to work with a string as an array, you can convert it to an array.
Converting a String to an Array

A string can be converted to an array with the split() method:
Example
var txt = "a,b,c,d,e"; // String
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
Try it Yourself »
If the separator is omitted, the returned array will contain the whole string in
index [0].
If the separator is "", the returned array will be an array of single characters:
Example
var txt = "Hello"; // String
txt.split(""); // Split in characters
Try it Yourself »
Complete String Reference

For a complete reference, go to our Complete JavaScript String Reference.
The reference contains descriptions and examples of all string properties and
methods.

Exercise:
Find the position of the character h in the string txt.
var txt = "abcdefghijklm";
var pos = txt. ;
Submit Answer »
Start the Exercise

JavaScript Numbers
JavaScript has only one type of number. Numbers can be written with or
without decimals.
Example
var x = 3.14; // A number with decimals
var y = 3; // A number without decimals
Try it yourself »
Extra large or extra small numbers can be written with scientific (exponent)
notation:
Example
var x = 123e5; // 12300000
var y = 123e-5; // 0.00123
Try it yourself »
JavaScript Numbers are Always 64-bit

Floating Point
Unlike many other programming languages, JavaScript does not define different
types of numbers, like integers, short, long, floating-point etc.
JavaScript numbers are always stored as double precision floating point

numbers, following the international IEEE 754 standard.
This format stores numbers in 64 bits, where the number (the fraction) is stored
in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63:
Value (aka Fraction/Mantissa) Exponent
52 bits (0 - 51) 11 bits (52 - 62)
Precision
Integers (numbers without a period or exponent notation) are accurate up to 15
digits.
Example
var x = 999999999999999; // x will be 999999999999999
var y = 9999999999999999; // y will be 10000000000000000
Try it Yourself »
The maximum number of decimals is 17, but floating point arithmetic is not
always 100% accurate:
Example
var x = 0.2 + 0.1; // x will be 0.30000000000000004
Try it yourself »
To solve the problem above, it helps to multiply and divide:
Example
var x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3
Try it Yourself »
Adding Numbers and Strings
WARNING !!
JavaScript uses the + operator for both addition and concatenation.
Numbers are added. Strings are concatenated.
If you add two numbers, the result will be a number:
Example
var x = 10;
var y = 20;
var z = x + y; // z will be 30 (a number)
Try it Yourself »
If you add two strings, the result will be a string concatenation:
Example
var x = "10";
var y = "20";
var z = x + y; // z will be 1020 (a string)
Try it Yourself »
If you add a number and a string, the result will be a string concatenation:
Example
var x = 10;
var y = "20";
Try it Yourself »
If you add a string and a number, the result will be a string concatenation:
Example
var x = "10";
var y = 20;
Try it Yourself »
A common mistake is to expect this result to be 30:
Example
var x = 10;
var y = 20;
var z = "The result is: " + x + y;
Try it Yourself »
A common mistake is to expect this result to be 102030:
Example
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;
Try it Yourself »
The JavaScript interpreter works from left to right.
First 10 + 20 is added because x and y are both numbers.
Then 30 + "30" is concatenated because z is a string.
Numeric Strings
JavaScript strings can have numeric content:
var x = 100; // x is a number
var y = "100"; // y is a string

JavaScript will try to convert strings to numbers in all numeric operations:
This will work:
var x = "100";
var y = "10";
var z = x / y; // z will be 10
Try it Yourself »
This will also work:
var x = "100";
var y = "10";
var z = x * y; // z will be 1000
Try it Yourself »
And this will work:
var x = "100";
var y = "10";
var z = x - y; // z will be 90
Try it Yourself »
But this will not work:
var x = "100";
var y = "10";
var z = x + y; // z will not be 110 (It will be 10010)
Try it Yourself »
In the last example JavaScript uses the + operator to concatenate the strings.
NaN - Not a Number

NaN is a JavaScript reserved word indicating that a number is not a legal
number.
Trying to do arithmetic with a non-numeric string will result in NaN (Not a
Number):
Example
var x = 100 / "Apple"; // x will be NaN (Not a Number)
Try it Yourself »
However, if the string contains a numeric value , the result will be a number:
Example
var x = 100 / "10"; // x will be 10
Try it Yourself »
You can use the global JavaScript function isNaN() to find out if a value is a
number:
Example
var x = 100 / "Apple";
isNaN(x); // returns true because x is Not a Number
Try it Yourself »
Watch out for NaN. If you use NaN in a mathematical operation, the result will also
be NaN:
Example
var x = NaN;
var y = 5;
var z = x + y; // z will be NaN
Try it Yourself »
Or the result might be a concatenation:
Example
var x = NaN;
var y = "5";
var z = x + y; // z will be NaN5
Try it Yourself »
NaN is a number: typeof NaN returns number:
Example
typeof NaN; // returns "number"
Try it Yourself »
Infinity
Infinity (or -Infinity) is the value JavaScript will return if you calculate a
number outside the largest possible number.
Example
var myNumber = 2;
while (myNumber != Infinity) { // Execute until Infinity
myNumber = myNumber * myNumber;
}
Try it yourself »
Division by 0 (zero) also generates Infinity:
Example
var x = 2 / 0; // x will be Infinity
var y = -2 / 0; // y will be -Infinity
Try it Yourself »
Infinity is a number: typeof Infinity returns number.
Example
typeof Infinity; // returns "number"
Try it Yourself »
Hexadecimal
JavaScript interprets numeric constants as hexadecimal if they are preceded by
0x.
Example
var x = 0xFF; // x will be 255
Try it Yourself »
Never write a number with a leading zero (like 07).

Some JavaScript versions interpret numbers as octal if they are written with a
leading zero.
By default, JavaScript displays numbers as base 10 decimals.
But you can use the toString() method to output numbers from base 2 to base

36.
Hexadecimal is base 16. Decimal is base 10. Octal is base 8. Binary is base
2.
Example
var myNumber = 32;
myNumber.toString(10); // returns 32
Try it Yourself »
Numbers Can be Objects

Normally JavaScript numbers are primitive values created from literals:
var x = 123;
But numbers can also be defined as objects with the keyword new:
var y = new Number(123);
Example
var x = 123;
// typeof x returns number

// typeof y returns object
Try it yourself »
Do not create Number objects. It slows down execution speed.

results:
When using the == operator, equal numbers are equal:
Example
var x = 500;
Try it Yourself »
When using the === operator, equal numbers are not equal, because

Example
var x = 500;
// (x === y) is false because x and y have different types
Try it Yourself »

Example
var x = new Number(500);
// (x == y) is false because objects cannot be compared
Try it Yourself »

JavaScript Number Methods
Number methods help you work with numbers.
Number Methods and Properties

Primitive values (like 3.14 or 2014), cannot have properties and methods
(because they are not objects).
But with JavaScript, methods and properties are also available to primitive
values, because JavaScript treats primitive values as objects when executing
methods and properties.
The toString() Method

The toString() method returns a number as a string.
All number methods can be used on any type of numbers (literals, variables, or
expressions):
Example
var x = 123;
x.toString(); // returns 123 from variable x
(123).toString(); // returns 123 from literal 123
(100 + 23).toString(); // returns 123 from expression 100 + 23
Try it Yourself »
The toExponential() Method
toExponential() returns a string, with a number rounded and written using
exponential notation.
A parameter defines the number of characters behind the decimal point:
Example
var x = 9.656;
x.toExponential(2); // returns 9.66e+0
Try it yourself »
The parameter is optional. If you don't specify it, JavaScript will not round the
number.
The toFixed() Method

toFixed() returns a string, with the number written with a specified number of
decimals:
Example
var x = 9.656;
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
Try it yourself »
toFixed(2) is perfect for working with money.
The toPrecision() Method

toPrecision() returns a string, with a number written with a specified length:
Example
var x = 9.656;
x.toPrecision(); // returns 9.656
x.toPrecision(2); // returns 9.7
Try it Yourself »
The valueOf() Method

valueOf() returns a number as a number.
Example
var x = 123;
x.valueOf(); // returns 123 from variable x
(123).valueOf(); // returns 123 from literal 123
(100 + 23).valueOf(); // returns 123 from expression 100 + 23
Try it Yourself »
In JavaScript, a number can be a primitive value (typeof = number) or an

object (typeof = object).
The valueOf() method is used internally in JavaScript to convert Number objects

to primitive values.
There is no reason to use it in your code.
All JavaScript data types have a valueOf() and a toString() method.
Converting Variables to Numbers

There are 3 JavaScript methods that can be used to convert variables to
numbers:
 The Number() method
 The parseInt() method
 The parseFloat() method
These methods are not number methods, but global JavaScript methods.
Global JavaScript Methods

JavaScript global methods can be used on all JavaScript data types.
These are the most relevant methods, when working with numbers:
Method Description
Number() Returns a number, converted from its argument.
parseFloat() Parses its argument and returns a floating point number
parseInt() Parses its argument and returns an integer
The Number() Method

Number() can be used to convert JavaScript variables to numbers:
Example
Number(true); // returns 1
Number(false); // returns 0
Number("10"); // returns 10
Number(" 10"); // returns 10
Number("10 "); // returns 10
Number(" 10 "); // returns 10
Number("10.33"); // returns 10.33
Number("10,33"); // returns NaN
Number("10 33"); // returns NaN
Number("John"); // returns NaN
Try it Yourself »
If the number cannot be converted, NaN (Not a Number) is returned.
The Number() Method Used on Dates

Number() can also convert a date to a number:
Example
Number(new Date("2017-09-30")); // returns 1506729600000
Try it Yourself »
The Number() method above returns the number of milliseconds since 1.1.1970.
The parseInt() Method

parseInt() parses a string and returns a whole number. Spaces are allowed. Only
the first number is returned:
Example
parseInt("10"); // returns 10
parseInt("10.33"); // returns 10
parseInt("10 20 30"); // returns 10
parseInt("10 years"); // returns 10
parseInt("years 10"); // returns NaN
Try it yourself »

The parseFloat() Method
parseFloat() parses a string and returns a number. Spaces are allowed. Only the
first number is returned:
Example
parseFloat("10"); // returns 10
parseFloat("10.33"); // returns 10.33
parseFloat("10 20 30"); // returns 10
parseFloat("10 years"); // returns 10
parseFloat("years 10"); // returns NaN
Try it yourself »
Number Properties
Property Description
MAX_VALUE Returns the largest number possible in JavaScript
MIN_VALUE Returns the smallest number possible in JavaScript
POSITIVE_INFINITY Represents infinity (returned on overflow)
NEGATIVE_INFINITY Represents negative infinity (returned on overflow)

NaN Represents a "Not-a-Number" value
JavaScript MIN_VALUE and MAX_VALUE

MAX_VALUE returns the largest possible number in JavaScript.
Example
var x = Number.MAX_VALUE;
Try it yourself »
MIN_VALUE returns the lowest possible number in JavaScript.
Example
var x = Number.MIN_VALUE;
Try it yourself »
JavaScript POSITIVE_INFINITY
Example
var x = Number.POSITIVE_INFINITY;
Try it yourself »
POSITIVE_INFINITY is returned on overflow:
Example
var x = 1 / 0;
Try it yourself »
JavaScript NEGATIVE_INFINITY
Example
var x = Number.NEGATIVE_INFINITY;
Try it yourself »
NEGATIVE_INFINITY is returned on overflow:
Example
var x = -1 / 0;
Try it yourself »
JavaScript NaN - Not a Number

Example
var x = Number.NaN;
Try it yourself »
NaN is a JavaScript reserved word indicating that a number is not a legal

number.
Trying to do arithmetic with a non-numeric string will result in NaN (Not a

Number):
Example
var x = 100 / "Apple"; // x will be NaN (Not a Number)
Try it Yourself »
Number Properties Cannot be Used on

Variables
Number properties belongs to the JavaScript's number object wrapper
called Number.
These properties can only be accessed as Number.MAX_VALUE.
Using myNumber.MAX_VALUE, where myNumber is a variable, expression, or

value, will return undefined:
Example
var x = 6;
var y = x.MAX_VALUE; // y becomes undefined
Try it yourself »
Complete JavaScript Number Reference

For a complete reference, go to our Complete JavaScript Number Reference.
The reference contains descriptions and examples of all Number properties and
methods.
JavaScript Arrays
JavaScript arrays are used to store multiple values in a single variable.
Example
Try it Yourself »
What is an Array?
An array is a special variable, which can hold more than one value at a time.
If you have a list of items (a list of car names, for example), storing the cars in
single variables could look like this:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
However, what if you want to loop through the cars and find a specific one? And
what if you had not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the
values by referring to an index number.
Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
var array_name = [item1, item2, ...];

Example
Try it Yourself »
Spaces and line breaks are not important. A declaration can span multiple lines:
Example
var cars = [
"Saab",
"Volvo",
"BMW"
];
Try it Yourself »
Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:
Example
var cars = new Array("Saab", "Volvo", "BMW");
Try it Yourself »
The two examples above do exactly the same. There is no need to use new
Array().
For simplicity, readability and execution speed, use the first one (the array
literal method).
Access the Elements of an Array

You access an array element by referring to the index number.
This statement accesses the value of the first element in cars:
var name = cars[0];
Example
document.getElementById("demo").innerHTML = cars[0];
Try it Yourself »
Note: Array indexes start with 0.
[0] is the first element. [1] is the second element.
Changing an Array Element

This statement changes the value of the first element in cars:
cars[0] = "Opel";
Example
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];
Try it Yourself »
Access the Full Array

With JavaScript, the full array can be accessed by referring to the array name:
Example
document.getElementById("demo").innerHTML = cars;
Try it Yourself »
Arrays are Objects
Arrays are a special type of objects. The typeof operator in JavaScript returns
"object" for arrays.
But, JavaScript arrays are best described as arrays.
Arrays use numbers to access its "elements". In this

example, person[0] returns John:
Array:
var person = ["John", "Doe", 46];
Try it Yourself »
Objects use names to access its "members". In this

example, person.firstName returns John:
Object:
var person = {firstName:"John", lastName:"Doe", age:46};
Try it Yourself »
Array Elements Can Be Objects

JavaScript variables can be objects. Arrays are special kinds of objects.
Because of this, you can have variables of different types in the same Array.
You can have objects in an Array. You can have functions in an Array. You can
have arrays in an Array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Array Properties and Methods

The real strength of JavaScript arrays are the built-in array properties and
methods:
Examples
var x = cars.length; // The length property returns the number of
elements
var y = cars.sort(); // The sort() method sorts arrays
Array methods are covered in the next chapters.
The length Property

The length property of an array returns the length of an array (the number of
array elements).
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Try it Yourself »
The length property is always one more than the highest array index.
Accessing the First Array Element

Example
fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];
Try it Yourself »
Accessing the Last Array Element

Example
var last = fruits[fruits.length - 1];
Try it Yourself »
Looping Array Elements

The safest way to loop through an array, is using a for loop:
Example
var fruits, text, fLen, i;
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
Try it Yourself »
You can also use the Array.forEach() function:
Example
var fruits, text;
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
Try it Yourself »
Adding Array Elements

The easiest way to add a new element to an array is using the push() method:
Example
fruits.push("Lemon"); // adds a new element (Lemon) to fruits
Try it Yourself »
New element can also be added to an array using the length property:
Example
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to
fruits
Try it Yourself »
WARNING !
Adding elements with high indexes can create undefined "holes" in an array:
Example
fruits[6] = "Lemon"; // adds a new element (Lemon) to fruits
Try it Yourself »
Associative Arrays
Many programming languages support arrays with named indexes.
Arrays with named indexes are called associative arrays (or hashes).
JavaScript does not support arrays with named indexes.
In JavaScript, arrays always use numbered indexes.
Example
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length will return 3
var y = person[0]; // person[0] will return "John"
Try it Yourself »
WARNING !!
If you use named indexes, JavaScript will redefine the array to a standard
object.
After that, some array methods and properties will produce incorrect results.
Example:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will return 0
var y = person[0]; // person[0] will return undefined
Try it Yourself »
The Difference Between Arrays and Objects

In JavaScript, arrays use numbered indexes.
In JavaScript, objects use named indexes.
Arrays are a special kind of objects, with numbered indexes.
When to Use Arrays. When to use Objects.

 JavaScript does not support associative arrays.
 You should use objects when you want the element names to be strings
(text).
 You should use arrays when you want the element names to
be numbers.
Avoid new Array()
There is no need to use the JavaScript's built-in array constructor new Array().
Use [] instead.
These two different statements both create a new empty array named points:
var points = new Array(); // Bad

var points = []; // Good
These two different statements both create a new array containing 6 numbers:
var points = new Array(40, 100, 1, 5, 25, 10); // Bad

var points = [40, 100, 1, 5, 25, 10]; // Good
Try it Yourself »
The new keyword only complicates the code. It can also produce some

unexpected results:
var points = new Array(40, 100); // Creates an array with two elements

(40 and 100)
What if I remove one of the elements?
var points = new Array(40); // Creates an array with 40 undefined

elements !!!!!
Try it Yourself »
How to Recognize an Array

A common question is: How do I know if a variable is an array?
The problem is that the JavaScript operator typeof returns "object":
typeof fruits; // returns object

Try it Yourself »
The typeof operator returns object because a JavaScript array is an object.

Solution 1:
To solve this problem ECMAScript 5 defines a new method Array.isArray():
Array.isArray(fruits); // returns true

Try it Yourself »
The problem with this solution is that ECMAScript 5 is not supported in older
browsers.
Solution 2:
To solve this problem you can create your own isArray() function:
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
Try it Yourself »
The function above always returns true if the argument is an array.
Or more precisely: it returns true if the object prototype contains the word
"Array".
Solution 3:
The instanceof operator returns true if an object is created by a given
constructor:
fruits instanceof Array; // returns true

Try it Yourself »

Exercise:
Get the value "Volvo" from the cars array.
var x = ;
Submit Answer »
Start the Exercise

JavaScript Array Methods
Converting Arrays to Strings

The JavaScript method toString() converts an array to a string of (comma
separated) array values.
Example
document.getElementById("demo").innerHTML = fruits.toString();
Result:
Banana,Orange,Apple,Mango
Try it Yourself »
The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator:
Example
document.getElementById("demo").innerHTML = fruits.join(" * ");
Result:
Banana * Orange * Apple * Mango
Try it Yourself »
Popping and Pushing

When you work with arrays, it is easy to remove elements and add new
elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.
Popping
The pop() method removes the last element from an array:
Example
fruits.pop(); // Removes the last element ("Mango") from
fruits
Try it Yourself »
The pop() method returns the value that was "popped out":
Example
var x = fruits.pop(); // the value of x is "Mango"
Try it Yourself »
Pushing
The push() method adds a new element to an array (at the end):
Example
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits
Try it Yourself »
The push() method returns the new array length:
Example
var x = fruits.push("Kiwi"); // the value of x is 5
Try it Yourself »
Shifting Elements
Shifting is equivalent to popping, working on the first element instead of the
last.
The shift() method removes the first array element and "shifts" all other
elements to a lower index.
Example
fruits.shift(); // Removes the first element "Banana" from
fruits
Try it Yourself »
The shift() method returns the string that was "shifted out":
Example
var x = fruits.shift(); // the value of x is "Banana"
Try it Yourself »
The unshift() method adds a new element to an array (at the beginning), and

"unshifts" older elements:
Example
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits
Try it Yourself »
The unshift() method returns the new array length.
Example
fruits.unshift("Lemon"); // Returns 5
Try it Yourself »
Changing Elements
Array elements are accessed using their index number:
Array indexes start with 0. [0] is the first array element, [1] is the second, [2]
is the third ...
Example
fruits[0] = "Kiwi"; // Changes the first element of fruits to
"Kiwi"
Try it Yourself »
The length property provides an easy way to append a new element to an array:
Example
fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruits
Try it Yourself »
Deleting Elements
Since JavaScript arrays are objects, elements can be deleted by using the
JavaScript operator delete:
Example
delete fruits[0]; // Changes the first element in fruits
to undefined
Try it Yourself »
Using delete may leave undefined holes in the array. Use pop() or shift()

instead.
Splicing an Array
The splice() method can be used to add new items to an array:
Example
fruits.splice(2, 0, "Lemon", "Kiwi");
Try it Yourself »
The first parameter (2) defines the position where new elements should

be added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to
be added.
The splice() method returns an array with the deleted items:
Example
fruits.splice(2, 2, "Lemon", "Kiwi");
Try it Yourself »
Using splice() to Remove Elements
With clever parameter setting, you can use splice() to remove elements without
leaving "holes" in the array:
Example
fruits.splice(0, 1); // Removes the first element of fruits
Try it Yourself »
The first parameter (0) defines the position where new elements should
be added (spliced in).
The second parameter (1) defines how many elements should be removed.
The rest of the parameters are omitted. No new elements will be added.
Merging (Concatenating) Arrays

The concat() method creates a new array by merging (concatenating) existing
arrays:
Example (Merging Two Arrays)

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); // Concatenates (joins)
myGirls and myBoys
Try it Yourself »
The concat() method does not change the existing arrays. It always returns a

new array.
The concat() method can take any number of array arguments:

Example (Merging Three Arrays)
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // Concatenates arr1 with
arr2 and arr3
Try it Yourself »
The concat() method can also take strings as arguments:
Example (Merging an Array with Values)

var arr1 = ["Emil", "Tobias", "Linus"];
var myChildren = arr1.concat("Peter");
Try it Yourself »
Slicing an Array
The slice() method slices out a piece of an array into a new array.
This example slices out a part of an array starting from array element 1
("Orange"):
Example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
Try it Yourself »
The slice() method creates a new array. It does not remove any elements from
the source array.
This example slices out a part of an array starting from array element 3
("Apple"):
Example
Try it Yourself »
The slice() method can take two arguments like slice(1, 3).
The method then selects elements from the start argument, and up to (but not
including) the end argument.
Example
var citrus = fruits.slice(1, 3);
Try it Yourself »
If the end argument is omitted, like in the first examples, the slice() method

slices out the rest of the array.
Example
Try it Yourself »
Automatic toString()
JavaScript automatically converts an array to a comma separated string when a
primitive value is expected.
This is always the case when you try to output an array.
These two examples will produce the same result:
Example
document.getElementById("demo").innerHTML = fruits.toString();
Try it Yourself »
Example
document.getElementById("demo").innerHTML = fruits;
Try it Yourself »
All JavaScript objects have a toString() method.
Finding Max and Min Values in an Array

There are no built-in functions for finding the highest or lowest value in a
JavaScript array.
You will learn how you solve this problem in the next chapter of this tutorial.
Sorting Arrays
Sorting arrays are covered in the next chapter of this tutorial.
Complete Array Reference

For a complete reference, go to our Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and
methods.

Exercise:
Use the correct Array method to remove the last item of the fruits array.
var fruits = ["Banana", "Orange", "Apple"];

;
Submit Answer »
Start the Exercise

JavaScript Sorting Arrays
Sorting an Array
The sort() method sorts an array alphabetically:
Example
fruits.sort(); // Sorts the elements of fruits
Try it Yourself »
Reversing an Array
The reverse() method reverses the elements in an array.
You can use it to sort an array in descending order:
Example
fruits.sort(); // First sort the elements of fruits
fruits.reverse(); // Then reverse the order of the elements
Try it Yourself »
Numeric Sort
By default, the sort() function sorts values as strings.
This works well for strings ("Apple" comes before "Banana").
However, if numbers are sorted as strings, "25" is bigger than "100", because
"2" is bigger than "1".
Because of this, the sort() method will produce incorrect result when sorting

numbers.
You can fix this by providing a compare function:
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
Try it Yourself »
Use the same trick to sort an array descending:
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
Try it Yourself »
The Compare Function

The purpose of the compare function is to define an alternative sort order.
The compare function should return a negative, zero, or positive value,

depending on the arguments:
function(a, b){return a - b}
When the sort() function compares two values, it sends the values to the

compare function, and sorts the values according to the returned (negative,
zero, positive) value.
If the result is negative a is sorted before b.
If the result is positive b is sorted before a.
If the result is 0 no changes are done with the sort order of the two values.
Example:
The compare function compares all the values in the array, two values at a
time (a, b).
When comparing 40 and 100, the sort() method calls the compare function(40,

100).
The function calculates 40 - 100 (a - b), and since the result is negative (-60),
the sort function will sort 40 as a value lower than 100.
You can use this code snippet to experiment with numerically and alphabetically
sorting:
<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
}
function myFunction2() {
}
</script>
Try it Yourself »
Sorting an Array in Random Order
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
Try it Yourself »
Find the Highest (or Lowest) Array Value

There are no built-in functions for finding the max or min value in an array.
However, after you have sorted an array, you can use the index to obtain the
highest and lowest values.
Sorting ascending:
Example
var points = [40, 100, 1, 5, 25, 10];
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value
Try it Yourself »
Sorting descending:
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value
Try it Yourself »
Sorting a whole array is a very inefficient method if you only want to find the
highest (or lowest) value.
Using Math.max() on an Array
You can use Math.max.apply to find the highest number in an array:
Example
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
Try it Yourself »
Math.max.apply(null, [1, 2, 3]) is equivalent to Math.max(1, 2, 3).
Using Math.min() on an Array

You can use Math.min.apply to find the lowest number in an array:
Example
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
Try it Yourself »
Math.min.apply(null, [1, 2, 3]) is equivalent to Math.min(1, 2, 3).
My Min / Max JavaScript Methods

The fastest solution is to use a "home made" method.
This function loops through an array comparing each value with the highest
value found:
Example (Find Max)
function myArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
Try it Yourself »
This function loops through an array comparing each value with the lowest
value found:
Example (Find Min)

function myArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
Try it Yourself »
Sorting Object Arrays

JavaScript arrays often contain objects:
Example
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
Even if objects have properties of different data types, the sort() method can be

used to sort the array.
The solution is to write a compare function to compare the property values:
Example
cars.sort(function(a, b){return a.year - b.year});
Try it Yourself »
Comparing string properties is a little more complex:
Example
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
Try it Yourself »

Exercise:
Use the correct Array method to sort the fruits array alphabetically.
var fruits = ["Banana", "Orange", "Apple", "Kiwi"];

;
Submit Answer »
Start the Exercise
JavaScript Array Iteration
Methods
Array iteration methods operate on every array item.
Array.forEach()
The forEach() method calls a function (a callback function) once for each array
element.
Example
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {

txt = txt + value + "<br>";
}
Try it Yourself »
Note that the function takes 3 arguments:
 The item value

 The item index
 The array itself
The example above uses only the value parameter. The example can be
rewritten to:
Example
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
txt = txt + value + "<br>";
}
Try it Yourself »
Array.forEach() is supported in all browsers except Internet Explorer 8 or earlier:
Yes 9.0 Yes Yes
Array.map()
The map() method creates a new array by performing a function on each array
element.
The map() method does not execute the function for array elements without
values.
The map() method does not change the original array.
This example multiplies each array value by 2:
Example
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

return value * 2;
}
Try it Yourself »
 The item value

 The item index
When a callback function uses only the value parameter, the index and array
parameters can be omitted:
Example
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
return value * 2;
}
Try it Yourself »
Array.map() is supported in all browsers except Internet Explorer 8 or earlier.
Yes 9.0 Yes Yes
Array.filter()
The filter() method creates a new array with array elements that passes a test.
This example creates a new array from elements with a value larger than 18:
Example
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

return value > 18;
}
Try it Yourself »

 The item value
 The item index
In the example above, the callback function does not use the index and array
parameters, so they can be omitted:
Example
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
return value > 18;
}
Try it Yourself »
Array.filter() is supported in all browsers except Internet Explorer 8 or earlier.
Yes 9.0 Yes Yes
Array.reduce()
The reduce() method runs a function on each array element to produce (reduce
it to) a single value.
The reduce() method works from left-to-right in the array. See also reduceRight().
The reduce() method does not reduce the original array.
This example finds the sum of all numbers in an array:
Example
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {

return total + value;
}
Try it Yourself »
 The total (the initial value / previously returned value)

 The item value
 The item index
The example above does not use the index and array parameters. It can be
rewritten to:
Example
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
}
Try it Yourself »
The reduce() method can accept an initial value:
Example
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
}
Try it Yourself »
Array.reduce() is supported in all browsers except Internet Explorer 8 or earlier.
Yes 9.0 Yes Yes

Array.reduceRight()
The reduceRight() method runs a function on each array element to produce
(reduce it to) a single value.
The reduceRight() works from right-to-left in the array. See also reduce().
The reduceRight() method does not reduce the original array.
This example finds the sum of all numbers in an array:
Example
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {

}
Try it Yourself »
 The total (the initial value / previously returned value)

 The item value
 The item index
The example above does not use the index and array parameters. It can be
rewritten to:
Example
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
}
Try it Yourself »
Array.reduceRight() is supported in all browsers except Internet Explorer 8 or

earlier.
Yes 9.0 Yes Yes
Array.every()
The every() method check if all array values pass a test.
This example check if all array values are larger than 18:
Example
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

return value > 18;
}
Try it Yourself »
 The item value

 The item index
When a callback function uses the first parameter only (value), the other
parameters can be omitted:
Example
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
return value > 18;
}
Try it Yourself »
Array.every() is supported in all browsers except Internet Explorer 8 or earlier.

Yes 9.0 Yes Yes
Array.some()
The some() method check if some array values pass a test.
This example check if some array values are larger than 18:
Example
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

return value > 18;
}
Try it Yourself »
 The item value

 The item index
Array.some() is supported in all browsers except Internet Explorer 8 or earlier.
Yes 9.0 Yes Yes
Array.indexOf()
The indexOf() method searches an array for an element value and returns its
position.
Note: The first item has position 0, the second item has position 1, and so on.
Example
Search an array for the item "Apple":
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
Try it Yourself »
Array.indexOf() is supported in all browsers except Internet Explorer 8 or earlier.
Yes 9.0 Yes Yes
Syntax
array.indexOf(item, start)
ite Required. The item to search for.

m
star Optional. Where to start the search. Negative values will start at the given position c
t end, and search to the end.
Array.indexOf() returns -1 if the item is not found.
If the item is present more than once, it returns the position of the first
occurrence.
Array.lastIndexOf()
Array.lastIndexOf() is the same as Array.indexOf(), but returns the position of the
last occurrence of the specified element.
Example
Search an array for the item "Apple":
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
Try it Yourself »
Array.lastIndexOf() is supported in all browsers except Internet Explorer 8 or

earlier.
Yes 9.0 Yes Yes
Syntax
array.lastIndexOf(item, start)
ite Required. The item to search for

m
star Optional. Where to start the search. Negative values will start at the given position c
t end, and search to the beginning
Array.find()
The find() method returns the value of the first array element that passes a test
function.
This example finds (returns the value of) the first element that is larger than
18:
Example
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

return value > 18;
}
Try it Yourself »
 The item value

 The item index
Array.find() is not supported in older browsers. The first browser versions with
full support is listed below.
45 12 25 8
Array.findIndex()
The findIndex() method returns the index of the first array element that passes
a test function.
This example finds the index of the first element that is larger than 18:
Example
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

return value > 18;
}
Try it Yourself »
 The item value

 The item index
Array.findIndex() is not supported in older browsers. The first browser versions

with full support is listed below.
45 12 25 8
JavaScript Date Objects
JavaScript Date Object lets us work with dates:
Sun Mar 29 2020 22:50:22 GMT+0500 (Pakistan Standard Time)
Year: 2020 Month: 3 Day: 29 Hours: 22 Minutes: 50 Seconds: 22
Example
var d = new Date();
Try it Yourself »
JavaScript Date Output

By default, JavaScript will use the browser's time zone and display a date as a
full text string:
Sun Mar 29 2020 22:50:22 GMT+0500 (Pakistan Standard Time)
You will learn much more about how to display dates, later in this tutorial.
Creating Date Objects

Date objects are created with the new Date() constructor.
There are 4 ways to create a new date object:

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)
new Date()
new Date() creates a new date object with the current date and time:
Example
var d = new Date();
Try it Yourself »
Date objects are static. The computer time is ticking, but date objects are not.
new Date(year, month, ...)

new Date(year, month, ...) creates a new date object with a specified date
and time.
7 numbers specify year, month, day, hour, minute, second, and millisecond (in
that order):
Example
var d = new Date(2018, 11, 24, 10, 33, 30, 0);
Try it Yourself »
Note: JavaScript counts months from 0 to 11.
January is 0. December is 11.
6 numbers specify year, month, day, hour, minute, second:

Example
var d = new Date(2018, 11, 24, 10, 33, 30);
Try it Yourself »
5 numbers specify year, month, day, hour, and minute:
Example
var d = new Date(2018, 11, 24, 10, 33);
Try it Yourself »
4 numbers specify year, month, day, and hour:
Example
var d = new Date(2018, 11, 24, 10);
Try it Yourself »
3 numbers specify year, month, and day:
Example
var d = new Date(2018, 11, 24);
Try it Yourself »
2 numbers specify year and month:
Example
var d = new Date(2018, 11);
Try it Yourself »
You cannot omit month. If you supply only one parameter it will be treated as
milliseconds.
Example
var d = new Date(2018);
Try it Yourself »
Previous Century
One and two digit years will be interpreted as 19xx:
Example
var d = new Date(99, 11, 24);
Try it Yourself »
Example
var d = new Date(9, 11, 24);
Try it Yourself »
new Date(dateString)
new Date(dateString) creates a new date object from a date string:
Example
var d = new Date("October 13, 2014 11:13:00");
Try it Yourself »
Date strings are described in the next chapter.

JavaScript Stores Dates as Milliseconds
JavaScript stores dates as number of milliseconds since January 01, 1970,
00:00:00 UTC (Universal Time Coordinated).
Zero time is January 01, 1970 00:00:00 UTC.
Now the time is: 1585504222822 milliseconds past January 01, 1970
new Date(milliseconds)
new Date(milliseconds) creates a new date object as zero time plus
milliseconds:
Example
Try it Yourself »
01 January 1970 plus 100 000 000 000 milliseconds is approximately 03 March

1973:
Example
var d = new Date(100000000000);
Try it Yourself »
January 01 1970 minus 100 000 000 000 milliseconds is approximately October

31 1966:
Example
var d = new Date(-100000000000);
Try it Yourself »
Example
Try it Yourself »
One day (24 hours) is 86 400 000 milliseconds.
Date Methods
When a Date object is created, a number of methods allow you to operate on
it.
Date methods allow you to get and set the year, month, day, hour, minute,
second, and millisecond of date objects, using either local time or UTC
(universal, or GMT) time.
Date methods and time zones are covered in the next chapters.
Displaying Dates
JavaScript will (by default) output dates in full text string format:
Wed Mar 25 2015 05:00:00 GMT+0500 (Pakistan Standard Time)
Try it Yourself »
When you display a date object in HTML, it is automatically converted to a

string, with the toString() method.
Example
d = new Date();
document.getElementById("demo").innerHTML = d;
Same as:
d = new Date();
document.getElementById("demo").innerHTML = d.toString();
Try it Yourself »
The toUTCString() method converts a date to a UTC string (a date display

standard).
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
Try it Yourself »
The toDateString() method converts a date to a more readable format:
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
Try it Yourself »

Exercise:
Create a Date object and alert the current date and time.
var d = ;
alert(d);
Submit Answer »
Start the Exercise

JavaScript Date Formats
JavaScript Date Input

There are generally 3 types of JavaScript date input formats:
Type Example
ISO Date "2015-03-25" (The International Standard)
Short Date "03/25/2015"
Long Date "Mar 25 2015" or "25 Mar 2015"
The ISO format follows a strict standard in JavaScript.
The other formats are not so well defined and might be browser specific.
JavaScript Date Output

Independent of input format, JavaScript will (by default) output dates in full text
string format:
Wed Mar 25 2015 05:00:00 GMT+0500 (Pakistan Standard Time)

JavaScript ISO Dates
ISO 8601 is the international standard for the representation of dates and
times.
The ISO 8601 syntax (YYYY-MM-DD) is also the preferred JavaScript date
format:
Example (Complete date)

var d = new Date("2015-03-25");
Try it Yourself »
The computed date will be relative to your time zone.

Depending on your time zone, the result above will vary between March 24 and
March 25.
ISO Dates (Year and Month)

ISO dates can be written without specifying the day (YYYY-MM):
Example
var d = new Date("2015-03");
Try it Yourself »
Time zones will vary the result above between February 28 and March 01.
ISO Dates (Only Year)

ISO dates can be written without month and day (YYYY):
Example
var d = new Date("2015");
Try it Yourself »
Time zones will vary the result above between December 31 2014 and January
01 2015.
ISO Dates (Date-Time)

ISO dates can be written with added hours, minutes, and seconds (YYYY-MM-
DDTHH:MM:SSZ):
Example
var d = new Date("2015-03-25T12:00:00Z");
Try it Yourself »
Date and time is separated with a capital T.
UTC time is defined with a capital letter Z.
If you want to modify the time relative to UTC, remove the Z and add +HH:MM
or -HH:MM instead:
Example
var d = new Date("2015-03-25T12:00:00-06:30");
Try it Yourself »
UTC (Universal Time Coordinated) is the same as GMT (Greenwich Mean Time).
Omitting T or Z in a date-time string can give different results in different

browsers.
Time Zones
When setting a date, without specifying the time zone, JavaScript will use the
browser's time zone.
When getting a date, without specifying the time zone, the result is converted
to the browser's time zone.
In other words: If a date/time is created in GMT (Greenwich Mean Time), the

date/time will be converted to CDT (Central US Daylight Time) if a user browses
from central US.
JavaScript Short Dates.

Short dates are written with an "MM/DD/YYYY" syntax like this:
Example
var d = new Date("03/25/2015");
Try it Yourself »
WARNINGS !
In some browsers, months or days with no leading zeroes may produce an
error:
var d = new Date("2015-3-25");
The behavior of "YYYY/MM/DD" is undefined.

Some browsers will try to guess the format. Some will return NaN.
var d = new Date("2015/03/25");
The behavior of "DD-MM-YYYY" is also undefined.

Some browsers will try to guess the format. Some will return NaN.
var d = new Date("25-03-2015");
JavaScript Long Dates.
Long dates are most often written with a "MMM DD YYYY" syntax like this:
Example
var d = new Date("Mar 25 2015");
Try it Yourself »
Month and day can be in any order:
Example
var d = new Date("25 Mar 2015");
Try it Yourself »
And, month can be written in full (January), or abbreviated (Jan):
Example
var d = new Date("January 25 2015");
Try it Yourself »
Example
var d = new Date("Jan 25 2015");
Try it Yourself »
Commas are ignored. Names are case insensitive:
Example
var d = new Date("JANUARY, 25, 2015");
Try it Yourself »
Date Input - Parsing Dates

If you have a valid date string, you can use the Date.parse() method to convert it
to milliseconds.
Date.parse() returns the number of milliseconds between the date and January 1,

1970:
Example
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;
Try it Yourself »
You can then use the number of milliseconds to convert it to a date object:
Example
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
Try it Yourself »
JavaScript Get Date Methods
These methods can be used for getting information from a date object:
Method Description
getFullYear() Get the year as a four digit number (yyyy)
getMonth() Get the month as a number (0-11)
getDate() Get the day as a number (1-31)
getHours() Get the hour (0-23)
getMinutes() Get the minute (0-59)
getSeconds() Get the second (0-59)
getMilliseconds() Get the millisecond (0-999)

getTime() Get the time (milliseconds since January 1, 1970)
getDay() Get the weekday as a number (0-6)
Date.now() Get the time. ECMAScript 5.
The getTime() Method

The getTime() method returns the number of milliseconds since January 1,
1970:
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
Try it Yourself »
The getFullYear() Method

The getFullYear() method returns the year of a date as a four digit number:
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
Try it Yourself »
The getMonth() Method
The getMonth() method returns the month of a date as a number (0-11):
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getMonth();
Try it Yourself »
In JavaScript, the first month (January) is month number 0, so December

returns month number 11.
You can use an array of names, and getMonth() to return the month as a

name:
Example
var d = new Date();
var months =
["January", "February", "March", "April", "May", "June", "July", "August"
, "September", "October", "November", "December"];
document.getElementById("demo").innerHTML = months[d.getMonth()];
Try it Yourself »
The getDate() Method

The getDate() method returns the day of a date as a number (1-31):
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
Try it Yourself »
The getHours() Method
The getHours() method returns the hours of a date as a number (0-23):
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getHours();
Try it Yourself »
The getMinutes() Method

The getMinutes() method returns the minutes of a date as a number (0-59):
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes();
Try it Yourself »
The getSeconds() Method

The getSeconds() method returns the seconds of a date as a number (0-59):
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();
Try it Yourself »
The getMilliseconds() Method
The getMilliseconds() method returns the milliseconds of a date as a number
(0-999):
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getMilliseconds();
Try it Yourself »
The getDay() Method

The getDay() method returns the weekday of a date as a number (0-6):
Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
Try it Yourself »
In JavaScript, the first day of the week (0) means "Sunday", even if some
countries in the world consider the first day of the week to be "Monday"
You can use an array of names, and getDay() to return the weekday as a

name:
Example
var d = new Date();
var days =
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Satur
day"];
document.getElementById("demo").innerHTML = days[d.getDay()];
Try it Yourself »
UTC Date Methods
UTC date methods are used for working with UTC dates (Universal Time Zone
dates):
Method Description
getUTCDate() Same as getDate(), but returns the UTC date
getUTCDay() Same as getDay(), but returns the UTC day
getUTCFullYear() Same as getFullYear(), but returns the UTC year
getUTCHours() Same as getHours(), but returns the UTC hour
getUTCMilliseconds() Same as getMilliseconds(), but returns the UTC milliseconds
getUTCMinutes() Same as getMinutes(), but returns the UTC minutes
getUTCMonth() Same as getMonth(), but returns the UTC month
getUTCSeconds() Same as getSeconds(), but returns the UTC seconds

Complete JavaScript Date Reference
For a complete reference, go to our Complete JavaScript Date Reference.
The reference contains descriptions and examples of all Date properties and
methods.

Exercise:
Use the correct Date method to get the month (0-11) out of a date object.
var d = new Date();

month = ;
Submit Answer »
Start the Exercise

JavaScript Set Date Methods
Set Date methods let you set date values (years, months, days, hours,
minutes, seconds, milliseconds) for a Date Object.
Set Date Methods

Set Date methods are used for setting a part of a date:
Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day)
setHours() Set the hour (0-23)
setMilliseconds() Set the milliseconds (0-999)
setMinutes() Set the minutes (0-59)

setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds since January 1, 1970)
The setFullYear() Method

The setFullYear() method sets the year of a date object. In this example to
2020:
Example
<script>
var d = new Date();
d.setFullYear(2020);
</script>
Try it Yourself »
The setFullYear() method can optionally set month and day:
Example
<script>
var d = new Date();
d.setFullYear(2020, 11, 3);
</script>
Try it Yourself »
The setMonth() Method
The setMonth() method sets the month of a date object (0-11):
Example
<script>
var d = new Date();
d.setMonth(11);
</script>
Try it Yourself »
The setDate() Method

The setDate() method sets the day of a date object (1-31):
Example
<script>
var d = new Date();
d.setDate(15);
</script>
Try it Yourself »
The setDate() method can also be used to add days to a date:
Example
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
</script>
Try it Yourself »
If adding days shifts the month or year, the changes are handled automatically
by the Date object.
The setHours() Method

The setHours() method sets the hours of a date object (0-23):
Example
<script>
var d = new Date();
d.setHours(22);
</script>
Try it Yourself »
The setMinutes() Method

The setMinutes() method sets the minutes of a date object (0-59):
Example
<script>
var d = new Date();
d.setMinutes(30);
</script>
Try it Yourself »
The setSeconds() Method

The setSeconds() method sets the seconds of a date object (0-59):
Example
<script>
var d = new Date();
d.setSeconds(30);
</script>
Try it Yourself »
Compare Dates
Dates can easily be compared.
The following example compares today's date with January 14, 2100:
Example
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);
if (someday > today) {

text = "Today is before January 14, 2100.";
} else {
text = "Today is after January 14, 2100.";
}
document.getElementById("demo").innerHTML = text;
Try it Yourself »
JavaScript counts months from 0 to 11. January is 0. December is 11.
Complete JavaScript Date Reference

For a complete reference, go to our Complete JavaScript Date Reference.
The reference contains descriptions and examples of all Date properties and
methods.

Exercise:
Use the correct Date method to set the year of a date object to 2020.
var d = new Date();

d. ;
Submit Answer »
Start the Exercise

JavaScript Math Object
The JavaScript Math object allows you to perform mathematical tasks on

numbers.
Example
Math.PI; // returns 3.141592653589793
Try it Yourself »
Math.round()
Math.round(x) returns the value of x rounded to its nearest integer:
Example
Math.round(4.7); // returns 5
Math.round(4.4); // returns 4
Try it Yourself »
Math.pow()
Math.pow(x, y) returns the value of x to the power of y:
Example
Math.pow(8, 2); // returns 64
Try it Yourself »
Math.sqrt()
Math.sqrt(x) returns the square root of x:
Example
Math.sqrt(64); // returns 8
Try it Yourself »
Math.abs()
Math.abs(x) returns the absolute (positive) value of x:
Example
Math.abs(-4.7); // returns 4.7
Try it Yourself »
Math.ceil()
Math.ceil(x) returns the value of x rounded up to its nearest integer:
Example
Math.ceil(4.4); // returns 5
Try it Yourself »
Math.floor()
Math.floor(x) returns the value of x rounded down to its nearest integer:
Example
Math.floor(4.7); // returns 4
Try it Yourself »
Math.sin()
Math.sin(x) returns the sine (a value between -1 and 1) of the angle x (given in
radians).
If you want to use degrees instead of radians, you have to convert degrees to
radians:
Angle in radians = Angle in degrees x PI / 180.
Example
Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)
Try it Yourself »
Math.cos()
Math.cos(x) returns the cosine (a value between -1 and 1) of the angle x (given
in radians).
If you want to use degrees instead of radians, you have to convert degrees to
radians:
Angle in radians = Angle in degrees x PI / 180.

Example
Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)
Try it Yourself »
Math.min() and Math.max()

Math.min() and Math.max() can be used to find the lowest or highest value in a list
of arguments:
Example
Math.min(0, 150, 30, 20, -8, -200); // returns -200
Try it Yourself »
Example
Math.max(0, 150, 30, 20, -8, -200); // returns 150
Try it Yourself »
Math.random()
Math.random() returns a random number between 0 (inclusive), and 1 (exclusive):
Example
Math.random(); // returns a random number
Try it Yourself »
You will learn more about Math.random() in the next chapter of this tutorial.
Math Properties (Constants)

JavaScript provides 8 mathematical constants that can be accessed with the
Math object:
Example
Math.E // returns Euler's number
Math.PI // returns PI
Math.SQRT2 // returns the square root of 2
Math.SQRT1_2 // returns the square root of 1/2
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E // returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E
Try it Yourself »
Math Constructor
Unlike other global objects, the Math object has no constructor. Methods and
properties are static.
All methods and properties (constants) can be used without creating a Math
object first.
Math Object Methods

Method Description
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians

asin(x) Returns the arcsine of x, in radians
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/
atan2(y, x) Returns the arctangent of the quotient of its arguments
ceil(x) Returns the value of x rounded up to its nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of Ex
floor(x) Returns the value of x rounded down to its nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x, y, z, ..., n) Returns the number with the highest value
min(x, y, z, ..., n) Returns the number with the lowest value
pow(x, y) Returns the value of x to the power of y

random() Returns a random number between 0 and 1
round(x) Returns the value of x rounded to its nearest integer
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
Complete Math Reference

For a complete reference, go to our complete Math object reference.
The reference contains descriptions and examples of all Math properties and
methods.

Exercise:
Use the correct Math method to create a random number.
var r = ;
Submit Answer »
Start the Exercise
JavaScript Random
Math.random()
Math.random() returns a random number between 0 (inclusive), and 1
(exclusive):
Example
Math.random(); // returns a random number
Try it Yourself »
Math.random() always returns a number lower than 1.
JavaScript Random Integers

Math.random() used with Math.floor() can be used to return random integers.
Example
Math.floor(Math.random() * 10); // returns a random integer from 0 to
9
Try it Yourself »
Example
Math.floor(Math.random() * 11); // returns a random integer from 0
to 10
Try it Yourself »
Example
to 99
Try it Yourself »
Example
to 100
Try it Yourself »
Example
Math.floor(Math.random() * 10) + 1; // returns a random integer from 1
to 10
Try it Yourself »
Example
Math.floor(Math.random() * 100) + 1; // returns a random integer from 1
to 100
Try it Yourself »
A Proper Random Function

As you can see from the examples above, it might be a good idea to create a
proper random function to use for all random integer purposes.
This JavaScript function always returns a random number between min

(included) and max (excluded):
Example
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
Try it Yourself »
This JavaScript function always returns a random number between min and max
(both included):
Example
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
Try it Yourself »
JavaScript Booleans
A JavaScript Boolean represents one of two values: true or false.
Boolean Values
Very often, in programming, you will need a data type that can only have one of
two values, like
 YES / NO
 ON / OFF
 TRUE / FALSE
For this, JavaScript has a Boolean data type. It can only take the
values true or false.
The Boolean() Function

You can use the Boolean() function to find out if an expression (or a variable) is
true:
Example
Boolean(10 > 9) // returns true
Try it Yourself »
Or even easier:
Example
(10 > 9) // also returns true
10 > 9 // also returns true
Try it Yourself »
Comparisons and Conditions

The chapter JS Comparisons gives a full overview of comparison operators.
The chapter JS Conditions gives a full overview of conditional statements.
Here are some examples:
Operator Description Example
== equal to if (day == "Monday")
> greater than if (salary > 9000)
< less than if (age < 18)
The Boolean value of an expression is the basis for all JavaScript comparisons
and conditions.
Everything With a "Value" is True

Examples
100
3.14
-15
"Hello"
"false"
7 + 1 + 3.14
Try it Yourself »
Everything Without a "Value" is False

The Boolean value of 0 (zero) is false:
var x = 0;
Boolean(x); // returns false
Try it Yourself »
The Boolean value of -0 (minus zero) is false:
var x = -0;
Try it Yourself »
The Boolean value of "" (empty string) is false:
var x = "";
Try it Yourself »
The Boolean value of undefined is false:
var x;
Try it Yourself »
The Boolean value of null is false:
var x = null;
Try it Yourself »
The Boolean value of false is (you guessed it) false:
var x = false;
Try it Yourself »
The Boolean value of NaN is false:
var x = 10 / "H";
Try it Yourself »
Booleans Can be Objects

Normally JavaScript booleans are primitive values created from literals:
var x = false;
But booleans can also be defined as objects with the keyword new:
var y = new Boolean(false);
Example
var x = false;
// typeof x returns boolean

// typeof y returns object
Try it yourself »
Do not create Boolean objects. It slows down execution speed.
results:
When using the == operator, equal booleans are equal:
Example
var x = false;

Try it Yourself »
When using the === operator, equal booleans are not equal, because

Example
var x = false;
// (x === y) is false because x and y have different types

Try it Yourself »
Example
var x = new Boolean(false);
// (x == y) is false because objects cannot be compared

Try it Yourself »
Complete Boolean Reference

For a complete reference, go to our Complete JavaScript Boolean Reference.
The reference contains descriptions and examples of all Boolean properties and
methods.
JavaScript Comparison and Logic
al Operators
Comparison and Logical operators are used to test for true or false.
Comparison Operators
Comparison operators are used in logical statements to determine equality or
difference between variables or values.
Given that x = 5, the table below explains the comparison operators:
Operator Description Comparing Returns
== equal to x == 8 false
x == 5 true
x == "5" true
=== equal value and equal type x === 5 true

x === "5" false
!= not equal x != 8 true
!== not equal value or not equal type x !== 5 false
x !== "5" true
x !== 8 true
> greater than x>8 false
< less than x<8 true
>= greater than or equal to x >= 8 false
<= less than or equal to x <= 8 true
How Can it be Used

Comparison operators can be used in conditional statements to compare values
and take action depending on the result:
if (age < 18) text = "Too young";
You will learn more about the use of conditional statements in the next chapter
of this tutorial.
Logical Operators
Logical operators are used to determine the logic between variables or values.
Given that x = 6 and y = 3, the table below explains the logical operators:
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true
Conditional (Ternary) Operator

JavaScript also contains a conditional operator that assigns a value to a variable
based on some condition.
Syntax
variablename = (condition) ? value1:value2
Example
var voteable = (age < 18) ? "Too young":"Old enough";
Try it Yourself »
If the variable age is a value below 18, the value of the variable voteable will be
"Too young", otherwise the value of voteable will be "Old enough".
Comparing Different Types

Comparing data of different types may give unexpected results.
When comparing a string with a number, JavaScript will convert the string to a
number when doing the comparison. An empty string converts to 0. A non-
numeric string converts to NaN which is always false.
Case Value
2 < 12 true
2 < "12" true
2 < "John" false
2 > "John" false
2 == "John" false
"2" < "12" false
"2" > "12" true
"2" == "12" false
When comparing two strings, "2" will be greater than "12", because
(alphabetically) 1 is less than 2.
To secure a proper result, variables should be converted to the proper type

before comparison:
age = Number(age);
if (isNaN(age)) {
voteable = "Input is not a number";
} else {
voteable = (age < 18) ? "Too young" : "Old enough";
}
Try it Yourself »

Exercise:
Choose the correct comparison operator to alert true, when x is greater than y.
x = 10;
y = 5;
alert(x y);
Submit Answer »
Start the Exercise »

JavaScript if else and else if
Conditional statements are used to perform different actions based on

different conditions.
Conditional Statements
Very often when you write code, you want to perform different actions for
different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a specified condition is

true
 Use else to specify a block of code to be executed, if the same condition is
false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed
The switch statement is described in the next chapter.
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a
condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
Note that if is in lowercase letters. Uppercase letters (If or IF) will generate a
JavaScript error.
Example
Make a "Good day" greeting if the hour is less than 18:00:
if (hour < 18) {
greeting = "Good day";
}
The result of greeting will be:
Try it Yourself »
The else Statement

Use the else statement to specify a block of code to be executed if the condition
is false.
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Example
If the hour is less than 18, create a "Good day" greeting, otherwise "Good
evening":
if (hour < 18) {
} else {
greeting = "Good evening";
}

Good evening
Try it Yourself »
The else if Statement

Use the else if statement to specify a new condition if the first condition is
false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and
condition2 is true
} else {
// block of code to be executed if the condition1 is false and
condition2 is false
}
Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is
less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
} else {
greeting = "Good evening";
}
Good evening
Try it Yourself »
More Examples
Random link
This example will write a link to either W3Schools or to the World Wildlife
Foundation (WWF). By using a random number, there is a 50% chance for each
of the links.

Exercise:
Fix the if statement to alert "Hello World" if x is greater than y.
if x > y
alert("Hello World");
Submit Answer »
Start the Exercise

JavaScript Switch Statement
The switch statement is used to perform different actions based on different

conditions.
The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
 The switch expression is evaluated once.

 The value of the expression is compared with the values of each case.
 If there is a match, the associated block of code is executed.
Example
The getDay() method returns the weekday as a number between 0 and 6.
(Sunday=0, Monday=1, Tuesday=2 ..)

This example uses the weekday number to calculate the weekday name:
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
The result of day will be:
Sunday
Try it Yourself »
The break Keyword

When JavaScript reaches a break keyword, it breaks out of the switch block.
This will stop the execution of inside the block.
It is not necessary to break the last case in a switch block. The block breaks
(ends) there anyway.
Note: If you omit the break statement, the next case will be executed even if
the evaluation does not match the case.
The default Keyword
The default keyword specifies the code to run if there is no case match:
Example
The getDay() method returns the weekday as a number between 0 and 6.
If today is neither Saturday (6) nor Sunday (0), write a default message:
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
The result of text will be:
Today is Sunday
Try it Yourself »
The default case does not have to be the last case in a switch block:
Example
default:
break;
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
}
Try it Yourself »
If default is not the last case in the switch block, remember to end the default
case with a break.
Common Code Blocks

Sometimes you will want different switch cases to use the same code.
In this example case 4 and 5 share the same code block, and 0 and 6 share
another code block:
Example
case 4:
case 5:
text = "Soon it is Weekend";
break;
case 0:
case 6:
text = "It is Weekend";
break;
default:
}
Try it Yourself »
Switching Details
If multiple cases matches a case value, the first case is selected.
If no matching cases are found, the program continues to the default label.
If no default label is found, the program continues to the statement(s) after

the switch.
Strict Comparison
Switch cases use strict comparison (===).
The values must be of the same type to match.
A strict comparison can only be true if the operands are of the same type.
In this example there will be no match for x:
Example
var x = "0";
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "No value found";
}
Try it Yourself »

Exercise:
Create a switch statement that will alert "Hello" if fruits is "banana", and
"Welcome" if fruits is "apple".
(fruits) {
"Banana":
alert("Hello")
break;
"Apple":
alert("Welcome")
break;
}
Submit Answer »
Start the Exercise

JavaScript For Loop
Loops can execute a block of code a number of times.
JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each
time with a different value.
Often this is the case when working with arrays:
Instead of writing:
text += cars[0] + "<br>";
You can write:

var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Try it Yourself »
Different Kinds of Loops

JavaScript supports different kinds of loops:
 for - loops through a block of code a number of times
 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition is
true
The For Loop

The for loop has the following syntax:
for (statement 1; statement 2; statement 3) {

// code block to be executed
}
Statement 1 is executed (one time) before the execution of the code block.
Statement 2 defines the condition for executing the code block.
Statement 3 is executed (every time) after the code block has been executed.
Example
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Try it Yourself »
From the example above, you can read:
Statement 1 sets a variable before the loop starts (var i = 0).
Statement 2 defines the condition for the loop to run (i must be less than 5).
Statement 3 increases a value (i++) each time the code block in the loop has
been executed.
Statement 1
Normally you will use statement 1 to initialize the variable used in the loop (i =
0).
This is not always the case, JavaScript doesn't care. Statement 1 is optional.
You can initiate many values in statement 1 (separated by comma):
Example
for (i = 0, len = cars.length, text = ""; i < len; i++) {
}
Try it Yourself »
And you can omit statement 1 (like when your values are set before the loop
starts):
Example
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
}
Try it Yourself »
Statement 2
Often statement 2 is used to evaluate the condition of the initial variable.
This is not always the case, JavaScript doesn't care. Statement 2 is also
optional.
If statement 2 returns true, the loop will start over again, if it returns false, the
loop will end.
If you omit statement 2, you must provide a break inside the loop. Otherwise
the loop will never end. This will crash your browser. Read about breaks in a
later chapter of this tutorial.
Statement 3
Often statement 3 increments the value of the initial variable.
This is not always the case, JavaScript doesn't care, and statement 3 is
optional.
Statement 3 can do anything like negative increment (i--), positive increment (i

= i + 15), or anything else.
Statement 3 can also be omitted (like when you increment your values inside
the loop):
Example
var i = 0;
var len = cars.length;
for (; i < len; ) {
i++;
}
Try it Yourself »
The For/In Loop

The JavaScript for/in statement loops through the properties of an object:
Example
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}
Try it Yourself »
The For/Of Loop
The JavaScript for/of statement loops through the values of an iterable objects
for/of lets you loop over data structures that are iterable such as Arrays,
Strings, Maps, NodeLists, and more.
The for/of loop has the following syntax:
for (variable of iterable) {
}
variable - For every iteration the value of the next property is assigned to the
variable. Variable can be declared with const, let, or var.
iterable - An object that has iterable properties.
Looping over an Array

Example
var cars = ['BMW', 'Volvo', 'Mini'];
var x;
for (x of cars) {
document.write(x + "<br >");
}
Try it Yourself »
Looping over a String

Example
var txt = 'JavaScript';
var x;
for (x of txt) {
document.write(x + "<br >");
}
Try it Yourself »
The While Loop
The while loop and the do/while loop will be explained in the next chapter.

Exercise:
Create a loop that runs from 0 to 9.
var i;
( = ; < ; ) {
console.log(i);
}
Submit Answer »
Start the Exercise

JavaScript While Loop
Loops can execute a block of code as long as a specified condition is true.
The While Loop

The while loop loops through a block of code as long as a specified condition is
true.
Syntax
while (condition) {
}
Example
In the following example, the code in the loop will run, over and over again, as
long as a variable (i) is less than 10:
Example
while (i < 10) {
text += "The number is " + i;
i++;
}
Try it Yourself »
If you forget to increase the variable used in the condition, the loop will never
end. This will crash your browser.
The Do/While Loop
The do/while loop is a variant of the while loop. This loop will execute the code
block once, before checking if the condition is true, then it will repeat the loop
as long as the condition is true.
Syntax
do {
}
while (condition);
Example
The example below uses a do/while loop. The loop will always be executed at
least once, even if the condition is false, because the code block is executed
before the condition is tested:
Example
do {
text += "The number is " + i;
i++;
}
while (i < 10);
Try it Yourself »
Do not forget to increase the variable used in the condition, otherwise the loop
will never end!
Comparing For and While

If you have read the previous chapter, about the for loop, you will discover that
a while loop is much the same as a for loop, with statement 1 and statement 3
omitted.
The loop in this example uses a for loop to collect the car names from the cars
array:
Example
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
i++;
}
Try it Yourself »
The loop in this example uses a while loop to collect the car names from the
cars array:
Example
var i = 0;
var text = "";
while (cars[i]) {
i++;
}
Try it Yourself »

Exercise:
Create a loop that runs as long as i is less than 10.
var i = 0;
(i 10) {
console.log(i);
i++
}
Submit Answer »
Start the Exercise

JavaScript Break and Continue
The break statement "jumps out" of a loop.
The continue statement "jumps over" one iteration in the loop.
The Break Statement

You have already seen the break statement used in an earlier chapter of this
tutorial. It was used to "jump out" of a switch() statement.
The break statement can also be used to jump out of a loop.
The break statement breaks the loop and continues executing the code after the
loop (if any):
Example
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
}
Try it Yourself »
The Continue Statement

The continue statement breaks one iteration (in the loop), if a specified condition
occurs, and continues with the next iteration in the loop.
This example skips the value of 3:
Example
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
}
Try it Yourself »
JavaScript Labels
To label JavaScript statements you precede the statements with a label name
and a colon:
label:
statements
The break and the continue statements are the only JavaScript statements that

can "jump out of" a code block.
Syntax:
break labelname;
continue labelname;
The continue statement (with or without a label reference) can only be used

to skip one loop iteration.
The break statement, without a label reference, can only be used to jump out

of a loop or a switch.
With a label reference, the break statement can be used to jump out of any
code block:
Example
list: {
break list;
}
Try it Yourself »
A code block is a block of code between { and }.

Exercise:
Make the loop stop when i is 5.
for (i = 0; i < 10; i++) {

console.log(i);
if (i == 5) {
;
}
}
Submit Answer »
Start the Exercise

JavaScript Type Conversion
Number() converts to a Number, String() converts to a String, Boolean()

converts to a Boolean.

In JavaScript there are 5 different data types that can contain values:
 string
 number
 boolean
 object
 function
There are 6 types of objects:
 Object
 Date
 Array
 String
 Number
 Boolean
And 2 data types that cannot contain values:
 null
 undefined
The typeof Operator

You can use the typeof operator to find the data type of a JavaScript variable.
Example
typeof NaN // Returns "number"
typeof false // Returns "boolean"
typeof [1,2,3,4] // Returns "object"
typeof {name:'John', age:34} // Returns "object"
typeof new Date() // Returns "object"
typeof function () {} // Returns "function"
typeof myCar // Returns "undefined" *
typeof null // Returns "object"
Try it Yourself »
Please observe:
 The data type of NaN is number

 The data type of an array is object
 The data type of a date is object
 The data type of null is object
 The data type of an undefined variable is undefined *
 The data type of a variable that has not been assigned a value is
also undefined *
You cannot use typeof to determine if a JavaScript object is an array (or a date).
The Data Type of typeof

The typeofoperator is not a variable. It is an operator. Operators ( + - * / ) do
not have any data type.
But, the typeof operator always returns a string (containing the type of the

operand).
The constructor Property

The constructor property returns the constructor function for all JavaScript
variables.
Example
"John".constructor // Returns function String() {[native
code]}
(3.14).constructor // Returns function Number() {[native
code]}
false.constructor // Returns function Boolean() {[native
code]}
[1,2,3,4].constructor // Returns function Array() {[native
code]}
{name:'John',age:34}.constructor // Returns function Object() {[native
code]}
new Date().constructor // Returns function Date() {[native
code]}
function () {}.constructor // Returns function Function(){[native
code]}
Try it Yourself »
You can check the constructor property to find out if an object is

an Array (contains the word "Array"):
Example
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
Try it Yourself »
Or even simpler, you can check if the object is an Array function:
Example
function isArray(myArray) {
return myArray.constructor === Array;
}
Try it Yourself »
You can check the constructor property to find out if an object is

a Date (contains the word "Date"):
Example
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
Try it Yourself »
Or even simpler, you can check if the object is a Date function:
Example
function isDate(myDate) {
return myDate.constructor === Date;
}
Try it Yourself »
JavaScript Type Conversion

JavaScript variables can be converted to a new variable and another data type:
 By the use of a JavaScript function

 Automatically by JavaScript itself
Converting Numbers to Strings

The global method String() can convert numbers to strings.
It can be used on any type of numbers, literals, variables, or expressions:
Example
String(x) // returns a string from a number variable x
String(123) // returns a string from a number literal 123
String(100 + 23) // returns a string from a number from an expression
Try it Yourself »
The Number method toString() does the same.
Example
x.toString()
(123).toString()
(100 + 23).toString()
Try it Yourself »
In the chapter Number Methods, you will find more methods that can be used to
convert numbers to strings:
Method Description
toExponential() Returns a string, with a number rounded and written using expo
toFixed() Returns a string, with a number rounded and written with a spec
decimals.
toPrecision() Returns a string, with a number written with a specified length
Converting Booleans to Strings

The global method String() can convert booleans to strings.
String(false) // returns "false"

String(true) // returns "true"
The Boolean method toString() does the same.
false.toString() // returns "false"

true.toString() // returns "true"
Converting Dates to Strings
The global method String() can convert dates to strings.
String(Date()) // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe

Daylight Time)"
The Date method toString() does the same.
Example
Date().toString() // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W.
Europe Daylight Time)"
In the chapter Date Methods, you will find more methods that can be used to
convert dates to strings:
Method Description
getDate() Get the day as a number (1-31)
getDay() Get the weekday a number (0-6)
getFullYear() Get the four digit year (yyyy)
getHours() Get the hour (0-23)
getMilliseconds() Get the milliseconds (0-999)

getMinutes() Get the minutes (0-59)
getMonth() Get the month (0-11)
getSeconds() Get the seconds (0-59)
getTime() Get the time (milliseconds since January 1, 1970)
Converting Strings to Numbers

The global method Number() can convert strings to numbers.
Strings containing numbers (like "3.14") convert to numbers (like 3.14).
Empty strings convert to 0.
Anything else converts to NaN (Not a Number).
Number("3.14") // returns 3.14

Number(" ") // returns 0
Number("") // returns 0
Number("99 88") // returns NaN
In the chapter Number Methods, you will find more methods that can be used to
convert strings to numbers:
Method Description
parseFloat() Parses a string and returns a floating point number

parseInt() Parses a string and returns an integer
The Unary + Operator

The unary + operator can be used to convert a variable to a number:
Example
var y = "5"; // y is a string
var x = + y; // x is a number
Try it Yourself »
If the variable cannot be converted, it will still become a number, but with the
value NaN (Not a Number):
Example
var y = "John"; // y is a string
var x = + y; // x is a number (NaN)
Try it Yourself »
Converting Booleans to Numbers

The global method Number() can also convert booleans to numbers.
Number(false) // returns 0
Number(true) // returns 1
Converting Dates to Numbers
The global method Number() can be used to convert dates to numbers.
d = new Date();
Number(d) // returns 1404568027739
The date method getTime() does the same.
d = new Date();
d.getTime() // returns 1404568027739
Automatic Type Conversion

When JavaScript tries to operate on a "wrong" data type, it will try to convert
the value to a "right" type.
The result is not always what you expect:
5 + null // returns 5 because null is converted to 0

"5" + null // returns "5null" because null is converted to "null"
"5" + 2 // returns "52" because 2 is converted to "2"
"5" - 2 // returns 3 because "5" is converted to 5
"5" * "2" // returns 10 because "5" and "2" are converted to 5
and 2
Try it Yourself »
Automatic String Conversion

JavaScript automatically calls the variable's toString() function when you try to
"output" an object or a variable:
document.getElementById("demo").innerHTML = myVar;
// if myVar = {name:"Fjohn"} // toString converts to "[object Object]"

// if myVar = [1,2,3,4] // toString converts to "1,2,3,4"
// if myVar = new Date() // toString converts to "Fri Jul 18 2014
09:08:55 GMT+0200"
Numbers and booleans are also converted, but this is not very visible:
// if myVar = 123 // toString converts to "123"

// if myVar = true // toString converts to "true"
// if myVar = false // toString converts to "false"
JavaScript Type Conversion Table

This table shows the result of converting different JavaScript values to Number,
String, and Boolean:
Original Converted Converted Converted

Value to Number to String to Boolean
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"000" 0 "000" true

"1" 1 "1" true
NaN NaN "NaN" false
Infinity Infinity "Infinity" true
-Infinity -Infinity "-Infinity" true
"" 0 "" false
"20" 20 "20" true
"twenty" NaN "twenty" true
[] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true

["twenty"] NaN "twenty" true
["ten","twenty"] NaN "ten,twenty" true
function(){} NaN "function(){}" true
{} NaN "[object Object]" true
null 0 "null" false
undefined NaN "undefined" false
Values in quotes indicate string values.
Red values indicate values (some) programmers might not expect.

JavaScript Bitwise Operations
JavaScript Bitwise Operators

Operator Name Description
& AND Sets each bit to 1 if both bits are 1
| OR Sets each bit to 1 if one of two bits is 1
^ XOR Sets each bit to 1 if only one of two bits is 1
~ NOT Inverts all the bits
<< Zero fill left Shifts left by pushing zeros in from the right and let the leftm
shift
>> Signed right Shifts right by pushing copies of the leftmost bit in from the le
shift rightmost bits fall off
>>> Zero fill right Shifts right by pushing zeros in from the left, and let the right
shift
Examples
Operation Result Same as R
5&1 1 0101 & 0001
5|1 5 0101 | 0001
~5 10 ~0101
5 << 1 10 0101 << 1
5^1 4 0101 ^ 0001
5 >> 1 2 0101 >> 1
5 >>> 1 2 0101 >>> 1
JavaScript Uses 32 bits Bitwise Operands

JavaScript stores numbers as 64 bits floating point numbers, but all bitwise
operations are performed on 32 bits binary numbers.
Before a bitwise operation is performed, JavaScript converts numbers to 32 bits

signed integers.
After the bitwise operation is performed, the result is converted back to 64 bits
JavaScript numbers.
The examples above uses 4 bits unsigned binary numbers. Because of this ~ 5
returns 10.
Since JavaScript uses 32 bits signed integers, it will not return 10. It will return
-6.
00000000000000000000000000000101 (5)
11111111111111111111111111111010 (~5 = -6)
A signed integer uses the leftmost bit as the minus sign.
Bitwise AND
When a bitwise AND is performed on a pair of bits, it returns 1 if both bits are 1.
One bit example:
Operation Result
0&0 0
0&1 0
1&0 0
1&1 1
4 bits example:
Operation Result
1111 & 0000 0000
1111 & 0001 0001
1111 & 0010 0010
1111 & 0100 0100
Bitwise OR
When a bitwise OR is performed on a pair of bits, it returns 1 if one of the bits
are 1:
One bit example:
Operation Result
0|0 0
0|1 1
1|0 1
1|1 1
4 bits example:
Operation Result
1111 | 0000 1111
1111 | 0001 1111
1111 | 0010 1111
1111 | 0100 1111
Bitwise XOR
When a bitwise XOR is performed on a pair of bits, it returns 1 if the bits are
different:
One bit example:
Operation Result
0^0 0
0^1 1
1^0 1
1^1 0
4 bits example:
Operation Result
1111 ^ 0000 1111
1111 ^ 0001 1110
1111 ^ 0010 1101
1111 ^ 0100 1011

JavaScript Bitwise AND (&)
Bitwise AND returns 1 only if both bits are 1:
Decimal Binary
5 00000000000000000000000000000101
1 00000000000000000000000000000001
5&1 00000000000000000000000000000001 (1)
Example
var x = 5 & 1;
Try it Yourself »
JavaScript Bitwise OR (|)

Bitwise OR returns 1 if one of the bits are 1:
Decimal Binary
5 00000000000000000000000000000101
1 00000000000000000000000000000001
5|1 00000000000000000000000000000101 (5)
Example
var x = 5 | 1;
Try it Yourself »
JavaScript Bitwise XOR (^)

Bitwise XOR returns 1 if the bits are different:
Decimal Binary
5 00000000000000000000000000000101
1 00000000000000000000000000000001
5^1 00000000000000000000000000000100 (4)
Example
var x = 5 ^ 1;
Try it Yourself »
JavaScript Bitwise NOT (~)
Decimal Binary
5 00000000000000000000000000000101
~5 11111111111111111111111111111010 (-6)
Example
var x = ~5;
Try it Yourself »
JavaScript (Zero Fill) Bitwise Left Shift (<<)

This is a zero fill left shift. One or more zero bits are pushed in from the right,
and the leftmost bits fall off:
Decimal Binary
5 00000000000000000000000000000101
5 << 1 00000000000000000000000000001010 (10)
Example
var x = 5 << 1;
Try it Yourself »
JavaScript (Sign Preserving) Bitwise Right

Shift (>>)
This is a sign preserving right shift. Copies of the leftmost bit are pushed in
from the left, and the rightmost bits fall off:
Decimal Binary
-5 11111111111111111111111111111011
-5 >> 1 11111111111111111111111111111101 (-3)
Example
var x = -5 >> 1;
Try it Yourself »
JavaScript (Zero Fill) Right Shift (>>>)

This is a zero fill right shift. One or more zero bits are pushed in from the left,
and the rightmost bits fall off:
Decimal Binary
5 00000000000000000000000000000101
5 >>> 1 00000000000000000000000000000010 (2)
Example
var x = 5 >>> 1;
Try it Yourself »
Binary Numbers
Binary numbers with only one bit set is easy to understand:
Binary Representation Decimal va
00000000000000000000000000000001 1
00000000000000000000000000000010 2
00000000000000000000000000000100 4
00000000000000000000000000001000 8
00000000000000000000000000010000 16
00000000000000000000000000100000 32
00000000000000000000000001000000 64
Setting a few more bits reveals the binary pattern:
Binary Representation Decimal value
00000000000000000000000000000101 5 (4 + 1)
00000000000000000000000000001101 13 (8 + 4 + 1)
00000000000000000000000000101101 45 (32 + 8 + 4 +
JavaScript binary numbers are stored in two's complement format.
This means that a negative number is the bitwise NOT of the number plus 1:
Binary Representation Decimal va
00000000000000000000000000000101 5
11111111111111111111111111111011 -5
00000000000000000000000000000110 6
11111111111111111111111111111010 -6
00000000000000000000000000101000 40
11111111111111111111111111011000 -40
Converting Decimal to Binary

Example
function dec2bin(dec){
return (dec >>> 0).toString(2);
}
Try it Yourself »
Converting Binary to Decimal

Example
function bin2dec(bin){
return parseInt(bin, 2).toString(10);
}
Try it Yourself »
JavaScript Regular Expressions
A regular expression is a sequence of characters that forms a search

pattern.
The search pattern can be used for text search and text replace operations.
What Is a Regular Expression?

A regular expression is a sequence of characters that forms a search pattern.
When you search for data in a text, you can use this search pattern to describe
what you are searching for.
A regular expression can be a single character, or a more complicated pattern.
Regular expressions can be used to perform all types of text search and text

replace operations.
Syntax
/pattern/modifiers;
Example
var patt = /w3schools/i;
Example explained:
/w3schools/i is a regular expression.
w3schools is a pattern (to be used in a search).

i is a modifier (modifies the search to be case-insensitive).
Using String Methods

In JavaScript, regular expressions are often used with the two string
methods: search() and replace().
The search() method uses an expression to search for a match, and returns the

position of the match.
The replace() method returns a modified string where the pattern is replaced.
Using String search() With a String

The search() method searches a string for a specified value and returns the
position of the match:
Example
Use a string to do a search for "W3schools" in a string:
var str = "Visit W3Schools!";

var n = str.search("W3Schools");
Try it Yourself »
Using String search() With a Regular

Expression
Example
Use a regular expression to do a case-insensitive search for "w3schools" in a
string:
var str = "Visit W3Schools";
var n = str.search(/w3schools/i);
The result in n will be:
Try it Yourself »
Using String replace() With a String

The replace() method replaces a specified value with another value in a string:
var str = "Visit Microsoft!";

var res = str.replace("Microsoft", "W3Schools");
Try it Yourself »
Use String replace() With a Regular

Expression
Example
Use a case insensitive regular expression to replace Microsoft with W3Schools in
a string:
var str = "Visit Microsoft!";

var res = str.replace(/microsoft/i, "W3Schools");
The result in res will be:
Visit W3Schools!
Try it Yourself »
Did You Notice?
Regular expression arguments (instead of string arguments) can be used in the
methods above.
Regular expressions can make your search much more powerful (case
insensitive for example).
Regular Expression Modifiers

Modifiers can be used to perform case-insensitive more global searches:
Modifier Description
i Perform case-insensitive matching
g Perform a global match (find all matches rather than stopping after
match)
m Perform multiline matching
Regular Expression Patterns

Brackets are used to find a range of characters:
Expression Description
[abc] Find any of the characters between the brackets
[0-9] Find any of the digits between the brackets
(x|y) Find any of the alternatives separated with |
Metacharacters are characters with a special meaning:
Metacharacter Description
\d Find a digit
\s Find a whitespace character
\b Find a match at the beginning of a word like this: \bWORD, or at th

word like this: WORD\b
\uxxxx Find the Unicode character specified by the hexadecimal number xx
Quantifiers define quantities:
Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
Using the RegExp Object

In JavaScript, the RegExp object is a regular expression object with predefined
properties and methods.
Using test()
The test() method is a RegExp expression method.
It searches a string for a pattern, and returns true or false, depending on the
result.
The following example searches a string for the character "e":
Example
var patt = /e/;
patt.test("The best things in life are free!");
Since there is an "e" in the string, the output of the code above will be:
true
Try it Yourself »
You don't have to put the regular expression in a variable first. The two lines
above can be shortened to one:
/e/.test("The best things in life are free!");
Using exec()
The exec() method is a RegExp expression method.
It searches a string for a specified pattern, and returns the found text as an
object.
If no match is found, it returns an empty (null) object.
The following example searches a string for the character "e":
Example 1
/e/.exec("The best things in life are free!");
Try it Yourself »
Complete RegExp Reference

For a complete reference, go to our Complete JavaScript RegExp Reference.
The reference contains descriptions and examples of all RegExp properties and
methods.
JavaScript Errors - Throw and Try
to Catch
The try statement lets you test a block of code for errors.
The catch statement lets you handle the error.
The throw statement lets you create custom errors.
The finally statement lets you execute code, after try and catch, regardless
of the result.
Errors Will Happen!

When executing JavaScript code, different errors can occur.
Errors can be coding errors made by the programmer, errors due to wrong
input, and other unforeseeable things.
Example
In this example we have written alert as adddlert to deliberately produce an
error:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
Try it Yourself »
JavaScript catches adddlert as an error, and executes the catch code to handle

it.
JavaScript try and catch

The try statement allows you to define a block of code to be tested for errors
while it is being executed.
The catch statement allows you to define a block of code to be executed, if an

error occurs in the try block.
The JavaScript statements try and catch come in pairs:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript Throws Errors

When an error occurs, JavaScript will normally stop and generate an error
message.
The technical term for this is: JavaScript will throw an exception (throw an
error).
JavaScript will actually create an Error object with two

properties: name and message.
The throw Statement
The throw statement allows you to create a custom error.
Technically you can throw an exception (throw an error).
The exception can be a JavaScript String, a Number, a Boolean or an Object:
throw "Too big"; // throw a text

throw 500; // throw a number
If you use throw together with try and catch, you can control program flow and

generate custom error messages.
Input Validation Example

This example examines input. If the value is wrong, an exception (err) is
thrown.
The exception (err) is caught by the catch statement and a custom error
message is displayed:
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
Try it Yourself »
HTML Validation
The code above is just an example.
Modern browsers will often use a combination of JavaScript and built-in HTML
validation, using predefined validation rules defined in HTML attributes:
<input id="demo" type="number" min="5" max="10" step="1">
You can read more about forms validation in a later chapter of this tutorial.
The finally Statement

The finally statement lets you execute code, after try and catch, regardless of
the result:
Syntax
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
Example
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
Try it Yourself »
The Error Object

JavaScript has a built in error object that provides error information when an
error occurs.
The error object provides two useful properties: name and message.
Error Object Properties
Property Description
name Sets or returns an error name
message Sets or returns an error message (a string)
Error Name Values

Six different values can be returned by the error name property:
Error Name Description
EvalError An error has occurred in the eval() function
RangeError A number "out of range" has occurred
ReferenceError An illegal reference has occurred
SyntaxError A syntax error has occurred

TypeError A type error has occurred
URIError An error in encodeURI() has occurred
The six different values are described below.
Eval Error
An EvalError indicates an error in the eval() function.
Newer versions of JavaScript do not throw EvalError. Use SyntaxError instead.
Range Error
A RangeError is thrown if you use a number that is outside the range of legal
values.
For example: You cannot set the number of significant digits of a number to
500.
Example
var num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Try it Yourself »
Reference Error
A ReferenceError is thrown if you use (reference) a variable that has not been
declared:
Example
var x;
try {
x = y + 1; // y cannot be referenced (used)
}
catch(err) {
}
Try it Yourself »
Syntax Error
A SyntaxError is thrown if you try to evaluate code with a syntax error.
Example
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
}
Try it Yourself »
Type Error
A TypeError is thrown if you use a value that is outside the range of expected
types:
Example
var num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
}
Try it Yourself »
URI (Uniform Resource Identifier) Error

A URIError is thrown if you use illegal characters in a URI function:
Example
try {
decodeURI("%%%"); // You cannot URI decode percent signs
}
catch(err) {
}
Try it Yourself »
Non-Standard Error Object Properties

Mozilla and Microsoft defines some non-standard error object properties:
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
Do not use these properties in public web sites. They will not work in all
browsers.
Complete Error Reference

For a complete reference of the Error object, go to our Complete JavaScript
Error Reference.
JavaScript Scope
Scope determines the accessibility (visibility) of variables.
JavaScript Function Scope

In JavaScript there are two types of scope:
 Local scope
 Global scope
JavaScript has function scope: Each function creates a new scope.
Scope determines the accessibility (visibility) of these variables.
Variables defined inside a function are not accessible (visible) from outside the
function.
Local JavaScript Variables

Variables declared within a JavaScript function, become LOCAL to the function.
Local variables have Function scope: They can only be accessed from within
the function.
Example
// code here CAN use carName
}
Try it Yourself »
Since local variables are only recognized inside their functions, variables with
the same name can be used in different functions.
Local variables are created when a function starts, and deleted when the
function is completed.
Global JavaScript Variables

A variable declared outside a function, becomes GLOBAL.
A global variable has global scope: All scripts and functions on a web page can
access it.
Example
// code here can use carName
// code here can also use carName
}
Try it Yourself »
In JavaScript, objects and functions are also variables.
Scope determines the accessibility of variables, objects, and functions from

different parts of the code.
Automatically Global
If you assign a value to a variable that has not been declared, it will
automatically become a GLOBAL variable.
This code example will declare a global variable carName, even if the value is
assigned inside a function.
Example
myFunction();
// code here can use carName
carName = "Volvo";
}
Try it Yourself »
Strict Mode
All modern browsers support running JavaScript in "Strict Mode".
You will learn more about how to use strict mode in a later chapter of this
tutorial.
In "Strict Mode", undeclared variables are not automatically global.
Global Variables in HTML

With JavaScript, the global scope is the complete JavaScript environment.
In HTML, the global scope is the window object. All global variables belong to
the window object.
Example
// code here can use window.carName
Try it Yourself »
Warning
Do NOT create global variables unless you intend to.
Your global variables (or functions) can overwrite window variables (or
functions).
Any function, including the window object, can overwrite your global variables
and functions.
The Lifetime of JavaScript Variables

The lifetime of a JavaScript variable starts when it is declared.
Local variables are deleted when the function is completed.
In a web browser, global variables are deleted when you close the browser
window (or tab).
Function Arguments
Function arguments (parameters) work as local variables inside functions.
https://www.w3schools.com/js/js_hoisting.asp

Javascript Tutorial: Examples in Each Chapter

Uploaded by

Javascript Tutorial: Examples in Each Chapter

Uploaded by

JavaScript Tutorial

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

Examples in Each Chapter

This tutorial supplements all explanations with clarifying "Try it Yourself"

Why Study JavaScript?

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

Did You Know?

JavaScript was invented by Brendan Eich in 1995, and became an ECMA

Always make sure you understand all the "Try-it-Yourself" examples.

Complete JavaScript Reference

var = " ";

Start the Exercise

JavaScript Quiz Test

Start JavaScript Quiz!

W3Schools' Online Certification

More than 25 000 certificates already issued!

Get Your Certificate »

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML

The Python Certificate documents your knowledge of Python.

The jQuery Certificate documents your knowledge of jQuery.

The SQL Certificate documents your knowledge of SQL.

The PHP Certificate documents your knowledge of PHP and MySQL.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The Bootstrap Certificate documents your knowledge of the Bootstrap

JavaScript Can Change HTML Content

JavaScript Can Change HTML Attribute

The Light Bulb

JavaScript Can Change HTML Styles (CSS)

JavaScript Can Hide HTML Elements

JavaScript Can Show HTML Elements

The <script> Tag

Old JavaScript examples may use a type attribute: <script

JavaScript Functions and Events

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or

The function is invoked (called) when a button is clicked:

<h1>A Web Page</h1>

The function is invoked (called) when a button is clicked:

<h1>A Web Page</h1>

External file: myScript.js

JavaScript files have the file extension .js.

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where the <script> tag is

External scripts cannot contain <script> tags.

External JavaScript Advantages

 It separates HTML and code

This example uses a full URL to link to a script:

JavaScript Display Possibilities

 Writing into an HTML element, using innerHTML.

The id attribute defines the HTML element. The innerHTML property defines the

<h1>My First Web Page</h1>

<h1>My First Web Page</h1>

<h1>My First Web Page</h1>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

<h1>My First Web Page</h1>

You will learn more about debugging in a later chapter.

In a programming language, these programming instructions are

A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.

Values, Operators, Expressions, Keywords, and Comments.

Most JavaScript programs contain many JavaScript statements.

JavaScript programs (and JavaScript statements) are often called JavaScript

Add a semicolon at the end of each executable statement:

var a, b, c; // Declare 3 variables

When separated by semicolons, multiple statements on one line are allowed:

On the web, you might see examples without semicolons.

The following lines are equivalent:

A good practice is to put spaces around operators ( = + - * / ):

JavaScript Line Length and Line Breaks

JavaScript Code Blocks

The purpose of code blocks is to define statements to be executed together.

In this tutorial we use 2 spaces of indentation for code blocks.