VBScript JavaScript

VBScript (Visual Basic Script) is the Active Scripting Language , JavaScript is the Client side scripting language, prototype b
lightweight & designed for fast interpreter . and mostly used with web browsers.
Microsoft Developed VBScript. Brendan Eich founded JavaScript and NetScape Develope
VBScript works at both client side and server side. JavaScript works only at client side.
VBScript is not case sensitive language. JavaScipt is case sensitive language.
It runs only on Internet Explorer (IE) browser. It runs on the all browser.
VBScript is used for server side validation. JavaScript is used for client side validation.
VBScript supports functions & subroutines and uses function and end JavaScript supports only functions and uses curly braces fo
function for starting and ending function. starting and ending function.
VBScript Syntax is derived from BASIC language . JavaScript syntax is derived from C language.
VBScript is not the default scripting language , but can be made by JavaScript is default scripting language almost in all brows
specifying in scripting language.
File extension in VBScript is .vba or .vbs File Extension in JavaScript is .js
VBScript Uses ‘ for comment. JavaScript uses // or /* … */ for comments.

JavaScript Datatypes
One of the most fundamental characteristics of a programming language is the set of
data types it supports. These are the type of values that can be represented and
manipulated in a programming language.
JavaScript allows you to work with three primitive data types −
 Numbers, eg. 123, 120.50 etc.
 Strings of text e.g. "This text string" etc.
 Boolean e.g. true or false.
JavaScript also defines two trivial data types, null and undefined, each of which
defines only a single value. In addition to these primitive data types, JavaScript
supports a composite data type known as object. We will cover objects in detail in a
separate chapter.
Note − JavaScript does not make a distinction between integer values and floating-
point values. All numbers in JavaScript are represented as floating-point values.
JavaScript represents numbers using the 64-bit floating-point format defined by the
IEEE 754 standard.

JavaScript Variables
Like many other programming languages, JavaScript has variables. Variables can be
thought of as named containers. You can place data into these containers and then
refer to the data simply by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are
declared with the var keyword as follows.
<script type = "text/javascript">
<!--
var money;
var name;
//-->
</script>
You can also declare multiple variables with the same var keyword as follows −
<script type = "text/javascript">
<!--
var money, name;
//-->
</script>
Storing a value in a variable is called variable initialization. You can do variable
initialization at the time of variable creation or at a later point in time when you need
that variable.
For instance, you might create a variable named money and assign the value 2000.50
to it later. For another variable, you can assign a value at the time of initialization as
follows.
<script type = "text/javascript">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>
Note − Use the var keyword only for declaration or initialization, once for the life of any
variable name in a document. You should not re-declare same variable twice.
JavaScript is untyped language. This means that a JavaScript variable can hold a
value of any data type. Unlike many other languages, you don't have to tell JavaScript
during variable declaration what type of value the variable will hold. The value type of a
variable can change during the execution of a program and JavaScript takes care of it
automatically.

JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript
variables have only two scopes.
 Global Variables − A global variable has global scope which means it can be defined
anywhere in your JavaScript code.
  Local Variables − A local variable will be visible only within a function where it is defined.
Function parameters are always local to that function.
Within the body of a function, a local variable takes precedence over a global variable
with the same name. If you declare a local variable or function parameter with the
same name as a global variable, you effectively hide the global variable. Take a look
into the following example.
Live Demo

<html>
<body onload = checkscope();>
<script type = "text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>
</body>
</html>
This produces the following result −
local

JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.
 You should not use any of the JavaScript reserved keywords as a variable name. These
keywords are mentioned in the next section. For example, break or boolean variable
names are not valid.
 JavaScript variable names should not start with a numeral (0-9). They must begin with a
letter or an underscore character. For example, 123test is an invalid variable name
but _123test is a valid one.
 JavaScript variable names are case-sensitive. For example, Name and name are two
different variables.

A computer program is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are

called statements.

A JavaScript program is a list of programming statements.

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

JavaScript Statements
JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write "Hello Dolly." inside an HTML element
with id="demo":

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

Try it Yourself »

Most JavaScript programs contain many JavaScript statements.

The statements are executed, one by one, in the same order as they are
written.

JavaScript programs (and JavaScript statements) are often called JavaScript

code.

Semicolons ;
Semicolons separate JavaScript statements.

Add a semicolon at the end of each executable statement:

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

a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c

Try it Yourself »
When separated by semicolons, multiple statements on one line are allowed:

a = 5; b = 6; c = a + b;

Try it Yourself »

On the web, you might see examples without semicolons.

Ending statements with semicolon is not required, but highly recommended.

JavaScript White Space

JavaScript ignores multiple spaces. You can add white space to your script to
make it more readable.

The following lines are equivalent:

var person = "Hege";

var person="Hege";

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

var x = y + z;

JavaScript Line Length and Line Breaks

For best readability, programmers often like to avoid code lines longer than 80
characters.

If a JavaScript statement does not fit on one line, the best place to break it is
after an operator:

Example
document.getElementById("demo").innerHTML =
"Hello Dolly!";
Try it Yourself »

JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.

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

One place you will find statements grouped together in blocks, is in JavaScript
functions:

Example
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}

Try it Yourself »

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

You will learn more about functions later in this tutorial.

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic on numbers:

Operator Description
+ Addition

- Subtraction

* Multiplication

** Exponentiation (ES2016)

/ 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
JavaScript String Operators
The + operator can also be used to add (concatenate) strings.

Example
var txt1 = "John";
var txt2 = "Doe";
var txt3 = txt1 + " " + txt2;

The result of txt3 will be:

John Doe

Adding Strings and Numbers

Adding two numbers, will return the sum, but adding a number and a string will
return a string:

Example
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;

The result of x, y, and z will be:

10
55
Hello5
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 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

& AND 5&1 0101 & 0001 0001

| OR 5|1 0101 | 0001 0101

~ NOT ~5 ~0101 1010

^ XOR 5^1 0101 ^ 0001 0100

<< Zero fill left shift 5 << 1 0101 << 1 1010

>> Signed right shift 5 >> 1 0101 >> 1 0010

>>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010

JavaScript Comments
❮ PreviousNext ❯

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

more readable.

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

alternative code.
Single Line Comments
Single line comments start with //.

Any text between // and the end of the line will be ignored by JavaScript (will
not be executed).

This example uses a single-line comment before each code line:

Example
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";

Try it Yourself »

This example uses a single line comment at the end of each line to explain the
code:

Example
var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2

Try it Yourself »

Multi-line Comments
Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.

This example uses a multi-line comment (a comment block) to explain the

code:
Example
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

Try it Yourself »

It is most common to use single line comments.

Block comments are often used for formal documentation.

Using Comments to Prevent Execution

Using comments to prevent execution of code is suitable for code testing.

Adding // in front of a code line changes the code lines from an executable line
to a comment.

This example uses // to prevent execution of one of the code lines:

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

Try it Yourself »

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 Functions
❮ PreviousNext ❯

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

task.

A JavaScript function is executed when "something" invokes it (calls it).

Example
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}

Try it Yourself »

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {

// code to be executed
}

Function parameters are listed inside the parentheses () in the function

definition.

Function arguments are the values received by the function when it is

invoked.

Inside the function, the arguments (the parameters) behave as local variables.

A Function is much the same as a Procedure or a Subroutine, in other

