Lesson 4
JavaScript Timers and Module Exports
Course Introduction and Goals

Welcome! Today, we're focusing on understanding JavaScript timers through the use of setInterval and clearInterval, as well as how to export and import modules in JavaScript. Both are essential skills for creating dynamic websites and managing larger codebases in JavaScript applications.

Covering the Basics: JavaScript Timers

JavaScript’s setInterval enables us to execute a piece of code repeatedly after a specified time interval. This concept is universally implemented in various tasks ranging from updating live clocks to executing server pings:

JavaScript
1let intervalId = setInterval(() => { 2 console.log('Hello, World!'); 3}, 2000);

setInterval takes two parameters: a function to be executed and the delay before the function execution is repeated.

Suppose we wish to halt the repetition of the action. In that case, we'd employ clearInterval, a function that ceases the timer set by setInterval:

JavaScript
1clearInterval(intervalId);

In practical scenarios, errors might arise during the repeated execution of the function. Here's a snippet demonstrating the use of a try...catch block to handle such occurrences:

JavaScript
1let intervalId = setInterval(() => { 2 try { 3 riskyFunction(); // A function which may fail 4 } catch (error) { 5 console.error(error); 6 clearInterval(intervalId); 7 } 8}, 2000);
Exporting and Importing in JavaScript

Maintaining organization in code is crucial for large JavaScript projects. We can split our code into multiple files or modules, export entities from one module, and import them into another. To accomplish this, we employ named exports and default exports.

Digging Deeper into Named Exports

A named export enables the exportation of multiple entities from modules by simply using the export keyword. For instance, consider this module, which exports two mathematical functions:

JavaScript
1// mathFunctions.js 2export function add(a, b) { return a + b; } 3export function multiply(a, b) { return a * b; }
Unpacking Default Exports

Default exports allow an entity, such as a variable, function, or class, to be exported from a module. While a module can only have one default export, it can include several named exports.

JavaScript
1// greeter.js 2export default function greet() { return "Hello, JavaScript!"; }
How to Import Named and Default Exports

We make use of the import keyword to import named and default exports. For a named export, we enclose the entities to be imported within curly braces {}:

JavaScript
1import { add, multiply } from './mathFunctions.js'; 2console.log(add(2, 3)); // 5 3console.log(multiply(5, 2)); // 10

For a default export, we can choose any name:

JavaScript
1import greet from './greeter.js'; 2console.log(greet()); // "Hello, JavaScript!"

When should default exports be preferred over named exports? If a module serves a primary purpose or contains a main function that's used more frequently than others, it's a good candidate for a default export. Conversely, named exports are better suited when a module exports multiple entities of equal importance.

Lesson Summary

Today, we've elaborated on the concept of JavaScript timers and the intricacies of imports and exports in JavaScript. What’s next? We'll engage in some exciting exercises to put the concepts you've just learned into practice. You'll also glean genuine insights into managing larger programmable entities and creating responsive and interactive websites and applications. So, gear up, and let's strengthen the foundation of JavaScript knowledge that you've just laid!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.