JavaScript Tutorial

JavaScript Tutorial
JavaScript is the world's most popular programming language.
JavaScript is the programming language of 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
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.
If you have a large screen, the menu will always be present on the left.
If you have a small screen, open the menu by clicking the top menu sign ☰.
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.
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
This tutorial covers every version of JavaScript:
• The Original JavaScript ES1 ES2 ES3 (1997-1999)

• The First Main Revision ES5 (2009)
• The Second Revision ES6 (2015)
• The Yearly Additions (2016, 2017, 2018)
Learning Speed
In this tutorial, the learning speed is your choice.
Everything is up to you.
If you are struggling, take a break, or re-read the material.
Always make sure you understand all the "Try-it-Yourself" examples.
The only way to become a clever programmer is to: Practice. Practice. Practice. Code. Code.
Code !
Test Yourself With Exercises

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

Commonly Asked Questions
• How do I get JavaScript?
• Where can I download JavaScript?
• Is JavaScript Free?
You don't have to get or download JavaScript.
JavaScript is already running in your browser on your computer, on your tablet, and on
your smart-phone.
JavaScript is free to use for everyone.
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.
JavaScript Quiz Test

Test your JavaScript skills at W3Schools!
JavaScript Introduction
This page contains some examples of what JavaScript can do.
JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element
content (innerHTML) to "Hello JavaScript":
Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript accepts both double and single quotes:
Example
document.getElementById('demo').innerHTML = 'Hello JavaScript';
JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:
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";
JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:
Example
document.getElementById("demo").style.display = "none";
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";
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.
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
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>
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>
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>
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>
<script src="myScript2.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/myScript.js"></script>
This example uses a script located in a specified folder on the current web site:
Example
<script src="/js/myScript.js"></script>
This example links to a script located in the same folder as the current page:
Example
<script src="myScript.js"></script>
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>
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>
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>
The document.write() method should only be used for testing.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
JavaScript Statements
Example
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
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.";
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:
let 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
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
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:
let person = "Hege";

let person="Hege";
A good practice is to put spaces around operators ( = + - * / ):
let 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!";
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?";
}
In this tutorial we use 2 spaces of indentation for code blocks.

You will learn more about functions later in this tutorial.
Try yourself
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 function
do ... while Executes a block of statements, and repeats the block, while a condition is true
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:
// How to create variables:

var x;
let y;
// How to use variables:

x = 5;
y = 6;
let z = x + y;
JavaScript Values
The JavaScript syntax defines two types of values:
• Fixed values
• Variable values
Fixed values are called Literals.
Variable values are called Variables.
JavaScript Literals
The two most important syntax rules for fixed values are:
1. Numbers are written with or without decimals:
10.50
1001
2. Strings are text, written within double or single quotes:
"John Doe"
'John Doe'
JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the keywords var, let and const 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:
let x;
x = 6;
JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values:
(5 + 6) * 10
JavaScript uses an assignment operator ( = ) to assign values to variables:
let x, y;
x = 5;
y = 6;
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
Expressions can also contain variable values:
x * 10
The values can be of various types, such as numbers and strings.
For example, "John" + " " + "Doe", evaluates to "John Doe":

"John" + " " + "Doe"
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The let keyword tells the browser to create variables:
let x, y;
x = 5 + 6;
y = x * 10;
The var keyword also tells the browser to create variables:
var x, y;
x = 5 + 6;
y = x * 10;
In these examples, using var or let will produce the same result.
You will learn more about var and let later in this tutorial.
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:
let x = 5; // I will be executed
// x = 6; I will NOT be executed
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:
let lastname, lastName;

lastName = "Doe";
lastname = "Peterson";
JavaScript does not interpret LET or Let as the keyword let.
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.";
This example uses a single line comment at the end of each line to explain the code:
Example
let x = 5; // Declare x, give it the value of 5

let y = x + 2; // Declare y, give it the value of x + 2
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:
*/
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";

This example uses a comment block to prevent execution of multiple lines:
Example
/*
*/
There are 3 ways to declare a JavaScript variable:
• Using var
• Using let
• Using const
This chapter uses var.
The let and const keywords are explained in the next chapters.
Variables
Variables are containers for storing data (values).
In this example, x, y, and z, are variables, declared with the var keyword:
Example
var x = 5;
var y = 6;
var z = x + y;
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;
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!';
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>
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;
A declaration can span multiple lines:
var person = "John Doe",

carName = "Volvo",
price = 200;
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;
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;
JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:
Example
var x = 5 + 2 + 3;
You can also add strings, but strings will be concatenated:
Example
var x = "John" + " " + "Doe";
Also try this:
Example
var x = "5" + 2 + 3;
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";
JavaScript Dollar Sign $

Remember that JavaScript identifiers (names) must begin with:
• A letter (A-Z or a-z)

• A dollar sign ($)
• Or an underscore (_)
Since JavaScript treats a dollar sign as a letter, identifiers containing $ are valid variable names:
Example
var $$$ = "Hello World";

var $ = 2;
var $myMoney = 5;
Using the dollar sign is not very common in JavaScript, but professional programmers often use
it as an alias for the main function in a JavaScript library.
In the JavaScript library jQuery, for instance, the main function $ is used to select HTML
elements. In jQuery $("p"); means "select all p elements".
JavaScript Underscore (_)

Since JavaScript treats underscore as a letter, identifiers containing _ are valid variable names:
Example
var _lastName = "Johnson";

var _x = 2;
var _100 = 5;
Using the underscore is not very common in JavaScript, but a convention among professional
programmers is to use it as an alias for "private (hidden)" variables.

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

JavaScript Const
The const keyword was introduced in ES6 (2015).
Variables defined with const cannot be Redeclared.
Variables defined with const cannot be Reassigned.
Variables defined with const have Block Scope.
Cannot be Reassigned
Example
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Must be Assigned
JavaScript const variables must be assigned a value when they are declared:
Correct
const PI = 3.14159265359;
Incorrect
const PI;
PI = 3.14159265359;
When to use JavaScript const?

As a general rule, always declare a variables with const unless you know that the value will
change.
Always use const when you declare:
• A new Array
• A new Object
• A new Function
• A new RegExp
Constant Objects and Arrays
The keyword const is a little misleading.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
• Reassign a constant value

• Reassign a constant array
• Reassign a constant object
But you CAN:
• Change a constant array

• Change a constant object
Constant Arrays
You can change the elements of a constant array:
Example
// You can create a constant array:

const cars = ["Saab", "Volvo", "BMW"];
// You can change an element:

cars[0] = "Toyota";
// You can add an element:

cars.push("Audi");
But you can NOT reassign the array:
Example
cars = ["Toyota", "Volvo", "Audi"]; // ERROR

Constant Objects
You can change the properties of a constant object:
Example
// You can create a const object:

const car = {type:"Fiat", model:"500", color:"white"};
// You can change a property:

car.color = "red";
// You can add a property:

car.owner = "Johnson";
But you can NOT reassign the object:
Example
car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR
Browser Support
The const keyword is not supported in Internet Explorer 10 or earlier.
The following table defines the first browser versions with full support for the const keyword:
Chrome 49 IE 11 / Edge Firefox 36 Safari 10 Opera 36

Mar, 2016 Oct, 2013 Feb, 2015 Sep, 2016 Mar, 2016
Block Scope
Declaring a variable with const is similar to let when it comes to Block Scope.
The x declared in the block, in this example, is not the same as the x declared outside the block:
Example
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
You can learn more about block scope in the chapter JavaScript Scope.
Redeclaring
Redeclaring a JavaScript var variable is allowed anywhere in a program:
Example
var x = 2; // Allowed
x = 4; // Allowed
Redeclaring an existing var or let variable to const, in the same scope, is not allowed:
Example
const x = 2; // Not allowed
{
let x = 2; // Allowed
}
{
const x = 2; // Allowed
}
Reassigning an existing const variable, in the same scope, is not allowed:

Example
x = 2; // Not allowed
var x = 2; // Not allowed
let x = 2; // Not allowed
{
x = 2; // Not allowed
var x = 2; // Not allowed
let x = 2; // Not allowed
}
Redeclaring a variable with const, in another scope, or in another block, is allowed:
Example
{
}
{
}
Const Hoisting
Variables defined with var are hoisted to the top and can be initialized at any time.
Meaning: You can use the variable before it is declared:
Example
This is OK:
carName = "Volvo";
var carName;
If you want to learn more about hoisting, study the chapter JavaScript Hoisting.
Variables defined with const are also hoisted to the top, but not initialized.
Meaning: Using a const variable before it is declared will result in a ReferenceError:
Example
alert (carName);
const carName = "Volvo";
JavaScript Operators
Example
Assign values to variables and add them together:
let x = 5; // assign the value 5 to x

let y = 2; // assign the value 2 to y
let z = x + y; // assign the value 7 to z (5 + 2)
The assignment operator (=) assigns a value to a variable.
Assignment
let x = 10;
The addition operator (+) adds numbers:
Adding
let x = 5;
let y = 2;
let z = x + y;
The multiplication operator (*) multiplies numbers.
Multiplying
let x = 5;
let y = 2;
let z = x * y;
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
let x = 10;
x += 5;
Assignment operators are fully described in the JS Assignment chapter.
JavaScript String Operators

The + operator can also be used to add (concatenate) strings.
Example
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
The result of txt3 will be:
John Doe
The += assignment operator can also be used to add (concatenate) strings:
Example
let text1 = "What a very ";

text1 += "nice day";
The result of txt1 will be:
What a very nice day
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
let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;
The result of x, y, and z will be:
10
55
Hello5
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 Decimal
& AND 5&1 0101 & 0001 0001 1
| OR 5|1 0101 | 0001 0101 5
~ NOT ~5 ~0101 1010 10
^ XOR 5^1 0101 ^ 0001 0100 4
<< Zero fill left shift 5 << 1 0101 << 1 1010 10
>> Signed right shift 5 >> 1 0101 >> 1 0010 2
>>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010 2
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.

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
let x = 100 + 50;
or variables:
Example
let x = a + b;
or expressions:
Example
let x = (100 + 50) * a;
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
let x = 5;
let y = 2;
let z = x + y;
Subtracting
The subtraction operator (-) subtracts numbers.
Example
let x = 5;
let y = 2;
let z = x - y;
Multiplying
The multiplication operator (*) multiplies numbers.
Example
let x = 5;
let y = 2;
let z = x * y;
Dividing
The division operator (/) divides numbers.
Example
let x = 5;
let y = 2;
let z = x / y;
Remainder
The modulus operator (%) returns the division remainder.
Example
let x = 5;
let y = 2;
let z = x % y;
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
let x = 5;
x++;
let z = x;
Decrementing
The decrement operator (--) decrements numbers.
Example
let x = 5;
x--;
let z = x;
Exponentiation
The exponentiation operator (**) raises the first operand to the power of the second operand.
Example
let x = 5;
let z = x ** 2; // result is 25
x ** y produces the same result as Math.pow(x,y):
Example
let x = 5;
let z = Math.pow(x,2); // result is 25
Operator Precedence
Operator precedence describes the order in which operations are performed in an arithmetic
expression.
Example
let x = 100 + 50 * 3;
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
let x = (100 + 50) * 3;
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
let x = 100 + 50 - 3;
JavaScript Operator Precedence Values

Pale red entries indicates ECMAScript 2015 (ES6) or higher.
Value Operator Description Example
21 () Expression grouping (3 + 4)
20 . Member person.name
20 [] Member person["name"]
20 () Function call myFunction()
20 new Create new Date()
18 ++ Postfix Increment i++
18 -- Postfix Decrement i--
17 ++ Prefix Increment ++i
17 -- Prefix Decrement --i
17 ! Logical not !(x==y)
17 typeof Type typeof x
16 ** Exponentiation (ES2016) 10 ** 2
15 * Multiplication 10 * 5
15 / Division 10 / 5
15 % Division Remainder 10 % 5
14 + Addition 10 + 5
14 - Subtraction 10 - 5
13 << Shift left x << 2

13 >> Shift right x >> 2
13 >>> Shift right (unsigned) x >>> 2
12 < Less than x<y
12 <= Less than or equal x <= y
12 > Greater than x>y
12 >= Greater than or equal x >= y
12 in Property in Object "PI" in Math
12 instanceof Instance of Object instanceof Array
11 == Equal x == y
11 === Strict equal x === y
11 != Unequal x != y
11 !== Strict unequal x !== y
10 & Bitwise AND x&y
9 ^ Bitwise XOR x^y
8 | Bitwise OR x|y
7 && Logical AND x && y
6 || Logical OR x || y
5 ?? Nullish Coalescing 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.
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 a part of ECMAScript 2016.
Assignment Examples
The = assignment operator assigns a value to a variable.
Assignment
let x = 10;
The += assignment operator adds a value to a variable.
Assignment
let x = 10;
x += 5;
The -= assignment operator subtracts a value from a variable.
Assignment
let x = 10;
x -= 5;
The *= assignment operator multiplies a variable.
Assignment
let x = 10;
x *= 5;
The /= assignment divides a variable.
Assignment
let x = 10;
x /= 5;
The %= assignment operator assigns a remainder to a variable.

Assignment
let x = 10;
x %= 5;
avaScript Data Types

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

let lastName = "Johnson"; // String
let x = {firstName:"John", lastName:"Doe"}; // Object
The Concept of Data Types

In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
Without data types, a computer cannot safely solve this:

let x = 16 + "Volvo";
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:
let x = "16" + "Volvo";
When adding a number and a string, JavaScript will treat the number as a string.
Example
let x = 16 + "Volvo";
Example
let x = "Volvo" + 16;
JavaScript evaluates expressions from left to right. Different sequences can produce different
results:
JavaScript:
let x = 16 + 4 + "Volvo";
Result:
20Volvo
JavaScript:
let x = "Volvo" + 16 + 4;
Result:
Volvo164
In the first example, JavaScript treats 16 and 4 as numbers, until it reaches "Volvo".
In the second example, since the first operand is a string, all operands are treated as strings.
JavaScript Types are Dynamic

JavaScript has dynamic types. This means that the same variable can be used to hold different
data types:
Example
let x; // Now x is undefined

x = 5; // Now x is a Number
x = "John"; // Now x is a String
JavaScript Strings
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:
Example
let carName1 = "Volvo XC60"; // Using double quotes

let carName2 = 'Volvo XC60'; // Using single quotes
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
Example
let answer1 = "It's alright"; // Single quote inside double quotes

let answer2 = "He is called 'Johnny'"; // Single quotes inside double quotes
let answer3 = 'He is called "Johnny"'; // Double quotes inside single quotes
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
let x1 = 34.00; // Written with decimals

let x2 = 34; // Written without decimals
Extra large or extra small numbers can be written with scientific (exponential) notation:
Example
let y = 123e5; // 12300000

let z = 123e-5; // 0.00123
You will learn more about numbers later in this tutorial.
JavaScript Booleans
Booleans can only have two values: true or false.
Example
let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false
Booleans are often used in conditional testing.
You will learn more about conditional testing later in this tutorial.
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three items (car names):
Example
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
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
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"
Example
typeof 0 // Returns "number"

typeof 314 // Returns "number"
typeof 3.14 // Returns "number"
typeof (3) // Returns "number"
typeof (3 + 4) // Returns "number"
You will learn more about typeof later in this tutorial.
Undefined
In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
Example
let car; // Value is undefined, type is undefined
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
Empty Values
An empty value has nothing to do with undefined.
An empty string has both a legal value and a type.
Example
let car = ""; // The value is "", the typeof is "string"

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
}
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:
let 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
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);
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 object instead of the function result.
Example
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
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:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
You can use the function directly, as a variable value:
let text = "The temperature is " + toCelsius(77) + " Celsius";
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
let carName = "Volvo";
// code here CAN use carName
}
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.
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 Methods
car.name = Fiat car.start()
car.model = 500 car.drive()
car.weight = 850kg car.brake()
car.color = white car.stop()

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:
let car = "Fiat";
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
The values are written as name:value pairs (name and value separated by a colon).
It is a common practice to declare objects with the const keyword.
Object Definition
You define (and create) a JavaScript object with an object literal:
Example
Spaces and line breaks are not important. An object definition can span multiple lines:
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
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;
Example2
person["lastName"];
JavaScript objects are containers for named values called properties.
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
const 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();
If you access a method without the () parentheses, it will return the function definition:
Example
name = person.fullName;
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:
x = new String(); // Declares x as a String object

y = new Number(); // Declares y as a Number object
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.

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>
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>
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>
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.
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
let text = "John Doe";
You can use single or double quotes:
Example
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
Example
let answer1 = "It's alright";

let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';
String Length
To find the length of a string, use the built-in length property:
Example
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

text.length; // Will return 26
Escape Character
Because strings must be written within quotes, JavaScript will misunderstand this string:
let text = "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
let text = "We are the so-called \"Vikings\" from the north.";
The sequence \' inserts a single quote in a string:
Example
let text= 'It\'s alright.';
The sequence \\ inserts a backslash in a string:
Example
let text = "The character \\ is called backslash.";
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
"Hello Dolly!";
You can also break up a code line within a text string with a single backslash:
Example
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
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!";
You cannot break up a code line with a backslash:
Example
document.getElementById("demo").innerHTML = \
"Hello Dolly!";
Strings Can be Objects