programming languages.

Function Invocation
The code inside the function will execute when "something" invokes (calls) the
function:

 When an event occurs (when a user clicks a button)

 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

You will learn a lot more about function invocation later in this tutorial.

Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to
execute the code after the invoking statement.

Functions often compute a return value. The return value is "returned" back to
the "caller":

Example
Calculate the product of two numbers, and return the result:

var x = myFunction(4, 3); // Function is called, return value will end

up in x

function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}

The result in x will be:

12

Try it Yourself »

Why Functions?
You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to produce
different results.

Example
Convert Fahrenheit to Celsius:

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
Try it Yourself »

The () Operator Invokes the Function

Using the example above, toCelsius refers to the function object,
and toCelsius() refers to the function result.

Accessing a function without () will return the function definition instead of the
function result:

Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Try it Yourself »

Functions Used as Variable Values

Functions can be used the same way as you use variables, in all types of
formulas, assignments, and calculations.

Example
Instead of using a variable to store the return value of a function:

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

You can use the function directly, as a variable value:

var text = "The temperature is " + toCelsius(77) + " Celsius";

Try it Yourself »
You will learn a lot more about functions later in this tutorial.

Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Example
// code here can NOT use carName

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

// code here can NOT use carName

Try it Yourself »

Since local variables are only recognized inside their functions, variables with
the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the
function is completed.
JavaScript Expressions and
Statements

Statements and expressions are two very important terms in

JavaScript. Given how frequently these two terms are used to
describe JavaScript code, it is important to understand what they
mean and the distinction between the two.

Expressions
Any unit of code that can be evaluated to a value is an expression.
Since expressions produce values, they can appear anywhere in a
program where JavaScript expects a value such as the arguments
of a function invocation. As per the MDN documentation,
JavaScript has the following expression categories.

Arithmetic Expressions:
Arithmetic expressions evaluate to a numeric value. Examples
include the following
10; // Here 10 is an expression that is evaluated to the
numeric value 10 by the JS interpreter10+13; // This is another
expression that is evaluated to produce the numeric value 23

String Expressions:
String expressions are expressions that evaluate to a string.
Examples include the following
'hello';
'hello' + 'world'; // evaluates to the string 'hello world'

Logical Expressions:
Expressions that evaluate to the boolean value true or false are
considered to be logical expressions. This set of expressions often
involve the usage of logical operators && (AND), ||(OR) and
!(NOT). Examples include
10 > 9; // evaluates to boolean value true
10 < 20; // evaluates to boolean value false
true; //evaluates to boolean value true
a===20 && b===30; // evaluates to true or false based on the values
of a and b

Primary Expressions:
Primary expressions refer to stand alone expressions such as
literal values, certain keywords and variable values. Examples
include the following
'hello world'; // A string literal
23; // A numeric literal
true; // Boolean value true
sum; // Value of variable sum
this; // A keyword that evaluates to the current object

Left-hand-side Expressions:
Also known as lvalues, left-hand-side expressions are those that
can appear on the left side of an assignment expression. Examples
of left-hand-side expressions include the following
// variables such as i and total
i = 10;
total = 0;// properties of objectsvar obj = {}; // an empty object
with no properties
obj.x = 10; // an assignment expression// elements of arrays
array[0] = 20;
array[1] = 'hello';// Invalid left-hand-side errors
++(a+1); // SyntaxError. Attempting to increment or decrement an
expression that is not an lvalue will lead to errors.

Now that we have covered the basics of expressions, let’s dive a bit
deeper into expressions.

Assignment Expressions:
When expressions use the = operator to assign a value to a
variable, it is called an assignment expression. Examples include
average = 55;var b = (a = 1); // here the assignment expression (a
= 1) evaluates to a value that is assigned to the variable b. b =
(a = 1) is another assignment expression. var is not part of the
expression.

The = operator expects an lvalue as its left-side operand. The value

of an assignment expression is the value of the right-side operand
such as 55 in the above example. As a side effect, the = operator
assigns the value on the right side to the value on the left side.

Expressions with side effects:

As we just saw with assignment expressions, expressions with side
effects are those that result in a change or a side effect such as
setting or modifying the value of a variable through the
assignment operator =, function call, incrementing or
decrementing the value of a variable.
sum = 20; // here sum is assigned the value of 20sum++; //
increments the value of sum by 1function modify(){
a *= 10;
}var a = 10;
modify(); // modifies the value of a to 100.
Statements
A statement is an instruction to perform a specific action. Such
actions include creating a variable or a function, looping through
an array of elements, evaluating code based on a specific condition
etc. JavaScript programs are actually a sequence of statements.

Statements in JavaScript can be classified into the following

categories

Declaration Statements:
Such type of statements create variables and functions by using
the var and function statements respectively. Examples include
var sum;
var average;// In the following example, var total is the statement
and total = 0 is an assignment expressionvar total = 0;// A
function declaration statement function greet(message) {
console.log(message);
}

Expression Statements:
Wherever JavaScript expects a statement, you can also write an
expression. Such statements are referred to as expression
statements. But the reverse does not hold. You cannot use a
statement in the place of an expression.
var a = var b; // leads to an error cause you cannot use a
statement in the place of an expressionvar a = (b = 1); // since (b
= 1) is an assignment expression and not a statement, this is a
perfectly acceptable line of codeconsole.log(var a); // results in
error as you can pass only expressions as a function argument

Stand alone primary expressions such as variable values can also

pass off as statements depending on the context. Examples of
expression statements includes the following
// In the following example, sum is an expression as it evaluates
to the value held by sum but it can also pass off as a valid
statement.sum;// An expression statement that evaluates an
expression with side effectsb = 4+38;

Conditional Statements:
Conditional statements execute statements based on the value of
an expression. Examples of conditional statements includes the
if..else and switch statements.
// Syntax of an if statement. If the expression following the if
statement evaluates to a truthy value, statement 1 is executed else
statement 2 is executed.if (expression)
statement 1
else
statement 2

Loops and Jumps :

Looping statements includes the following statements: while,
do/while, for and for/in. Jump statements are used to make the
JavaScript interpreter jump to a specific location within the
program. Examples of jump statements includes break, continue,
return and throw.

Function Expressions vs Function Declarations:

A function expression, particularly a named function expression,
and a function declaration may look the same but their behavior is
very different.

A function expression is part of a variable assignment expression

and may or may not contain a name. Since this type of function
appears after the assignment operator =, it is evaluated as an
expression. Function expressions are typically used to assign a
function to a variable. Function expressions are evaluated only
when the interpreter reaches the line of code where function
expressions are located.
// A function expression. We assign a function to the variable num
and use it to call the function.var num = function message(x) {
return x + x;
}num(7); // returns 14// An anonymous function
expression. Behaves exactly like a named function expression.var
num = function (x) {
return x + x;
}num(7); // returns 14

Only function expressions can be immediately invoked. Such types

of function expressions are referred to as Immediately Invoked
Function Expression (IIFE).
// An Immediately Invoked Function Expression(function () {
console.log('Immediately Invoked Function Expression.');
})();

On the other hand, function declarations are statements as

they perform the action of creating a variable whose value is that
of the function. Function declaration falls under the category of
declaration statements. Also, function declarations are hoisted to
the top of the code unlike function expressions. Function
declarations must always be named and cannot be anonymous.
// Example of a function declaration. Function declarations always
start with the function keyword.function greet(message) {
return "Hi " + message;
}
JavaScript Scope

