A Firm Foundation of JavaScript by Bob Tabor

This collection of text appears to be a script or transcript from a beginner’s JavaScript course or tutorial. It starts with an introduction to the instructor and the purpose of the revised course, acknowledging the rapid changes in JavaScript. The content then transitions into fundamental programming concepts, covering variables, data types, operators, control flow (decisions and iteration), functions, and scope. More advanced topics such as objects, prototypes, classes, arrow functions, and truthy/falsy values are introduced, along with practical applications like string and array methods, error handling with try-catch, and working with the Document Object Model (DOM) in web browsers. The text concludes with a brief discussion of popular JavaScript libraries and frameworks for both client-side and server-side development.

Podcast

Listen or Download Podcast – A Firm Foundation of JavaScript by Bob Tabor

An Introduction to JavaScript Programming

Based on the sources provided, here is a discussion of Javascript programming:

This material provides an introduction to Javascript programming, primarily aimed at absolute beginners to Javascript and programming in general. It assumes some familiarity with HTML and CSS, but is designed so that beginners to programming can follow along. The focus is on teaching the pure Javascript language first. The course initially uses console or command-line style applications to isolate the language itself without getting clouded by HTML and CSS. The application of Javascript in the context of the web browser and the Document Object Model (DOM) is discussed later in the course.

Javascript is described as a highly dynamic, unique, and sometimes quirky language. The community around Javascript is moving extremely quickly. It is the most popular programming language not just in the web browser, where there are hundreds of frameworks and libraries available, but also increasingly popular for server-side web development using frameworks like Node.js. It can also be used in other environments, such as writing video games in Unity.

As software developers, the job is to author code using a language that is human-readable and can be understood, parsed, interpreted, and ultimately executed by a computer. Code is saved into files, and an execution environment, such as a web browser or Node.js, interprets and executes it. Javascript has a syntax, similar to English, with rules for proper versus incorrect syntax. It has “parts of speech,” vocabulary words, and structures like statements which are complete instructions.

Key concepts discussed include:

