JavaScript Foundations

Introduction

Below are some short lessons and resources on programming concepts.

The 'event loop'

As a single threaded language, JavaScript or ECMAScript, can only execute one line of code at a time. The currently running line is kept as part of a call stack (which you can see in your debugger) as a list of functions. Each new function, as it is executed, is pushed to the top of the call stack with its scopes and popped from the top of the stack upon its return. Using the callback queue and the event loop, built into the ECMAScript environment, it is possible to queue function calls for a new call stack for later execution. This is primarily how DOM events, such as click or scroll, are able to execute callback handler functions.

Video - What is the heck is the event loop anyway?

Set theory

A 'set' is, mathematically speaking, an unordered group/pile of unique items Two sets can intersect, such that they have a series of indentical and potentially differing items. A set may be a subset or superset of any other, in that it contains only part of or includes the entirety of the second set. Sets can be joined in a union forming larger sets or split into further subsets; think venn diagrams.

Webpage - Basic set theory
Video - Introduction to set theory - Discrete Mathematics

... in JavaScript

Set theory is used in a variety of ways in both the Web APIs and libraries associated with JavaScript.

jQuery is a utility library, predominantly used for manipulating the DOM. jQuery's main function, usually $(), returns a subset of document elements (<div>, <span>, <a>) against which to perform a variety of functions. jQuery has functions for uniting jQuery sets, for generating jQuery subsets and for traversing the DOM heirarchy. It is possible using jQuery to attach a single event handler to all of the elements in the set using a single line. jQuery uses an extended version of the CSS selector syntax to select a subset of the elements in the document.

Array is a core JavaScript class designed to hold a set of variables ordered by an index, starting at index 0. Array has native functions for uniting arrays, for generating Array subsets and for transforming and manipulating array items.

Underscore.js and lodash are both utility libraries for JavaScript. They both contain a series of functions which allow for Array interections, differences, unions, sorting, grouping, etc.

As may be apparant from the above libraries, implementations of the core set theory concepts often allow for non-unique set items and often extend sets with sort order, item names and a whole raft of problem specific capabilities.

... in Databases

Set theory is the foundation on which modern databases function.

In SQL (structured query language), each table in a database is a set of unique rows/items. SQL allows the database administrators and systems designers to select and join the tables using the FROM ... ON ... clause, create subsets using the WHERE clause, and provides extra behaviour for sorting in ORDER BY, grouping in GROUP BY and projecting the result into a new table/set of the selected columns using the SELECT clause.

... in CSS

Each CSS statement begins with a CSS selector, the rules inside this statement are applied to the set of elements selected from the DOM by the selector. jQuery utilises this selector syntax in order to select DOM elements from within JavaScript.

Primitives, object references and operators

Variables in JavaScript behave slightly differently from other languages and so in order to really grasp the language it's worth understanding the specific rules.

Definition: A variable is a place to store a primitive value or an object reference.

Primitives

Are simply values of the type string, number, boolean, undefined, null, bigint and symbol. The last two, bigint and symbol we'll leave aside for the moment.

String is any text, usually encapsulated in single quotes, 'this is some text'. A string value, when writting in code, can have specially escaped characters representing things like a tab \t or a new line \n; when these special characters are compiled by the browser they are translated into their respective real characters when stored in memory, such that the representations in the editor and the actual value in memory can be ever so slightly different.

Object references

Operators

Patterns and paradigms

Paradigms

Functional vs object-orientated

Functional

Object orientated

Imperative vs declarative

Imperative

Declarative

Patterns

Sort

MVC

Observer/observable

Modularisation

Functions

Classes

Modules

APIs

Libraries

Compilers

Abstract Syntax Tress

Bundlers

Transpilers

Pseudo-languages

Design, implementation and planning

Software development methodologies

Object-orientated design

Project planning

Gantt charts

Critical path

Risk management and critical thinking

Media distribution

Transport

Encoding

Accessibility

Tools

Market coverage

Specifications

Minimum compatible implementations

Final notes

One of the newest and most documented engineering subdiciplines. Resources.