Scope determines the accessibility (visibility) of variables.

JavaScript Function Scope

In JavaScript there are two types of scope:

 Local scope
 Global scope

JavaScript has function scope: Each function creates a new scope.

Scope determines the accessibility (visibility) of these variables.

Variables defined inside a function are not accessible (visible) from outside the
function.

Local JavaScript Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables have Function scope: They can only be accessed from within
the function.
Example
// code here can NOT use carName

function myFunction() {
var carName = "Volvo";

// code here CAN use carName

Try it Yourself »

Since local variables are only recognized inside their functions, variables with
the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the
function is completed.

Global JavaScript Variables

A variable declared outside a function, becomes GLOBAL.

A global variable has global scope: All scripts and functions on a web page can
access it.

Example
var carName = "Volvo";

// code here can use carName

function myFunction() {

// code here can also use carName

Try it Yourself »
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";
}

Try it Yourself »

Strict Mode
All modern browsers support running JavaScript in "Strict Mode".
You will learn more about how to use strict mode in a later chapter of this
tutorial.

In "Strict Mode", undeclared variables are not automatically global.

Global Variables in HTML

With JavaScript, the global scope is the complete JavaScript environment.

In HTML, the global scope is the window object. All global variables belong to
the window object.

Example
var carName = "Volvo";

// code here can use window.carName

Try it Yourself »

Warning
Do NOT create global variables unless you intend to.

Your global variables (or functions) can overwrite window variables (or
functions).
Any function, including the window object, can overwrite your global variables
and functions.

The Lifetime of JavaScript Variables

The lifetime of a JavaScript variable starts when it is declared.
Local variables are deleted when the function is completed.

In a web browser, global variables are deleted when you close the browser
window (or tab).

Function Arguments
Function arguments (parameters) work as local variables inside functions.
JavaScript Events
❮ PreviousNext ❯

HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these

events.

HTML Events
An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

 An HTML web page has finished loading

 An HTML input field was changed
 An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to

HTML elements.

With single quotes:

<element event='some JavaScript'>

With double quotes:

<element event="some JavaScript">

In the following example, an onclick attribute (with code), is added to

a <button> element:
Example
<button onclick="document.getElementById('demo').innerHTML = Date()">The
time is?</button>

Try it Yourself »

In the example above, the JavaScript code changes the content of the element
with id="demo".

In the next example, the code changes the content of its own element
(using this.innerHTML):

Example
<button onclick="this.innerHTML = Date()">The time is?</button>

Try it Yourself »

JavaScript code is often several lines long. It is more common to see event
attributes calling functions:

Example
<button onclick="displayDate()">The time is?</button>

Try it Yourself »

Common HTML Events

Here is a list of some common HTML events:

Event Description
onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

The list is much longer: W3Schools JavaScript Reference HTML DOM Events.

What can JavaScript Do?

Event handlers can be used to handle, and verify, user input, user actions, and
browser actions:

 Things that should be done every time a page loads

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

 HTML event attributes can execute JavaScript code directly

 HTML event attributes can call JavaScript functions
 You can assign your own event handler functions to HTML elements
 You can prevent events from being sent or being handled
 And more ...
JavaScript Strings
❮ PreviousNext ❯

JavaScript strings are used for storing and manipulating text.

JavaScript Strings
A JavaScript string is zero or more characters written inside quotes.

Example
var x = "John Doe";

Try it Yourself »

You can use single or double quotes:

Example
var carName1 = "Volvo XC60"; // Double quotes
var carName2 = 'Volvo XC60'; // Single quotes

Try it Yourself »

You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:

Example
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
Try it Yourself »

String Length
To find the length of a string, use the built-in length property:

Example
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

Try it Yourself »

Escape Character
Because strings must be written within quotes, JavaScript will misunderstand
this string:

var x = "We are the so-called "Vikings" from the north.";

The string will be chopped to "We are the so-called ".

The solution to avoid this problem, is to use the backslash escape character.

The backslash (\) escape character turns special characters into string
characters:

Code Result Description

\' ' Single quote

\" " Double quote

\\ \ Backslash

The sequence \" inserts a double quote in a string:

Example
var x = "We are the so-called \"Vikings\" from the north.";

Try it Yourself »

The sequence \' inserts a single quote in a string:

Example
var x = 'It\'s alright.';

Try it Yourself »

The sequence \\ inserts a backslash in a string:

Example
var x = "The character \\ is called backslash.";

Try it Yourself »

Six other escape sequences are valid in JavaScript:

Code Result

\b Backspace

\f Form Feed

\n New Line

\r Carriage Return

\t Horizontal Tabulator

\v Vertical Tabulator

The 6 escape characters above were originally designed to control typewriters,

teletypes, and fax machines. They do not make any sense in HTML.

Breaking Long Code Lines

For best readability, programmers often like to avoid code lines longer than 80
characters.

If a JavaScript statement does not fit on one line, the best place to break it is
after an operator:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly!";

Try it Yourself »

You can also break up a code line within a text string with a single backslash:

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

Try it Yourself »

The \ method is not the preferred method. It might not have universal support.
Some browsers do not allow spaces behind the \ character.

A safer way to break up a string, is to use string addition:

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

Try it Yourself »

You cannot break up a code line with a backslash:

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

Try it Yourself »

Strings Can be Objects

Normally, JavaScript strings are primitive values, created from literals:
var firstName = "John";

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

var firstName = new String("John");

Example
var x = "John";
var y = new String("John");

// typeof x will return string

// typeof y will return object

Try it Yourself »

Don't create strings as objects. It slows down execution speed.

The new keyword complicates the code. This can produce some unexpected
results:

When using the == operator, equal strings are equal:

Example
var x = "John";
var y = new String("John");

// (x == y) is true because x and y have equal values

Try it Yourself »

When using the === operator, equal strings are not equal, because
the === operator expects equality in both type and value.

Example
var x = "John";
var y = new String("John");

// (x === y) is false because x and y have different types (string and

object)

Try it Yourself »
Or even worse. Objects cannot be compared:

Example
var x = new String("John");
var y = new String("John");

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

Try it Yourself »

Example
var x = new String("John");
var y = new String("John");

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

Try it Yourself »

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

Comparing two JavaScript objects will always return false.
JavaScript String Methods
❮ PreviousNext ❯

String methods help you to work with strings.

String Methods and Properties

Primitive values, like "John Doe", cannot have properties or methods (because
they are not objects).

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

String Length
The length property returns the length of a string:

Example
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

Try it Yourself »

Finding a String in a String

The indexOf() method returns the index of (the position of) the first occurrence
of a specified text in a string:

Example
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");

Try it Yourself »

JavaScript counts positions from zero.

0 is the first position in a string, 1 is the second, 2 is the third ...

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

Example
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");

Try it Yourself »

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

Example
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("John");

Try it Yourself »

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

Example
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate", 15);

Try it Yourself »
The lastIndexOf() methods searches backwards (from the end to the beginning),
meaning: if the second parameter is 15, the search starts at position 15, and
searches to the beginning of the string.

Example
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);

Try it Yourself »

Searching for a String in a String

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

Example
var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");

Try it Yourself »

Did You Notice?

The two methods, indexOf() and search(), are equal?