Normally, JavaScript strings are primitive values, created from literals:
let firstName = "John";
But strings can also be defined as objects with the keyword new:
let firstName = new String("John");
Example
let x = "John";
let y = new String("John");
// typeof x will return string

// typeof y will return object
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
let x = "John";
// (x == y) is true because x and y have equal values
When using the === operator, equal values may not be equal, because the === operator expects
equality in both data type and value.
Example
let x = "John";
// (x === y) is false because x and y have different types (string and object)
Or even worse. Objects cannot be compared:
Example
let x = new String("John");

// (x == y) is false because x and y are objects
Example

// (x === y) is false because x and y are objects
Note the difference between (x==y) and (x===y).

Also note that comparing two JavaScript objects will always return false.
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
let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
txt.length // Returns 26
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
let str = "Apple, Banana, Kiwi";

str.slice(7, 13) // Returns Banana
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

str.slice(-12, -6) // Returns Banana
If you omit the second parameter, the method will slice out the rest of the string:
Example
str.slice(7); // Returns Banana,Kiwi
or, counting from the end:

Example
str.slice(-12) // Returns Banana,Kiwi
The substring() Method

substring() is similar to slice().
The difference is that substring() cannot accept negative indexes.
Example

substring(7, 13) // Returns Banana
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

str.substr(7, 6) // Returns Banana
The result of res will be:
Banana
If you omit the second parameter, substr() will slice out the rest of the string.
Example

str.substr(7) // Returns Banana,Kiwi
If the first parameter is negative, the position counts from the end of the string.
Example

str.substr(-4) // Returns Kiwi
Replacing String Content

The replace() method replaces a specified value with another value in a string:
Example
let text = "Please visit Microsoft!";

let newText = text.replace("Microsoft", "W3Schools");
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
let text = "Please visit Microsoft and Microsoft!";

By default, the replace() method is case sensitive. Writing MICROSOFT (with upper-case)
will not work:
Example

let newText = text.replace("MICROSOFT", "W3Schools");
To replace case insensitive, use a regular expression with an /i flag (insensitive):
Example

let newText = text.replace(/MICROSOFT/i, "W3Schools");
Note that regular expressions are written without quotes.
To replace all matches, use a regular expression with a /g flag (global match):
Example
let newText = text.replace(/Microsoft/g, "W3Schools");
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
let text1 = "Hello World!"; // String

let text2 = text1.toUpperCase(); // text2 is text1 converted to upper
A string is converted to lower case with toLowerCase():
Example

let text2 = text1.toLowerCase(); // text2 is text1 converted to lower
The concat() Method

concat() joins two or more strings:
Example
let text1 = "Hello";

let text2 = "World";
let text3 = text1.concat(" ", text2);
The concat() method can be used instead of the plus operator. These two lines do the same:
Example
text = "Hello" + " " + "World!";

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
let text = " Hello World! ";

text.trim() // Returns "Hello World!"
JavaScript String Padding

ECMAScript 2017 added two String methods: padStart and padEnd to support padding at the
beginning and at the end of a string.
Example
let text = "5";

text.padStart(4,0) // Returns 0005
Example
let text = "5";

text.padEnd(4,0) // Returns 5000
String Padding is not supported in Internet Explorer.
Firefox and Safari were the first browsers with support for JavaScript string padding:
Chrome 57 Edge 15 Firefox 48 Safari 10 Opera 44

Mar 2017 Apr 2017 Aug 2016 Sep 2016 Mar 2017
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
let text = "HELLO WORLD";

text.charAt(0) // Returns H
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
text.charCodeAt(0) // Returns 72
Property Access
ECMAScript 5 (2009) allows property access [ ] on strings:
Example

text[0] // returns H
Property access might be a little unpredictable:
• 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
text[0] = "A" // Gives no error, but does not work
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
text.split(",") // Split on commas

text.split(" ") // Split on spaces
text.split("|") // Split on pipe
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
text.split("") // Split in characters
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.
let txt = "abcdefghijklm";
let pos = txt. ;

Start the Exercise
avaScript 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).
String Length
The length property returns the length of a string:
Example
let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

txt.length // Returns 26
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

str.slice(7, 13) // Returns Banana
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

str.slice(-12, -6) // Returns Banana
If you omit the second parameter, the method will slice out the rest of the string:
Example
str.slice(7); // Returns Banana,Kiwi
or, counting from the end:
Example
str.slice(-12) // Returns Banana,Kiwi
The substring() Method

substring() is similar to slice().
The difference is that substring() cannot accept negative indexes.
Example
substring(7, 13) // Returns Banana
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

str.substr(7, 6) // Returns Banana
The result of res will be:
Banana
If you omit the second parameter, substr() will slice out the rest of the string.
Example

str.substr(7) // Returns Banana,Kiwi
If the first parameter is negative, the position counts from the end of the string.
Example

str.substr(-4) // Returns Kiwi
Replacing String Content

Example

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

By default, the replace() method is case sensitive. Writing MICROSOFT (with upper-case)
will not work:
Example

let newText = text.replace("MICROSOFT", "W3Schools");
To replace case insensitive, use a regular expression with an /i flag (insensitive):
Example

let newText = text.replace(/MICROSOFT/i, "W3Schools");
Note that regular expressions are written without quotes.
To replace all matches, use a regular expression with a /g flag (global match):
Example

let newText = text.replace(/Microsoft/g, "W3Schools");
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
let text2 = text1.toUpperCase(); // text2 is text1 converted to upper
A string is converted to lower case with toLowerCase():
Example

let text2 = text1.toLowerCase(); // text2 is text1 converted to lower
The concat() Method

concat() joins two or more strings:
Example
let text1 = "Hello";

let text2 = "World";
let text3 = text1.concat(" ", text2);
The concat() method can be used instead of the plus operator. These two lines do the same:
Example
text = "Hello" + " " + "World!";

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
let text = " Hello World! ";

text.trim() // Returns "Hello World!"
JavaScript String Padding

ECMAScript 2017 added two String methods: padStart and padEnd to support padding at the
beginning and at the end of a string.
Example
let text = "5";

text.padStart(4,0) // Returns 0005
Example
let text = "5";

text.padEnd(4,0) // Returns 5000
String Padding is not supported in Internet Explorer.
Firefox and Safari were the first browsers with support for JavaScript string padding:

Mar 2017 Apr 2017 Aug 2016 Sep 2016 Mar 2017
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

text.charAt(0) // Returns H
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
text.charCodeAt(0) // Returns 72
Property Access
ECMAScript 5 (2009) allows property access [ ] on strings:
Example

Property access might be a little unpredictable:
• 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

text[0] = "A" // Gives no error, but does not work
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
text.split(",") // Split on commas
text.split(" ") // Split on spaces
text.split("|") // Split on pipe
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
text.split("") // Split in characters
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.
let txt = "abcdefghijklm";
let pos = txt. ;
Start the Exercise
JavaScript String Search

JavaScript methods for searching strings:
• String.indexOf()
• String.lastindexOf()
• String.startsWith()
• String.endsWithf()
String.indexOf()
The indexOf() method returns the index of (the position of) the first occurrence of a specified
text in a string:
Example
let str = "Please locate where 'locate' occurs!";

str.indexOf("locate") // Returns 7
JavaScript counts positions from zero.

0 is the first position in a string, 1 is the second, 2 is the third ...
String.lastIndexOf()
The lastIndexOf() method returns the index of the last occurrence of a specified text in a
string:
Example

str.lastIndexOf("locate") // Returns 21
Both indexOf(), and lastIndexOf() return -1 if the text is not found:
Example

str.lastIndexOf("John") // Returns -1
Both methods accept a second parameter as the starting position for the search:
Example

str.indexOf("locate", 15) // Returns 21
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

str.lastIndexOf("locate", 15) // Returns 7
String.search()
The search() method searches a string for a specified value and returns the position of the
match:
Example

str.search("locate") // Returns 7
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.
String.startsWith()
The startsWith() method returns true if a string begins with a specified value, otherwise
false:
Example
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true

Syntax
string.startsWith(searchvalue, start)
Parameter Values
Parameter Description
searchvalue Required. The value to search for.
start Optional. Default 0. The position to start the search.
Examples
text.startsWith("world") // Returns false

text.startsWith("world", 5) // Returns false

text.startsWith("world", 6) // Returns true
Note: The startsWith() method is case sensitive.
The startsWith() method is not supported in Internet Explorer.
String.endsWith()
The endsWith() method returns true if a string ends with a specified value, otherwise false:
Example
Check if a string ends with "Doe":
var text = "John Doe";

text.endsWith("Doe") // Returns true
Syntax
string.endswith(searchvalue, length)
Parameter Values
Parameter Description
searchvalue Required. The value to search for.
length Optional. The length to search.
Check in the 11 first characters of a string ends with "world":

text.endsWith("world", 11) // Returns true
Note: The endsWith() method is case sensitive.
The endsWith() method is not supported in Internet Explorer.

JavaScript Numbers
JavaScript has only one type of number. Numbers can be written with or without decimals.
Example
let x = 3.14; // A number with decimals

let y = 3; // A number without decimals
Extra large or extra small numbers can be written with scientific (exponent) notation:
Example
let x = 123e5; // 12300000

let y = 123e-5; // 0.00123
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 Sign
52 bits (0 - 51) 11 bits (52 - 62) 1 bit (63)
Precision
Integers (numbers without a period or exponent notation) are accurate up to 15 digits.
Example
let x = 999999999999999; // x will be 999999999999999

let y = 9999999999999999; // y will be 10000000000000000
The maximum number of decimals is 17, but floating point arithmetic is not always 100%
accurate:
Example
let x = 0.2 + 0.1; // x will be 0.30000000000000004
To solve the problem above, it helps to multiply and divide:
Example
let x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3
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
let x = 10;
let y = 20;
let z = x + y; // z will be 30 (a number)
If you add two strings, the result will be a string concatenation:
Example
let x = "10";
let y = "20";
let z = x + y; // z will be 1020 (a string)
If you add a number and a string, the result will be a string concatenation:
Example
let x = 10;
let y = "20";
If you add a string and a number, the result will be a string concatenation:
Example
let x = "10";
let y = 20;
A common mistake is to expect this result to be 30:
Example
let x = 10;
let y = 20;
let z = "The result is: " + x + y;
A common mistake is to expect this result to be 102030:
Example
let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;
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:
let x = 100; // x is a number
let y = "100"; // y is a string
JavaScript will try to convert strings to numbers in all numeric operations:
This will work:
let x = "100";
let y = "10";
let z = x / y; // z will be 10
This will also work:
let x = "100";
let y = "10";
let z = x * y; // z will be 1000
And this will work:
let x = "100";
let y = "10";
let z = x - y; // z will be 90
But this will not work:
let x = "100";
let y = "10";
let z = x + y; // z will not be 110 (It will be 10010)
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
let x = 100 / "Apple"; // x will be NaN (Not a Number)
However, if the string contains a numeric value , the result will be a number:
Example
let x = 100 / "10"; // x will be 10
You can use the global JavaScript function isNaN() to find out if a value is a number:
Example
let x = 100 / "Apple";

isNaN(x); // returns true because x is Not a Number
Watch out for NaN. If you use NaN in a mathematical operation, the result will also be NaN:
Example
let x = NaN;
let y = 5;
let z = x + y; // z will be NaN
Or the result might be a concatenation:
Example
let x = NaN;
let y = "5";
let z = x + y; // z will be NaN5
NaN is a number: typeof NaN returns number:
Example
typeof NaN; // returns "number"
Infinity
Infinity (or -Infinity) is the value JavaScript will return if you calculate a number outside
the largest possible number.
Example
let myNumber = 2;
while (myNumber != Infinity) { // Execute until Infinity
myNumber = myNumber * myNumber;
}
Division by 0 (zero) also generates Infinity:
Example
let x = 2 / 0; // x will be Infinity

let y = -2 / 0; // y will be -Infinity
Infinity is a number: typeof Infinity returns number.
Example
typeof Infinity; // returns "number"
Hexadecimal
JavaScript interprets numeric constants as hexadecimal if they are preceded by 0x.
Example
let x = 0xFF; // x will be 255
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
let myNumber = 32;
myNumber.toString(10); // returns 32
Numbers Can be Objects

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

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

When using the == operator, equal numbers are equal:
Example
let x = 500;
When using the === operator, equal numbers are not equal, because the === operator expects
equality in both type and value.
Example
let x = 500;
// (x === y) is false because x and y have different types
Example
let x = new Number(500);

// (x == y) is false because objects cannot be compared

Comparing two JavaScript objects will always return false.
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).
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
let 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
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
let x = 9.656;
x.toExponential(2); // returns 9.66e+0
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
let x = 9.656;
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
toFixed(2) is perfect for working with money.
The toPrecision() Method

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

valueOf() returns a number as a number.
Example
let 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
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
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
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"); // returns 10
parseInt("10.33"); // returns 10
parseInt("10 20 30"); // returns 10
parseInt("10 years"); // returns 10
parseInt("years 10"); // returns NaN

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
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
let x = Number.MAX_VALUE;
MIN_VALUE returns the lowest possible number in JavaScript.
Example
let x = Number.MIN_VALUE;
JavaScript POSITIVE_INFINITY
Example
let x = Number.POSITIVE_INFINITY;
POSITIVE_INFINITY is returned on overflow:
Example
let x = 1 / 0;
JavaScript NEGATIVE_INFINITY
Example
let x = Number.NEGATIVE_INFINITY;
NEGATIVE_INFINITY is returned on overflow:
Example
let x = -1 / 0;
JavaScript NaN - Not a Number

Example
let x = Number.NaN;
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
let x = 100 / "Apple"; // x will be NaN (Not a Number)
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
let x = 6;
x.MAX_VALUE // returns undefined
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
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:
let car1 = "Saab";

let car2 = "Volvo";
let 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:
const array_name = [item1, item2, ...];
Example
Spaces and line breaks are not important. A declaration can span multiple lines:
Example
const cars = [
"Saab",
"Volvo",
"BMW"
];
You can also create an array, and then provide the elements:
Example
const cars = [];

cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:
Example
const cars = new Array("Saab", "Volvo", "BMW");
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:

let x = cars[0]; // x = "Saab"
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";
Access the Full Array

With JavaScript, the full array can be accessed by referring to the array name:
Example
document.getElementById("demo").innerHTML = cars;
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:
const person = ["John", "Doe", 46];
Objects use names to access its "members". In this example, person.firstName returns John:
Object:
const person = {firstName:"John", lastName:"Doe", age:46};
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:
cars.length // Returns the number of elements

cars.sort() // Sorts the array
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
const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.length; // Returns 4
The length property is always one more than the highest array index.
Accessing the First Array Element

Example

fruits[0]; // Returns "Banana"
Accessing the Last Array Element

Example

fruits[fruits.length - 1]; // Returns "Mango"
Looping Array Elements

The safest way to loop through an array, is using a for loop:
Example

let fLen = fruits.length;
text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
You can also use the Array.forEach() function:
Example
let text = "<ul>";

fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
Adding Array Elements

The easiest way to add a new element to an array is using the push() method:
Example
const fruits = ["Banana", "Orange", "Apple"];

fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
New element can also be added to an array using the length property:
Example

fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
WARNING !
Adding elements with high indexes can create undefined "holes" in an array:
Example

fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
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
const person = [];

person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
WARNING !!
If you use named indexes, JavaScript will redefine the array to an object.
After that, some array methods and properties will produce incorrect results.
Example:
const person = [];

person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
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:
const points = new Array(); // Bad

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

const points = [40, 100, 1, 5, 25, 10];
The new keyword only complicates the code. It can also produce some unexpected results:
// This creates an array with two elements (40 and 100):

const points = new Array(40, 100);
What if I remove one of the elements?
// This creates an array with 40 undefined elements !!

const points = new Array(40);
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
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
Solution 2:
The instanceof operator returns true if an object is created by a given constructor:
fruits instanceof Array; // returns true

Exercise:
Get the value "Volvo" from the cars array.
let x = ;
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
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
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 "Mango" from fruits
The pop() method returns the value that was "popped out":
Example
let x = fruits.pop(); // x = "Mango"
Pushing
The push() method adds a new element to an array (at the end):
Example

fruits.push("Kiwi"); // Adds "Kiwi" to fruits
The push() method returns the new array length:
Example

let x = fruits.push("Kiwi"); // x = 5
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 "Banana" from fruits
The shift() method returns the value that was "shifted out":
Example

let x = fruits.shift(); // x = "Banana"
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older
elements:
Example

fruits.unshift("Lemon"); // Adds "Lemon" to fruits
The unshift() method returns the new array length.
Example

fruits.unshift("Lemon"); // Returns 5
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"
The length property provides an easy way to append a new element to an array:
Example

fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruits
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
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");
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");
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
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)
const myGirls = ["Cecilie", "Lone"];

const myBoys = ["Emil", "Tobias", "Linus"];
// Concatenate (join) myGirls and myBoys

const myChildren = myGirls.concat(myBoys);
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)
const arr1 = ["Cecilie", "Lone"];

const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
The concat() method can also take strings as arguments:
Example (Merging an Array with Values)
const arr1 = ["Emil", "Tobias", "Linus"];

const myChildren = arr1.concat("Peter");
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
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
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

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

const citrus = fruits.slice(1, 3);
If the end argument is omitted, like in the first examples, the slice() method slices out the rest
of the array.
Example

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();
Example

document.getElementById("demo").innerHTML = fruits;
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.
;
Start the Exercise
JavaScript Sorting Arrays
Sorting an Array
The sort() method sorts an array alphabetically:
Example

fruits.sort(); // Sorts the elements of fruits
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
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
const points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});
Use the same trick to sort an array descending:
Example
const points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return b - a});
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>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
}
function myFunction2() {
}
</script>
Sorting an Array in Random Order

Example
const points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return 0.5 - Math.random()});
The Fisher Yates Method

The above example, array.sort(), is not accurate, it will favor some numbers over the others.
The most popular correct method, is called the Fisher Yates shuffle, and was introduced in data
science as early as 1938!
In JavaScript the method can be translated to this:
Example
const points = [40, 100, 1, 5, 25, 10];
for (let i = points.length -1; i > 0; i--) {

let j = Math.floor(Math.random() * i)
let k = points[i]
points[i] = points[j]
points[j] = k
}
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
const points = [40, 100, 1, 5, 25, 10];

// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value
Sorting descending:
Example
const 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
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);
}
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);
}
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) {
let len = arr.length;
let max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
This function loops through an array comparing each value with the lowest value found:
Example (Find Min)
function myArrayMin(arr) {
let len = arr.length;
let min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
Sorting Object Arrays

JavaScript arrays often contain objects:
Example
const 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});
Comparing string properties is a little more complex:

Example
cars.sort(function(a, b){
let x = a.type.toLowerCase();
let y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});

Exercise:
Use the correct Array method to sort the fruits array alphabetically.
const fruits = ["Banana", "Orange", "Apple", "Kiwi"];
Start the Exercise
JavaScript Array Iteration
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
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {

txt += value + "<br>";
}
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
const numbers = [45, 4, 9, 16, 25];

let txt = "";
txt += value + "<br>";
}
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
const numbers1 = [45, 4, 9, 16, 25];

const numbers2 = numbers1.map(myFunction);

return value * 2;
}
• The item value

• The item index
When a callback function uses only the value parameter, the index and array parameters can be
omitted:
Example
const numbers1 = [45, 4, 9, 16, 25];

const numbers2 = numbers1.map(myFunction);
return value * 2;
}
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
const numbers = [45, 4, 9, 16, 25];

const over18 = numbers.filter(myFunction);

return value > 18;
}
• 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
const numbers = [45, 4, 9, 16, 25];

const over18 = numbers.filter(myFunction);
return value > 18;
}
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
const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {

return total + value;
}
• 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
const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
}
The reduce() method can accept an initial value:
Example
const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduce(myFunction, 100);

}
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
const numbers = [45, 4, 9, 16, 25];

let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {

}
• 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
const numbers = [45, 4, 9, 16, 25];

let sum = numbers1.reduceRight(myFunction);

}
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
const numbers = [45, 4, 9, 16, 25];

let allOver18 = numbers.every(myFunction);

return value > 18;
}
• The item value

• The item index
When a callback function uses the first parameter only (value), the other parameters can be
omitted:
Example
const numbers = [45, 4, 9, 16, 25];

let allOver18 = numbers.every(myFunction);
return value > 18;
}
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
const numbers = [45, 4, 9, 16, 25];

let someOver18 = numbers.some(myFunction);

return value > 18;
}
• The item value

• The item index
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":
const fruits = ["Apple", "Orange", "Apple", "Mango"];

let position = fruits.indexOf("Apple") + 1;
Syntax
array.indexOf(item, start)
item Required. The item to search for.
Optional. Where to start the search. Negative values will start at the given position counting from
start
the 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":
const fruits = ["Apple", "Orange", "Apple", "Mango"];

let position = fruits.lastIndexOf("Apple") + 1;
Syntax
array.lastIndexOf(item, start)
item Required. The item to search for
Optional. Where to start the search. Negative values will start at the given position counting from
start
the end, and search to the beginning
Array.includes()
ECMAScript 2016 introduced Array.includes() to arrays. This allows us to check if an
element is present in an array (including NaN, unlike indexOf).
Example
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Des 2015 Aug 2016 Des 2015 Oct 2015 Des 2015
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
const numbers = [4, 9, 16, 25, 29];

let first = numbers.find(myFunction);

return value > 18;
}
• The item value

• The item index
Array.find() is not supported in older browsers. The first browser versions with full support
are:
Sep 2015 Aug 2015 Oct 2013 Oct 2014 Sep 2015
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
const numbers = [4, 9, 16, 25, 29];

let first = numbers.findIndex(myFunction);

return value > 18;
}
• The item value

• The item index
Array.findIndex() is not supported in older browsers. The first browser versions with full
support are:
Sep 2015 Aug 2015 Oct 2013 Oct 2014 Sep 2015
JavaScript Array Const
ECMAScript 2015 (ES6)

in 2015, JavaScript introduced an important new keyword: const.
It has become a common practice to declare arrays using const:
Example
Cannot be Reassigned
An array declared with const cannot be reassigned:
Example

cars = ["Toyota", "Volvo", "Audi"]; // ERROR
Arrays are Not Constants

The keyword const is a little misleading.
It does NOT define a constant array. It defines a constant reference to an array.
Because of this, we can still change the elements of a constant array.
Elements Can be Reassigned

You can change the elements of a constant array:
Example
// You can create a constant array:
// You can change an element:

cars[0] = "Toyota";
// You can add an element:

cars.push("Audi");
Browser Support
The const keyword is not supported in Internet Explorer 10 or earlier.
The following table defines the first browser versions with full support for the const keyword:
Chrome 49 IE 11 / Edge Firefox 36 Safari 10 Opera 36
Mar, 2016 Oct, 2013 Feb, 2015 Sep, 2016 Mar, 2016
If you expect that any of your users runs Internet Explorer 10 or earlier, you should avoid using
const.
It will produce a syntax error, and the code will not run.
Assigned when Declared

JavaScript const variables must be assigned a value when they are declared:
Meaning: An arrays declared with const must be initialized when it is declared.
Using const without initializing the array is a syntax error:
Example
This will not work:

const cars;
cars = ["Saab", "Volvo", "BMW"];
Arrays declared with var can be initialized at any time.
You can even use the array before it is declared:
Example
This is OK:
cars = ["Saab", "Volvo", "BMW"];

var cars;
Const Block Scope

An array declared with const has Block Scope.
An array declared in a block is not the same as an array declared outside the block:
Example

// Here cars[0] is "Saab"
{
const cars = ["Toyota", "Volvo", "BMW"];
// Here cars[0] is "Toyota"
}
An array declared with var does not have block scope:
Example
var cars = ["Saab", "Volvo", "BMW"];

{
var cars = ["Toyota", "Volvo", "BMW"];
}
You can learn more about Block Scope in the chapter: JavaScript Scope.
Redeclaring Arrays
Redeclaring an array declared with var is allowed anywhere in a program:
Example
var cars = ["Volvo", "BMW"]; // Allowed

var cars = ["Toyota", "BMW"]; // Allowed
cars = ["Volvo", "Saab"]; // Allowed
Redeclaring or reassigning an array to const, in the same scope, or in the same block, is not
allowed:
Example

const cars = ["Volvo", "BMW"]; // Not allowed
{
}
Redeclaring or reassigning an existing const array, in the same scope, or in the same block, is
not allowed:
Example
const cars = ["Volvo", "BMW"]; // Allowed

var cars = ["Volvo", "BMW"]; // Not allowed
cars = ["Volvo", "BMW"]; // Not allowed
{
var cars = ["Volvo", "BMW"]; // Not allowed
cars = ["Volvo", "BMW"]; // Not allowed
}
Redeclaring an array with const, in another scope, or in another block, is allowed:
Example

{
}
{
}
JavaScript Date Objects
JavaScript Date Object lets us work with dates:
Fri Jun 25 2021 09:36:09 GMT+0400 (Azerbaijan Standard Time)
Example
const d = new Date();
JavaScript Date Output

By default, JavaScript will use the browser's time zone and display a date as a full text string:
Fri Jun 25 2021 09:36:09 GMT+0400 (Azerbaijan 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
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
const d = new Date(2018, 11, 24, 10, 33, 30, 0);
Note: JavaScript counts months from 0 to 11.
January is 0. December is 11.
6 numbers specify year, month, day, hour, minute, second:
Example
const d = new Date(2018, 11, 24, 10, 33, 30);

5 numbers specify year, month, day, hour, and minute:
Example
const d = new Date(2018, 11, 24, 10, 33);
4 numbers specify year, month, day, and hour:
Example
const d = new Date(2018, 11, 24, 10);
3 numbers specify year, month, and day:
Example
const d = new Date(2018, 11, 24);
2 numbers specify year and month:
Example
const d = new Date(2018, 11);
You cannot omit month. If you supply only one parameter it will be treated as milliseconds.
Example
const d = new Date(2018);
Previous Century
One and two digit years will be interpreted as 19xx:
Example
const d = new Date(99, 11, 24);
Example
const d = new Date(9, 11, 24);

new Date(dateString)
new Date(dateString) creates a new date object from a date string:
Example
const d = new Date("October 13, 2014 11:13:00");
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: 1624599369876 milliseconds past January 01, 1970
new Date(milliseconds)
new Date(milliseconds) creates a new date object as zero time plus milliseconds:
Example
01 January 1970 plus 100 000 000 000 milliseconds is approximately 03 March 1973:
Example
const d = new Date(100000000000);
January 01 1970 minus 100 000 000 000 milliseconds is approximately October 31 1966:
Example
const d = new Date(-100000000000);
Example
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 04:00:00 GMT+0400 (Azerbaijan Standard Time)
When you display a date object in HTML, it is automatically converted to a string, with the
toString() method.
Example

document.getElementById("demo").innerHTML = d;
Same as:

document.getElementById("demo").innerHTML = d.toString();
The toUTCString() method converts a date to a UTC string (a date display standard).
Example

document.getElementById("demo").innerHTML = d.toUTCString();
The toDateString() method converts a date to a more readable format:
Example

document.getElementById("demo").innerHTML = d.toDateString();
The toISOString() method converts a date to a string, using the ISO standard format:
Example

document.getElementById("demo").innerHTML = d.toISOString();
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 04:00:00 GMT+0400 (Azerbaijan 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)
const d = new Date("2015-03-25");
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
const d = new Date("2015-03");
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
const d = new Date("2015");

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
const d = new Date("2015-03-25T12:00:00Z");
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
const d = new Date("2015-03-25T12:00:00-06:30");
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
const d = new Date("03/25/2015");
WARNINGS !
In some browsers, months or days with no leading zeroes may produce an error:
const 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.
const 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.
const d = new Date("25-03-2015");
JavaScript Long Dates.

Long dates are most often written with a "MMM DD YYYY" syntax like this:
Example
const d = new Date("Mar 25 2015");
Month and day can be in any order:
Example
const d = new Date("25 Mar 2015");
And, month can be written in full (January), or abbreviated (Jan):
Example
const d = new Date("January 25 2015");
Example
const d = new Date("Jan 25 2015");
Commas are ignored. Names are case insensitive:
Example
const d = new Date("JANUARY, 25, 2015");
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
let msec = Date.parse("March 21, 2012");

document.getElementById("demo").innerHTML = msec;
You can then use the number of milliseconds to convert it to a date object:
Example
let msec = Date.parse("March 21, 2012");

const d = new Date(msec);
document.getElementById("demo").innerHTML = d;
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

document.getElementById("demo").innerHTML = d.getTime();
The getFullYear() Method

The getFullYear() method returns the year of a date as a four digit number:
Example

document.getElementById("demo").innerHTML = d.getFullYear();
The getMonth() Method
The getMonth() method returns the month of a date as a number (0-11):
Example

document.getElementById("demo").innerHTML = d.getMonth();
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

const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"];
document.getElementById("demo").innerHTML = months[d.getMonth()];
The getDate() Method

The getDate() method returns the day of a date as a number (1-31):
Example

document.getElementById("demo").innerHTML = d.getDate();
The getHours() Method

The getHours() method returns the hours of a date as a number (0-23):
Example
document.getElementById("demo").innerHTML = d.getHours();
The getMinutes() Method

The getMinutes() method returns the minutes of a date as a number (0-59):
Example

document.getElementById("demo").innerHTML = d.getMinutes();
The getSeconds() Method

The getSeconds() method returns the seconds of a date as a number (0-59):
Example

document.getElementById("demo").innerHTML = d.getSeconds();
The getMilliseconds() Method

The getMilliseconds() method returns the milliseconds of a date as a number (0-999):
Example

document.getElementById("demo").innerHTML = d.getMilliseconds();
The getDay() Method

The getDay() method returns the weekday of a date as a number (0-6):
Example
document.getElementById("demo").innerHTML = d.getDay();
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

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
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.
month = ;
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

d.setFullYear(2020);
The setFullYear() method can optionally set month and day:
Example

d.setFullYear(2020, 11, 3);
The setMonth() Method

The setMonth() method sets the month of a date object (0-11):
Example

d.setMonth(11);
The setDate() Method

The setDate() method sets the day of a date object (1-31):
Example

d.setDate(15);
The setDate() method can also be used to add days to a date:
Example

d.setDate(d.getDate() + 50);
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

d.setHours(22);
The setMinutes() Method

The setMinutes() method sets the minutes of a date object (0-59):
Example

d.setMinutes(30);
The setSeconds() Method

The setSeconds() method sets the seconds of a date object (0-59):
Example

d.setSeconds(30);
Compare Dates
Dates can easily be compared.
The following example compares today's date with January 14, 2100:
Example
let text = "";

const today = new Date();
const 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.";
}
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.
d. ;
Start the Exercise
JavaScript Math Object

The JavaScript Math object allows you to perform mathematical tasks on numbers.
Example
Math.PI; // returns 3.141592653589793
The Math Object

Unlike other objects, the Math object has no constructor.
The Math object is static.
All methods and properties can be used without creating a Math object first.
Math Properties (Constants)

The syntax for any Math property is : Math.property.
JavaScript provides 8 mathematical constants that can be accessed as Math properties:
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
Math Methods
The syntax for Math any methods is : Math.method.(number)
Number to Integer
There are 4 common methods to round a number to an integer:
Math.round(x) Returns x rounded to its nearest integer
Math.ceil(x) Returns x rounded up to its nearest integer
Math.floor(x) Returns x rounded down to its nearest integer
Math.trunc(x) Returns the integer part of x (new in ES6)
Math.round()
Math.round(x) returns the nearest integer:
Example
Math.round(4.9); // returns 5
Math.round(-4.2); // returns -4
Math.ceil()
Math.ceil(x) returns the value of x rounded up to its nearest integer:
Example
Math.ceil(4.9); // returns 5
Math.ceil(-4.2); // returns -4
Math.floor()
Math.floor(x) returns the value of x rounded down to its nearest integer:
Example
Math.floor(4.9); // returns 4
Math.floor(-4.2); // returns -5
Math.trunc()
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(-4.2); // returns -4
Math.sign()
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
Math.trunc() and Math.sign() were added to JavaScript 2015 - ES6.
Math.pow()
Math.pow(x, y) returns the value of x to the power of y:
Example
Math.pow(8, 2); // returns 64
Math.sqrt()
Math.sqrt(x) returns the square root of x:
Example
Math.sqrt(64); // returns 8
Math.abs()
Math.abs(x) returns the absolute (positive) value of x:
Example
Math.abs(-4.7); // returns 4.7
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)
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)
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
Example
Math.max(0, 150, 30, 20, -8, -200); // returns 150
Math.random()
Math.random() returns a random number between 0 (inclusive), and 1 (exclusive):
Example
Math.random(); // returns a random number
You will learn more about Math.random() in the next chapter of this tutorial.
The Math.log() Method

Math.log(x) returns the natural logarithm of x:
Example
Math.log(1); // returns 0
The natural logarithm returns the time needed to reach a certain level of growth.
Math.E and Math.log() are twins.
How many times must we multiply Math.E to get 10?
Example
Math.log(10); // returns 2.302585092994046
The Math.log2() Method

Math.log2(x) returns the base 2 logarithm of x.
How many times must we multiply 2 to get 8?
Example
Math.log2(8); // returns 3
The Math.log10() Method

Math.log10(x) returns the base 10 logarithm of x.
How many times must we multiply 10 to get 1000?
Example
Math.log10(1000); // returns 3
Math Object Methods

