JavaScript Const

ECMAScript 2015

ES2015 introduced two important new JavaScript keywords: let and const.

Variables defined with const behave like let variables, except they cannot be reassigned:

Example

const PI = 3.141592653589793;
PI = 3.14;      // This will give an errorPI = PI + 10;   // This will also give an error

Try it Yourself »

---

Block Scope

Declaring a variable with const is similar to let when it comes to Block Scope.

The x declared in the block, in this example, is not the same as the x declared outside the block:

Example

var x = 10;
// Here x is 10{ 
  const x = 2;
  // Here x is 2}
// Here x is 10

Try it Yourself »

You can learn more about Block Scope in the previous chapter: JavaScript Let.

---

Assigned when Declared

JavaScript const variables must be assigned a value when they are declared:

Incorrect

const PI;
PI = 3.14159265359;

Correct

const PI = 3.14159265359;

---

Not Real Constants

The keyword const is a little misleading.

It does NOT define a constant value. It defines a constant reference to a value.

Because of this, we cannot change constant primitive values, but we can change the properties of constant objects.

---

Primitive Values

If we assign a primitive value to a constant, we cannot change the primitive value: 

Example

const PI = 3.141592653589793;
PI = 3.14;      // This will give an errorPI = PI + 10;   // This will also give an error

Try it Yourself »

---

Constant Objects can Change

You can change the properties of a constant object:

Example

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

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

// You can add a property:car.owner = "Johnson";

Try it Yourself »

But you can NOT reassign a constant object:

Example

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // ERROR

Try it Yourself »

---

Constant Arrays can Change

You can change the elements of a constant array:

Example

// You can create a constant array:const cars = ["Saab", "Volvo", "BMW"];

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

// You can add an element:cars.push("Audi");

Try it Yourself »

But you can NOT reassign a constant array:

Example

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR

Try it Yourself »

---

Browser Support

The const keyword is not supported in Internet Explorer 10 or earlier.

The following table defines the first browser versions with full support for the const keyword:

Chrome 49	IE / Edge 11	Firefox 36	Safari 10	Opera 36
Mar, 2016	Oct, 2013	Feb, 2015	Sep, 2016	Mar, 2016

---

---

Redeclaring

Redeclaring a JavaScript var variable is allowed anywhere in a program:

Example

var x = 2;    //  Allowedvar x = 3;    //  Allowedx = 4;        //  Allowed

Redeclaring or reassigning an existing var or let variable to const, in the same scope, or in the same block, is not allowed:

Example

var x = 2;         // Allowedconst x = 2;       // Not allowed{
  let x = 2;     // Allowed  const x = 2;   // Not allowed}

Redeclaring or reassigning an existing const variable, in the same scope, or in the same block, is not allowed:

Example