They accept the same arguments (parameters), and return the same value?

The two methods are NOT equal. These are the differences:

 The search() method cannot take a second start position argument.

 The indexOf() method cannot take powerful search values (regular
expressions).

You will learn more about regular expressions in a later chapter.

Extracting String Parts
There are 3 methods for extracting a part of a string:

 slice(start, end)
 substring(start, end)
 substr(start, length)

The slice() Method

slice() extracts a part of a string and returns the extracted part in a new string.

The method takes 2 parameters: the start position, and the end position (end
not included).

This example slices out a portion of a string from position 7 to position 12 (13-
1):

Example
var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13);

The result of res will be:

Banana

Try it Yourself »

Remember: JavaScript counts positions from zero. First position is 0.

If a parameter is negative, the position is counted from the end of the string.

This example slices out a portion of a string from position -12 to position -6:
Example
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);

The result of res will be:

Banana

Try it Yourself »

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

Example
var res = str.slice(7);

Try it Yourself »

or, counting from the end:

Example
var res = str.slice(-12);

Try it Yourself »

Negative positions do not work in Internet Explorer 8 and earlier.

The substring() Method

substring() is similar to slice().

The difference is that substring() cannot accept negative indexes.

Example
var str = "Apple, Banana, Kiwi";
var res = str.substring(7, 13);
The result of res will be:

Banana

Try it Yourself »

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

The substr() Method

substr() is similar to slice().

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

Example
var str = "Apple, Banana, Kiwi";
var res = str.substr(7, 6);

The result of res will be:

Banana

Try it Yourself »

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

Example
var str = "Apple, Banana, Kiwi";
var res = str.substr(7);

The result of res will be:

Banana, Kiwi

Try it Yourself »

If the first parameter is negative, the position counts from the end of the string.
Example
var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);

The result of res will be:

Kiwi

Try it Yourself »

Replacing String Content

The replace() method replaces a specified value with another value in a string:

Example
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3Schools");

Try it Yourself »

The replace() method does not change the string it is called on. It returns a new
string.

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

Example
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3Schools");

Try it Yourself »

By default, the replace() method is case sensitive. Writing MICROSOFT (with

upper-case) will not work:
Example
str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3Schools");

Try it Yourself »

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

(insensitive):

Example
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3Schools");

Try it Yourself »

Note that regular expressions are written without quotes.

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

match):

Example
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3Schools");

Try it Yourself »

You will learn a lot more about regular expressions in the chapter JavaScript
Regular Expressions.

Converting to Upper and Lower Case

A string is converted to upper case with toUpperCase():
Example
var text1 = "Hello World!"; // String
var text2 = text1.toUpperCase(); // text2 is text1 converted to upper

Try it Yourself »

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

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

Try it Yourself »

The concat() Method

concat() joins two or more strings:

Example
var text1 = "Hello";
var text2 = "World";
var text3 = text1.concat(" ", text2);

Try it Yourself »

The concat() method can be used instead of the plus operator. These two lines
do the same:

Example
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!");

All string methods return a new string. They don't modify the original string.
Formally said: Strings are immutable: Strings cannot be changed, only
replaced.
String.trim()
The trim() method removes whitespace from both sides of a string:

Example
var str = " Hello World! ";
alert(str.trim());

Try it Yourself »

The trim() method is not supported in Internet Explorer 8 or lower.

If you need to support IE 8, you can use replace() with a regular expression
instead:

Example
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

Try it Yourself »

You can also use the replace solution above to add a trim function to the
JavaScript String.prototype:

Example
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
var str = " Hello World! ";
alert(str.trim());

Try it Yourself »
Extracting String Characters
There are 3 methods for extracting string characters:

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

The charAt() Method

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

Example
var str = "HELLO WORLD";
str.charAt(0); // returns H

Try it Yourself »

The charCodeAt() Method

The charCodeAt() method returns the unicode of the character at a specified
index in a string:

The method returns a UTF-16 code (an integer between 0 and 65535).

Example
var str = "HELLO WORLD";

str.charCodeAt(0); // returns 72

Try it Yourself »
Property Access
ECMAScript 5 (2009) allows property access [ ] on strings:

Example
var str = "HELLO WORLD";
str[0]; // returns H

Try it Yourself »

Property access might be a little unpredictable:

 It does not work in Internet Explorer 7 or earlier

 It makes strings look like arrays (but they are not)
 If no character is found, [ ] returns undefined, while charAt() returns an
empty string.
 It is read only. str[0] = "A" gives no error (but does not work!)

Example
var str = "HELLO WORLD";
str[0] = "A"; // Gives no error, but does not work
str[0]; // returns H

Try it Yourself »

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

Converting a String to an Array

A string can be converted to an array with the split() method:

Example
var txt = "a,b,c,d,e"; // String
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
 Try it Yourself »

If the separator is omitted, the returned array will contain the whole string in
index [0].

If the separator is "", the returned array will be an array of single characters:

Example
var txt = "Hello"; // String
txt.split(""); // Split in characters

Try it Yourself »

Test Yourself WiExercises

JavaScript Numbers
❮ PreviousNext ❯

JavaScript has only one type of number. Numbers can be written with or
without decimals.

Example
var x = 3.14; // A number with decimals
var y = 3; // A number without decimals

Try it yourself »

Extra large or extra small numbers can be written with scientific (exponent)
notation:

Example
var x = 123e5; // 12300000
var y = 123e-5; // 0.00123

Try it yourself »

JavaScript Numbers are Always 64-bit

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

JavaScript numbers are always stored as double precision floating point

numbers, following the international IEEE 754 standard.
This format stores numbers in 64 bits, where the number (the fraction) is stored
in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63:

Value (aka Fraction/Mantissa) Exponent S

52 bits (0 - 51) 11 bits (52 - 62) 1

Precision
Integers (numbers without a period or exponent notation) are accurate up to 15
digits.

Example
var x = 999999999999999; // x will be 999999999999999
var y = 9999999999999999; // y will be 10000000000000000

Try it Yourself »

The maximum number of decimals is 17, but floating point arithmetic is not
always 100% accurate:

Example
var x = 0.2 + 0.1; // x will be 0.30000000000000004

Try it yourself »

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

Example
var x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3
Try it Yourself »

Adding Numbers and Strings

WARNING !!

JavaScript uses the + operator for both addition and concatenation.

Numbers are added. Strings are concatenated.

If you add two numbers, the result will be a number:

Example
var x = 10;
var y = 20;
var z = x + y; // z will be 30 (a number)

Try it Yourself »

If you add two strings, the result will be a string concatenation:

Example
var x = "10";
var y = "20";
var z = x + y; // z will be 1020 (a string)

Try it Yourself »

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

Example
var x = 10;
var y = "20";
var z = x + y; // z will be 1020 (a string)
Try it Yourself »

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

Example
var x = "10";
var y = 20;
var z = x + y; // z will be 1020 (a string)

Try it Yourself »

A common mistake is to expect this result to be 30:

Example
var x = 10;
var y = 20;
var z = "The result is: " + x + y;

Try it Yourself »

A common mistake is to expect this result to be 102030:

Example
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;

Try it Yourself »

The JavaScript interpreter works from left to right.

First 10 + 20 is added because x and y are both numbers.

Then 30 + "30" is concatenated because z is a string.

