SriniTechHub

You Don't Know JS: ES6 & Beyond

Chapter 3: Organization

Some of the most important changes in ES6 involve improved support for the patterns we already commonly use to organize JavaScript functionality. This chapter will explore Iterators, Generators, Modules, and Classes.

Iterators

An iterator is a structured pattern for pulling information from a source in one-at-a-time fashion. This pattern has been around programming for a long time. And to be sure, JS developers have been ad hoc designing and implementing iterators in JS programs since before anyone can remember, so it's not at all a new topic.

What ES6 has done is introduce an implicit standardized interface for iterators. Many of the built in data structures in JavaScript will now expose an iterator implementing this standard. And you can also construct your own iterators adhering to the same standard, for maximal interoperability.

SriniTechHub

clean-code-javascript

Table of Contents

1. Introduction
2. Variables
3. Functions
4. Objects and Data Structures
5. Classes
6. SOLID

SriniTechHub

What is Event Propagation?

When an event occurs on a DOM element, that event does not entirely occur on that just one element.

Event Propagation has three phases.

Capturing Phase – the event starts from window then goes down to every element until it reaches the target element. Target Phase – the event has reached the target element. Bubbling Phase – the event bubbles up from the target element then goes up every element until it reaches the window. The addEventListener method has a third optional parameter useCapture with a default value of false the event will occur in the Bubbling phase if true the event will occur in the Capturing Phase.

SriniTechHub

/*

    JavaScript: Learn JavaScript in Y Minutes
    Reference URL: https: //learnxinyminutes.com/docs/javascript/
    
    JavaScript was created by Netscape’s Brendan Eich in 1995. It was originally intended as a 
    simpler scripting language for websites, complementing the use of Java for more complex web 
    applications, but its tight integration with Web pages and built-in support in browsers has 
    caused it to become far more common than Java in web frontends.

SriniTechHub

1. Define local variables
When a variable is referenced, Javascript hunts it down by looping through the different members of the scope chain. This scope chain is the set of variables available within the current scope, and across all major browsers it has at least two items: a set of local variables and a set of global variables.
Simply put, the deeper the engine has to dig into this scope chain, the longer the operation will take. It first goes through the local variables starting with this, the function arguments, then any locally defined variables, and afterwards iterates through any global variables.
Since local variables are first in this chain, they’re always faster than globals. So anytime you use a global variable more than once you should redefine it locally, for instance change:
var blah = document.getElementById('myID'),
blah2 = document.getElementById('myID2');
to:
var doc = document,
blah = doc.getElementById('myID'),
blah2 = doc.getElementById('myID2');

SriniTechHub

// Country list source: https://www.dhl.com/en/country_profile.html#.XwODEJNKjOQ 
// Country abbreviation source: https://planetarynames.wr.usgs.gov/Abbreviations
// Postal code: https://gist.githubusercontent.com/jamesbar2/1c677c22df8f21e869cca7e439fc3f5b/raw/21662445653ac861f8ab81caa8cfaee3185aed15/postal-codes.json
// Postal code: https://en.wikipedia.org/wiki/List_of_postal_codes

// Country/territory items with no postal code regexes or ranges either do not require postal codes
// or there may not be enough information for that country/territory

export const COUNTRY_ADDRESS_POSTALS = [{
    abbrev: 'AF',