Method Description
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
acosh(x) Returns the hyperbolic arccosine of x
asin(x) Returns the arcsine of x, in radians
asinh(x) Returns the hyperbolic arcsine of x
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y, x) Returns the arctangent of the quotient of its arguments
atanh(x) Returns the hyperbolic arctangent of x
cbrt(x) Returns the cubic root of x
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
cosh(x) Returns the hyperbolic cosine of x
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the 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) Rounds x to the nearest integer
sign(x) Returns if x is negative, null or positive (-1, 0, 1)
sin(x) Returns the sine of x (x is in radians)
sinh(x) Returns the hyperbolic sine of x
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
tanh(x) Returns the hyperbolic tangent of a number
trunc(x) Returns the integer part of a number (x)
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.
let r = ;
Start the Exercise

JavaScript Random
Math.random()
Math.random() returns a random number between 0 (inclusive), and 1 (exclusive):
Example
// Returns a random number:

Math.random();
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.
There is no such thing as JavaScript integers.
We are talking about numbers with no decimals here.
Example
// Returns a random integer from 0 to 9:

Math.floor(Math.random() * 10);
Example

Example

Example
Example

Math.floor(Math.random() * 10) + 1;
Example

Math.floor(Math.random() * 100) + 1;
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;
}
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;
}
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
Or even easier:
Example
(10 > 9) // also returns true

10 > 9 // also returns true
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
Everything Without a "Value" is False

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

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

// typeof y returns object
Do not create Boolean objects. It slows down execution speed.

When using the == operator, equal booleans are equal:
Example
let x = false;
When using the === operator, equal booleans are not equal, because the === operator expects
equality in both type and value.
Example
let x = false;
// (x === y) is false because x and y have different types
Example
let x = new Boolean(false);

// (x == y) is false because objects cannot be compared

Comparing two JavaScript objects will always return false.
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 Logical

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 Try it
== equal to x == 8 false
x == 5 true
x == "5" true
x === 5 true
=== equal value and equal type
x === "5" false
!= not equal x != 8 true
x !== 5 false
!== not equal value or not equal type 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 to buy alcohol";
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 Try it
&& and (x < 10 && y > 1) is true
(x
== 5
|| y
|| or
==
5) is
false
!(x
==
! not
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
let voteable = (age < 18) ? "Too young":"Old enough";
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 Try
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";
}

Exercise:
Choose the correct comparison operator to alert true, when x is greater than y.
x = 10;
y = 5;
alert(x y);
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:
Good day
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";
}

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 {
}
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");
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.
• If there is no match, the default code block 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:
Friday
The break Keyword

When JavaScript reaches a break keyword, it breaks out of the switch block.
This will stop the execution inside the switch 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:
Looking forward to the Weekend
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";
}
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:
}
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
let x = "0";
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "No value found";
}

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;
}
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:
for (let i = 0; i < cars.length; i++) {

text += cars[i] + "<br>";
}
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 (let i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";
}
From the example above, you can read:
Statement 1 sets a variable before the loop starts (let 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 (let 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 (let i = 0, len = cars.length, text = ""; i < len; i++) {

}
And you can omit statement 1 (like when your values are set before the loop starts):
Example
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
}
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
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
i++;
}
Loop Scope
Using var in a loop:
Example
var i = 5;
for (var i = 0; i < 10; i++) {

// some code
}
// Here i is 10
Using let in a loop:
Example
let i = 5;
for (let i = 0; i < 10; i++) {

// some code
}
// Here i is 5
In the first example, using var, the variable declared in the loop redeclares the variable outside
the loop.
In the second example, using let, the variable declared in the loop does not redeclare the
variable outside the loop.
When let is used to declare the i variable in a loop, the i variable will only be visible within the
loop.
For/Of and For/In Loops

The for/in loop and the for/of loop are explained in the next chapter.
While Loops
The while loop and the do/while are explained in the next chapters.

Exercise:
Create a loop that runs from 0 to 9.
let i;
( = ; < ; ) {
console.log(i);
}
Start the Exercise
JavaScript For In
The For In Loop

The JavaScript for in statement loops through the properties of an Object:
Syntax
for (key in object) {

}
Example
const person = {fname:"John", lname:"Doe", age:25};
let text = "";

for (let x in person) {
text += person[x];
}
Example Explained
• The for in loop iterates over a person object
• Each iteration returns a key (x)
• The key is used to access the value of the key
• The value of the key is person[x]
For In Over Arrays

The JavaScript for in statement can also loop over the properties of an Array:
Syntax
for (variable in array) {

code
}
Example
const numbers = [45, 4, 9, 16, 25];
let txt = "";

for (let x in numbers) {
txt += numbers[x];
}
Do not use for in over an Array if the index order is important.
The index order is implementation-dependent, and array values may not be accessed in the order
you expect.
It is better to use a for loop, a for of loop, or Array.forEach() when the order is important.
Array.forEach()
The forEach() method calls a function (a callback function) once for each array element.
Example
const numbers = [45, 4, 9, 16, 25];
let txt = "";


txt += value;
}
• The item value

• The item index
The example above uses only the value parameter. It can be rewritten to:
Example
const numbers = [45, 4, 9, 16, 25];
let txt = "";

txt += value;
}
JavaScript For Of
The For Of Loop

The JavaScript for of statement loops through the values of an iterable object.
It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more:
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.
Browser Support
For/of was added to JavaScript in 2015 (ES6)
Safari 7 was the first browser to support for of:
Oct 2014 Jul 2015 Oct 2016 Oct 2013 Oct 2014
For of is not supported in Internet Explorer.
Looping over an Array

Example
const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
text += x;
}
Looping over a String

Example
let language = "JavaScript";
let text = "";

for (let x of language) {
text += x;
}
The While Loop

The while loop and the do/while loop are explained in the next chapter.
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++;
}
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);
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
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
for (;cars[i];) {
text += cars[i];
i++;
}
The loop in this example uses a while loop to collect the car names from the cars array:
Example

let i = 0;
let text = "";
while (cars[i]) {
text += cars[i];
i++;
}

Exercise:
Create a loop that runs as long as i is less than 10.
let i = 0;
(i 10) {
console.log(i);
i++
}
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:
Example
for (let i = 0; i < 10; i++) {

if (i === 3) { break; }
}
In the example above, the break statement ends the loop ("breaks" the loop) when the loop
counter (i) is 3.
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 (let i = 0; i < 10; i++) {

if (i === 3) { continue; }
}
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;
}
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) {
;
}
}
Start the Exercise
JavaScript typeof
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"
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).
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 x // Returns "undefined" (if x has no value)
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 [1,2,3,4] // Returns "object" (not "array", see note below)
typeof function myFunc(){} // Returns "function"
The typeof operator returns "object" for arrays because in JavaScript arrays are objects.
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]}
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;
}
Or even simpler, you can check if the object is an Array function:
Example
return myArray.constructor === Array;
}
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;
}
Or even simpler, you can check if the object is a Date function:
Example
return myDate.constructor === Date;
}
Undefined
Example
undefined.
Example
Empty Values
Example
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
let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

person = null; // Now value is null, but type is still an object
You can also empty an object by setting it to undefined:
Example

person = undefined; // Now both value and type is undefined
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
JavaScript typeof
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 [1,2,3,4] // Returns "object"
typeof new Date() // Returns "object"
typeof function () {} // Returns "function"
typeof myCar // Returns "undefined" *
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).
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 x // Returns "undefined" (if x has no value)
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 [1,2,3,4] // Returns "object" (not "array", see note below)
typeof function myFunc(){} // Returns "function"
The typeof operator returns "object" for arrays because in JavaScript arrays are objects.
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]}
You can check the constructor property to find out if an object is an Array (contains the word
"Array"):
Example
return myArray.constructor.toString().indexOf("Array") > -1;
}
Or even simpler, you can check if the object is an Array function:
Example
return myArray.constructor === Array;
}
You can check the constructor property to find out if an object is a Date (contains the word
"Date"):
Example
return myDate.constructor.toString().indexOf("Date") > -1;
}
Or even simpler, you can check if the object is a Date function:
Example
return myDate.constructor === Date;
}
Undefined
Example
undefined.
Example
Empty Values
Example
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
You can also empty an object by setting it to undefined:
Example

person = undefined; // Now both value and type is undefined
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
JavaScript Type Conversion

• Converting Strings to Numbers
• Converting Numbers to Strings
• Converting Dates to Numbers
• Converting Numbers to Dates
• Converting Booleans to Numbers
• Converting Numbers to Booleans
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 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
Number Methods
In the chapter Number Methods, you will find more methods that can be used to convert strings
to numbers:
Method Description
Number() Returns a number, converted from its argument
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
let y = "5"; // y is a string

let x = + y; // x is a number
If the variable cannot be converted, it will still become a number, but with the value NaN (Not a
Number):
Example
let y = "John"; // y is a string

let x = + y; // x is a number (NaN)
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
The Number method toString() does the same.
Example
x.toString()
(123).toString()
(100 + 23).toString()
More Methods
In the chapter Number Methods, you will find more methods that can be used to convert
numbers to strings:
Method Description
Returns a string, with a number rounded and written using exponential
toExponential()
notation.
Returns a string, with a number rounded and written with a specified
toFixed()
number of decimals.
toPrecision() Returns a string, with a number written with a specified length
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
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 Booleans to Numbers

The global method Number() can also convert booleans to numbers.
Number(false) // returns 0
Number(true) // returns 1
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"
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
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

Try it
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 leftmost bits fall off
shift
Signed right Shifts right by pushing copies of the leftmost bit in from the left, and let the
>>
shift rightmost bits fall off
Zero fill right

>>> Shifts right by pushing zeros in from the left, and let the rightmost bits fall off
shift
Examples
Operation Result Same as Result
5&1 1 0101 & 0001 0001
5|1 5 0101 | 0001 0101
~5 10 ~0101 1010
5 << 1 10 0101 << 1 1010
5^1 4 0101 ^ 0001 0100
5 >> 1 2 0101 >> 1 0010
5 >>> 1 2 0101 >>> 1 0010
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
let x = 5 & 1;
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
let x = 5 | 1;
JavaScript Bitwise XOR (^)

Bitwise XOR returns 1 if the bits are different:
Decimal Binary
5 00000000000000000000000000000101
1 00000000000000000000000000000001
5^1 00000000000000000000000000000100 (4)
Example
let x = 5 ^ 1;
JavaScript Bitwise NOT (~)

Decimal Binary
5 00000000000000000000000000000101
~5 11111111111111111111111111111010 (-6)
Example
let x = ~5;
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
let x = 5 << 1;
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
let x = -5 >> 1;
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
let x = 5 >>> 1;
Binary Numbers
Binary numbers with only one bit set is easy to understand:
Binary Representation Decimal value
00000000000000000000000000000001 1
00000000000000000000000000000010 2
00000000000000000000000000000100 4
00000000000000000000000000001000 8
00000000000000000000000000010000 16
00000000000000000000000000100000 32
00000000000000000000000001000000 64
Setting a few more bits reveals the binary pattern:
00000000000000000000000000000101 5 (4 + 1)
00000000000000000000000000001101 13 (8 + 4 + 1)
00000000000000000000000000101101 45 (32 + 8 + 4 + 1)
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:
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);
}
Converting Binary to Decimal

Example
function bin2dec(bin){
return parseInt(bin, 2).toString(10);
}
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
/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:
let text = "Visit W3Schools!";

let n = text.search("W3Schools");
The result in n will be:
Using String search() With a Regular Expression

Example
Use a regular expression to do a case-insensitive search for "w3schools" in a string:
let text = "Visit W3Schools";

let n = text.search(/w3schools/i);
The result in n will be:
Using String replace() With a String

let text = "Visit Microsoft!";

let result = text.replace("Microsoft", "W3Schools");
Use String replace() With a Regular Expression

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

let result = text.replace(/microsoft/i, "W3Schools");
The result in res will be:
Visit W3Schools!
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 Try it
i Perform case-insensitive matching
g Perform a global match (find all matches rather than stopping after the first match)
Perform multiline matching

m
G
Regular Expression Patterns

Brackets are used to find a range of characters:
Tr
Expressi
Description y
on
it
Find any of the characters between the brackets
[abc]
Find any of the digits between the brackets
[0-
9]
Find any of the alternatives separated with |
(x|y
)
Metacharacters are characters with a special meaning:
Metachara Descripti
cter on
Find a
\d
digit
Find a whitespace character
\s
Find a match at the beginning of a word like this: \bWORD, or at the end of a word like this:
WORD\b
\
b
\uxxxx Find the Unicode character specified by the hexadecimal number xxxx
Quantifiers define quantities:
Tr
Quantifi
Description y
er
it
Matches any string that contains at least one n
n+
Matches
any string
that
contains
n*
zero or
more
occurrenc
es of n
n?
Matches
any string
that
contains
zero or
one
occurrenc
es 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
const pattern = /e/;

pattern.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
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
/e/.exec("The best things in life are free!");
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 misspelled "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>
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>
const message = document.getElementById("p01");
message.innerHTML = "";
let 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>
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
const message = document.getElementById("p01");
message.innerHTML = "";
let 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 = "";
}
}
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

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
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Reference Error
A ReferenceError is thrown if you use (reference) a variable that has not been declared:
Example
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
}
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) {
}
Type Error
A TypeError is thrown if you use a value that is outside the range of expected types:
Example
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
}
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) {
}
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 Error Reference
Error Object
The Error object provides error information when an error occurs.
Example
In this example we have written "alert" as "adddlert" to deliberately produce an error.
Return the error name and a description of the error:
try {
adddlert("Welcome");
}
catch(err) {
err.name + "<br>" + err.message;
}
For a tutorial about JavaScript Errors, read our JavaScript Error Tutorial.
Error Object Properties

name Sets or returns an error name
message Sets or returns an error message (a string)
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.
JavaScript Scope
Scope determines the accessibility (visibility) of variables.
JavaScript has 3 types of scope:
• Block scope
• Function scope
• Global scope
Block Scope
Before ES6 (2015), JavaScript had only Global Scope and Function Scope.
ES6 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope in JavaScript.
Variables declared inside a { } block cannot be accessed from outside the block:
Example
{
let x = 2;
}
// x can NOT be used here
Variables declared with the var keyword can NOT have block scope.
Variables declared inside a { } block can be accessed from outside the block.
Example
{
var x = 2;
}
// x CAN be used here
Local Scope
Variables declared within a JavaScript function, become LOCAL to the function.
Example

// code here CAN use carName
}
Local variables have Function Scope:
They can only be accessed from within the function.
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.
Function Scope
JavaScript has function scope: Each function creates a new scope.
Variables defined inside a function are not accessible (visible) from outside the function.
Variables declared with var, let and const are quite similar when declared inside a function.
They both have Function Scope:
var carName = "Volvo"; // Function Scope
}
let carName = "Volvo"; // Function Scope
}
const carName = "Volvo"; // Function Scope
}
Global JavaScript Variables

A variable declared outside a function, becomes GLOBAL.
Example
// code here can use carName
// code here can also use carName
}
A global variable has Global Scope:
All scripts and functions on a web page can access it.
Global Scope
Variables declared Globally (outside any function) have Global Scope.
Global variables can be accessed from anywhere in a JavaScript program.
Variables declared with var, let and const are quite similar when declared outside a block.
They both have Global Scope:
var x = 2; // Global scope

let x = 2; // Global scope
const x = 2; // Global scope
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";
}
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 JavaScript environment.
In HTML, the global scope is the window object.
Global variables defined with the var keyword belong to the window object:
Example

// code here can use window.carName
Global variables defined with the let keyword do not belong to the window object:
Example

// code here can not use window.carName
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>In HTML, global variables defined with <b>let</b>, will not become window variables.</p>
<p id="demo"></p>
<script>
// code here can not use window.carName

document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>
</body>
</html>
JavaScript Global Variables