Numeric Strings
JavaScript strings can have numeric content:

var x = 100; // x is a number

var y = "100"; // y is a string

JavaScript will try to convert strings to numbers in all numeric operations:

This will work:

var x = "100";
var y = "10";
var z = x / y; // z will be 10

Try it Yourself »

This will also work:

var x = "100";
var y = "10";
var z = x * y; // z will be 1000

Try it Yourself »

And this will work:

var x = "100";
var y = "10";
var z = x - y; // z will be 90

Try it Yourself »

But this will not work:

var x = "100";
var y = "10";
var z = x + y; // z will not be 110 (It will be 10010)

Try it Yourself »

In the last example JavaScript uses the + operator to concatenate the strings.
NaN - Not a Number
NaN is a JavaScript reserved word indicating that a number is not a legal
number.

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

Number):

Example
var x = 100 / "Apple"; // x will be NaN (Not a Number)

Try it Yourself »

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

Example
var x = 100 / "10"; // x will be 10

Try it Yourself »

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

Example
var x = 100 / "Apple";
isNaN(x); // returns true because x is Not a Number

Try it Yourself »

Watch out for NaN. If you use NaN in a mathematical operation, the result will also
be NaN:

Example
var x = NaN;
var y = 5;
var z = x + y; // z will be NaN
Try it Yourself »

Or the result might be a concatenation:

Example
var x = NaN;
var y = "5";
var z = x + y; // z will be NaN5

Try it Yourself »

NaN is a number: typeof NaN returns number:

Example
typeof NaN; // returns "number"

Try it Yourself »

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

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

Try it yourself »

Division by 0 (zero) also generates Infinity:

Example
var x = 2 / 0; // x will be Infinity
var y = -2 / 0; // y will be -Infinity

Try it Yourself »

Infinity is a number: typeof Infinity returns number.

Example
typeof Infinity; // returns "number"

Try it Yourself »

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

Example
var x = 0xFF; // x will be 255

Try it Yourself »

Never write a number with a leading zero (like 07).

Some JavaScript versions interpret numbers as octal if they are written with a
leading zero.

By default, JavaScript displays numbers as base 10 decimals.

But you can use the toString() method to output numbers from base 2 to base
36.

Hexadecimal is base 16. Decimal is base 10. Octal is base 8. Binary is base
2.
Example
var myNumber = 32;
myNumber.toString(10); // returns 32
myNumber.toString(32); // returns 10
myNumber.toString(16); // returns 20
myNumber.toString(8); // returns 40
myNumber.toString(2); // returns 100000

Try it Yourself »

Numbers Can be Objects

Normally JavaScript numbers are primitive values created from literals:

var x = 123;

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

var y = new Number(123);

Example
var x = 123;
var y = new Number(123);

// typeof x returns number

// typeof y returns object

Try it yourself »

Do not create Number objects. It slows down execution speed.

The new keyword complicates the code. This can produce some unexpected
results:

When using the == operator, equal numbers are equal:

Example
var x = 500;
var y = new Number(500);

// (x == y) is true because x and y have equal values

Try it Yourself »

When using the === operator, equal numbers are not equal, because
the === operator expects equality in both type and value.

Example
var x = 500;
var y = new Number(500);

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

Try it Yourself »

Or even worse. Objects cannot be compared:

Example
var x = new Number(500);
var y = new Number(500);

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

Try it Yourself »

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

Comparing two JavaScript objects will always return false.
JavaScript Number Methods
❮ PreviousNext ❯

Number methods help you work with numbers.

Number Methods and Properties

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

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

The toString() Method

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

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

Example
var x = 123;
x.toString(); // returns 123 from variable x
(123).toString(); // returns 123 from literal 123
(100 + 23).toString(); // returns 123 from expression 100 + 23

Try it Yourself »
The toExponential() Method
toExponential() returns a string, with a number rounded and written using
exponential notation.

A parameter defines the number of characters behind the decimal point:

Example
var x = 9.656;
x.toExponential(2); // returns 9.66e+0
x.toExponential(4); // returns 9.6560e+0
x.toExponential(6); // returns 9.656000e+0

Try it yourself »

The parameter is optional. If you don't specify it, JavaScript will not round the
number.

The toFixed() Method

toFixed() returns a string, with the number written with a specified number of
decimals:

Example
var x = 9.656;
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
x.toFixed(4); // returns 9.6560
x.toFixed(6); // returns 9.656000

Try it yourself »

toFixed(2) is perfect for working with money.

The toPrecision() Method
toPrecision() returns a string, with a number written with a specified length:

Example
var x = 9.656;
x.toPrecision(); // returns 9.656
x.toPrecision(2); // returns 9.7
x.toPrecision(4); // returns 9.656
x.toPrecision(6); // returns 9.65600

Try it Yourself »

The valueOf() Method

valueOf() returns a number as a number.

Example
var x = 123;
x.valueOf(); // returns 123 from variable x
(123).valueOf(); // returns 123 from literal 123
(100 + 23).valueOf(); // returns 123 from expression 100 + 23

Try it Yourself »

In JavaScript, a number can be a primitive value (typeof = number) or an

object (typeof = object).

The valueOf() method is used internally in JavaScript to convert Number objects

to primitive values.

There is no reason to use it in your code.

All JavaScript data types have a valueOf() and a toString() method.

Converting Variables to Numbers
There are 3 JavaScript methods that can be used to convert variables to
numbers:

 The Number() method

 The parseInt() method
 The parseFloat() method

These methods are not number methods, but global JavaScript methods.

Global JavaScript Methods

JavaScript global methods can be used on all JavaScript data types.

These are the most relevant methods, when working with numbers:

Method Description

Number() Returns a number, converted from its argument.

parseFloat() Parses its argument and returns a floating point number

parseInt() Parses its argument and returns an integer

The Number() Method

Number() can be used to convert JavaScript variables to numbers:

Example
Number(true); // returns 1
Number(false); // returns 0
Number("10"); // returns 10
Number(" 10"); // returns 10
Number("10 "); // returns 10
Number(" 10 "); // returns 10
Number("10.33"); // returns 10.33
Number("10,33"); // returns NaN
Number("10 33"); // returns NaN
Number("John"); // returns NaN

Try it Yourself »

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

The Number() Method Used on Dates

Number() can also convert a date to a number:

Example
Number(new Date("2017-09-30")); // returns 1506729600000

Try it Yourself »

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

The parseInt() Method

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

Try it yourself »

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"); // returns 10
parseFloat("10.33"); // returns 10.33
parseFloat("10 20 30"); // returns 10
parseFloat("10 years"); // returns 10
parseFloat("years 10"); // returns NaN

Try it yourself »

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
var x = Number.MAX_VALUE;

Try it yourself »

MIN_VALUE returns the lowest possible number in JavaScript.

Example
var x = Number.MIN_VALUE;

Try it yourself »
JavaScript POSITIVE_INFINITY
Example
var x = Number.POSITIVE_INFINITY;

Try it yourself »

POSITIVE_INFINITY is returned on overflow:

Example
var x = 1 / 0;

Try it yourself »

JavaScript NEGATIVE_INFINITY
Example
var x = Number.NEGATIVE_INFINITY;

Try it yourself »

NEGATIVE_INFINITY is returned on overflow:

Example
var x = -1 / 0;

Try it yourself »

JavaScript NaN - Not a Number

