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
A computer program is a list of “instructions” to be “executed” by a computer.
In a programming language, these programming instructions are called statements.
A JavaScript program is a list of programming statements.
In HTML, JavaScript programs are executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write “Hello Dolly.” inside an HTML element with id=”demo”:
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are written.
JavaScript programs (and JavaScript statements) are often called JavaScript code.
Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
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 |
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(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
The result in x will be:
12
Why Functions?
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce different results.
Example
Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
The () Operator Invokes the Function
Using the example above, toCelsius
refers to the function object, and toCelsius()
refers to the function result.
Accessing a function without () will return the function object instead of the function result.
Example
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"};
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(start, end)
substring(start, end)
substr(start, length)
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(7, 13);
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(7, 13);
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(7, 6);
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(2018, 11, 24, 10, 33, 30, 0);
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(2018, 15, 24, 10, 33, 30);
Is the same as:
const d = new Date(2019, 3, 24, 10, 33, 30);
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(2018, 5, 35, 10, 33, 30);
Is the same as:
const d = new Date(2018, 6, 5, 10, 33, 30);
Using 6, 4, 3, or 2 Numbers
6 numbers specify year, month, day, hour, minute, second:
Example
const d = new Date(2018, 11, 24, 10, 33, 30);
5 numbers specify year, month, day, hour, and minute:
Example
const d = new Date(2018, 11, 24, 10, 33);
4 numbers specify year, month, day, and hour:
Example
const d = new Date(2018, 11, 24, 10);
3 numbers specify year, month, and day:
Example
const d = new Date(2018, 11, 24);
2 numbers specify year and month:
Example
const d = new Date(2018, 11);
You cannot omit month. If you supply only one parameter it will be treated as milliseconds.
Example
const d = new Date(2018);
Previous Century
One and two digit years will be interpreted as 19xx:
Example
const d = new Date(99, 11, 24);
Example
const d = new Date(9, 11, 24);
new Date(dateString)
new Date(dateString)
creates a new date object from a date string:
Example
const d = new Date("October 13, 2014 11:13:00");
Date strings are described in the next chapter.
JavaScript Stores Dates as Milliseconds
JavaScript stores dates as number of milliseconds since January 01, 1970, 00:00:00 UTC (Universal Time Coordinated).
Zero time is January 01, 1970 00:00:00 UTC.
Now the time is: 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(8, 2);
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(0, 150, 30, 20, -8, -200);
Example
Math.max(0, 150, 30, 20, -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 timesfor/in
– loops through the properties of an objectfor/of
– loops through the values of an iterable objectwhile
– loops through a block of code while a specified condition is truedo/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 = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
txt += numbers[x];
}
Do not use for in over an Array if the index order is important.
The index order is implementation-dependent, and array values may not be accessed in the order you expect.
It is better to use a for loop, a for of loop, or Array.forEach() when the order is important.
Array.forEach()
The forEach()
method calls a function (a callback function) once for each array element.
Example
const numbers = [45, 4, 9, 16, 25];
let txt = "";
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 = [45, 4, 9, 16, 25];
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 const
, let
, 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 typeof
operator 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
- 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 < 5) throw "too low"; if(x > 10) throw "too high"; } catch(err) { message.innerHTML = "Input is " + err; } } </script> </body> </html>
HTML Validation
The code above is just an example.
Modern browsers will often use a combination of JavaScript and built-in HTML validation, using predefined validation rules defined in HTML attributes:
<input id="demo" type="number" min="5" max="10" step="1">
You can read more about forms validation in a later chapter of this tutorial.
The finally Statement
The finally
statement lets you execute code, after try and catch, regardless of the result:
Syntax
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
Example
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 > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
The Error Object
JavaScript has a built in error object that provides error information when an error occurs.
The error object provides two useful properties: name and message.
Error Object Properties
Property | Description |
---|---|
name | Sets or returns an error name |
message | Sets or returns an error message (a string) |
Error Name Values
Six different values can be returned by the error name property:
Error Name | Description |
---|---|
EvalError | An error has occurred in the eval() function |
RangeError | A number “out of range” has occurred |
ReferenceError | An illegal reference has occurred |
SyntaxError | A syntax error has occurred |
TypeError | A type error has occurred |
URIError | An error in encodeURI() has occurred |
The six different values are described below.
Eval Error
An EvalError
indicates an error in the eval() function.
Newer versions of JavaScript do not throw EvalError. Use SyntaxError instead.
Range Error
A RangeError
is thrown if you use a number that is outside the range of legal values.
For example: You cannot set the number of significant digits of a number to 500.
Example
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Reference Error
A ReferenceError
is thrown if you use (reference) a variable that has not been declared:
Example
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Syntax Error
A SyntaxError
is thrown if you try to evaluate code with a syntax error.
Example
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Type Error
A TypeError
is thrown if you use a value that is outside the range of expected types:
Example
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
URI (Uniform Resource Identifier) Error
A URIError
is thrown if you use illegal characters in a URI function:
Example
try {
decodeURI("%%%"); // You cannot URI decode percent signs
}
catch(err) {
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 var
, let
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 var
, let
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:
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-hens, camelCase, or under_scores in variable names?
This is a question programmers often discuss. The answer depends on who you ask:
Hyphens in HTML and CSS:
HTML5 attributes can start with data- (data-quantity, data-price).
CSS uses hyphens in property-names (font-size).
Hyphens can be mistaken as subtraction attempts. Hyphens are not allowed in JavaScript names.
Underscores:
Many programmers prefer to use underscores (date_of_birth), especially in SQL databases.
Underscores are often used in PHP documentation.
PascalCase:
PascalCase is often preferred by C programmers.
camelCase:
camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries.
Do not start names with a $ sign. It will put you in conflict with many JavaScript library names.
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src="myscript.js"></script>
Accessing HTML Elements
A consequence of using “untidy” HTML styles, might result in JavaScript errors.
These two JavaScript statements will produce different results:
const obj = getElementById("Demo")
const obj = getElementById("demo")
If possible, use the same naming convention (as JavaScript) in HTML.
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 = [40, 100, 1, 5, 25, 10,];
WARNING !!
Internet Explorer 8 will crash.
JSON does not allow trailing commas.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Undefined is Not Null
JavaScript objects, variables, properties, and methods can be undefined
.
In addition, empty JavaScript objects can have the value null
.
This can make it a little bit difficult to test if an object is empty.
You can test if an object exists by testing if the type is undefined
:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null
, because this will throw an error if the object is undefined
:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null
, and not undefined
.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj !== "undefined")
Because of this, you must test for not undefined
before you can test for not null
:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)
JavaScript Performance
How to speed up your JavaScript code.
Reduce Activity in Loops
Loops are often used in programming.
Each statement in a loop, including the for statement, is executed for each iteration of the loop.
Statements or assignments that can be placed outside the loop will make the loop run faster.
Bad:
for (let i = 0; i < arr.length; i++) {
Better Code:
let l = arr.length;
for (let i = 0; i < l; i++) {
The bad code accesses the length property of an array each time the loop is iterated.
The better code accesses the length property outside the loop and makes the loop run faster.
Reduce DOM Access
Accessing the HTML DOM is very slow, compared to other JavaScript statements.
If you expect to access a DOM element several times, access it once, and use it as a local variable:
Example
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Reduce DOM Size
Keep the number of elements in the HTML DOM small.
This will always improve page loading, and speed up rendering (page display), especially on smaller devices.
Every attempt to search the DOM (like getElementsByTagName) will benefit from a smaller DOM.
Avoid Unnecessary Variables
Don’t create new variables if you don’t plan to save values.
Often you can replace code like this:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
With this:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Delay JavaScript Loading
Putting your scripts at the bottom of the page body lets the browser load the page first.
While a script is downloading, the browser will not start any other downloads. In addition all parsing and rendering activity might be blocked.
The HTTP specification defines that browsers should not download more than two components in parallel.
An alternative is to use defer="true"
in the script tag. The defer attribute specifies that the script should be executed after the page has finished parsing, but it only works for external scripts.
If possible, you can add your script to the page by code, after the page has loaded:
Example
<script> window.onload = function() { const element = document.createElement("script"); element.src = "myScript.js"; document.body.appendChild(element); }; </script>
Avoid Using with
Avoid using the with
keyword. It has a negative effect on speed. It also clutters up JavaScript scopes.
The with
keyword is not allowed in strict mode.