Learn JavaScript (Full 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


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



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>

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

<h1>My First Web Page</h1>
<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>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html>

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


Using window.alert()

You can use an alert box to display data:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

You can skip the window keyword.

In JavaScript, the window object is the global scope object, that means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display data.

You will learn more about debugging in a later chapter.

Example

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript Print

JavaScript does not have any print object or print methods.

You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the content of the current window.

Example

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</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

computer program is a list of “instructions” to be “executed” by a computer.

In a programming language, these programming instructions are called statements.

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:

Examples

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

function myFunction() {
  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.


JavaScript Keywords

JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

Our Reserved Words Reference lists all JavaScript keywords.

Here is a list of some of the keywords you will learn about in this tutorial:

Keyword Description
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements

JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.



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:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

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";
document.getElementById("myP").innerHTML = "My first paragraph.";

This example uses a comment block to prevent execution of multiple lines:

Example

/*
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
*/


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
/ Division
% Modulus (Division Remainder)
++ Increment
Decrement

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;

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

Operator Description
== 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

JavaScript Logical Operators

Operator Description
&& logical and
|| logical or
! logical not

JavaScript Type Operators

Operator Description
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type

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
<< left shift 5 << 1 0101 << 1 1010  10
>> right shift 5 >> 1 0101 >> 1 0010   2
>>> unsigned right shift 5 >>> 1 0101 >>> 1 0010   2

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



JavaScript Arithmetic


JavaScript Arithmetic Operators

Arithmetic operators perform arithmetic on numbers (literals or variables).

Operator Description
+ Addition
Subtraction
* Multiplication
** Exponentiation
/ 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
Note: 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

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;


JavaScript 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

const cars = ["Saab""Volvo""BMW"];

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(43);   // 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

function toCelsius(fahrenheit) {
  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

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName


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.model = 500

car.weight = 850kg

car.color = white

car.start() 

car.drive()

car.brake()

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:

const car = {type:"Fiat", model:"500", color:"white"};
The values are written as name:value pairs (name and value separated by a colon).

Object Definition

You define (and create) a JavaScript object with an object literal:

Example

const person = {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”};

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

In the example above, this refers to the person object.

I.E. this.firstName means the firstName property of this.

I.E. this.firstName means the firstName property of person.



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

 


JavaScript Event Handlers

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 …


JavaScript Strings

JavaScript strings are for storing and manipulating text.

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";
let length = text.length;

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

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

Note: You cannot break up a code line with a backslash:

Example

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

JavaScript Strings as Objects

Normally, JavaScript strings are primitive values, created from literals:

let x = "John";

But strings can also be defined as objects with the keyword new:

let y = new String("John");

Example

let x = "John";
let y = new String("John");

Do not create Strings objects.

The new keyword complicates the code and slows down execution speed.

String objects can produce unexpected results:

When using the == operator, x and y are equal:

let x = "John";
let y = new String("John");

When using the === operator, x and y are not equal:

let x = "John";
let y = new String("John");

Note the difference between (x==y) and (x===y).

(x == y) true or false?

let x = new String("John");
let y = new String("John");

(x === y) true or false?

let x = new String("John");
let y = new String("John");

Note: Comparing two JavaScript objects always returns false.



JavaScript String Search


JavaScript Search Methods

  • String indexOf()
  • String lastIndexOf()
  • String startsWith()
  • String endsWith()

JavaScript 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");

Note:

  • JavaScript counts positions from zero.
  • 0 is the first position in a string, 1 is the second, 2 is the third, …

JavaScript String lastIndexOf()

The lastIndexOf() method returns the index of the last occurrence of a specified text in a string:

Example

let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate");

Both indexOf(), and lastIndexOf() return -1 if the text is not found:

Example

let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("John");

Both methods accept a second parameter as the starting position for the search:

Example

let str = "Please locate where 'locate' occurs!";
str.indexOf("locate"15);

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

let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate"15);

JavaScript String search()

The search() method searches a string for a specified value and returns the position of the match:

Example

let str = "Please locate where 'locate' occurs!";
str.search("locate");

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.


JavaScript String match()

The match() method searches a string for a match against a regular expression, and returns the matches, as an Array object.

Example 1

Search a string for “ain”:

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g);

Example 2

Perform a global, case-insensitive search for “ain”:

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/gi);

JavaScript String includes()

The includes() method returns true if a string contains a specified value.

Example

let text = "Hello world, welcome to the universe.";
text.includes("world");

Syntax

string.includes(searchvalue, start)
searchvalue Required. The string to search for
start Optional. Default 0. Position to start the search
Returns: Returns true if the string contains the value, otherwise false
JS Version: ES6 (2015)

Check if a string includes “world”, starting the search at position 12:

let text = "Hello world, welcome to the universe.";
text.includes("world"12);

JavaScript 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");

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

let text = "Hello world, welcome to the universe.";

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

let text = "Hello world, welcome to the universe.";

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

let text = "Hello world, welcome to the universe.";

text.startsWith("world"6)    // Returns true

Note: The startsWith() method is case sensitive.


JavaScript 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”:

let text = "John Doe";
text.endsWith("Doe");

Syntax

string.endsWith(searchvalue, length)

Parameter Values

Parameter Description
searchvalue Required. The value to search for.
length Optional. The length to search.

Check if the 11 first characters of a string ends with “world”:

let text = "Hello world, welcome to the universe.";
text.endsWith("world"11);

Note: The endsWith() method is case sensitive.



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.


JavaScript String Length

The length property returns the length of a string:

Example

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;

Extracting String Parts

There are 3 methods for extracting a part of a string:

  • slice(startend)
  • substring(startend)
  • substr(startlength)

JavaScript String slice()

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

Example

Slice out a portion of a string from position 7 to position 13 (13 not included):

let str = "Apple, Banana, Kiwi";
let part = str.slice(713);

Note: JavaScript counts positions from zero. First position is 0. Second position is 1.

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

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);