Example
var x = Number.NaN;

Try it yourself »

NaN is a JavaScript reserved word indicating that a number is not a legal

number.

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

Number):

Example
var x = 100 / "Apple"; // x will be NaN (Not a Number)

Try it Yourself »

Number Properties Cannot be Used on

Variables
Number properties belongs to the JavaScript's number object wrapper
called Number.

These properties can only be accessed as Number.MAX_VALUE.

Using myNumber.MAX_VALUE, where myNumber is a variable, expression, or

value, will return undefined:

Example
var x = 6;
var y = x.MAX_VALUE; // y becomes undefined

Try it yourself »
JavaScript Arrays
❮ PreviousNext ❯

JavaScript arrays are used to store multiple values in a single variable.

Example
var cars = ["Saab", "Volvo", "BMW"];

Try it Yourself »

What is an Array?
An array is a special variable, which can hold more than one value at a time.

If you have a list of items (a list of car names, for example), storing the cars in
single variables could look like this:

var car1 = "Saab";

var car2 = "Volvo";
var car3 = "BMW";

However, what if you want to loop through the cars and find a specific one? And
what if you had not 3 cars, but 300?

The solution is an array!

An array can hold many values under a single name, and you can access the
values by referring to an index number.

Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.

Syntax:

var array_name = [item1, item2, ...];

Example
var cars = ["Saab", "Volvo", "BMW"];

Try it Yourself »

Spaces and line breaks are not important. A declaration can span multiple lines:

Example
var cars = [
"Saab",
"Volvo",
"BMW"
];

Try it Yourself »

Putting a comma after the last element (like "BMW",) is inconsistent across
browsers.

IE 8 and earlier will fail.

Using the JavaScript Keyword new

The following example also creates an Array, and assigns values to it:

Example
var cars = new Array("Saab", "Volvo", "BMW");

Try it Yourself »
The two examples above do exactly the same. There is no need to use new
Array().
For simplicity, readability and execution speed, use the first one (the array
literal method).

Access the Elements of an Array

You access an array element by referring to the index number.

This statement accesses the value of the first element in cars:

var name = cars[0];

Example
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Try it Yourself »

Note: Array indexes start with 0.

[0] is the first element. [1] is the second element.

Changing an Array Element

This statement changes the value of the first element in cars:

cars[0] = "Opel";

Example
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Try it Yourself »
Access the Full Array
With JavaScript, the full array can be accessed by referring to the array name:

Example
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Try it Yourself »

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns
"object" for arrays.

But, JavaScript arrays are best described as arrays.

Arrays use numbers to access its "elements". In this example, person[0] returns
John:

Array:
var person = ["John", "Doe", 46];

Try it Yourself »

Objects use names to access its "members". In this

example, person.firstName returns John:

Object:
var person = {firstName:"John", lastName:"Doe", age:46};

Try it Yourself »
Array Elements Can Be Objects
JavaScript variables can be objects. Arrays are special kinds of objects.

Because of this, you can have variables of different types in the same Array.

You can have objects in an Array. You can have functions in an Array. You can
have arrays in an Array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array Properties and Methods

The real strength of JavaScript arrays are the built-in array properties and
methods:

Examples
var x = cars.length; // The length property returns the number of
elements
var y = cars.sort(); // The sort() method sorts arrays

Array methods are covered in the next chapters.

The length Property

The length property of an array returns the length of an array (the number of
array elements).

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Try it Yourself »

The length property is always one more than the highest array index.

Accessing the First Array Element

Example
fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Try it Yourself »

Accessing the Last Array Element

Example
fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Try it Yourself »

Looping Array Elements

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

Example
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
 text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

Try it Yourself »

You can also use the Array.forEach() function:

Example
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
text += "<li>" + value + "</li>";
}

Try it Yourself »

Adding Array Elements

The easiest way to add a new element to an array is using the push() method:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits

Try it Yourself »

New element can also be added to an array using the length property:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to
fruits

Try it Yourself »

WARNING !

Adding elements with high indexes can create undefined "holes" in an array:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon"; // adds a new element (Lemon) to fruits

Try it Yourself »

Associative Arrays
Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.

Example
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length will return 3
var y = person[0]; // person[0] will return "John"

Try it Yourself »
WARNING !!
If you use named indexes, JavaScript will redefine the array to a standard
object.
After that, some array methods and properties will produce incorrect results.

Example:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will return 0
var y = person[0]; // person[0] will return undefined

Try it Yourself »

The Difference Between Arrays and Objects

In JavaScript, arrays use numbered indexes.

In JavaScript, objects use named indexes.

Arrays are a special kind of objects, with numbered indexes.

When to Use Arrays. When to use Objects.

 JavaScript does not support associative arrays.
 You should use objects when you want the element names to be strings
(text).
 You should use arrays when you want the element names to
be numbers.

Avoid new Array()

There is no need to use the JavaScript's built-in array constructor new Array().

Use [] instead.

These two different statements both create a new empty array named points:

var points = new Array(); // Bad

var points = []; // Good

These two different statements both create a new array containing 6 numbers:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad

var points = [40, 100, 1, 5, 25, 10]; // Good

Try it Yourself »

The new keyword only complicates the code. It can also produce some
unexpected results:

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

What if I remove one of the elements?

var points = new Array(40); // Creates an array with 40 undefined

elements !!!!!

Try it Yourself »

How to Recognize an Array

A common question is: How do I know if a variable is an array?

The problem is that the JavaScript operator typeof returns "object":

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits; // returns object

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

Solution 1:
To solve this problem ECMAScript 5 defines a new method Array.isArray():

Array.isArray(fruits); // returns true

Try it Yourself »

The problem with this solution is that ECMAScript 5 is not supported in older
browsers.

Solution 2:
To solve this problem you can create your own isArray() function:

function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}

Try it Yourself »

The function above always returns true if the argument is an array.

Or more precisely: it returns true if the object prototype contains the word
"Array".

Solution 3:
The instanceof operator returns true if an object is created by a given
constructor:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array; // returns true

Try it Yourself »
JavaScript Array Methods
❮ PreviousNext ❯

Converting Arrays to Strings

The JavaScript method toString() converts an array to a string of (comma
separated) array values.

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Result:

Banana,Orange,Apple,Mango

Try it Yourself »

The join() method also joins all array elements into a string.

It behaves just like toString(), but in addition you can specify the separator:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Result:

Banana * Orange * Apple * Mango

Try it Yourself »
Popping and Pushing
When you work with arrays, it is easy to remove elements and add new
elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.

Popping
The pop() method removes the last element from an array:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Removes the last element ("Mango") from
fruits

Try it Yourself »

The pop() method returns the value that was "popped out":

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // the value of x is "Mango"

Try it Yourself »

Pushing
The push() method adds a new element to an array (at the end):
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits

Try it Yourself »

The push() method returns the new array length:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // the value of x is 5

Try it Yourself »

Shifting Elements
Shifting is equivalent to popping, working on the first element instead of the
last.

The shift() method removes the first array element and "shifts" all other
elements to a lower index.

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Removes the first element "Banana" from
fruits

Try it Yourself »

The shift() method returns the string that was "shifted out":

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift(); // the value of x is "Banana"

Try it Yourself »
The unshift() method adds a new element to an array (at the beginning), and
"unshifts" older elements:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits

Try it Yourself »