• Statements and Expressions: A statement is a complete instruction, like a sentence. A Javascript file contains one or more statements executed sequentially. Statements are made up of one or more expressions. An expression is made up of operators and operands.
• Operators and Operands: Operators are things like keywords and symbols (e.g., let, +, =, ++, –, %, ., &&, ||, () for function invocation, {} for code blocks). Operands are things like identifiers (variable names) and functions. Programmers give operands their names. Combining operators and operands creates expressions used to compose statements.
• Variables and Data Types: Variables are like containers or buckets that can hold values. Values, not variables, have data types. Basic data types include number, boolean, and string. Other types mentioned are undefined (for declared but unassigned variables), null, and symbol (new in the latest version). Objects are another data type.
• Variable Declaration: Variables can be declared using keywords.
• var: The original keyword, still seen frequently, but its usage is nuanced and can have unexpected ramifications related to scope.
• let: The recommended keyword for declaring variables whose values may change. It works more like variable declaration in many other programming languages.
• const: Used to declare variables whose values are not intended to change. Attempting to reassign a value to a const variable results in an error.
• Coercion: Javascript attempts to implicitly convert values from one data type to another in certain operations (e.g., adding a number and a string may result in the number being coerced into a string and concatenated). Explicit conversion is also possible using functions like parseInt.
• Functions: A function is a named block of reusable code that can be called by its name. Functions are primary constructs in Javascript for getting things done.
• Function Declarations: Created with the function keyword, typically given a name.
• Function Expressions: Anonymous functions (without a name) that can be assigned to variables or passed as arguments to other functions.
• Immediately Invoked Function Expressions (IIFE): A function expression that is defined and executed immediately. This is a common pattern, especially for managing scope.
• Decision Statements: Allow different blocks of code to execute based on conditions.
• if: Executes code if a specified expression evaluates to true. Can include else and else if.
• switch: Evaluates an expression and executes code based on matching cases.
• Ternary Operator: A shorthand for simple if/else logic.
• Iteration Statements (Loops): Allow a block of code to be executed multiple times until a condition is met.
• for loop: Has three parts: initialization, condition, and increment/decrement. Often used to iterate over arrays using the array’s length property.
• while loop: Executes a block of code as long as a specified condition is true.
• forEach: A method available on arrays and other iterables that executes a provided function once for each array element.
• Scope: Refers to the lifespan and accessibility of variables. Variables are removed from memory when they go out of scope. Code blocks (like those in functions or loops) define scope. Defining variables and functions in the global scope (global namespace) is particularly dangerous, especially in a web browser, because these variables remain in memory until the page navigates away and can lead to naming conflicts. Techniques like IIFEs and modules help reduce impact on the global namespace.
• Objects: Objects are another data type. They can represent tangible things (like a car) or abstract concepts. Objects have properties (values associated with them) and methods (functions associated with them). Properties and methods are accessed using dot notation (e.g., object.property, object.method()). Objects can be nested. Object literals (creating objects using {}) look similar to JSON (Javascript Object Notation), which is a popular data format.
• this Keyword: This keyword represents the context in which a function is called. Its meaning depends on how the function is invoked, which can be confusing, especially for those coming from other programming languages where this might behave differently. In the global scope in Node, this might refer to the global object. In a web browser context, how this is bound depends on how the function is called.
• Primitives vs. Built-ins (Natives): Javascript has primitive types (string, number, boolean, etc.) and corresponding built-in “native” functions (like String, Number, Boolean) that return objects. When you perform operations on primitives (like calling a method on a string literal), the Javascript compiler temporarily “boxes” the primitive into its native object equivalent to provide access to rich functionality (methods).
• Constructor Functions: Functions that are intended to be called using the new keyword. When called with new, they return a new object.
• Classes and Prototypes: Javascript does not have classes or traditional object-oriented inheritance in the same way as languages like C# or Java. Javascript is object-based; you can create objects and dynamically add properties and methods. Instead of traditional inheritance, Javascript uses a prototype chain. When you create a new object based on an existing one, a permanent link is created between the new object and its prototype (the original object). If you try to access a property on the new object, and it doesn’t exist directly on that object, Javascript looks up the prototype chain. Some call this “prototypal inheritance” or “objects linking to other objects”. The class keyword was added in a newer version of Javascript as “syntactic sugar” to make it feel more familiar to developers from traditional OOP languages, but it still uses the underlying object and prototype model.
• Arrow Functions: A shorthand syntax for defining functions, introduced in a recent version of Javascript. They are frequently used.
• Truthy and Falsey: Concepts specific to Javascript evaluation. Some values or expressions that are not strictly true or false are considered “truthy” or “falsey” when evaluated in a boolean context (like an if statement condition). Examples of falsey values include null, undefined, NaN, 0, and empty strings. Non-zero numbers and non-empty strings are truthy.
• Common Methods: Many useful methods are available on built-in native objects like String and Array. Examples mentioned include split, repeat, trim, and join for strings and push, pop, shift, forEach, and every for arrays.
• Error Handling: Javascript’s compiler is often lenient, but when it encounters something it cannot process, it throws an error or exception. Information about the error is captured in an Error object. The try…catch…finally construct allows developers to safeguard code that might throw exceptions and handle them gracefully.

When discussing Javascript in a web browser, the course introduces the Document Object Model (DOM). The web browser parses HTML, CSS, and Javascript to build an object graph representing the document and its elements. The DOM is an API (Application Programming Interface) that allows Javascript to interact with these elements (referred to as nodes), modify their properties and attributes, add or remove nodes, and associate functions with events triggered by the user (like clicks or mouseovers).

Different ways to include Javascript in an HTML page are shown:

1. Inline Javascript: Writing code directly within HTML attributes like onclick. This is generally frowned upon professionally.
2. <script> tag: Including Javascript code within <script> tags in the HTML document. Placing script tags at the bottom of the <body> is often recommended so the HTML can load first. Defining functions within <script> tags can then be referenced by inline handlers. This approach is also often professionally discouraged.
3. External Javascript file: Keeping Javascript in a separate .js file and linking to it using the src attribute of a <script> tag. This is the generally preferred professional approach for separating concerns. Event handlers are then programmatically attached to DOM elements in the Javascript file using methods like addEventListener after getting a reference to the element (e.g., using document.getElementById).

After establishing a foundation, a learner might move on to more advanced Javascript topics and explore modern client-side frameworks (like React or Vue.js) and server-side frameworks (like Node.js and Express.js). Learning is iterative, and revisiting concepts is normal, even for experienced developers.

JavaScript vs. Traditional OOP