If you omit the second parameter, the method will slice out the rest of the string:

Example

let part = str.slice(7);

or, counting from the end:

Example

let part = str.slice(-12);

JavaScript String substring()

substring() is similar to slice().

The difference is that start and end values less than 0 are treated as 0 in substring().

Example

let str = "Apple, Banana, Kiwi";
let part = str.substring(713);

If you omit the second parameter, substring() will slice out the rest of the string.


JavaScript String substr()

substr() is similar to slice().

The difference is that the second parameter specifies the length of the extracted part.

Example

let str = "Apple, Banana, Kiwi";
let part = str.substr(76);

If you omit the second parameter, substr() will slice out the rest of the string.

Example

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

If the first parameter is negative, the position counts from the end of the string.

Example

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

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""apostube");

Note:

  • The replace() method does not change the string it is called on.
  • The replace() method returns a new string.
  • The replace() method replaces only the first match
  • If you want to replace all matches, use a regular expression with the /g flag set. See examples below.

By default, the replace() method replaces only the first match:

Example

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft""apostube");

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

Example

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT""apostube");

To replace case insensitive, use a regular expression with an /i flag (insensitive):

Example

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i"apostube");

To replace all matches, use a regular expression with a /g flag (global match):

Example

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g"apostube");

Converting to Upper and Lower Case

A string is converted to upper case with toUpperCase():

A string is converted to lower case with toLowerCase():


JavaScript String toUpperCase()

Example

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

JavaScript String toLowerCase()

Example

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

JavaScript String concat()

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!");

JavaScript String trim()

The trim() method removes whitespace from both sides of a string:

Example

let text1 = "      Hello World!      ";
let text2 = text1.trim();

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.


JavaScript String padStart()

The padStart() method pads a string with another string:

Example

let text = "5";
let padded = text.padStart(4,"x");

Example

let text = "5";
let padded = text.padStart(4,"0");

Example

let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");

JavaScript String padEnd()

The padEnd() method pads a string with another string:

Example

let text = "5";
let padded = text.padEnd(4,"x");

Example

let text = "5";
let padded = text.padEnd(4,"0");

Example

let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");

Extracting String Characters