The unshift() method returns the new array length.

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Returns 5

Try it Yourself »

Changing Elements
Array elements are accessed using their index number:

Array indexes start with 0. [0] is the first array element, [1] is the second, [2]
is the third ...

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi"; // Changes the first element of fruits to
"Kiwi"

Try it Yourself »

The length property provides an easy way to append a new element to an array:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruits
Try it Yourself »

Deleting Elements
Since JavaScript arrays are objects, elements can be deleted by using the
JavaScript operator delete:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // Changes the first element in fruits
to undefined

Try it Yourself »

Using delete may leave undefined holes in the array. Use pop() or shift()
instead.

Splicing an Array
The splice() method can be used to add new items to an array:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

Try it Yourself »

The first parameter (2) defines the position where new elements should
be added (spliced in).

The second parameter (0) defines how many elements should be removed.

The rest of the parameters ("Lemon" , "Kiwi") define the new elements to
be added.
The splice() method returns an array with the deleted items:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Try it Yourself »

Using splice() to Remove Elements

With clever parameter setting, you can use splice() to remove elements without
leaving "holes" in the array:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // Removes the first element of fruits

Try it Yourself »

The first parameter (0) defines the position where new elements should
be added (spliced in).

The second parameter (1) defines how many elements should be removed.

The rest of the parameters are omitted. No new elements will be added.

Merging (Concatenating) Arrays

The concat() method creates a new array by merging (concatenating) existing
arrays:

Example (Merging Two Arrays)

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); // Concatenates (joins) myGirls
and myBoys

Try it Yourself »

The concat() method does not change the existing arrays. It always returns a
new array.

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

Example (Merging Three Arrays)

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // Concatenates arr1 with arr2
and arr3

Try it Yourself »

The concat() method can also take values as arguments:

Example (Merging an Array with Values)

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

Try it Yourself »

Slicing an Array
The slice() method slices out a piece of an array into a new array.

This example slices out a part of an array starting from array element 1
("Orange"):

Example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
Try it Yourself »

The slice() method creates a new array. It does not remove any elements from
the source array.

This example slices out a part of an array starting from array element 3
("Apple"):

Example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

Try it Yourself »

The slice() method can take two arguments like slice(1, 3).

The method then selects elements from the start argument, and up to (but not
including) the end argument.

Example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

Try it Yourself »

If the end argument is omitted, like in the first examples, the slice() method
slices out the rest of the array.

Example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

Try it Yourself »

Automatic toString()
JavaScript automatically converts an array to a comma separated string when a
primitive value is expected.

This is always the case when you try to output an array.

These two examples will produce the same result:

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Try it Yourself »

Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

Try it Yourself »

All JavaScript objects have a toString() method.

Finding Max and Min Values in an Array

There are no built-in functions for finding the highest or lowest value in a
JavaScript array.

You will learn how you solve this problem in the next chapter of this tutorial.

Sorting Arrays
Sorting arrays are covered in the next chapter of this tutorial.
JavaScript Date Objects
❮ PreviousNext ❯

JavaScript Date Object lets us work with dates:

Sat Jan 04 2020 20:17:24 GMT-0800 (Pacific Standard Time)

Year: 2020 Month: 1 Day: 4 Hours: 20 Minutes: 17 Seconds: 24

Example
var d = new Date();

Try it Yourself »

JavaScript Date Output

By default, JavaScript will use the browser's time zone and display a date as a
full text string:

Sat Jan 04 2020 20:17:24 GMT-0800 (Pacific Standard Time)

You will learn much more about how to display dates, later in this tutorial.

Creating Date Objects

Date objects are created with the new Date() constructor.

There are 4 ways to create a new date object:

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

new Date()
new Date() creates a new date object with the current date and time:

Example
var d = new Date();

Try it Yourself »

Date objects are static. The computer time is ticking, but date objects are not.

new Date(year, month, ...)

new Date(year, month, ...) creates a new date object with a specified date
and time.

7 numbers specify year, month, day, hour, minute, second, and millisecond (in
that order):

Example
var d = new Date(2018, 11, 24, 10, 33, 30, 0);

Try it Yourself »

Note: JavaScript counts months from 0 to 11.

January is 0. December is 11.

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

Example
var d = new Date(2018, 11, 24, 10, 33, 30);

Try it Yourself »

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

Example
var d = new Date(2018, 11, 24, 10, 33);

Try it Yourself »

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

Example
var d = new Date(2018, 11, 24, 10);

Try it Yourself »

3 numbers specify year, month, and day:

Example
var d = new Date(2018, 11, 24);

Try it Yourself »

2 numbers specify year and month:

Example
var d = new Date(2018, 11);

Try it Yourself »
You cannot omit month. If you supply only one parameter it will be treated as
milliseconds.

Example
var d = new Date(2018);

Try it Yourself »

Previous Century
One and two digit years will be interpreted as 19xx:

Example
var d = new Date(99, 11, 24);

Try it Yourself »

Example
var d = new Date(9, 11, 24);

Try it Yourself »

new Date(dateString)
new Date(dateString) creates a new date object from a date string:

Example
var d = new Date("October 13, 2014 11:13:00");

Try it Yourself »
Date strings are described in the next chapter.

JavaScript Stores Dates as Milliseconds

JavaScript stores dates as number of milliseconds since January 01, 1970,
00:00:00 UTC (Universal Time Coordinated).

Zero time is January 01, 1970 00:00:00 UTC.

Now the time is: 1578197844090 milliseconds past January 01, 1970

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

Example
var d = new Date(0);

Try it Yourself »

01 January 1970 plus 100 000 000 000 milliseconds is approximately 03 March
1973:

Example
var d = new Date(100000000000);

Try it Yourself »

January 01 1970 minus 100 000 000 000 milliseconds is approximately October
31 1966:

Example
var d = new Date(-100000000000);
Try it Yourself »

Example
var d = new Date(86400000);

Try it Yourself »

One day (24 hours) is 86 400 000 milliseconds.

Date Methods
When a Date object is created, a number of methods allow you to operate on
it.

Date methods allow you to get and set the year, month, day, hour, minute,
second, and millisecond of date objects, using either local time or UTC
(universal, or GMT) time.

Date methods and time zones are covered in the next chapters.

Displaying Dates
JavaScript will (by default) output dates in full text string format:

Tue Mar 24 2015 17:00:00 GMT-0700 (Pacific Daylight Time)

Try it Yourself »

When you display a date object in HTML, it is automatically converted to a

string, with the toString() method.
Example
d = new Date();
document.getElementById("demo").innerHTML = d;

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

Try it Yourself »

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

standard).

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();

Try it Yourself »

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

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();

Try it Yourself »
JavaScript Date Formats
❮ PreviousNext ❯

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 Mar 24 2015 17:00:00 GMT-0700 (Pacific Daylight Time)

JavaScript ISO Dates

ISO 8601 is the international standard for the representation of dates and
times.

The ISO 8601 syntax (YYYY-MM-DD) is also the preferred JavaScript date
format:

Example (Complete date)

var d = new Date("2015-03-25");

Try it Yourself »

The computed date will be relative to your time zone.

Depending on your time zone, the result above will vary between March 24 and
March 25.

ISO Dates (Year and Month)

ISO dates can be written without specifying the day (YYYY-MM):

Example
var d = new Date("2015-03");

