ECMAScript 2015
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. JavaScript Exercises, Practice, Solution: JavaScript is a cross-platform, object-oriented scripting language. Inside a host environment, JavaScript can be connected to the objects of its environment to provide programmatic control over them.
ES2015 introduced two important new JavaScript keywords: let and const.
Variables defined with const behave like let variables, except they cannot be reassigned:
Example
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
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
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
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
Correct
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
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Constant Objects can Change
You can change the properties of a constant object:
Example
const car = {type:'Fiat', model:'500', color:'white'};
// You can change a property:
car.color = 'red';
// You can add a property:
car.owner = 'Johnson';
But you can NOT reassign a constant object:
Example
car = {type:'Volvo', model:'EX60', color:'red'}; // ERROR
Constant Arrays can Change
You can change the elements of a constant array:
Example
const cars = ['Saab', 'Volvo', 'BMW'];
// You can change an element:
cars[0] = 'Toyota';
// You can add an element:
cars.push('Audi');
But you can NOT reassign a constant array:
Example
cars = ['Toyota', 'Volvo', 'Audi']; // ERROR
Browser Support
The const keyword is not supported in Internet Explorer 10 or earlier.
The following table defines the first browser versions with full support for the const keyword:
| Chrome 49 | IE / 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 = 3; // Allowed
x = 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
const 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 = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
let 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 = 3; // Allowed
}
{
const x = 4; // Allowed
}
Hoisting
Variables defined with var are hoisted to the top and can be initialized at any time (if you don't know what Hoisting is, read our Hoisting Chapter).
Meaning: You can use the variable before it is declared:
Example
This is OK:
Try it Yourself »Variables defined with const are hoisted to the top of the block, but not initialized.
Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared.
The variable is in a 'temporal dead zone' from the start of the block until it is declared.
Using a const variable before it is declared, is a syntax errror, so the code will simply not run.
Example
This code will not run:
Try it Yourself »Errors can (will) happen, every time you write some new computer code.
Code Debugging
Programming code might contain syntax errors, or logical errors.
Many of these errors are difficult to diagnose.
Often, when programming code contains errors, nothing will happen. There are no error messages, and you will get no indications where to search for errors.
Searching for (and fixing) errors in programming code is called code debugging.
JavaScript Debuggers
Debugging is not easy. But fortunately, all modern browsers have a built-in JavaScript debugger.
Built-in debuggers can be turned on and off, forcing errors to be reported to the user.
With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing.
Normally, otherwise follow the steps at the bottom of this page, you activate debugging in your browser with the F12 key, and select 'Console' in the debugger menu.
The console.log() Method
If your browser supports debugging, you can use console.log() to display JavaScript values in the debugger window:
Example
My First Web Page
<br />a = 5;<br />b = 6;<br />c = a + b;<br />console.log(c);<br />
Tip: Read more about the console.log() method in our JavaScript Console Reference.
Setting Breakpoints
In the debugger window, you can set breakpoints in the JavaScript code.
At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values.
After examining values, you can resume the execution of code (typically with a play button).
The debugger Keyword
The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function.
This has the same function as setting a breakpoint in the debugger.
Javascript Condenser 1 4 Hp
If no debugging is available, the debugger statement has no effect.
With the debugger turned on, this code will stop executing before it executes the third line.
Example
debugger;
document.getElementById('demo').innerHTML = x;
Major Browsers' Debugging Tools
Normally, you activate debugging in your browser with F12, and select 'Console' in the debugger menu.
Otherwise follow these steps:
Chrome
- Open the browser.
- From the menu, select 'More tools'.
- From tools, choose 'Developer tools'.
- Finally, select Console.
Firefox
- Open the browser.
- From the menu, select 'Web Developer'.
- Finally, select 'Web Console'.
Edge
- Open the browser.
- From the menu, select 'Developer Tools'.
- Finally, select 'Console'.
Opera
- Open the browser.
- From the menu, select 'Developer'.
- From 'Developer', select 'Developer tools'.
- Finally, select 'Console'.
Safari
- Go to Safari, Preferences, Advanced in the main menu.
- Check 'Enable Show Develop menu in menu bar'.
- When the new option 'Develop' appears in the menu:
Choose 'Show Error Console'.
Did You Know?
Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs.
The first known computer bug was a real bug (an insect) stuck in the electronics.
Javascript Condenser 1 4 Coupler
1.4 Email Extractor