There are 3 methods for extracting string characters:

  • charAt(position)
  • charCodeAt(position)
  • Property access [ ]

JavaScript String charAt()

The charAt() method returns the character at a specified index (position) in a string:

Example

let text = "HELLO WORLD";
let char = text.charAt(0);

JavaScript String charCodeAt()

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

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

Property Access

ECMAScript 5 (2009) allows property access [ ] on strings:

Example

let text = "HELLO WORLD";
let char = text[0];

Note:

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

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Converting a String to an Array

If you want to work with a string as an array, you can convert it to an array.


JavaScript String split()

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("")


JavaScript Template Literals

Synonyms:

  • Template Literals
  • Template Strings
  • String Templates
  • Back-Tics Syntax

Back-Tics Syntax

Template Literals use back-ticks (“) rather than the quotes (“”) to define a string:

Example

let text = `Hello World!`;

Quotes Inside Strings

With template literals, you can use both single and double quotes inside a string:

Example

let text = `He's often called "Johnny"`;

Multiline Strings

Template literals allows multiline strings:

Example

let text =
`The quick
brown fox
jumps over
the lazy dog`;

Interpolation

Template literals provide an easy way to interpolate variables and expressions into strings.

The method is called string interpolation.

The syntax is:

${...}

Variable Substitutions

Template literals allow variables in strings:

Example

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Automatic replacing of variables with real values is called string interpolation.


Expression Substitution

Template literals allow expressions in strings:

Example

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Automatic replacing of expressions with real values is called string interpolation.


HTML Templates

Example

let header = "Templates Literals";
let tags = ["template literals""javascript""es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;


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)

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


Floating Precision

Floating point arithmetic is not always 100% accurate:

let x = 0.2 + 0.1;

To solve the problem above, it helps to multiply and divide:

let x = (0.2 * 10 + 0.1 * 10) / 10;

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;

If you add a number and a string, the result will be a string concatenation:

Example

let x = 10;
let y = "20";
let z = x + y;

If you add a string and a number, the result will be a string concatenation:

Example

let x = "10";
let y = 20;
let z = x + y;

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;

This will also work:

let x = "100";
let y = "10";
let z = x * y;

And this will work:

let x = "100";
let y = "10";
let z = x - y;

But this will not work:

let x = "100";
let y = "10";
let z = x + y;

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

However, if the string contains a numeric value , the result will be a number:

Example

let x = 100 / "10";

You can use the global JavaScript function isNaN() to find out if a value is a not a number:

Example

let x = 100 / "Apple";
isNaN(x);

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;

Or the result might be a concatenation like NaN5:

Example

let x = NaN;
let y = "5";
let z = x + y;

NaN is a number: typeof NaN returns number:

Example

typeof NaN;

Infinity

Infinity (or -Infinity) is the value JavaScript will return if you calculate a number outside the largest possible number.

Example

let myNumber = 2;
// Execute until Infinity
while (myNumber != Infinity) {
  myNumber = myNumber * myNumber;
}

Division by 0 (zero) also generates Infinity:

Example

let x =  2 / 0;
let y = -2 / 0;

Infinity is a number: typeof Infinity returns number.

Example

typeof Infinity;

Hexadecimal

JavaScript interprets numeric constants as hexadecimal if they are preceded by 0x.

Example

let x = 0xFF;

Example

let myNumber = 32;
myNumber.toString(32);
myNumber.toString(16);
myNumber.toString(12);
myNumber.toString(10);
myNumber.toString(8);
myNumber.toString(2);

JavaScript Numbers as 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;
let y = new Number(123);

When using the == operator, x and y are equal:

let x = 500;
let y = new Number(500);

When using the === operator, x and y are not equal.

let x = 500;
let y = new Number(500);

Note the difference between (x==y) and (x===y).

(x == y) true or false?

let x = new Number(500);
let y = new Number(500);

(x === y) true or false?

let x = new Number(500);
let y = new Number(500);


JavaScript Number Methods

Number methods help you work with numbers.


Number Methods and Properties

Primitive values (like 3.14 or 2014), cannot have properties and methods (because they are not objects).

But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.


The toString() Method

