JavaScript Features: Introduction, Constants

◄Page 1►

Introduction, Constants

Introduction

This tutorial covers relatively new, seldom used, or unusual JavaScript features. This section provides an overview of the format and topics discussed throughout the tutorial. Each section includes a few new techniques. After the overview on this page, learn about ECMAScript 6 JavaScript.

Book Format

Each section includes JavaScript code, explanation and links to execute JavaScript features. Tap buttons to see working examples for most topics.

Each section demonstrates JavaScript topics, implemented with a unique JavaScript file. You may download and use the shared style sheet, shared source code and JavaScript file, for each section.

Code Examples

This set of tutorials reuses similar HTML markup, some of the same JavaScript and a style sheet, for many examples.

In this section review an example button, review the shared JavaScript and shared style sheet.

Most examples ask you to tap an HTML color coded div element. The div element includes an ID. Tap the element to call a test function. Code passes the value of the ID to the test function.

HTML Buttons

Most buttons are just colored div elements. For example the box below's colored aqua. See the box's HTML markup.

HTML buttons display with shared style sheet, elements.css. Most sections use the same shared JavaScript file, reuse.js.

The style sheet includes a number of short naming schemes for elements. For example, attribute aq displays an aqua background.

Notice property cProp, toward the bottom of the following markup. When you tap the button, function constChangeProp('cProp') activates. The only argument for this example, is the ID of the HTML element at the bottom of the div box. Most examples execute different functions with different HTML element IDs.

<div 
class="box aq" 
onclick="constChangeProp('cProp')"
>

<div 
class="bld">
Change a Constant Property
</div>

<code>
onclick="constChangeProp('cProp')"
</code>

<!-- Display output from       -->
<!-- constChangeProp(), below: -->
<div 
id="cProp">
</div>

</div>

Shared JavaScript

JavaScript file reuse.js implements functionality used throughout this set of tutorials.

Most examples display data processed with an example function, within the button you tap. For example, consider a button that demonstrates for loops. The button displays code with a for loop. Tap the button to see output from the for loop, toward the bottom of the button.

Shared function, getElement(sId) obtains and returns the HTML element associated with ID sId. Code displays data to a button associated with the ID. The data displayed is usually specific for each example.

/***
 * Given the 
 * @param sId: String ID
 * of HTML element.
 * @return e: HTML element.
 */
function getElement(sId){
let e = document.getElementById(sId);
return e;
}

Shared Style Sheet

Style sheet elements.css declares a set of colored div elements for use as buttons, along with some other useful CSS selectors.

Topics

This book discusses constants, hoisting, good practices, asynchronous downloads, JavaScript fundamentals, data types, modules, logic, browser integration (BOM), document object model (DOM), Objects, prototypes and inheritance, Web workers, exception handling, network requests, classes, strings and arrays, client-server integration with JSON, PHP and MySQL, JSON, trailing commas, asynchronous iteration, exponentiation operator, default and rest parameters, object entries and values, send-recieve JSON functions, maps, sets and iterables.

ECMAScript 6

ECMAScript 6, also called ES6, ECMAScript 2015 and JavaScript 6, was complete in June 2015. Learn ES6 topics including constants, block scoped variables and functions, expression bodies, statement bodies, Lexical this, default parameter values, rest parameters, the spread operator, template literals, extended literals, enhanced regular expressions, enhanced object properties, destructuring assignment, modules, classes, class inheritance, symbol types, for and of iterators, generators, map sets, typed arrays, new built-in methods, promises, internationalization and meta-programming.

This page introduces JavaScript constants.

Constants

Learn about JavaScript constants in this section, including a general description, assignment of an object to a constant and changing a property of a constant. First read a general description of a constant, with a short example. Second look at constants with objects. Next see what happens when you attempt to assign a new object to a constant object and what happens when you try to change a property on a constant object. Learn when you can and can't change values on constants.

What's a Constant?

Constants are variables that receive a value once. The value of the constant variable can't change during program execution. Assign any valid JavaScript expression, including functions, to a constant.

The following line assigns 6, to the constant identifier N_2_TIMES_3.