Based on the provided sources, let’s discuss Object-oriented programming (OOP) in the context of Javascript.

Object-oriented programming is a significant concept among software developers. In some of the most popular programming languages, such as C#, Java, and C++, you create objects using a construct called a class. A class is essentially a pattern or blueprint from which you create individual instances of objects. With traditional OOP classes, you define properties and methods upfront in the class definition. These are typically static and cannot be changed over the lifetime of the objects created from that class.

Traditional OOP also includes the concept of inheritance. This allows you to create specialized versions of a class (child class) that borrow or inherit all the properties and methods from a parent class. The child class can then be extended by adding its own unique properties and methods, making it a more specialized version of the parent. In this model, you create a class hierarchy where one class inherits from another. The focus in these languages is on the relationship between classes.

Javascript’s approach to creating and relating objects is different from traditional OOP languages. Javascript is primarily object-based. You can create an object and then dynamically add properties and methods to it whenever needed.

Instead of traditional class inheritance, Javascript uses a concept called the prototype chain. When you create a new object based on an existing object (which serves as the prototype), a permanent link is created between the new object and its prototype. If you try to access a property or method on the new object that doesn’t exist directly on it, Javascript automatically looks up the prototype chain to see if it exists on the prototype object. This is often referred to as “prototypal inheritance”, but some prefer the term “objects linking to other objects” (OLOO) as a more accurate description. The key distinction is that Javascript’s focus is on the relationship between individual objects and how they are chained together, rather than a static hierarchy between classes.

A recent version of Javascript introduced the class keyword. This keyword provides a syntax that resembles traditional OOP classes, but it is described as “syntactic sugar” on top of the existing Javascript object and prototype models. It does not fundamentally change how Javascript works. The class keyword was added to help developers transitioning from traditional OOP languages like C# or Java feel more familiar with Javascript’s dynamic object-based model. Even when using the class and extends keywords (which allow for approximating inheritance in Javascript’s class syntax), the underlying mechanism still relies on the prototype chain. Javascript purists sometimes point out that the class feature can be misleading because developers still need to understand the underlying prototype model to fully grasp Javascript’s object system.

For developers coming from traditional OOP environments who need to be productive quickly and desire a feel closer to languages like C# or Java, Typescript is mentioned as an alternative. Typescript is a superset of Javascript that adds features like static typing and a class/inheritance model more aligned with traditional OOP, and it is then transpiled into pure Javascript.

In summary, while Javascript has adopted keywords like class and extends to provide a syntax familiar to traditional OOP developers, its core mechanism for object creation, relationships, and code reuse is based on a dynamic, object-based model and the prototype chain, rather than the class-based inheritance found in many other languages.

JavaScript DOM Manipulation and Best Practices

Drawing on the sources, let’s discuss Document Object Model (DOM) manipulation in the context of JavaScript and web browsers.

The Document Object Model (DOM) is an object-based representation of the HTML elements in a web page. A web browser constructs this model in memory by parsing the downloaded HTML. This object graph or tree represents all the elements, their attributes, text values, and the relationships between them, such as elements containing other elements (e.g., a div containing a paragraph or list items). Each part of this structure is referred to as a node, including the document itself, elements, attributes, and text.

JavaScript plays a crucial role in interacting with the web page by using the DOM. The DOM provides a rich API (a collection of methods and properties) that allows developers to programmatically access and manipulate these nodes.

Using the DOM API, you can perform various manipulations:

• Access nodes: Find a specific node or a collection of nodes based on criteria like their ID.
• Modify nodes: Change the text content of a node.
• Change attributes and styles: Modify attributes of a node, such as its class or inline styles. The style attribute itself is an object with properties corresponding to CSS styles that can be programmatically changed.
• Add new nodes: Dynamically create new elements or text nodes and append them to existing nodes in the document tree.
• Remove nodes: Remove existing nodes from the document tree.
• Handle events: Associate your JavaScript functions with events raised by the web browser, typically triggered by user interactions like clicks, hovers, or keyboard input.

When writing JavaScript for web pages, the sources discuss different techniques. While you might see examples where JavaScript is written directly into HTML attributes (like onclick) or within <script> tags embedded directly in the HTML, this approach is generally frowned upon professionally. The recommended practice is to follow the principle of separation of concerns and keep your JavaScript code in separate .js files.

Within an external JavaScript file, the typical pattern for DOM manipulation involves:

1. Often wrapping your code in an Immediately Invoked Function Expression (IIFE) to prevent polluting the global namespace.
2. Getting a programmatic reference to the desired DOM elements using methods provided by the DOM API, such as document.getElementById().
3. Attaching event listeners to those elements using methods like addEventListener(), specifying the event type (e.g., ‘click’) and the function that should be called when the event occurs. This function is the event handler.
4. Inside event handlers or other functions, using the acquired references to manipulate the properties (like innerText, style, classList) or methods (like appendChild, removeChild) of the DOM nodes.

The sources provide a practical example demonstrating these techniques, showing how to get a reference to a button, attach a click handler using addEventListener, and then within the handler, manipulate other DOM elements by changing their text, size, color, and dynamically creating and updating a list of colored divs. This illustrates how to make web pages dynamic and interactive. The possibilities for DOM manipulation are extensive, limited primarily by what you can imagine and the available API methods. Building complex interactions often involves working incrementally, getting small parts working before moving on to the next.

It’s important to note that the DOM nodes you work with in a web browser environment should not be confused with the Node.js runtime environment. They are completely different concepts.

Javascript Functions and Scope Fundamentals

Based on the provided sources and our conversation history, let’s discuss Functions and scope in Javascript.

Functions are a fundamental concept in Javascript. In their simplest form, a function is merely a block of code that you, as a programmer, can name. Once named, this block of code can be called by its name. The primary reason for using functions is to have code that you want to reuse throughout your application. Instead of writing the same lines of code multiple times, you put them into a function block and can execute that block repeatedly by calling the function’s name. Functions are one of the primary constructs in Javascript for getting things done.

There are several ways to define functions in Javascript. The sources discuss function declarations and function expressions. A function declaration uses the function keyword followed by an identifier (the function name). A function expression assigns a function (often without a name) to a variable. You can assign a function to a variable, and then invoke the function using that variable name with the function invocation operator.

Functions can accept input parameters or arguments, which allow you to pass information into the function when you call it. These parameters are defined within the parentheses after the function name (or the function keyword in an expression). You can use these parameter names as variables within the function’s body.

Functions can also return values. While some functions may simply perform actions and exit quietly, others perform an operation and give a value back to the caller using the return keyword. A function can return one value. The result of a function call that returns a value is an expression that can be used like any other value, for example, assigned to a variable.

Javascript functions can do much more than just house reusable code. They can be used as input parameters to other functions. An example provided is using a function expression as the “handler” argument for the setTimeout function. Functions are also their own data type, alongside string, number, boolean, object, and undefined.

A shortened syntax for writing functions was introduced in a later version of Javascript: arrow functions. Arrow functions remove the need for the function keyword and use a “fat arrow” (=>) to point to the function body. They can accept input parameters within parentheses before the arrow and are often used in situations where a concise function is needed, such as with array methods like map, filter, or forEach.

Functions defined inside an object are typically referred to as methods. Using the dot operator (member access operator), you can access these methods on the object.

The way a function is called can really change its meaning and intended use, sometimes even changing the functionality defined inside it. This is particularly relevant when considering the this keyword. The value of the this keyword inside a function depends on how the function is called or invoked. For instance, if a function is called in the global context, this refers to the global object (window in browsers, global in Node.js). If called as a method of an object, this refers to that object. Methods like call and apply allow you to explicitly set what the this keyword should represent within a function call.

Scope is another crucial concept in Javascript. Variables in Javascript have a lifespan and a sort of “citizenship”. This means they are “born” (declared), can be used, and then “die” (removed from memory) when they go out of scope. Scope determines where variables are available within your application.

The rules of scope are based on code blocks. A variable declared in an outermost scope will have its life and citizenship in all inner scopes contained within it. This means variables declared outside a function (in the “outer” scope) can be referenced inside that function (in the “inner” scope). However, if a variable is defined in an innermost scope (like inside a function or an if block), it will not be available to outer scopes. Attempting to access a variable outside of its defined scope will result in an error.

The global scope is the topmost level of scope. Declaring variables at the global scope, especially when writing Javascript for a web browser, is generally considered a bad idea and is often referred to as a “crucial concern”. The primary danger of using the global scope is naming collisions. When multiple scripts or parts of your application define variables or functions with the same name in the global scope, they can overwrite each other, leading to unexpected behavior or errors.