The toString() method returns a number as a string.

All number methods can be used on any type of numbers (literals, variables, or expressions):

Example

let x = 123;
x.toString();
(123).toString();
(100 + 23).toString();

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);
x.toExponential(4);
x.toExponential(6);

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);
x.toFixed(2);
x.toFixed(4);
x.toFixed(6);

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();
x.toPrecision(2);
x.toPrecision(4);
x.toPrecision(6);

The valueOf() Method

valueOf() returns a number as a number.

Example

let x = 123;
x.valueOf();
(123).valueOf();
(100 + 23).valueOf();

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);
Number(false);
Number("10");
Number("  10");
Number("10  ");
Number(" 10  ");
Number("10.33");
Number("10,33");
Number("10 33");
Number("John");

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("1970-01-01"))

The Number() method returns the number of milliseconds since 1.1.1970.

The number of milliseconds between 1970-01-02 and 1970-01-01 is 86400000:

Example

Number(new Date("1970-01-02"))

Example

Number(new Date("2017-09-30"))

The parseInt() Method

parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned:

Example

parseInt("-10");
parseInt("-10.33");
parseInt("10");
parseInt("10.33");
parseInt("10 20 30");
parseInt("10 years");
parseInt("years 10");

If the number cannot be converted, NaN (Not a Number) is returned.


The parseFloat() Method

parseFloat() parses a string and returns a number. Spaces are allowed. Only the first number is returned:

Example

parseFloat("10");
parseFloat("10.33");
parseFloat("10 20 30");
parseFloat("10 years");
parseFloat("years 10");

If the number cannot be converted, NaN (Not a Number) is returned.


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

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


JavaScript Date Objects

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:

Tue Jun 14 2022 14:51:25 GMT+0300 (Eastern European Summer 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

const d = new Date();

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

Note: JavaScript counts months from 0 to 11:

January = 0.

December = 11.

Specifying a month higher than 11, will not result in an error but add the overflow to the next year:

Specifying:

const d = new Date(20181524103330);

Is the same as:

const d = new Date(2019324103330);

Specifying a day higher than max, will not result in an error but add the overflow to the next month:

Specifying:

const d = new Date(2018535103330);

Is the same as:

const d = new Date(201865103330);

Using 6, 4, 3, or 2 Numbers

6 numbers specify year, month, day, hour, minute, second:

Example

const d = new Date(20181124103330);

5 numbers specify year, month, day, hour, and minute:

Example

const d = new Date(201811241033);

4 numbers specify year, month, day, and hour:

Example

const d = new Date(2018112410);

3 numbers specify year, month, and day:

Example

const d = new Date(20181124);

2 numbers specify year and month:

Example

const d = new Date(201811);

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

Example

const d = new Date(91124);

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: 1655207485788 milliseconds past January 01, 1970


new Date(milliseconds)

new Date(milliseconds) creates a new date object as zero time plus milliseconds:

Example

const d = new Date(0);

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

const d = new Date(86400000);

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:

Example

Tue Jun 14 2022 14:51:25 GMT+0300 (Eastern European Summer Time)

When you display a date object in HTML, it is automatically converted to a string, with the toString() method.

Example

const d = new Date();
d.toString();

The toUTCString() method converts a date to a UTC string (a date display standard).

Example

const d = new Date();
d.toUTCString();

The toDateString() method converts a date to a more readable format:

Example

const d = new Date();
d.toDateString();

The toISOString() method converts a Date object to a string, using the ISO standard format:

Example

const d = new Date();
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:

Tue Jun 14 2022 14:51:25 GMT+0300 (Eastern European Summer 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");

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


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

const d = new Date();
d.getTime();

The getFullYear() Method

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

Example

const d = new Date();
d.getFullYear();

The getMonth() Method

The getMonth() method returns the month of a date as a number (0-11):

Example

const d = new Date();
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"];

const d = new Date();
let month = months[d.getMonth()];

The getDate() Method

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

Example

const d = new Date();
d.getDate();

The getHours() Method

The getHours() method returns the hours of a date as a number (0-23):

Example

const d = new Date();
d.getHours();

The getMinutes() Method

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

Example

const d = new Date();
d.getMinutes();

The getSeconds() Method

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

Example

const d = new Date();
d.getSeconds();

The getMilliseconds() Method

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

Example

const d = new Date();
d.getMilliseconds();

The getDay() Method

The getDay() method returns the weekday of a date as a number (0-6):

Example

const d = new Date();
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"];

const d = new Date();
let day = days[d.getDay()];


JavaScript Math Object

The JavaScript Math object allows you to perform mathematical tasks on numbers.

Example

Math.PI;

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

Math.round()

Math.round(x) returns the nearest integer:

Examples

Math.round(4.6);

Math.round(4.5);

Math.round(4.4);

Math.ceil()

Math.ceil(x) returns the value of x rounded up to its nearest integer:

Example

Math.ceil(4.9);
Math.ceil(4.7);
Math.ceil(4.4);
Math.ceil(4.2);
Math.ceil(-4.2);

Math.floor()

Math.floor(x) returns the value of x rounded down to its nearest integer:

Example

Math.floor(4.9);
Math.floor(4.7);
Math.floor(4.4);
Math.floor(4.2);
Math.floor(-4.2);

Math.trunc()

Math.trunc(x) returns the integer part of x:

Example

Math.trunc(4.9);
Math.trunc(4.7);
Math.trunc(4.4);
Math.trunc(4.2);
Math.trunc(-4.2);

Math.sign()

Math.sign(x) returns if x is negative, null or positive:

Example

Math.sign(-4);
Math.sign(0);
Math.sign(4);

Math.pow()

Math.pow(x, y) returns the value of x to the power of y:

Example

Math.pow(82);

Math.sqrt()

Math.sqrt(x) returns the square root of x:

Example

Math.sqrt(64);

Math.abs()

Math.abs(x) returns the absolute (positive) value of x:

Example

Math.abs(-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(01503020, -8, -200);

Example

Math.max(01503020, -8, -200);

Math.random()

Math.random() returns a random number between 0 (inclusive), and 1 (exclusive):

Example

Math.random();

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.

The natural logarithm returns the time needed to reach a certain level of growth:

Examples

Math.log(1);

Math.log(2);

Math.log(3);

Math.E and Math.log() are twins.

How many times must we multiply Math.E to get 10?

Math.log(10);

The Math.log2() Method

Math.log2(x) returns the base 2 logarithm of x.

How many times must we multiply 2 to get 8?

Math.log2(8);

The Math.log10() Method

Math.log10(x) returns the base 10 logarithm of x.

How many times must we multiply 10 to get 1000?

Math.log10(1000);

JavaScript Math 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)


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

// Returns a random integer from 0 to 10:
Math.floor(Math.random() * 11);

Example

// Returns a random integer from 0 to 99:
Math.floor(Math.random() * 100);

Example

// Returns a random integer from 0 to 100:
Math.floor(Math.random() * 101);

Example

// Returns a random integer from 1 to 10:
Math.floor(Math.random() * 10) + 1;

Example

// Returns a random integer from 1 to 100:
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 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>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<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++) {
  text += cars[i] + "<br>";
}

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

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; ) {
  text += cars[i] + "<br>";
  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.



JavaScript For In


The For In Loop

The JavaScript for in statement loops through the properties of an Object:

Syntax

for (key in object) {
  // code block to be executed
}

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 = [45491625];

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 = [45491625];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value;
}

Note that the function takes 3 arguments:

  • The item value
  • The item index
  • The array itself

The example above uses only the value parameter. It can be rewritten to:

Example

const numbers = [45491625];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  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) {
  // code block to be executed
}

variable – For every iteration the value of the next property is assigned to the variable. Variable can be declared with constlet, or var.

iterable – An object that has iterable properties.


Browser Support

For/of was added to JavaScript in 2015

Safari 7 was the first browser to support for of:

Chrome 38 Edge 12 Firefox 51 Safari 7 Opera 25
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;
}


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) {
  // code block to be executed
}

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 {
  // code block to be executed
}
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