In HTML, global variables defined with let, will not become window variables.
I can not display undefined
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.
Function (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.
JavaScript Hoisting
Hoisting is JavaScript's default behavior of moving declarations to the top.
JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.
In other words; a variable can be used before it has been declared.
Example 1 gives the same result as Example 2:
Example 1
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element

elem.innerHTML = x; // Display x in the element
var x; // Declare x
Example 2
var x; // Declare x
x = 5; // Assign 5 to x

elem.innerHTML = x; // Display x in the element
To understand this, you have to understand the term "hoisting".
Hoisting is JavaScript's default behavior of moving all declarations to the top of the current
scope (to the top of the current script or the current function).
The let and const Keywords
Variables defined with let and const are hoisted to the top of the block, but not initialized.
Meaning: The block of code is aware of the variable, but it cannot be used until it has been
declared.
Using a let variable before it is declared will result in a ReferenceError.
The variable is in a "temporal dead zone" from the start of the block until it is declared:
Example
This will result in a ReferenceError:
carName = "Volvo";
let carName;
Using a const variable before it is declared, is a syntax errror, so the code will simply not run.
Example
This code will not run.
carName = "Volvo";
const carName;
Read more about let and const in JS Let / Const.
JavaScript Initializations are Not Hoisted

JavaScript only hoists declarations, not initializations.
Example 1 does not give the same result as Example 2:
Example 1
var x = 5; // Initialize x
var y = 7; // Initialize y

elem.innerHTML = x + " " + y; // Display x and y
Example 2

var y = 7; // Initialize y
Does it make sense that y is undefined in the last example?
This is because only the declaration (var y), not the initialization (=7) is hoisted to the top.
Because of hoisting, y has been declared before it is used, but because initializations are not
hoisted, the value of y is undefined.
Example 2 is the same as writing:
Example
var y; // Declare y

y = 7; // Assign 7 to y
Declare Your Variables At the Top !

Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.
If a developer doesn't understand hoisting, programs may contain bugs (errors).
To avoid bugs, always declare all variables at the beginning of every scope.
Since this is how JavaScript interprets the code, it is always a good rule.
JavaScript in strict mode does not allow variables to be used if they are not declared.
Study "use strict" in the next chapter.
JavaScript Use Strict
"use strict"; Defines that JavaScript code should be executed in "strict mode".
The "use strict" Directive

The "use strict" directive was new in ECMAScript version 5.
It is not a statement, but a literal expression, ignored by earlier versions of JavaScript.
The purpose of "use strict" is to indicate that the code should be executed in "strict mode".
With strict mode, you can not, for example, use undeclared variables.
All modern browsers support "use strict" except Internet Explorer 9 and lower:
Directive
"use
13.0 10.0 4.0 6.0 12.1
strict"
The numbers in the table specify the first browser version that fully supports the directive.
You can use strict mode in all your programs. It helps you to write cleaner code, like preventing
you from using undeclared variables.
"use strict" is just a string, so IE 9 will not throw an error even if it does not understand it.
Declaring Strict Mode

Strict mode is declared by adding "use strict"; to the beginning of a script or a function.
Declared at the beginning of a script, it has global scope (all code in the script will execute in
strict mode):
Example
"use strict";
x = 3.14; // This will cause an error because x is not declared
Example
"use strict";
myFunction();
y = 3.14; // This will also cause an error because y is not declared
}
Declared inside a function, it has local scope (only the code inside the function is in strict mode):
x = 3.14; // This will not cause an error.

myFunction();
"use strict";
y = 3.14; // This will cause an error
}
The "use strict"; Syntax

The syntax, for declaring strict mode, was designed to be compatible with older versions of
JavaScript.
Compiling a numeric literal (4 + 5;) or a string literal ("John Doe";) in a JavaScript program has
no side effects. It simply compiles to a non existing variable and dies.
So "use strict"; only matters to new compilers that "understand" the meaning of it.
Why Strict Mode?

Strict mode makes it easier to write "secure" JavaScript.
Strict mode changes previously accepted "bad syntax" into real errors.
As an example, in normal JavaScript, mistyping a variable name creates a new global variable. In
strict mode, this will throw an error, making it impossible to accidentally create a global variable.
In normal JavaScript, a developer will not receive any error feedback assigning values to non-
writable properties.
In strict mode, any assignment to a non-writable property, a getter-only property, a non-existing

property, a non-existing variable, or a non-existing object, will throw an error.
Not Allowed in Strict Mode

Using a variable, without declaring it, is not allowed:
"use strict";
x = 3.14; // This will cause an error
Objects are variables too.
Using an object, without declaring it, is not allowed:
"use strict";
x = {p1:10, p2:20}; // This will cause an error
Deleting a variable (or object) is not allowed.
"use strict";
let x = 3.14;
delete x; // This will cause an error
Deleting a function is not allowed.
"use strict";
function x(p1, p2) {};
delete x; // This will cause an error
Duplicating a parameter name is not allowed:
"use strict";
function x(p1, p1) {}; // This will cause an error
Octal numeric literals are not allowed:
"use strict";
let x = 010; // This will cause an error
Octal escape characters are not allowed:
"use strict";
let x = "\010"; // This will cause an error
Writing to a read-only property is not allowed:
"use strict";
const obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14; // This will cause an error
Writing to a get-only property is not allowed:
"use strict";
const obj = {get x() {return 0} };
obj.x = 3.14; // This will cause an error
Deleting an undeletable property is not allowed:
"use strict";
delete Object.prototype; // This will cause an error
The word eval cannot be used as a variable:
"use strict";
let eval = 3.14; // This will cause an error
The word arguments cannot be used as a variable:
"use strict";
let arguments = 3.14; // This will cause an error
The with statement is not allowed:
"use strict";
with (Math){x = cos(2)}; // This will cause an error
For security reasons, eval() is not allowed to create variables in the scope from which it was
called:
"use strict";
eval ("let x = 2");
alert (x); // This will cause an error
The this keyword in functions behaves differently in strict mode.
The this keyword refers to the object that called the function.
If the object is not specified, functions in strict mode will return undefined and functions in
normal mode will return the global object (window):
"use strict";
alert(this); // will alert "undefined"
}
myFunction();
Future Proof!
Keywords reserved for future JavaScript versions can NOT be used as variable names in strict
mode.
These are:
• implements
• interface
• let
• package
• private
• protected
• public
• static
• yield
"use strict";
let public = 1500; // This will cause an error
Watch Out!
The "use strict" directive is only recognized at the beginning of a script or a function.
The JavaScript this Keyword
Example
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
}
};
What is this?
The JavaScript this keyword refers to the object it belongs to.
It has different values depending on where it is used:
• In a method, this refers to the owner object.

• Alone, this refers to the global object.
• In a function, this refers to the global object.
• In a function, in strict mode, this is undefined.
• In an event, this refers to the element that received the event.
• Methods like call(), and apply() can refer this to any object.
this in a Method
In an object method, this refers to the "owner" of the method.
In the example on the top of this page, this refers to the person object.
The person object is the owner of the fullName method.
}
this Alone
When used alone, the owner is the Global object, so this refers to the Global object.
In a browser window the Global object is [object Window]:
Example
let x = this;
In strict mode, when used alone, this also refers to the Global object [object Window]:
Example
"use strict";
let x = this;
this in a Function (Default)

In a JavaScript function, the owner of the function is the default binding for this.
So, in a function, this refers to the Global object [object Window].
Example
return this;
}
this in a Function (Strict)

JavaScript strict mode does not allow default binding.
So, when used in a function, in strict mode, this is undefined.
Example
"use strict";
return this;
}
this in Event Handlers
In HTML event handlers, this refers to the HTML element that received the event:
Example
<button onclick="this.style.display='none'">
Click to Remove Me!
</button>
Object Method Binding

In these examples, this is the person object (The person object is the "owner" of the function):
Example
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Example
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
}
};
In other words: this.firstName means the firstName property of this (person) object.
Explicit Function Binding

The call() and apply() methods are predefined JavaScript methods.
They can both be used to call an object method with another object as argument.
You can read more about call() and apply() later in this tutorial.
In the example below, when calling person1.fullName with person2 as argument, this will refer
to person2, even if it is a method of person1:
Example
const person1 = {
fullName: function() {
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>
<p id="demo"></p>
<script>
const person1 = {
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
let x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
The JavaScript this Keyword

In this example this refers to person2, even if it is a method of person1:
John Doe
JavaScript Arrow Function
Arrow functions were introduced in ES6.
Arrow functions allow us to write shorter function syntax:
Before:
hello = function() {
return "Hello World!";
}
With Arrow Function:

hello = () => {
return "Hello World!";
}
It gets shorter! If the function has only one statement, and the statement returns a value, you can
remove the brackets and the return keyword:
Arrow Functions Return Value by Default:
hello = () => "Hello World!";
Note: This works only if the function has only one statement.
If you have parameters, you pass them inside the parentheses:
Arrow Function With Parameters:
hello = (val) => "Hello " + val;
In fact, if you have only one parameter, you can skip the parentheses as well:
Arrow Function Without Parentheses:
hello = val => "Hello " + val;
What About this?

The handling of this is also different in arrow functions compared to regular functions.
In short, with arrow functions there are no binding of this.
In regular functions the this keyword represented the object that called the function, which
could be the window, the document, a button or whatever.
With arrow functions the this keyword always represents the object that defined the arrow
function.
Let us take a look at two examples to understand the difference.
Both examples call a method twice, first when the page loads, and once again when the user
clicks a button.
The first example uses a regular function, and the second example uses an arrow function.
The result shows that the first example returns two different objects (window and button), and
the second example returns the window object twice, because the window object is the "owner"
of the function.
Example
With a regular function this represents the object that calls the function:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:

window.addEventListener("load", hello);
// A button object calls the function:

document.getElementById("btn").addEventListener("click", hello);
Example
With an arrow function this represents the owner of the function:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:

window.addEventListener("load", hello);
// A button object calls the function:

document.getElementById("btn").addEventListener("click", hello);
Remember these differences when you are working with functions. Sometimes the behavior of
regular functions is what you want, if not, use arrow functions.
Browser Support
The following table defines the first browser versions with full support for Arrow Functions in
JavaScript:
JavaScript Classes
ECMAScript 2015, also known as ES6, introduced JavaScript Classes.
JavaScript Classes are templates for JavaScript Objects.
JavaScript Class Syntax

Use the keyword class to create a class.
Always add a method named constructor():
Syntax
class ClassName {
constructor() { ... }
}
Example
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
The example above creates a class named "Car".
The class has two initial properties: "name" and "year".
A JavaScript class is not an object.
It is a template for JavaScript objects.

Using a Class
When you have a class, you can use the class to create objects:
Example
let myCar1 = new Car("Ford", 2014);

let myCar2 = new Car("Audi", 2019);
The example above uses the Car class to create two Car objects.
The constructor method is called automatically when a new object is created.
The Constructor Method

The constructor method is a special method:
• It has to have the exact name "constructor"

• It is executed automatically when a new object is created
• It is used to initialize object properties
If you do not define a constructor method, JavaScript will add an empty constructor method.
Class Methods
Class methods are created with the same syntax as object methods.
Always add a constructor() method.
Then add any number of methods.
Syntax
class ClassName {
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Create a Class method named "age", that returns the Car age:
Example
class Car {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);

"My car is " + myCar.age() + " years old.";
You can send parameters to Class methods:
Example
class Car {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}

let year = date.getFullYear();

document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
Browser Support
The following table defines the first browser version with full support for Classes in JavaScript:

Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016
You will learn a lot more about JavaScript Classes later in this tutorial.
JavaScript JSON
JSON is a format for storing and transporting data.
JSON is often used when data is sent from a server to a web page.
What is JSON?
• JSON stands for JavaScript Object Notation
• JSON is a lightweight data interchange format
• JSON is language independent *
• JSON is "self-describing" and easy to understand
* The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is
text only. Code for reading and generating JSON data can be written in any programming
language.
JSON Example
This JSON syntax defines an employees object: an array of 3 employee records (objects):
JSON Example
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
The JSON Format Evaluates to JavaScript Objects

The JSON format is syntactically identical to the code for creating JavaScript objects.
Because of this similarity, a JavaScript program can easily convert JSON data into native
JavaScript objects.
JSON Syntax Rules

• Data is in name/value pairs
• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays
JSON Data - A Name and a Value

JSON data is written as name/value pairs, just like JavaScript object properties.
A name/value pair consists of a field name (in double quotes), followed by a colon, followed by
a value:
"firstName":"John"
JSON names require double quotes. JavaScript names do not.
JSON Objects
JSON objects are written inside curly braces.
Just like in JavaScript, objects can contain multiple name/value pairs:

{"firstName":"John", "lastName":"Doe"}
JSON Arrays
JSON arrays are written inside square brackets.
Just like in JavaScript, an array can contain objects:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
In the example above, the object "employees" is an array. It contains three objects.
Each object is a record of a person (with a first name and a last name).
Converting a JSON Text to a JavaScript Object

A common use of JSON is to read data from a web server, and display the data in a web page.
For simplicity, this can be demonstrated using a string as input.
First, create a JavaScript string containing JSON syntax:
let text = '{ "employees" : [' +

'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
Then, use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript
object:
const obj = JSON.parse(text);
Finally, use the new JavaScript object in your page:
Example
<p id="demo"></p>
<script>
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
You can read more about JSON in our JSON tutorial.
JavaScript Debugging
Errors can (will) happen, every time you write some new computer code.
Code Debugging
Programming code might contain syntax errors, or logical errors.
Many of these errors are difficult to diagnose.
Often, when programming code contains errors, nothing will happen. There are no error
messages, and you will get no indications where to search for errors.
Searching for (and fixing) errors in programming code is called code debugging.
JavaScript Debuggers
Debugging is not easy. But fortunately, all modern browsers have a built-in JavaScript debugger.
Built-in debuggers can be turned on and off, forcing errors to be reported to the user.
With a debugger, you can also set breakpoints (places where code execution can be stopped), and
examine variables while the code is executing.
Normally, otherwise follow the steps at the bottom of this page, you activate debugging in your
browser with the F12 key, and select "Console" in the debugger menu.
The console.log() Method
If your browser supports debugging, you can use console.log() to display JavaScript values in
the debugger window:
Example
<!DOCTYPE html>
<html>
<body>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Tip: Read more about the console.log() method in our JavaScript Console Reference.
Setting Breakpoints
In the debugger window, you can set breakpoints in the JavaScript code.
At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values.
After examining values, you can resume the execution of code (typically with a play button).
The debugger Keyword

The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging
function.
This has the same function as setting a breakpoint in the debugger.

If no debugging is available, the debugger statement has no effect.
With the debugger turned on, this code will stop executing before it executes the third line.
Example
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
Major Browsers' Debugging Tools

Normally, you activate debugging in your browser with F12, and select "Console" in the
debugger menu.
Otherwise follow these steps:
Chrome
• Open the browser.
• From the menu, select "More tools".
• From tools, choose "Developer tools".
• Finally, select Console.
Firefox
• From the menu, select "Web Developer".
• Finally, select "Web Console".
Edge
• From the menu, select "Developer Tools".
• Finally, select "Console".
Opera
• From the menu, select "Developer".
• From "Developer", select "Developer tools".
• Finally, select "Console".
Safari
• Go to Safari, Preferences, Advanced in the main menu.
• Check "Enable Show Develop menu in menu bar".
• When the new option "Develop" appears in the menu:
Choose "Show Error Console".
Did You Know?

Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs.
The first known computer bug was a real bug (an insect) stuck in the electronics.
JavaScript Style Guide
Always use the same coding conventions for all your JavaScript projects.
JavaScript Coding Conventions

Coding conventions are style guidelines for programming. They typically cover:
• Naming and declaration rules for variables and functions.

• Rules for the use of white space, indentation, and comments.
• Programming practices and principles
Coding conventions secure quality:
• Improves code readability

• Make code maintenance easier
Coding conventions can be documented rules for teams to follow, or just be your individual
coding practice.
This page describes the general JavaScript code conventions used by W3Schools.
You should also read the next chapter "Best Practices", and learn how to avoid coding pitfalls.
Variable Names
At W3schools we use camelCase for identifier names (variables and functions).
All names start with a letter.
At the bottom of this page, you will find a wider discussion about naming rules.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Spaces Around Operators

Always put spaces around operators ( = + - * / ), and after commas:
Examples:
let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];
Code Indentation
Always use 2 spaces for indentation of code blocks:
Functions:
return (5 / 9) * (fahrenheit - 32);
}
Do not use tabs (tabulators) for indentation. Different editors interpret tabs differently.
Statement Rules
General rules for simple statements:
• Always end a simple statement with a semicolon.
Examples:
const cars = ["Volvo", "Saab", "Fiat"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
General rules for complex (compound) statements:
• Put the opening bracket at the end of the first line.

• Use one space before the opening bracket.
• Put the closing bracket on a new line, without leading spaces.
• Do not end a complex statement with a semicolon.
Functions:
return (5 / 9) * (fahrenheit - 32);
}
Loops:
for (let i = 0; i < 5; i++) {

x += i;
}
Conditionals:
if (time < 20) {

} else {
}
Object Rules
General rules for object definitions:
• Place the opening bracket on the same line as the object name.
• Use colon plus one space between each property and its value.
• Use quotes around string values, not around numeric values.
• Do not add a comma after the last property-value pair.
• Place the closing bracket on a new line, without leading spaces.
• Always end an object definition with a semicolon.
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Short objects can be written compressed, on one line, using spaces only between properties, like
this:
Line Length < 80

For readability, avoid 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 or
a comma.
Example
"Hello Dolly.";
Naming Conventions
Always use the same naming convention for all your code. For example:
• Variable and function names written as camelCase

• Global variables written in UPPERCASE (We don't, but it's quite common)
• Constants (like PI) written in UPPERCASE
Should you use hyp-hens, camelCase, or under_scores in variable names?
This is a question programmers often discuss. The answer depends on who you ask:
Hyphens in HTML and CSS:
HTML5 attributes can start with data- (data-quantity, data-price).
CSS uses hyphens in property-names (font-size).
Hyphens can be mistaken as subtraction attempts. Hyphens are not allowed in JavaScript names.
Underscores:
Many programmers prefer to use underscores (date_of_birth), especially in SQL databases.
Underscores are often used in PHP documentation.
PascalCase:
PascalCase is often preferred by C programmers.
camelCase:
camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries.
Do not start names with a $ sign. It will put you in conflict with many JavaScript library names.
Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src="myscript.js"></script>
Accessing HTML Elements

A consequence of using "untidy" HTML styles, might result in JavaScript errors.
These two JavaScript statements will produce different results:

const obj = getElementById("Demo")
const obj = getElementById("demo")
If possible, use the same naming convention (as JavaScript) in HTML.
Visit the HTML Style Guide.
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Use Lower Case File Names

Most web servers (Apache, Unix) are case sensitive about file names:
london.jpg cannot be accessed as London.jpg.
Other web servers (Microsoft, IIS) are not case sensitive:
london.jpg can be accessed as London.jpg or london.jpg.
If you use a mix of upper and lower case, you have to be extremely consistent.
If you move from a case insensitive, to a case sensitive server, even small errors can break your
web site.
To avoid these problems, always use lower case file names (if possible).
Performance
Coding conventions are not used by computers. Most rules have little impact on the execution of
programs.
Indentation and extra spaces are not significant in small scripts.

For code in development, readability should be preferred. Larger production scripts should be
minified.
JavaScript Best Practices
Avoid global variables, avoid new, avoid ==, avoid eval()
Avoid Global Variables

Minimize the use of global variables.
This includes all data types, objects, and functions.
Global variables and functions can be overwritten by other scripts.
Use local variables instead, and learn how to use closures.
Always Declare Local Variables

All variables used in a function should be declared as local variables.
Local variables must be declared with the var keyword or the let keyword, otherwise they will
become global variables.
Strict mode does not allow undeclared variables.
Declarations on Top
It is a good coding practice to put all declarations at the top of each script or function.
This will:
• Give cleaner code

• Provide a single place to look for local variables
• Make it easier to avoid unwanted (implied) global variables
• Reduce the possibility of unwanted re-declarations
// Declare at the beginning

let firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
This also goes for loop variables:
for (let i = 0; i < 5; i++) {
Initialize Variables
It is a good coding practice to initialize variables when you declare them.
This will:
• Give cleaner code

• Provide a single place to initialize variables
• Avoid undefined values
// Declare and initiate at the beginning

let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
Initializing variables provides an idea of the intended use (and intended data type).
Declare Objects with const

Declaring objects with const will prevent any accidential change of type:
Example
let car = {type:"Fiat", model:"500", color:"white"};

car = "Fiat"; // Changes object to string

car = "Fiat"; // Not possible
Declare Arrays with const

Declaring arrays with const will prevent any accidential change of type:
Example
let cars = ["Saab", "Volvo", "BMW"];

cars = 3; // Changes array to number

cars = 3; // Not possible
Don't Use new Object()

• Use "" instead of new String()
• Use 0 instead of new Number()
• Use false instead of new Boolean()
• Use {} instead of new Object()
• Use [] instead of new Array()
• Use /()/ instead of new RegExp()
• Use function (){} instead of new Function()
Example
let x1 = ""; // new primitive string

let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function(){}; // new function object
Beware of Automatic Type Conversions
JavaScript is loosely typed.
A variables can contain all data types.
A variable can change its data type:
Example
let x = "Hello"; // typeof x is a string

x = 5; // changes typeof x to a number
Beware that numbers can accidentally be converted to strings or NaN (Not a Number).
When doing mathematical operations, JavaScript can convert numbers to strings:
Example
let x = 5 + 7; // x.valueOf() is 12, typeof x is a number

let x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
let x = "5" + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
let x = "5" - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):
Example
"Hello" - "Dolly" // returns NaN
Use === Comparison

The == comparison operator always converts (to matching types) before comparison.
The === operator forces comparison of values and type:
Example
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true; // false
Use Parameter Defaults

If a function is called with a missing argument, the value of the missing argument is set to
undefined.
Undefined values can break your code. It is a good habit to assign default values to arguments.
Example
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
ECMAScript 2015 allows default parameters in the function definition:
function (a=1, b=1) { /*function code*/ }
Read more about function parameters and arguments at Function Parameters
End Your Switches with Defaults

Always end your switch statements with a default. Even if you think there is no need for it.
Example

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";
break;
default:
day = "Unknown";
}
Avoid Number, String, and Boolean as Objects

Always treat numbers, strings, or booleans as primitive values. Not as objects.
Declaring these types as objects, slows down execution speed, and produces nasty side effects:
Example
let x = "John";
(x === y) // is false because x is a string and y is an object.
Or even worse:
Example

(x == y) // is false because you cannot compare objects.
Avoid Using eval()

The eval() function is used to run text as code. In almost all cases, it should not be necessary to
use it.
Because it allows arbitrary code to be run, it also represents a security problem.

JavaScript Common Mistakes
This chapter points out some common JavaScript mistakes.
Accidentally Using the Assignment Operator

JavaScript programs may generate unexpected results if a programmer accidentally uses an
assignment operator (=), instead of a comparison operator (==) in an if statement.
This if statement returns false (as expected) because x is not equal to 10:
let x = 0;
if (x == 10)
This if statement returns true (maybe not as expected), because 10 is true:
let x = 0;
if (x = 10)
This if statement returns false (maybe not as expected), because 0 is false:
let x = 0;
if (x = 0)
An assignment always returns the value of the assignment.
Expecting Loose Comparison

In regular comparison, data type does not matter. This if statement returns true:
let x = 10;
let y = "10";
if (x == y)
In strict comparison, data type does matter. This if statement returns false:
let x = 10;
let y = "10";
if (x === y)
It is a common mistake to forget that switch statements use strict comparison:
This case switch will display an alert:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
This case switch will not display an alert:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Confusing Addition & Concatenation

Addition is about adding numbers.
Concatenation is about adding strings.
In JavaScript both operations use the same + operator.
Because of this, adding a number as a number will produce a different result from adding a
number as a string:
let x = 10;
x = 10 + 5; // Now x is 15
let y = 10;
y = + "5"; // Now y is "105"
When adding two variables, it can be difficult to anticipate the result:

let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"
Misunderstanding Floats
All numbers in JavaScript are stored as 64-bits Floating point numbers (Floats).
All programming languages, including JavaScript, have difficulties with precise floating point
values:
let x = 0.1;
let y = 0.2;
let z = x + y // the result in z will not be 0.3
To solve the problem above, it helps to multiply and divide:
Example
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Breaking a JavaScript String

JavaScript will allow you to break a statement into two lines:
Example 1
let x =
"Hello World!";
But, breaking a statement in the middle of a string will not work:
Example 2
let x = "Hello
World!";
You must use a "backslash" if you must break a statement in a string:
Example 3
let x = "Hello \
World!";
Misplacing Semicolon
Because of a misplaced semicolon, this code block will execute regardless of the value of x:
if (x == 19);
{
// code block
}
Breaking a Return Statement

It is a default JavaScript behavior to close a statement automatically at the end of a line.
Because of this, these two examples will return the same result:
Example 1
function myFunction(a) {
let power = 10
return a * power
}
Example 2
let power = 10;
return a * power;
}
JavaScript will also allow you to break a statement into two lines.
Because of this, example 3 will also return the same result:

Example 3
let
power = 10;
return a * power;
}
But, what will happen if you break the return statement in two lines like this:
Example 4
let
power = 10;
return
a * power;
}
The function will return undefined!
Why? Because JavaScript thought you meant:
Example 5
let
power = 10;
return;
a * power;
}
Explanation
If a statement is incomplete like:
let
JavaScript will try to complete the statement by reading the next line:
power = 10;
But since this statement is complete:
return
JavaScript will automatically close it like this:
return;
This happens because closing (ending) statements with semicolon is optional in JavaScript.
JavaScript will close the return statement at the end of the line, because it is a complete
statement.
Never break a return statement.
Accessing Arrays with Named Indexes

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 use numbered indexes:
Example
const person = [];

person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // person.length will return 3
person[0]; // person[0] will return "John"
In JavaScript, objects use named indexes.
If you use a named index, when accessing an array, JavaScript will redefine the array to a
standard object.
After the automatic redefinition, array methods and properties will produce undefined or
incorrect results:
Example:
const person = [];

person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length will return 0
person[0]; // person[0] will return undefined
Ending Definitions with a Comma

Trailing commas in object and array definition are legal in ECMAScript 5.
Object Example:
person = {firstName:"John", lastName:"Doe", age:46,}
Array Example:
points = [40, 100, 1, 5, 25, 10,];
WARNING !!
Internet Explorer 8 will crash.
JSON does not allow trailing commas.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Undefined is Not Null

JavaScript objects, variables, properties, and methods can be undefined.
In addition, empty JavaScript objects can have the value null.

This can make it a little bit difficult to test if an object is empty.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the object is
undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null, and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj !== "undefined")
Because of this, you must test for not undefined before you can test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)
JavaScript Performance
How to speed up your JavaScript code.
Reduce Activity in Loops

Loops are often used in programming.
Each statement in a loop, including the for statement, is executed for each iteration of the loop.
Statements or assignments that can be placed outside the loop will make the loop run faster.
Bad:
for (let i = 0; i < arr.length; i++) {
Better Code:
let l = arr.length;
for (let i = 0; i < l; i++) {
The bad code accesses the length property of an array each time the loop is iterated.
The better code accesses the length property outside the loop and makes the loop run faster.
Reduce DOM Access

Accessing the HTML DOM is very slow, compared to other JavaScript statements.
If you expect to access a DOM element several times, access it once, and use it as a local
variable:
Example
const obj = document.getElementById("demo");

obj.innerHTML = "Hello";
Reduce DOM Size

Keep the number of elements in the HTML DOM small.
This will always improve page loading, and speed up rendering (page display), especially on
smaller devices.
Every attempt to search the DOM (like getElementsByTagName) will benefit from a smaller
DOM.
Avoid Unnecessary Variables

Don't create new variables if you don't plan to save values.
Often you can replace code like this:
let fullName = firstName + " " + lastName;

document.getElementById("demo").innerHTML = fullName;
With this:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Delay JavaScript Loading

Putting your scripts at the bottom of the page body lets the browser load the page first.
While a script is downloading, the browser will not start any other downloads. In addition all
parsing and rendering activity might be blocked.
The HTTP specification defines that browsers should not download more than two components
in parallel.
An alternative is to use defer="true" in the script tag. The defer attribute specifies that the
script should be executed after the page has finished parsing, but it only works for external
scripts.
If possible, you can add your script to the page by code, after the page has loaded:
Example
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Avoid Using with

Avoid using the with keyword. It has a negative effect on speed. It also clutters up JavaScript
scopes.
The with keyword is not allowed in strict mode.
JavaScript Reserved Words
In JavaScript you cannot use these reserved words as variables, labels, or function names:
You can read more about the different JavaScript versions in the chapter JS Versions.
Removed Reserved Words

The following reserved words have been removed from the ECMAScript 5/6 standard:
abstract boolean byte char
double final float goto
int long native short
synchronized throws transient volatile
Do not use these words as variables. ECMAScript 5/6 does not have full support in all browsers.
JavaScript Objects, Properties, and Methods
You should also avoid using the name of JavaScript built-in objects, properties, and methods:
Array Date eval function
hasOwnProperty Infinity isFinite isNaN
isPrototypeOf length Math NaN
name Number Object prototype
String toString undefined valueOf
Java Reserved Words

JavaScript is often used together with Java. You should avoid using some Java objects and properties as
JavaScript identifiers:
getClass java JavaArray javaClass
JavaObject JavaPackage
Other Reserved Words

JavaScript can be used as the programming language in many applications.
You should also avoid using the name of HTML and Window objects and properties:
alert all anchor anchors
area assign blur button
checkbox clearInterval clearTimeout clientInformation
close closed confirm constructor
crypto decodeURI decodeURIComponent defaultStatus

document element elements embed
embeds encodeURI encodeURIComponent escape
event fileUpload focus form
forms frame innerHeight innerWidth
layer layers link location
mimeTypes navigate navigator frames
frameRate hidden history image
images offscreenBuffering open opener
option outerHeight outerWidth packages
pageXOffset pageYOffset parent parseFloat
parseInt password pkcs11 plugin
prompt propertyIsEnum radio reset
screenX screenY scroll secure
select self setInterval setTimeout
status submit taint text
textarea top unescape untaint
window
HTML Event Handlers

In addition you should avoid using the name of all HTML event handlers.
Examples:
onblur onclick onerror onfocus

onkeydown onkeypress onkeyup onmouseover
onload onmouseup onmousedown onsubmit

JS Objects
JavaScript Objects
In JavaScript, objects are king. If you understand objects, you understand JavaScript.
In JavaScript, almost "everything" is an object.
• Booleans can be objects (if defined with the new keyword)

• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects
All JavaScript values, except primitives, are objects.
JavaScript Primitives
A primitive value is a value that has no properties or methods.
A primitive data type is data that has a primitive value.
JavaScript defines 5 types of primitive data types:
• string
• number
• boolean
• null
• undefined
Primitive values are immutable (they are hardcoded and therefore cannot be changed).
if x = 3.14, you can change the value of x. But you cannot change the value of 3.14.
Value Type Comment
"Hello" string "Hello" is always "Hello"
3.14 number 3.14 is always 3.14
true boolean true is always true
false boolean false is always false
null null (object) null is always null
undefined undefined undefined is always undefined
Objects are Variables

JavaScript variables can contain single values:
Example
let person = "John Doe";
JavaScript variables can also contain many values.
Objects are variables too. But objects can contain many values.
Object values are written as name : value pairs (name and value separated by a colon).
Example
A JavaScript object is a collection of named values
It is a common practice to declare objects with the const keyword.
Example
ADVERTISEMENT
Object Properties
The named values, in JavaScript objects, are called properties.
Property Value
firstName John
lastName Doe
age 50
eyeColor blue
Objects written as name value pairs are similar to:
• Associative arrays in PHP

• Dictionaries in Python
• Hash tables in C
• Hash maps in Java
• Hashes in Ruby and Perl
Object Methods
Methods are actions that can be performed on objects.
Object properties can be both primitive values, other objects, and functions.
An object method is an object property containing a function definition.
Property Value
firstName John
lastName Doe
age 50
eyeColor blue
JavaScript objects are containers for named values, called properties and methods.
You will learn more about methods in the next chapters.
Creating a JavaScript Object

With JavaScript, you can define and create your own objects.
There are different ways to create new objects:
• Create a single object, using an object literal.

• Create a single object, with the keyword new.
• Define an object constructor, and then create objects of the constructed type.
• Create an object using Object.create().
Using an Object Literal

This is the easiest way to create a JavaScript Object.
Using an object literal, you both define and create an object in one statement.
An object literal is a list of name:value pairs (like age:50) inside curly braces {}.
The following example creates a new JavaScript object with four properties:
Example
Spaces and line breaks are not important. An object definition can span multiple lines:
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
This example creates an empty JavaScript object, and then adds 4 properties:
Example
const person = {};

person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Using the JavaScript Keyword new

The following example create a new JavaScript object using new Object(), and then adds 4
properties:
Example
const person = new Object();

person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
The examples above do exactly the same.
But there is no need to use new Object().
For readability, simplicity and execution speed, use the object literal method.
JavaScript Objects are Mutable

Objects are mutable: They are addressed by reference, not by value.
If person is an object, the following statement will not create a copy of person:
const x = person; // Will not create a copy of person.
The object x is not a copy of person. It is person. Both x and person are the same object.
Any changes to x will also change person, because x and person are the same object.
Example
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
const x = person;
x.age = 10; // Will change both x.age and person.age
JavaScript Object Properties
Properties are the most important part of any JavaScript object.
JavaScript Properties
Properties are the values associated with a JavaScript object.
A JavaScript object is a collection of unordered properties.
Properties can usually be changed, added, and deleted, but some are read only.
Accessing JavaScript Properties

The syntax for accessing the property of an object is:
objectName.property // person.age
or
objectName["property"] // person["age"]
or
objectName[expression] // x = "age"; person[x]
The expression must evaluate to a property name.
Example 1
person.firstname + " is " + person.age + " years old.";
Example 2
person["firstname"] + " is " + person["age"] + " years old.";

ADVERTISEMENT
JavaScript for...in Loop

The JavaScript for...in statement loops through the properties of an object.
Syntax
for (let variable in object) {

}
The block of code inside of the for...in loop will be executed once for each property.
Looping through the properties of an object:
Example
const person = {
fname:" John",
lname:" Doe",
age: 25
};

txt += person[x];
}
Adding New Properties

You can add new properties to an existing object by simply giving it a value.
Assume that the person object already exists - you can then give it new properties:
Example
person.nationality = "English";
Deleting Properties
The delete keyword deletes a property from an object:
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person.age;
or delete person["age"];
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person["age"];
The delete keyword deletes both the value of the property and the property itself.
After deletion, the property cannot be used before it is added back again.
The delete operator is designed to be used on object properties. It has no effect on variables or
functions.
The delete operator should not be used on predefined JavaScript object properties. It can crash
your application.
Nested Objects
Values in an object can be another object:
Example
myObj = {
name:"John",
age:30,
cars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
You can access nested objects using the dot notation or the bracket notation:
Example
myObj.cars.car2;
or:
Example
myObj.cars["car2"];
or:
Example
myObj["cars"]["car2"];
or:
Example
let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];
Nested Arrays and Objects

Values in objects can be arrays, and values in arrays can be objects:
Example
const myObj = {
name: "John",
age: 30,
cars: [
{name:"Ford", "models":["Fiesta", "Focus", "Mustang"]},
{name:"BMW", "models":["320", "X3", "X5"]},
{name:"Fiat", "models":["500", "Panda"]}
]
}
To access arrays inside arrays, use a for-in loop for each array:
Example
for (let i in myObj.cars) {

x += "<h1>" + myObj.cars[i].name + "</h1>";
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
Property Attributes
All properties have a name. In addition they also have a value.
The value is one of the property's attributes.
Other attributes are: enumerable, configurable, and writable.
These attributes define how the property can be accessed (is it readable?, is it writable?)
In JavaScript, all attributes can be read, but only the value attribute can be changed (and only if
the property is writable).
( ECMAScript 5 has methods for both getting and setting all property attributes)
Prototype Properties
JavaScript objects inherit the properties of their prototype.
The delete keyword does not delete inherited properties, but if you delete a prototype property,
it will affect all objects inherited from the prototype.
JavaScript Object Methods
Example
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
}
};
The this Keyword