To address the dangers of global scope, newer features like the let keyword are recommended over var, as var can attach variables to the global scope (like the window object in a web browser). Furthermore, professional developers often use design patterns and techniques to avoid writing code in the global scope. One such technique is the Immediately Invoked Function Expression (IIFE). An IIFE is a function expression that is immediately executed, creating its own scope and preventing variables declared inside it from polluting the global namespace.

A related design pattern that leverages IIFEs and returning objects is the Module Pattern (and its variation, the Revealing Module Pattern). This pattern uses an IIFE to create a function that returns an object. Variables and functions defined inside the IIFE but not returned in the object are essentially private to that scope, while those returned in the object become public members accessible through the single variable assigned to the returned object. This approach reduces the number of variables in the global scope and provides a form of encapsulation.

The interaction between functions and scope gives rise to the concept of closures. A closure allows you to associate some data with a function and use the function with that data “baked into it”. It happens when a function is defined inside another function, and the inner function “remembers” or retains access to variables and input parameters from the outer function’s scope (its lexical environment) even after the outer function has finished executing. The term lexical scope refers to the fact that scope in Javascript is determined by where variables are declared in the source code. Nested functions have access to variables declared in their containing (outer) scopes. Each closure created gets its own lexical environment, meaning it has its own set of variables from the outer scope that it retains access to. Closures are a powerful feature that relies on how scoping works in Javascript.

Javascript Data Types and Coercion

Drawing on the sources and our conversation history, let’s discuss data types in Javascript.

In Javascript, a data type is essentially a description of the kind of data that you want to store and what you intend to do with that data. It’s important to note that values, not variables, have a data type. This is one of the things that makes Javascript unique when compared to other programming languages.

The sources discuss several data types that we work with:

• Number: Used if you want to perform math or some algebraic operation. It can be any positive or negative number, including decimal values.
• Boolean: Used if you want to do a yes or no, true or false evaluation. The only two possible values are true or false.
• String: A shorthand for “string of characters” and usually represented with single quotes. Anything inside the single quotes is a literal string of characters.
• Undefined: Represents a variable that was declared but has had nothing assigned to it. The value is undefined, and the type is undefined. This means Javascript was expecting to have a value set, but one was never set.
• Function: Functions are their own data type.
• Object: While an array isn’t a data type of itself, it is a type of something called object. Objects are different from arrays; an array holds a list of information (many data items), while an object contains the related properties of a single data element. Objects can contain properties where the values can be any data type, including other arrays or objects. Regular expressions are also a special built-in object to Javascript. The DOM itself is an object-based representation of HTML elements.
• Null: This primitive data type represents a variable where an object reference was expected but is not set to any object reference. It is not zero, not undefined, and not an empty string. It’s different from undefined because with null, you were expecting an object reference, whereas with undefined, you were expecting perhaps a number, string, or boolean.
• Symbol: Mentioned as a new data type in the latest version of Javascript that won’t be discussed in detail in this course.

The sources also discuss the concept of coercion, which is when Javascript implicitly attempts to convert one data type into another. This can happen, for example, when using the + operator with a number and a string; Javascript might coerce the number into a string and perform concatenation instead of addition. While some consider this “evil” or “dangerous,” it’s just part of the language. You can also explicitly force conversion using built-in functions like parseInt() to convert a string representation of an integer into a numeric value.

Furthermore, the primitive types like string, boolean, and number have corresponding built-ins or natives. These are functions that return objects with additional methods and properties. Behind the scenes, the Javascript compiler will wrap or “box” a primitive type into its built-in native equivalent object when you try to call a method on it, providing rich functionality like .toLowerCase() on a string. These built-in native functions often have the same name as their primitive counterparts but start with an uppercase letter (e.g., String, Number, Boolean). You can explicitly create an object from a built-in native using the new keyword. To get the primitive value back out of one of these native objects, you can use the .valueOf() method. Arrays and regular expressions also have built-in natives that provide extra functionality, even though their primitive version might be considered object.

The typeof operator can be used to determine the data type of a value. For instance, applying typeof to a variable holding a number will output “number”, a boolean “boolean”, a string “string”, an undefined variable “undefined”, a function “function”, and an array or regular expression “object”.

Understanding data types and how Javascript handles them, including coercion and built-in natives, is crucial for predicting how your code will behave.

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!