Once the constant's declared and assigned, the following line would generate an error.

Constant as an Object

The value of a constant object's properties can change. However the constant itself cannot apply to a different object or value. Create and assign an object to a constant as follows. The constant C_OBJECT includes one property, name.

const C_OBJECT = {
name:"ConstantObject",
};

Modify Const Property Value

If the value of the constant's an object, properties on the object itself can change. Modify the value of a property of an object and no error's generated.

You can change the value of a property on a constant if the constant's an object. The following code modifies property, name, on constant object, C_OBJECT. C_OBJECT.name: ChangedProperty, displays to a button element after function constChangeProp() executes.

const C_OBJECT = {
name:"ConstantObject"
};

/***
 * Change a property
 * on a constant.
 * @param sId: String ID of HTML element.
 */
function constChangeProp(sId){
let e = getElement(sId); 
e.innerHTML = "Start property C_OBJECT.name: "+C_OBJECT.name;
C_OBJECT.name = "ChangedProperty"; 
e.innerHTML += "<br>Changed property C_OBJECT.name: "+C_OBJECT.name;
}

Modify Const Value

The following short listing generates an error. You can't modify the value of a constant, even if that value's an object.

In the following code a try-catch block traps errors. Developers see the exception string within the innerHTML of an HTML element.

/***
 * Attempt to change
 * the constant itself.
 * Should generate an exception.
 * @param sId: String ID of HTML element.
 */
function constChangeConst(sId){

let e = getElement(sId);

e.innerHTML = "Start constant C_OBJECT: "+C_OBJECT;
try{
C_OBJECT = new Object();
}

catch(ex){
e.innerHTML += "Error changing constate: "+ex.toString();
return;
}

e.innerHTML += "<br>Successful changed constant C_OBJECT: "+C_OBJECT;
}

Interactive Examples

Tap a Box

Please tap a box to see results from functions constChangeProp() and constChangeConst(). JavaScript file constants.js implements both functions.

Summary

This tutorial covers relatively new, seldom used, or unusual JavaScript features. This section provided an overview of the book's format and topics discussed. Each section includes a few new techniques. After the overview, learn about JavaScript constants, implemented with ECMAScript 6.

Topics

This book discusses constants, hoisting, good practices, asynchronous downloads, JavaScript fundamentals, data types, modules, logic, browser integration (BOM), document object model (DOM), Objects, prototypes and inheritance, Web workers, exception handling, network requests, classes, strings and arrays, client-server integration with JSON, PHP and MySQL, JSON, trailing commas, asynchronous iteration, exponentiation operator, default and rest parameters, object entries and values, send-recieve JSON functions, maps, sets and iterables.

ECMAScript 6

ECMAScript 6, also called ES6, ECMAScript 2015 and JavaScript 6, was complete in June 2015. Learn about ES6 constants, block scoped variables and functions, expression bodies, statement bodies, Lexical this, default parameter values, rest parameters, the spread operator, template literals, extended literals, enhanced regular expressions, enhanced object properties, destructuring assignment, modules, classes, class inheritance, symbol types, for and of iterators, generators, map sets, typed arrays, new built-in methods, promises, internationalization and meta-programming.

Book Format

Each section includes JavaScript code, explanation and button links to execute new JavaScript features. Tap buttons to see working examples for most topics. HTML buttons display with shared Style Sheet, elements.css. Most sections include the same shared JavaScript file, reuse.js.

Each section demonstrates JavaScript topics, implemented with a unique JavaScript file. You may download and use the shared style sheet, shared source code and JavaScript file, for each section.

Constants

In this section you learned about JavaScript constants including a general description, assignment of an object to a constant and changing a property of a constant. First you read a general description of a constant, with a short example. Second you looked at constants with objects. Next you saw what happens when you attempt to assign a new object to a constant object and what happens when you try to change a property on a constant object. You learned when you can and can't change values on constants.

Learn JavaScript

JavaScript's the foundation of Web developer and Website design skills. This free and unique JavaScript tutorial includes some new or seldom used, but useful features.

Tags