const cars = ["BMW""Volvo""Saab""Ford"];
let i = 0;
let text = "";

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


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; }
  text += "The number is " + i + "<br>";
}

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; }
  text += "The number is " + i + "<br>";
}

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

const cars = ["BMW""Volvo""Saab""Ford"];
list: {
  text += cars[0] + "<br>";
  text += cars[1] + "<br>";
  break list;
  text += cars[2] + "<br>";
  text += cars[3] + "<br>";
}

Note: A code block is a block of code between { and }.



JavaScript Sets

A JavaScript Set is a collection of unique values.

Each value can only occur once in a Set.


Essential Set Methods

Method Description
new Set() Creates a new Set
add() Adds a new element to the Set
delete() Removes an element from a Set
has() Returns true if a value exists in the Set
forEach() Invokes a callback for each element in the Set
values() Returns an iterator with all the values in a Set
Property Description
size Returns the number of elements in a Set

How to Create a Set

You can create a JavaScript Set by:

  • Passing an Array to new Set()
  • Create a new Set and use add() to add values
  • Create a new Set and use add() to add variables

The new Set() Method

Pass an Array to the new Set() constructor:

Example

// Create a Set
const letters = new Set(["a","b","c"]);

Create a Set and add values:

Example

// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Create a Set and add variables:

Example

// Create a Set
const letters = new Set();

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);

The add() Method

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");

The forEach() Method

The forEach() method invokes (calls) a function for each Set element:

Example

// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
letters.forEach (function(value) {
  text += value;
})

The values() Method

The values() method returns a new iterator object containing all the values in a Set:

Example

letters.values()   // Returns [object Set Iterator]

Now you can use the Iterator object to access the elements:

Example

// List all Elements
let text = "";
for (const x of letters.values()) {
  text += x;
}


JavaScript Maps

A Map holds key-value pairs where the keys can be any datatype.

A Map remembers the original insertion order of the keys.


Essential Map Methods

Method Description
new Map() Creates a new Map
set() Sets the value for a key in a Map
get() Gets the value for a key in a Map
delete() Removes a Map element specified by the key
has() Returns true if a key exists in a Map
forEach() Calls a function for each key/value pair in a Map
entries() Returns an iterator with the [key, value] pairs in a Map
Property Description
size Returns the number of elements in a Map

How to Create a Map

You can create a JavaScript Map by:

  • Passing an Array to new Map()
  • Create a Map and use Map.set()

The new Map() Method

You can create a Map by passing an Array to the new Map() constructor:

Example

// Create a Map
const fruits = new Map([
  ["apples"500],
  ["bananas"300],
  ["oranges"200]
]);

The set() Method

You can add elements to a Map with the set() method:

Example

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples"500);
fruits.set("bananas"300);
fruits.set("oranges"200);

The set() method can also be used to change existing Map values:

Example

fruits.set("apples"200);

The get() Method

The get() method gets the value of a key in a Map:

Example

fruits.get("apples");    // Returns 500

The size Property

The size property returns the number of elements in a Map:

Example

fruits.size;

The delete() Method

The delete() method removes a Map element:

Example

fruits.delete("apples");

The has() Method

The has() method returns true if a key exists in a Map:

Example

fruits.has("apples");

Try This:

fruits.delete("apples");
fruits.has("apples");

JavaScript Objects vs Maps

Differences between JavaScript Objects and Maps:

Object Map
Iterable Not directly iterable Directly iterable
Size Do not have a size property Have a size property
Key Types Keys must be Strings (or Symbols) Keys can be any datatype
Key Order Keys are not well ordered Keys are ordered by insertion
Defaults Have default keys Do not have default keys

The forEach() Method

The forEach() method calls a function for each key/value pair in a Map:

Example

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

The entries() Method

The entries() method returns an iterator object with the [key, values] in a Map:

Example

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}


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 "John"                 // Returns "string"
typeof 3.14                   // Returns "number"
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 "John"              // Returns "string"
typeof 3.14                // Returns "number"
typeof true                // Returns "boolean"
typeof false               // 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 {name:'John', age:34// Returns "object"
typeof [1,2,3,4]             // Returns "object" (not "array", see note below)
typeof null                  // Returns "object"
typeof function myFunc(){}   // Returns "function"

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