const x = 2;       // Allowedconst x = 3;       // Not allowedx = 3;             // Not allowedvar x = 3;         // Not allowedlet x = 3;         // Not allowed
{
  const x = 2;   // Allowed  const x = 3;   // Not allowed  x = 3;         // Not allowed  var x = 3;     // Not allowed  let x = 3;     // Not allowed}

Redeclaring a variable with const, in another scope, or in another block, is allowed:

Example

const x = 2;       // Allowed
{
  const x = 3;   // Allowed}

{
  const x = 4;   // Allowed}

---

Hoisting

Variables defined with var are hoisted to the top (if you don't know what Hoisting is, read our Hoisting Chapter).

You can use a var variable before it is declared:

Example

carName = "Volvo";    // You CAN use carName herevar carName;

Try it Yourself »

Variables defined with const are not hoisted to the top.

A const variable cannot be used before it is declared:

Example

carName = "Volvo";    // You can NOT use carName hereconst carName = "Volvo";

JavaScript Let

ECMAScript 2015

ES2015 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope variables (and constants) in JavaScript.

Before ES2015, JavaScript had only two types of scope: Global Scope and Function Scope. 

---

Global Scope

Variables declared Globally (outside any function) have Global Scope.

Example

var carName = "Volvo";

// code here can use carName
function myFunction() {
  // code here can also use carName }

Try it Yourself »

Global variables can be accessed from anywhere in a JavaScript program.

---

Function Scope

Variables declared Locally (inside a function) have Function Scope.

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 »

Local variables can only be accessed from inside the function where they are declared.

---

JavaScript Block Scope

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

Before ES2015 JavaScript did not have Block Scope.

Variables declared with the let keyword can have Block Scope.

Variables declared inside a block {} can not be accessed from outside the block:

Example

{ 
  let x = 2;
}
// x can NOT be used here

---

Redeclaring Variables

Redeclaring a variable using the var keyword can impose problems.

Redeclaring a variable inside a block will also redeclare the variable outside the block:

Example

var x = 10;
// Here x is 10{ 
  var x = 2;
  // Here x is 2}
// Here x is 2

Try it Yourself »

Redeclaring a variable using the let keyword can solve this problem.

Redeclaring a variable inside a block will not redeclare the variable outside the block:

Example

var x = 10;
// Here x is 10{ 
  let x = 2;
  // Here x is 2}
// Here x is 10

Try it Yourself »

---

Browser Support

The let keyword is not fully supported in Internet Explorer 11 or earlier.

The following table defines the first browser versions with full support for the let keyword:

Chrome 49	Edge 12	Firefox 44	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

---

Loop Scope

Using var in a loop:

Example

var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements}
// Here i is 10

Try it Yourself »

Using let in a loop:

Example

let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements}
// Here i is 5

Try it Yourself »

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.

---

---

Function Scope

Variables declared with var and let are quite similar when declared inside a function.

They will both have Function Scope:

function myFunction() {
  var carName = "Volvo";   // Function Scope}

function myFunction() {
  let carName = "Volvo";   // Function Scope}

---

Global Scope

Variables declared with var and let are quite similar when declared outside a block.

They will both have Global Scope:

var x = 2;       // Global scope

let x = 2;       // Global scope

---

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

Try it Yourself »

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

Try it Yourself »

---

Redeclaring

Redeclaring a JavaScript variable with var is allowed anywhere in a program:

Example

var x = 2;

// Now x is 2 
var x = 3;

// Now x is 3

Try it Yourself »

Redeclaring a var variable with let, in the same scope, or in the same block, is not allowed:

Example

var x = 2;       // Allowedlet x = 3;       // Not allowed
{
  var x = 4;   // Allowed  let x = 5   // Not allowed}

Redeclaring a let variable with let, in the same scope, or in the same block, is not allowed:

Example

let x = 2;       // Allowedlet x = 3;       // Not allowed
{
  let x = 4;   // Allowed  let x = 5;   // Not allowed}

Redeclaring a let variable with var, in the same scope, or in the same block, is not allowed:

Example

let x = 2;       // Allowedvar x = 3;       // Not allowed
{
  let x = 4;   // Allowed  var x = 5;   // Not allowed}

Redeclaring a variable with let, in another scope, or in another block, is allowed:

Example

let x = 2;       // Allowed
{
  let x = 3;   // Allowed}

{
  let x = 4;   // Allowed}

Try it Yourself »

---

Hoisting

Variables defined with var are hoisted to the top (if you don't know what Hoisting is, read our Hoisting Chapter).

You can use a variable before it is declared:

Example

// you CAN use carName herevar carName;

Try it Yourself »

Variables defined with let are not hoisted to the top.

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

// you can NOT use carName herelet carName;

Ajax (Mozilla document)

Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object.
When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.

Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.

DocumentationSection

Getting Started

This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started.

Using the XMLHttpRequest API

The XMLHttpRequest API is the core of Ajax. This article will explain how to use some Ajax techniques, like:

• analyzing and manipulating the response of the server
• monitoring the progress of a request
• submitting forms and upload binary files – in pure Ajax, or using FormData objects
• creating synchronous or asynchronous requests
• using Ajax within Web workers

Fetch API

The Fetch API provides an interface for fetching resources. It will seem familiar to anyone who has used XMLHTTPRequest, but this API provides a more powerful and flexible feature set.

Server-sent events

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page. See also:  Using server-sent events.

Pure-Ajax navigation example

This article provides a working (minimalist) example of a pure-Ajax website composed only of three pages.

Sending and Receiving Binary Data

The responseType property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), "arraybuffer", "blob", "document", "json", and "text". The responseproperty will contain the entity body according to responseType, as an ArrayBuffer, Blob, Document, JSON, or string. This article will show some Ajax I/O techniques.

XML

The Extensible Markup Language (XML) is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.

JXON

JXON stands for lossless Javascript XML Object Notation, it is a generic name by which is defined the representation of Javascript object trees (JSON) using XML.

Parsing and serializing XML

How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.

XPath

XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.

The FileReader API

The FileReader API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. File objects may be obtained from a FileList object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.

HTML in XMLHttpRequest

The W3C XMLHttpRequest specification adds HTML parsing support to XMLHttpRequest, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using XMLHttpRequest.

Other resources

Other Ajax resources you may find useful.