Try it Yourself »

Time zones will vary the result above between February 28 and March 01.
ISO Dates (Only Year)
ISO dates can be written without month and day (YYYY):

Example
var d = new Date("2015");

Try it Yourself »

Time zones will vary the result above between December 31 2014 and January
01 2015.

ISO Dates (Date-Time)

ISO dates can be written with added hours, minutes, and seconds (YYYY-MM-
DDTHH:MM:SSZ):

Example
var d = new Date("2015-03-25T12:00:00Z");

Try it Yourself »

Date and time is separated with a capital T.

UTC time is defined with a capital letter Z.

If you want to modify the time relative to UTC, remove the Z and add +HH:MM
or -HH:MM instead:

Example
var d = new Date("2015-03-25T12:00:00-06:30");

Try it Yourself »

UTC (Universal Time Coordinated) is the same as GMT (Greenwich Mean Time).
Omitting T or Z in a date-time string can give different results in different
browsers.

Time Zones
When setting a date, without specifying the time zone, JavaScript will use the
browser's time zone.

When getting a date, without specifying the time zone, the result is converted
to the browser's time zone.

In other words: If a date/time is created in GMT (Greenwich Mean Time), the

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

JavaScript Short Dates.

Short dates are written with an "MM/DD/YYYY" syntax like this:

Example
var d = new Date("03/25/2015");

Try it Yourself »

WARNINGS !
In some browsers, months or days with no leading zeroes may produce an
error:

var d = new Date("2015-3-25");

The behavior of "YYYY/MM/DD" is undefined.

Some browsers will try to guess the format. Some will return NaN.
var d = new Date("2015/03/25");

The behavior of "DD-MM-YYYY" is also undefined.

Some browsers will try to guess the format. Some will return NaN.

var d = new Date("25-03-2015");

JavaScript Long Dates.

Long dates are most often written with a "MMM DD YYYY" syntax like this:

Example
var d = new Date("Mar 25 2015");

Try it Yourself »

Month and day can be in any order:

Example
var d = new Date("25 Mar 2015");

Try it Yourself »

And, month can be written in full (January), or abbreviated (Jan):

Example
var d = new Date("January 25 2015");

Try it Yourself »

Example
var d = new Date("Jan 25 2015");

Try it Yourself »

Commas are ignored. Names are case insensitive:

Example
var d = new Date("JANUARY, 25, 2015");

Try it Yourself »

Date Input - Parsing Dates

If you have a valid date string, you can use the Date.parse() method to convert it
to milliseconds.

Date.parse() returns the number of milliseconds between the date and January 1,
1970:

Example
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;

Try it Yourself »

You can then use the number of milliseconds to convert it to a date object:

Example
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
document.getElementById("demo").innerHTML = d;

Try it Yourself »
avaScript Get Date Methods
❮ PreviousNext ❯

These methods can be used for getting information from a date object:

Method Description

getFullYear() Get the year as a four digit number (yyyy)

getMonth() Get the month as a number (0-11)

getDate() Get the day as a number (1-31)

getHours() Get the hour (0-23)

getMinutes() Get the minute (0-59)

getSeconds() Get the second (0-59)

getMilliseconds() Get the millisecond (0-999)

getTime() Get the time (milliseconds since January 1, 1970)

getDay() Get the weekday as a number (0-6)

Date.now() Get the time. ECMAScript 5.

The getTime() Method

The getTime() method returns the number of milliseconds since January 1,
1970:

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();

Try it Yourself »

The getFullYear() Method

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

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();

Try it Yourself »
The getMonth() Method
The getMonth() method returns the month of a date as a number (0-11):

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getMonth();

Try it Yourself »

In JavaScript, the first month (January) is month number 0, so December

returns month number 11.

You can use an array of names, and getMonth() to return the month as a
name:

Example
var d = new Date();
var months =
["January", "February", "March", "April", "May", "June", "July", "August",
"September", "October", "November", "December"];
document.getElementById("demo").innerHTML = months[d.getMonth()];

Try it Yourself »

The getDate() Method

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

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();

Try it Yourself »
The getHours() Method
The getHours() method returns the hours of a date as a number (0-23):

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getHours();

Try it Yourself »

The getMinutes() Method

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

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes();

Try it Yourself »

The getSeconds() Method

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

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();

Try it Yourself »
The getMilliseconds() Method
The getMilliseconds() method returns the milliseconds of a date as a number
(0-999):

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getMilliseconds();

Try it Yourself »

The getDay() Method

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

Example
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();

Try it Yourself »

In JavaScript, the first day of the week (0) means "Sunday", even if some
countries in the world consider the first day of the week to be "Monday"

You can use an array of names, and getDay() to return the weekday as a
name:

Example
var d = new Date();
var days =
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturd
ay"];
document.getElementById("demo").innerHTML = days[d.getDay()];

Try it Yourself »

UTC Date Methods

UTC date methods are used for working with UTC dates (Universal Time Zone
dates):

Method Description

getUTCDate() Same as getDate(), but returns the UTC date

getUTCDay() Same as getDay(), but returns the UTC day

getUTCFullYear() Same as getFullYear(), but returns the UTC year

getUTCHours() Same as getHours(), but returns the UTC hour

getUTCMilliseconds() Same as getMilliseconds(), but returns the UTC milliseconds

getUTCMinutes() Same as getMinutes(), but returns the UTC minutes

getUTCMonth() Same as getMonth(), but returns the UTC month

getUTCSeconds() Same as getSeconds(), but returns the UTC seconds

JavaScript Set Date Methods
❮ PreviousNext ❯

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

Set Date Methods

Set Date methods are used for setting a part of a date:

Method Description

setDate() Set the day as a number (1-31)

setFullYear() Set the year (optionally month and day)

setHours() Set the hour (0-23)

setMilliseconds() Set the milliseconds (0-999)

setMinutes() Set the minutes (0-59)

setMonth() Set the month (0-11)

setSeconds() Set the seconds (0-59)

setTime() Set the time (milliseconds since January 1, 1970)

The setFullYear() Method

The setFullYear() method sets the year of a date object. In this example to
2020:

Example
<script>
var d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »

The setFullYear() method can optionally set month and day:

Example
<script>
var d = new Date();
d.setFullYear(2020, 11, 3);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »
The setMonth() Method
The setMonth() method sets the month of a date object (0-11):

Example
<script>
var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »

The setDate() Method

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

Example
<script>
var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »

The setDate() method can also be used to add days to a date:

Example
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »

If adding days shifts the month or year, the changes are handled automatically
by the Date object.

The setHours() Method

The setHours() method sets the hours of a date object (0-23):

Example
<script>
var d = new Date();
d.setHours(22);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »

The setMinutes() Method

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

Example
<script>
var d = new Date();
d.setMinutes(30);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »
The setSeconds() Method
The setSeconds() method sets the seconds of a date object (0-59):

Example
<script>
var d = new Date();
d.setSeconds(30);
document.getElementById("demo").innerHTML = d;
</script>

Try it Yourself »

Compare Dates
Dates can easily be compared.

The following example compares today's date with January 14, 2100:

Example
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);

if (someday > today) {

text = "Today is before January 14, 2100.";
} else {
text = "Today is after January 14, 2100.";
}
document.getElementById("demo").innerHTML = text;

Try it Yourself »
Test Yourself With Exeses