JavaScript Methods
JavaScript methods are actions that can be performed on objects.
A JavaScript method is a property containing a function definition.

Property Value
firstName John
lastName Doe
age 50
eyeColor blue
Methods are functions stored as object properties.
Accessing Object Methods

You access an object method with the following syntax:
objectName.methodName()
You will typically describe fullName() as a method of the person object, and fullName as a
property.
The fullName property will execute (as a function) when it is invoked with ().
This example accesses the fullName() method of a person object:
Example
name = person.fullName();
If you access the fullName property, without (), it will return the function definition:
Example
name = person.fullName;
Adding a Method to an Object
Adding a new method to an object is easy:
Example
person.name = function () {
};
Using Built-In Methods

This example uses the toUpperCase() method of the String object, to convert a text to
uppercase:
let message = "Hello world!";

let x = message.toUpperCase();
The value of x, after execution of the code above will be:
HELLO WORLD!
Example
person.name = function () {
return (this.firstName + " " + this.lastName).toUpperCase();
};
JavaScript Display Objects
How to Display JavaScript Objects?

Displaying a JavaScript object will output [object Object].
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Some common solutions to display JavaScript objects are:
• Displaying the Object Properties by name

• Displaying the Object Properties in a Loop
• Displaying the Object using Object.values()
• Displaying the Object using JSON.stringify()
Displaying Object Properties

The properties of an object can be displayed as a string:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
person.name + "," + person.age + "," + person.city;
Displaying the Object in a Loop

The properties of an object can be collected in a loop:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
You must use person[x] in the loop.
person.x will not work (Because x is a variable).
Using Object.values()
Any JavaScript object can be converted to an array using Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray is now a JavaScript array, ready to be displayed:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);

document.getElementById("demo").innerHTML = myArray;
Object.values() is supported in all major browsers since 2016.
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)
Using JSON.stringify()
Any JavaScript object can be stringified (converted to a string) with the JavaScript function
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString is now a JavaScript string, ready to be displayed:
Example
const person = {
name: "John",
age: 30,
city: "New York"
};

document.getElementById("demo").innerHTML = myString;
The result will be a string following the JSON notation:
{"name":"John","age":50,"city":"New York"}
JSON.stringify() is included in JavaScript and supported in all major browsers.
Stringify Dates
JSON.stringify converts dates into strings:
Example
const person = {
name: "John",
today: new Date()
};

Stringify Functions
JSON.stringify will not stringify functions:
Example
const person = {
name: "John",
age: function () {return 30;}
};

This can be "fixed" if you convert the functions into strings before stringifying.
Example
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();

Stringify Arrays
It is also possible to stringify JavaScript arrays:
Example
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);

The result will be a string following the JSON notation:
["John","Peter","Sally","Jane"]
JavaScript Object Accessors
JavaScript Accessors (Getters and Setters)

ECMAScript 5 (ES5 2009) introduced Getter and Setters.
Getters and setters allow you to define Object Accessors (Computed Properties).
JavaScript Getter (The get Keyword)

This example uses a lang property to get the value of the language property.
Example
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:

document.getElementById("demo").innerHTML = person.lang;
JavaScript Setter (The set Keyword)

This example uses a lang property to set the value of the language property.
Example
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// Set an object property using a setter:

person.lang = "en";
// Display data from the object:

document.getElementById("demo").innerHTML = person.language;
JavaScript Function or Getter?

What is the differences between these two examples?
Example 1
const person = {
firstName: "John",
lastName: "Doe",
}
};
// Display data from the object using a method:

document.getElementById("demo").innerHTML = person.fullName();
Example 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
}
};

document.getElementById("demo").innerHTML = person.fullName;
Example 1 access fullName as a function: person.fullName().

Example 2 access fullName as a property: person.fullName.
The second example provides a simpler syntax.
Data Quality
JavaScript can secure better data quality when using getters and setters.
Using the lang property, in this example, returns the value of the language property in upper
case:
Example
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};

document.getElementById("demo").innerHTML = person.lang;
Using the lang property, in this example, stores an upper case value in the language property:
Example
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Set an object property using a setter:

person.lang = "en";
// Display data from the object:

document.getElementById("demo").innerHTML = person.language;
Why Using Getters and Setters?
• It gives simpler syntax
• It allows equal syntax for properties and methods
• It can secure better data quality
• It is useful for doing things behind-the-scenes
Object.defineProperty()
The Object.defineProperty() method can also be used to add Getters and Setters:
A Counter Example
// Define object
const obj = {counter : 0};
// Define setters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (value) {this.counter -= value;}
});
// Play with the counter:

obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
JavaScript Object Constructors
Example
function Person(first, last, age, eye) {

this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
It is considered good practice to name constructor functions with an upper-case first letter.
Object Types (Blueprints) (Classes)

The examples from the previous chapters are limited. They only create single objects.
Sometimes we need a "blueprint" for creating many objects of the same "type".
The way to create an "object type", is to use an object constructor function.
In the example above, function Person() is an object constructor function.
Objects of the same type are created by calling the constructor function with the new keyword:
const myFather = new Person("John", "Doe", 50, "blue");

const myMother = new Person("Sally", "Rally", 48, "green");
ADVERTISEMENT
The this Keyword

In JavaScript, the thing called this is the object that "owns" the code.
The value of this, when used in an object, is the object itself.

In a constructor function this does not have a value. It is a substitute for the new object. The
value of this will become the new object when a new object is created.
Note that this is not a variable. It is a keyword. You cannot change the value of this.
Adding a Property to an Object

Adding a new property to an existing object is easy:
Example
myFather.nationality = "English";
The property will be added to myFather. Not to myMother. (Not to any other person objects).
Adding a Method to an Object

Adding a new method to an existing object is easy:
Example
myFather.name = function () {
};
The method will be added to myFather. Not to myMother. (Not to any other person objects).
Adding a Property to a Constructor

You cannot add a new property to an object constructor the same way you add a new property to
an existing object:
Example
Person.nationality = "English";
To add a new property to a constructor, you must add it to the constructor function:
Example
function Person(first, last, age, eyecolor) {

this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
This way object properties can have default values.
Adding a Method to a Constructor

Your constructor function can also define methods:
Example

this.age = age;
this.name = function() {
};
}
You cannot add a new method to an object constructor the same way you add a new method to
an existing object.
Adding methods to an object constructor must be done inside the constructor function:
Example
function Person(firstName, lastName, age, eyeColor) {

this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
The changeName() function assigns the value of name to the person's lastName property.
Now You Can Try:
myMother.changeName("Doe");
JavaScript knows which person you are talking about by "substituting" this with myMother.
Built-in JavaScript Constructors

JavaScript has built-in constructors for native objects:
new String() // A new String object

new Number() // A new Number object
new Boolean() // A new Boolean object
new Object() // A new Object object
new Array() // A new Array object
new RegExp() // A new RegExp object
new Function() // A new Function object
new Date() // A new Date object
The Math() object is not in the list. Math is a global object. The new keyword cannot be used on
Math.
Did You Know?

As you can see above, JavaScript has object versions of the primitive data types String, Number,
and Boolean. But there is no reason to create complex objects. Primitive values are much faster:
Use string literals "" instead of new String().
Use number literals 50 instead of new Number().
Use boolean literals true / false instead of new Boolean().

Use object literals {} instead of new Object().
Use array literals [] instead of new Array().
Use pattern literals /()/ instead of new RegExp().
Use function expressions () {} instead of new Function().
Example
let x1 = ""; // new primitive string

let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new Object object

const x5 = []; // new Array object
const x6 = /()/ // new RegExp object
const x7 = function(){}; // new function
String Objects
Normally, strings are created as primitives: firstName = "John"
But strings can also be created as objects using the new keyword:
firstName = new String("John")
Learn why strings should not be created as object in the chapter JS Strings.
Number Objects
Normally, numbers are created as primitives: x = 30
But numbers can also be created as objects using the new keyword:
x = new Number(30)
Learn why numbers should not be created as object in the chapter JS Numbers.
Boolean Objects
Normally, booleans are created as primitives: x = false
But booleans can also be created as objects using the new keyword:
x = new Boolean(false)
Learn why booleans should not be created as object in the chapter JS Booleans.
JavaScript Object Prototypes
All JavaScript objects inherit properties and methods from a prototype.
In the previous chapter we learned how to use an object constructor:
Example

this.age = age;
}
const myFather = new Person("John", "Doe", 50, "blue");

const myMother = new Person("Sally", "Rally", 48, "green");
We also learned that you can not add a new property to an existing object constructor:
Example
Person.nationality = "English";
To add a new property to a constructor, you must add it to the constructor function:
Example

this.age = age;
this.nationality = "English";
}
ADVERTISEMENT
Prototype Inheritance
All JavaScript objects inherit properties and methods from a prototype:
• Date objects inherit from Date.prototype

• Array objects inherit from Array.prototype
• Person objects inherit from Person.prototype
The Object.prototype is on the top of the prototype inheritance chain:
Date objects, Array objects, and Person objects inherit from Object.prototype.
Adding Properties and Methods to Objects

Sometimes you want to add new properties (or methods) to all existing objects of a given type.
Sometimes you want to add new properties (or methods) to an object constructor.
Using the prototype Property

The JavaScript prototype property allows you to add new properties to object constructors:
Example

this.age = age;
}
Person.prototype.nationality = "English";
The JavaScript prototype property also allows you to add new methods to objects constructors:
Example

this.age = age;
}
Person.prototype.name = function() {
};
Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects.
JavaScript ES5 Object Methods
ECMAScript 5 added a lot of new Object Methods to JavaScript.
ES5 New Object Methods
// Adding or changing an object property

Object.defineProperty(object, property, descriptor)
// Adding or changing many object properties

Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array

Object.getOwnPropertyNames(object)
// Returns enumerable properties as an array

Object.keys(object)
// Accessing the prototype

Object.getPrototypeOf(object)
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)

Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object

Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
Changing a Property Value

Syntax
Object.defineProperty(object, property, {value : value})
This example changes a property value:
Example
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};
// Change a property
Object.defineProperty(person, "language", {value : "NO"});
Changing Meta Data

ES5 allows the following property meta data to be changed:
writable : true // Property value can be changed
enumerable : true // Property can be enumerated
configurable : true // Property can be reconfigured
writable : false // Property value can not be changed

enumerable : false // Property can be not enumerated
configurable : false // Property can be not reconfigured
ES5 allows getters and setters to be changed:
// Defining a getter
get: function() { return language }
// Defining a setter
set: function(value) { language = value }
This example makes language read-only:
Object.defineProperty(person, "language", {writable:false});
This example makes language not enumerable:
Object.defineProperty(person, "language", {enumerable:false});
Listing All Properties

This example list all properties of an object:
Example
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};

Object.getOwnPropertyNames(person); // Returns an array of properties
Listing Enumerable Properties

This example list only the enumerable properties of an object:
Example
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};

Object.keys(person); // Returns an array of enumerable properties
Adding a Property
This example adds a new property to an object:
Example
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};
// Add a property
Object.defineProperty(person, "year", {value:"2008"});
Adding Getters and Setters

The Object.defineProperty() method can also be used to add Getters and Setters:
Example
//Create an object
const person = {firstName:"John", lastName:"Doe"};
// Define a getter
Object.defineProperty(person, "fullName", {
get: function () {return this.firstName + " " + this.lastName;}
});
A Counter Example
Example
// Define object
const obj = {counter:0};
// Define setters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (i) {this.counter -= i;}
});
// Play with the counter:

obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
JavaScript Map Objects

A Map object holds key-value pairs where the keys can be any datatype.
A Map object remembers the original insertion order of the keys.
A Map object has a property that represents the size of the map.
Essensial Map() Methods

Method Description
new Map() Creates a new Map object
set() Sets a value for a key in a Map object
get() Gets a value for a key in a Map object
entries() Returns an array of the key/value pairs in a Map object
keys() Returns an array of the keys in a Map object
values() Returns an array of the values in a Map object
Map() Properties
size Gets a value for a key in a Map object
Create a Map Object

Being able to use an Object as a key is an important Map feature.
Example
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map

const fruits = new Map();
// Add new Elements to the Map

fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
The get() method gets a value for a key in a Map object:
Example
fruits.get(apples); // Returns 500
fruits.get("apples"); // Returns undefined
You can pass an Array to the new Map() constructor:
Example
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map

const fruits = new Map([;
[apples, 500],
[bananas, 300],
[oranges, 200]
]);
Other Map() Methods

Method Description
clear() Removes all elements in a Map
delete() Removes an element specified by a key.

has() Returns true if a key exists.
forEach() Invokes a callback for each key/value pair.
JavaScript Set Objects

A Set is a collection of unique values.
Each value may occur only once in a Set.
A Set can hold any values of any data type.
How to Create a Set

Create a Set and add existing variables:
Example
// Create some variables

const a = "a";
const b = "b";
const c = "c";
// Create a Set
const letters = new Set();
// Add the values to the Set

letters.add(a);
letters.add(b);
letters.add(c);
Create a Set and add literal values:
Example
// Create a Set
const letters = new Set();
// Add some values to the Set

letters.add("a");
letters.add("b");
letters.add("c");
Pass an Array to the new Set() constructor:
Example
// Create a new Set

const letters = new Set(["a","b","c"]);
For a Set, typeof returns object:
typeof letters; // Returns object
For a Set, instanceof Set returns true:
letters instanceof Set; // Returns true
Adding Elements to a Set

Example
letters.add("d");
letters.add("e");
If you add equal elements, only the first will be saved:
Example
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
ADVERTISEMENT
Set Object Methods and Properties
new Set() Creates a new Set object
add() Adds a new element to the Set
clear() Removes all elements from a Set
delete() Removes an element specified by its value.
entries() Returns an array of the values in a Set object
has() Returns true if a value exists
forEach() Invokes a callback for each element
keys() Returns an array of the values in a Set object
values() Same as keys()
size Returns the element count

JS Functions
JavaScript Function Definitions
JavaScript functions are defined with the function keyword.
You can use a function declaration or a function expression.
Function Declarations
Earlier in this tutorial, you learned that functions are declared with the following syntax:
function functionName(parameters) {
}
Declared functions are not executed immediately. They are "saved for later use", and will be
executed later, when they are invoked (called upon).
Example
return a * b;
}
Semicolons are used to separate executable JavaScript statements.

Since a function declaration is not an executable statement, it is not common to end it with a
semicolon.
Function Expressions
A JavaScript function can also be defined using an expression.
A function expression can be stored in a variable:
Example
const x = function (a, b) {return a * b};
After a function expression has been stored in a variable, the variable can be used as a function:
Example
const x = function (a, b) {return a * b};

let z = x(4, 3);
The function above is actually an anonymous function (a function without a name).
Functions stored in variables do not need function names. They are always invoked (called)
using the variable name.
The function above ends with a semicolon because it is a part of an executable statement.
ADVERTISEMENT
The Function() Constructor

