Fred Brack   Fred Brack  
Raleigh, NC 		Picture of the Cape Hatteras lighthouse

Miscellaneous JavaScript Features
by Fred Brack
Updated

Here are some JavaScript features that don't seem to fit elsewhere.  Want more detail?  My favorite reference site is W3Schools, but Mozilla will be the ultimate resource.  I created this web page to help me document my understanding of these JavaScript features as I progressed from novice to intermediate user ... and because I like to document stuff for others!  I hope you find it useful.

Import/Export

You can place JavaScript functions you build into a library and then import them to any module you write for subsequent use.  When you place them in a library (actually just a JavaScript .js file), you precede the function definitions with the word export.  In the JavaScript file where you wish to use them, you use the word import.   You can also define variables, but we will focus on functions.  In fact, Mozilla defines the purpose of export as "live bindings to functions, objects, or primitive values."

As an alternative, you can make self-contained functions for import; that is, you effectively "call" them as-is for one-time use in your program, like an external subroutine.

Before we show our examples, please be aware of these important points:

  1. You cannot test locally.  You must "publish" your files for import/export to work.  MS Expression Web's Preview function is fine, though.
  2. You MUST declare the file you import from as type="module", or you will get a weird error message.  You will see this below.
  3. It is recommended that you declare a default export, which we will show below.  You can only declare one default value, though you don't have to use it.
  4. On import, be careful about how you specify the file to be imported.  There are rules!  If in the same directory, use "./libraryname.js".  If in a JavaScript library (js) at the same level, use "js/libraryname.js".

While we are simplifying our example to importing just one named function as-is, you have these additional options:

  1. Import the default.
  2. Export or import more than one function in one statement.
  3. Rename imports or exports on the way in or out.
  4. Combine exports from other files in one file for convenience (by referencing the other files via the from keyword)

Here then are samples of three files defining and then importing a simple function called say to write your message to the console log, and one example of effectively calling a subroutine.  We are assuming the JavaScript routines are in the same directory as the HTML file (not a good idea in practice though).  If you really want to learn this feature, code these yourself with your own names and values!

1. FUNCTION DEFINITION exported (myfunctions.js)
export default {say}; // You should always specify a default
export function say(msg) { console.log(msg) }
export something_else
...
2. Routine importing and using the function (testfunction.js)
import {say} from './myfunctions.js';
say("Yes, say works in the testfunction.js file.");
3. A Standalone Function to run as-is (subroutine.js)
console.log("The module 'subroutine.js' has been run");
4. HTML which uses the 3 import methods
<script src="testfunction.js" type="module" ></script>
<!-- NOTE! The function imported above will only work in the module doing the import -->
<!-- That is, "say" does not work HERE (yet...) -->
<!-- To import inline in HTML, specify type=module also as follows -->
<script type="module">
import {say} from './myfunctions.js';
say("Yes, say works inline also.");
</script>
<!-- You can also import for the purposes of running the code only -->
<script src="subroutine.js" type="module" ></script>

Promises et al

Sorry, but I am not going to explain how to do promises (and all the associated methods) in JavaScript.  I just want to explain what they are so you can decide if you need to go learn about them elsewhere!

While we think of JavaScript execution as being synchronous (one step follows the next until we are done), in reality some operations (such as reading a file with AJAX or a dependency on an outside routine) happen asynchronously (occurring at the same time we continue our synchronous operation of the main code).  We need a method of finding out when those asynchronous processes complete so we can do any follow-up required (such as do something with the data AJAX read in).  JavaScript offers a whole series of related methods and statements to accomplish this, but they are moderately complex (in my opinion).

The concept revolves around something called a promise.  According to Mozilla, "The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value."  They (and I) suggest that you read Using Promises first.  For details on any of the following concepts, I suggest you do a search for "javascript" followed by the concept name.

Promises use a concept called a callback function, which can operate either synchronously or asynchronously.  A callback function is a function which is passed to another function as an argument to be executed later depending on the outcome of that second function.  Given that an operation might be deemed either successful or a failure, that introduces the need for different callback functions for each condition.  In fact, within the concept of promises, we have three possible outcomes:

  1. Pending; started but neither success nor failure yet
  2. Fulfilled; successful completion as expected
  3. Rejected; failure to complete as expected

JavaScript provides methods then and catch and finally to work with these situations.  Additional related JavaScript concepts include async, AsyncFunction, and await, which are all part of the ECMAScript 2017 release.  They are what is called syntactic sugar, meaning they make JavaScript concepts (promises in this case) easier to implement.  Due to the relative recentness of their release, however, you need to approach using them with caution.

More to Come ...

This is a placeholder for more JavaScript features to be added later ...

# # # # #

Fred