function isArray(myArray) {
  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

function isDate(myDate) {
  return myDate.constructor === Date;
}

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"

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

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
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

Convertings:
  • 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

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

Method Description
toExponential() Returns a string, with a number rounded and written using exponential notation.
toFixed() Returns a string, with a number rounded and written with a specified 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)"

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 Errors


Throw, and Try…Catch…Finally

The try statement defines a code block to run (to try).

The catch statement defines a code block to handle any error.

The finally statement defines a code block to run regardless of the result.

The throw statement defines a custom error.


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>
function myFunction() {
  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 < 5throw "too low";
    if(x > 10throw "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

function myFunction() {
  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 > 10throw "is too high";
    if(x < 5throw "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

Property Description
name Sets or returns an error name
message Sets or returns an error message (a string)

Error Name Values

Six different values can be returned by the error name property:

Error Name Description
EvalError An error has occurred in the eval() function
RangeError A number “out of range” has occurred
ReferenceError An illegal reference has occurred
SyntaxError A syntax error has occurred
TypeError A type error has occurred
URIError An error in encodeURI() has occurred

The six different values are described below.


Eval Error

An EvalError indicates an error in the eval() function.

Newer versions of JavaScript do not throw EvalError. Use SyntaxError instead.


Range Error

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

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) {
  document.getElementById("demo").innerHTML = err.name;
}

Syntax Error

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) {
  document.getElementById("demo").innerHTML = err.name;
}

Type Error

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) {
  document.getElementById("demo").innerHTML = err.name;
}

URI (Uniform Resource Identifier) Error

URIError is thrown if you use illegal characters in a URI function:

Example

try {
  decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

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 NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT 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 varlet and const are quite similar when declared inside a function.

They all have Function Scope:

function myFunction() {
  var carName = "Volvo";   // Function Scope
}
function myFunction() {
let carName = “Volvo”;   // Function Scope
}
function myFunction() {
  const carName = "Volvo";   // Function Scope
}

Global JavaScript Variables

A variable declared outside a function, becomes GLOBAL.

Example

let carName = "Volvo";
// code here can use carName

function myFunction() {
// 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 varlet and const are quite similar when declared outside a block.

They all have Global Scope:

var x = 2;       // Global scope
let x = 2;       // Global scope
const x = 2;       // Global scope

JavaScript Variables

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

function myFunction() {
  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

var carName = "Volvo";
// code here can use window.carName

Global variables defined with the let keyword do not belong to the window object:

Example

let carName = "Volvo";
// code here can not use window.carName

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 = document.getElementById("demo"); // Find an element
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;

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 = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

Example 2

var x = 5// Initialize x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

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 x = 5// Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and 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 Arrow Function

Arrow functions were introduced in ES6.

Arrow functions allow us to write shorter function syntax:

let myFunction = (a, b) => a * b;

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

Note: Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.



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.

Use the keyword class to create a class.

Always add a constructor() method.

Then add any number of methods.

Syntax

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Create a Class method named “age”, that returns the Car age:

Example

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford"2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

You can send parameters to Class methods:

Example

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let myCar = new Car("Ford"2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";


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>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>


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:

function toCelsius(fahrenheit) {
  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:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

Loops:

for (let i = 0; i < 5; i++) {
  x += i;
}

Conditionals:

if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

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:

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

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

document.getElementById("demo").innerHTML =
"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-henscamelCase, 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.


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

function myFunction(a) {
  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

function myFunction(a) {
  let
  power = 10; 
  return a * power;
}

But, what will happen if you break the return statement in two lines like this:

Example 4

function myFunction(a) {
  let
  power = 10; 
  return
  a * power;
}

The function will return undefined!

Why? Because JavaScript thought you meant:

Example 5

function myFunction(a) {
  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 = [40100152510,];

WARNING !!

Internet Explorer 8 will crash.

JSON does not allow trailing commas.

JSON:

person = {"firstName":"John""lastName":"Doe""age":46}

JSON:

points = [40100152510];

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.