As you have seen in the previous examples, JavaScript functions are defined with the function
keyword.
Functions can also be defined with a built-in JavaScript function constructor called Function().
Example
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
You actually don't have to use the function constructor. The example above is the same as
writing:
Example
const myFunction = function (a, b) {return a * b};
Most of the time, you can avoid using the new keyword in JavaScript.
Function Hoisting
Earlier in this tutorial, you learned about "hoisting" (JavaScript Hoisting).
Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.
Hoisting applies to variable declarations and to function declarations.
Because of this, JavaScript functions can be called before they are declared:
myFunction(5);
function myFunction(y) {
return y * y;
}
Functions defined using an expression are not hoisted.
Self-Invoking Functions
Function expressions can be made "self-invoking".
A self-invoking expression is invoked (started) automatically, without being called.
Function expressions will execute automatically if the expression is followed by ().
You cannot self-invoke a function declaration.
You have to add parentheses around the function to indicate that it is a function expression:
Example
(function () {
let x = "Hello!!"; // I will invoke myself
})();
The function above is actually an anonymous self-invoking function (function without name).
Functions Can Be Used as Values
JavaScript functions can be used as values:
Example
return a * b;
}
JavaScript functions can be used in expressions:
Example
return a * b;
}
let x = myFunction(4, 3) * 2;
Functions are Objects

The typeof operator in JavaScript returns "function" for functions.
But, JavaScript functions can best be described as objects.
JavaScript functions have both properties and methods.
The arguments.length property returns the number of arguments received when the function
was invoked:
Example
return arguments.length;
}
The toString() method returns the function as a string:

Example
return a * b;
}
let text = myFunction.toString();
A function defined as the property of an object, is called a method to the object.

A function designed to create new objects, is called an object constructor.
Arrow Functions
Arrow functions allows a short syntax for writing function expressions.
You don't need the function keyword, the return keyword, and the curly brackets.
Example
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Arrow functions do not have their own this. They are not well suited for defining object
methods.
Arrow functions are not hoisted. They must be defined before they are used.
Using const is safer than using var, because a function expression is always constant value.
You can only omit the return keyword and the curly brackets if the function is a single
statement. Because of this, it might be a good habit to always keep them:
Example
const x = (x, y) => { return x * y };
Arrow functions are not supported in IE11 or earlier

JavaScript Function Parameters
A JavaScript function does not perform any checking on parameter values (arguments).
Function Parameters and Arguments

Earlier in this tutorial, you learned that functions can have parameters:
function functionName(parameter1, parameter2, parameter3) {

}
Function parameters are the names listed in the function definition.
Function arguments are the real values passed to (and received by) the function.
Parameter Rules
JavaScript function definitions do not specify data types for parameters.
JavaScript functions do not perform type checking on the passed arguments.
JavaScript functions do not check the number of arguments received.
Default Parameters
If a function is called with missing arguments (less than declared), the missing values are set to
undefined.
Sometimes this is acceptable, but sometimes it is better to assign a default value to the
parameter:
Example
function myFunction(x, y) {
if (y === undefined) {
y = 2;
}
}
ECMAScript 2015 allows default parameter values in the function declaration:
function (x, y = 2) {
// function code
}
The Arguments Object

JavaScript functions have a built-in object called the arguments object.
The argument object contains an array of the arguments used when the function was called
(invoked).
This way you can simply use a function to find (for instance) the highest value in a list of
numbers:
Example
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
let max = -Infinity;
for (let i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
Or create a function to sum all input values:
Example
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
If a function is called with too many arguments (more than declared), these arguments can be
reached using the arguments object.
Arguments are Passed by Value

The parameters, in a function call, are the function's arguments.
JavaScript arguments are passed by value: The function only gets to know the values, not the
argument's locations.
If a function changes an argument's value, it does not change the parameter's original value.
Changes to arguments are not visible (reflected) outside the function.
Objects are Passed by Reference

In JavaScript, object references are values.
Because of this, objects will behave like they are passed by reference:
If a function changes an object property, it changes the original value.
Changes to object properties are visible (reflected) outside the function.
JavaScript Function Invocation

The code inside a JavaScript function will execute when "something" invokes it.
Invoking a JavaScript Function

The code inside a function is not executed when the function is defined.
The code inside a function is executed when the function is invoked.
It is common to use the term "call a function" instead of "invoke a function".
It is also common to say "call upon a function", "start a function", or "execute a function".
In this tutorial, we will use invoke, because a JavaScript function can be invoked without being
called.
Invoking a Function as a Function

Example
return a * b;
}
myFunction(10, 2); // Will return 20
The function above does not belong to any object. But in JavaScript there is always a default
global object.
In HTML the default global object is the HTML page itself, so the function above "belongs" to
the HTML page.
In a browser the page object is the browser window. The function above automatically becomes
a window function.
myFunction() and window.myFunction() is the same function:
Example
return a * b;
}
window.myFunction(10, 2); // Will also return 20
This is a common way to invoke a JavaScript function, but not a very good practice.
Global variables, methods, or functions can easily create name conflicts and bugs in the global
object.
The this Keyword

In JavaScript, the thing called this, is the object that "owns" the current code.
The value of this, when used in a function, is the object that "owns" the function.
Note that this is not a variable. It is a keyword. You cannot change the value of this.
Tip: Read more about the this keyword at JS this Keyword.
The Global Object

When a function is called without an owner object, the value of this becomes the global object.
In a web browser the global object is the browser window.
This example returns the window object as the value of this:
Example
let x = myFunction(); // x will be the window object
return this;
}
Invoking a function as a global function, causes the value of this to be the global object.
Using the window object as a variable can easily crash your program.
Invoking a Function as a Method
In JavaScript you can define functions as object methods.
The following example creates an object (myObject), with two properties (firstName and
lastName), and a method (fullName):
Example
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
}
}
myObject.fullName(); // Will return "John Doe"
The fullName method is a function. The function belongs to the object. myObject is the owner
of the function.
The thing called this, is the object that "owns" the JavaScript code. In this case the value of
this is myObject.
Test it! Change the fullName method to return the value of this:
Example
const myObject = {
firstName:"John",
lastName: "Doe",
return this;
}
}
// This will return [object Object] (the owner object)

myObject.fullName();
Invoking a function as an object method, causes the value of this to be the object itself.
Invoking a Function with a Function Constructor
If a function invocation is preceded with the new keyword, it is a constructor invocation.
It looks like you create a new function, but since JavaScript functions are objects you actually
create a new object:
Example
// This is a function constructor:

function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object

const myObj = new myFunction("John", "Doe");
// This will return "John"

myObj.firstName;
A constructor invocation creates a new object. The new object inherits the properties and
methods from its constructor.
The this keyword in the constructor does not have a value.

The value of this will be the new object created when the function is invoked.
JavaScript Function Call
Method Reuse
With the call() method, you can write a method that can be used on different objects.
All Functions are Methods

In JavaScript all functions are object methods.
If a function is not a method of a JavaScript object, it is a function of the global object (see
previous chapter).
The example below creates an object with 3 properties, firstName, lastName, fullName.
Example
const myObject = {
firstName:"John",
lastName: "Doe",
}
}
// This will return "John Doe":

myObject.fullName();
The this Keyword

ADVERTISEMENT
The JavaScript call() Method

The call() method is a predefined JavaScript method.
It can be used to invoke (call) a method with an owner object as an argument (parameter).
With call(), an object can use a method belonging to another object.
This example calls the fullName method of person, using it on person1:

Example
const person = {
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
const person2 = {
firstName:"Mary",
lastName: "Doe"
}
// This will return "John Doe":

person.fullName.call(person1);
This example calls the fullName method of person, using it on person2:
Example
const person = {
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
const person2 = {
firstName:"Mary",
lastName: "Doe"
}
// This will return "Mary Doe"

person.fullName.call(person2);
The call() Method with Arguments

The call() method can accept arguments:
Example
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");
JavaScript Function Apply
Method Reuse
With the apply() method, you can write a method that can be used on different objects.
The JavaScript apply() Method

The apply() method is similar to the call() method (previous chapter).
In this example the fullName method of person is applied on person1:
Example
const person = {
}
}
const person1 = {
firstName: "Mary",
lastName: "Doe"
}
// This will return "Mary Doe":

person.fullName.apply(person1);
The Difference Between call() and apply()

The difference is:
The call() method takes arguments separately.
The apply() method takes arguments as an array.
The apply() method is very handy if you want to use an array instead of an argument list.
The apply() Method with Arguments

The apply() method accepts arguments in an array:
Example
const person = {
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

Compared with the call() method:
Example
const person = {
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");
ADVERTISEMENT
Simulate a Max Method on Arrays

You can find the largest number (in a list of numbers) using the Math.max() method:
Example
Math.max(1,2,3); // Will return 3
Since JavaScript arrays do not have a max() method, you can apply the Math.max() method
instead.
Example
Math.max.apply(null, [1,2,3]); // Will also return 3
The first argument (null) does not matter. It is not used in this example.
These examples will give the same result:
Example
Math.max.apply(Math, [1,2,3]); // Will also return 3

Example
Math.max.apply(" ", [1,2,3]); // Will also return 3
Example
Math.max.apply(0, [1,2,3]); // Will also return 3
JavaScript Strict Mode

In JavaScript strict mode, if the first argument of the apply() method is not an object, it
becomes the owner (object) of the invoked function. In "non-strict" mode, it becomes the global
object.
JavaScript Closures
JavaScript variables can belong to the local or global scope.
Global variables can be made local (private) with closures.
Global Variables
A function can access all variables defined inside the function, like this:
Example
let a = 4;
return a * a;
}
But a function can also access variables defined outside the function, like this:
Example
let a = 4;
return a * a;
}
In the last example, a is a global variable.
In a web page, global variables belong to the window object.
Global variables can be used (and changed) by all scripts in the page (and in the window).
In the first example, a is a local variable.
A local variable can only be used inside the function where it is defined. It is hidden from other
functions and other scripting code.
Global and local variables with the same name are different variables. Modifying one, does not
modify the other.
Variables created without a declaration keyword (var, let, or const) are always global, even if
they are created inside a function.
Example
a = 4;
}
ADVERTISEMENT
Variable Lifetime
Global variables live until the page is discarded, like when you navigate to another page or close
the window.
Local variables have short lives. They are created when the function is invoked, and deleted
when the function is finished.
A Counter Dilemma
Suppose you want to use a variable for counting something, and you want this counter to be
available to all functions.
You could use a global variable, and a function to increase the counter:
Example
// Initiate counter
let counter = 0;
// Function to increment counter

function add() {
counter += 1;
}
// Call add() 3 times

add();
add();
add();
// The counter should now be 3
There is a problem with the solution above: Any code on the page can change the counter,
without calling add().
The counter should be local to the add() function, to prevent other code from changing it:
Example
// Initiate counter
let counter = 0;

function add() {
let counter = 0;
counter += 1;
}

add();
add();
add();
//The counter should now be 3. But it is 0
It did not work because we display the global counter instead of the local counter.
We can remove the global counter and access the local counter by letting the function return it:
Example

function add() {
let counter = 0;
counter += 1;
return counter;
}

add();
add();
add();
//The counter should now be 3. But it is 1.
It did not work because we reset the local counter every time we call the function.
A JavaScript inner function can solve this.
JavaScript Nested Functions

All functions have access to the global scope.
In fact, in JavaScript, all functions have access to the scope "above" them.
JavaScript supports nested functions. Nested functions have access to the scope "above" them.
In this example, the inner function plus() has access to the counter variable in the parent
function:
Example
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
This could have solved the counter dilemma, if we could reach the plus() function from the
outside.
We also need to find a way to execute counter = 0 only once.
We need a closure.
JavaScript Closures
Remember self-invoking functions? What does this function do?
Example
const add = (function () {

let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Example Explained
The variable add is assigned to the return value of a self-invoking function.
The self-invoking function only runs once. It sets the counter to zero (0), and returns a function
expression.
This way add becomes a function. The "wonderful" part is that it can access the counter in the
parent scope.
This is called a JavaScript closure. It makes it possible for a function to have "private"
variables.
The counter is protected by the scope of the anonymous function, and can only be changed using
the add function.
A closure is a function having access to the parent scope, even after the parent function has
closed.
JS Classes
JavaScript Classes
ECMAScript 2015, also known as ES6, introduced JavaScript Classes.
JavaScript Classes are templates for JavaScript Objects.
JavaScript Class Syntax

Always add a method named constructor():
Syntax
class ClassName {
}
Example
class Car {
this.name = name;
this.year = year;
}
}
The example above creates a class named "Car".
The class has two initial properties: "name" and "year".
A JavaScript class is not an object.
It is a template for JavaScript objects.
Using a Class
When you have a class, you can use the class to create objects:
Example
let myCar1 = new Car("Ford", 2014);

let myCar2 = new Car("Audi", 2019);
The example above uses the Car class to create two Car objects.
The constructor method is called automatically when a new object is created.
The Constructor Method

The constructor method is a special method:
• It has to have the exact name "constructor"

• It is executed automatically when a new object is created
• It is used to initialize object properties
If you do not define a constructor method, JavaScript will add an empty constructor method.
Class Methods
Class methods are created with the same syntax as object methods.
Always add a constructor() method.
Then add any number of methods.
Syntax
class ClassName {
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Create a Class method named "age", that returns the Car age:
Example
class Car {
this.name = name;
this.year = year;
}
age() {
}
}

"My car is " + myCar.age() + " years old.";
You can send parameters to Class methods:
Example
class Car {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}

let year = date.getFullYear();

document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
Browser Support
The following table defines the first browser version with full support for Classes in JavaScript:

Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016
"use strict"
The syntax in classes must be written in "strict mode".
You will get an error if you do not follow the "strict mode" rules.
Example
In "strict mode" you will get an error if you use a variable without declaring it:
class Car {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
}
}
Learn more about "strict mode" in: JS Strict Mode.
JavaScript Class Inheritance
Class Inheritance
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class:
Example
Create a class named "Model" which will inherit the methods from the "Car" class:
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {

constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");

document.getElementById("demo").innerHTML = myCar.show();
The super() method refers to the parent class.
By calling the super() method in the constructor method, we call the parent's constructor
method and gets access to the parent's properties and methods.
Inheritance is useful for code reusability: reuse properties and methods of an existing class when
you create a new class.
Getters and Setters

Classes also allows you to use getters and setters.
It can be smart to use getters and setters for your properties, especially if you want to do
something special with the value before returning them, or before you set them.
To add getters and setters in the class, use the get and set keywords.
Example
Create a getter and a setter for the "carname" property:
class Car {
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
Note: even if the getter is a method, you do not use parentheses when you want to get the
property value.
The name of the getter/setter method cannot be the same as the name of the property, in this case
carname.
Many programmers use an underscore character _ before the property name to separate the
getter/setter from the actual property:
Example
You can use the underscore character to separate the getter/setter from the actual property:
class Car {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
document.getElementById("demo").innerHTML = myCar.carname;
To use a setter, use the same syntax as when you set a property value, without parentheses:
Example
Use a setter to change the carname to "Volvo":
class Car {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}

myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
Hoisting
Unlike functions, and other JavaScript declarations, class declarations are not hoisted.
That means that you must declare a class before you can use it:
Example
//You cannot use the class yet.

//myCar = new Car("Ford")
//This would raise an error.
class Car {
}
}
//Now you can use the class:

let myCar = new Car("Ford")
Note: For other declarations, like functions, you will NOT get an error when you try to use it
before it is declared, because the default behavior of JavaScript declarations are hoisting (moving
the declaration to the top).
JavaScript Static Methods

Static class methods are defined on the class itself.
You cannot call a static method on an object, only on an object class.
Example
class Car {
constructor(name) {
this.name = name;
}
static hello() {
return "Hello!!";
}
}
// You can calll 'hello()' on the Car Class:

document.getElementById("demo").innerHTML = Car.hello();
// But NOT on a Car Object:

// document.getElementById("demo").innerHTML = myCar.hello();
// this will raise an error.
If you want to use the myCar object inside the static method, you can send it as a parameter:
Example
class Car {
constructor(name) {
this.name = name;
}
static hello(x) {
return "Hello " + x.name;
}
}
document.getElementById("demo").innerHTML = Car.hello(myCar);

JavaScript Tutorial

Uploaded by

JavaScript Tutorial

Uploaded by

JavaScript Tutorial

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

Examples in Each Chapter

Use the Menu

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

This tutorial covers every version of JavaScript:

• The Original JavaScript ES1 ES2 ES3 (1997-1999)

If you are struggling, take a break, or re-read the material.

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

Test Yourself With Exercises

var = " ";

Start the Exercise

You don't have to get or download JavaScript.

JavaScript is free to use for everyone.

JavaScript Quiz Test

JavaScript Can Change HTML Content

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript accepts both double and single quotes:

document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript Can Change HTML Attribute Values

JavaScript Can Hide HTML Elements

JavaScript Can Show HTML Elements

Did You Know?

Old JavaScript examples may use a type attribute: <script type="text/javascript">.

JavaScript Functions and Events

JavaScript in <head> or <body>

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.

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.

<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>

The document.write() method should only be used for testing.

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

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

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.

Values, Operators, Expressions, Keywords, and Comments.

document.getElementById("demo").innerHTML = "Hello Dolly.";

Most JavaScript programs contain many JavaScript statements.

Add a semicolon at the end of each executable statement:

let 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.

JavaScript White Space

The following lines are equivalent:

let person = "Hege";

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.

break Terminates a switch or a loop

continue Jumps out of a loop and starts at the top

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