Advanced Web Programming
Part 04 – Advanced JavaScript
Dr. Amjad AbuHassan
11/30/2024 Dr. Amjad AbuHassan 1
Introduction to ES6+
● ES6 (ECMAScript 2015): Major update to JavaScript
● New Features: Arrow functions, classes, modules, template literals, destructuring,
and more
● Importance: Modernizes JavaScript, improves readability and maintainability
11/30/2024 Dr. Amjad AbuHassan 2
Hoisting
● Hoisting in JavaScript refers to the behavior where the declarations of functions,
variables, or classes are moved to the top of their containing scope.
● Hoisting is a feature you might encounter in some programming languages like
JavaScript but not in others. It's a unique aspect of how the JavaScript interpreter
processes code.
● Function Hoisting
● Variable Hoisting
● Class Hoisting
11/30/2024 Dr. Amjad AbuHassan 3
Outline
● Variables
● Arrow Functions vs Function Expression
● Modules
● Promises and Asynchronous Programming
● Closures
● Generators
● Higher-Order Functions
● this Keyword
11/30/2024 Dr. Amjad AbuHassan 4
Variables
11/30/2024 Dr. Amjad AbuHassan 5
Variables Recap
● We can declare variables using
● var
● let
● const
● While all these variable declarations are hoisted, they each behave differently
11/30/2024 Dr. Amjad AbuHassan 6
var Recap
● Prior to ES6, var was the primary way to declare variables.
● Issues with var led to the introduction of let and const in ES6.
● Variables declared with var outside any function are globally scoped.
● Variables declared within a function are scoped to that function.
11/30/2024 Dr. Amjad AbuHassan 7
Hoisting var Variables Case 1
● Hoisting Behavior:
● Declarations using var are hoisted to the top of their scope.
● var variables are initialized with undefined
● Understanding Errors:
● Accessing undeclared variables throws a ReferenceError.
11/30/2024 Dr. Amjad AbuHassan 8
Hoisting var Variables Case 2
● Hoisting Behavior:
● Hoisting moves variable declarations to the top of
their own scope (global or local).
● Declarations are hoisted, but initializations stay in
place.
● Scope Matters:
● Accessing a variable outside its declared scope
results in a ReferenceError.
● Inside the scope, you can access the variable before
its declaration due to hoisting.
11/30/2024 Dr. Amjad AbuHassan 9
Problems Associated with var
● var is not block-scoped (does not respect {} blocks like if, for).
● Variables can be unintentionally redefined within blocks.
● Re-declaring variables can overwrite existing variables, leading to bugs.
11/30/2024 Dr. Amjad AbuHassan 10
Need For let and const
● To address these issues, ES6 introduced let and const.
● Block Scope: Variables declared with let and const are block-scoped.
● Prevent Re-declaration: let and const do not allow re-declaration in the same
scope.
● Result: Enhanced code reliability and reduced bugs.
11/30/2024 Dr. Amjad AbuHassan 11
let Recap
● let is now the recommended way to declare variables.
● Variables declared with let are block-scoped.
11/30/2024 Dr. Amjad AbuHassan 12
Updating and Re-declaring let Variables
● We can update a let variable within its scope.
● We cannot re-declare a let variable within the same scope (SyntaxError)
● We can declare the same variable name in different scopes without errors.
11/30/2024 Dr. Amjad AbuHassan 13
Hoisting let Variables
● Attempting to access a let variable before initialization leads to a ReferenceError
because it's hoisted but uninitialized.
● This behavior is due to the Temporal Dead Zone, a phase where the variable exists
but cannot be accessed.
● Variables declared with var do not have this issue since they are initialized with
undefined upon hoisting.
11/30/2024 Dr. Amjad AbuHassan 14
const Recap
● Variables declared with const hold
constant values within their scope.
● const declarations are block scoped,
similar to let.
● We cannot re-declare a const
variable within the same scope.
● Every const variable must be
initialized when it's declared.
11/30/2024 Dr. Amjad AbuHassan 15
cont Behavior with Objects
● We cannot reassign a const object, but we can modify its properties.
11/30/2024 Dr. Amjad AbuHassan 16
Hoisting const Variables
● Hoisted but Uninitialized: const variables are hoisted to the top of their scope but
are uninitialized, making them inaccessible until their line.
● Temporal Dead Zone: The TDZ prevents access to const variables before
initialization.
● Reference Errors: Attempting to access a const variable before initialization results
in a ReferenceError.
11/30/2024 Dr. Amjad AbuHassan 17
Differences Summary var, let, and const
● Scope:
● var declarations are function scoped or globally scoped.
● let and const are block scoped.
● Updating Variables:
● var variables can be updated and re-declared within their scope.
● let variables can be updated but not re-declared within the same scope.
● const variables can neither be updated nor re-declared.
11/30/2024 Dr. Amjad AbuHassan 18
Differences Summary var, let, and const
● Hoisting Behavior:
● All are hoisted to the top of their scope.
● var variables are initialized with undefined.
● let and const variables are not initialized (Temporal Dead Zone).
● Initialization Requirement:
● var and let can be declared without initialization.
● const must be initialized during declaration.
11/30/2024 Dr. Amjad AbuHassan 19
Arrow Functions vs. Function
Expressions
11/30/2024 Dr. Amjad AbuHassan 20
Introduction
● Functions are essential in JavaScript for encapsulating logic, promoting reusability,
and building modular applications.
● Two primary ways to define functions:
● Arrow Functions
● Function Expressions (Regular Functions)
● Understanding their syntax, behavior, and use cases helps in writing efficient and
maintainable code.
11/30/2024 Dr. Amjad AbuHassan 21
Function Expressions (Regular Functions)
● Definition: Functions defined using the function keyword and assigned to a
variable.
● The function can be used before its declaration due to hoisting.
11/30/2024 Dr. Amjad AbuHassan 22
Handling this Keyword
● this is dynamic and determined by how the function is called.
● Useful for accessing object properties within methods.
11/30/2024 Dr. Amjad AbuHassan 23
Use Cases
● Object Methods: Defining methods that need access to the object's properties via
this.
● Constructor Functions: Creating templates for objects with shared methods.
● Callbacks: Passing functions as arguments where this context may vary.
11/30/2024 Dr. Amjad AbuHassan 24
Function Hoisting Case 1
● Hoisting allows functions to be called before they are defined in the code, ensuring
smooth execution without errors.
● This makes the function (and its logic) accessible even before its declaration line.
11/30/2024 Dr. Amjad AbuHassan 25
Function Hoisting Case 2
11/30/2024 Dr. Amjad AbuHassan 26
Arrow Functions
● Syntax: Concise syntax for writing functions
● Benefits:
● Shorter function expressions
● Lexical this binding
11/30/2024 Dr. Amjad AbuHassan 27
Handling this Keyword
● Lexical this Binding: Inherits this from the enclosing scope.
● Does not have its own this context.
11/30/2024 Dr. Amjad AbuHassan 28
Limitations of Arrow Functions
● Cannot be used as constructors: No new keyword
● No arguments object: Use rest parameters instead
● No this or super binding: Always lexical
11/30/2024 Dr. Amjad AbuHassan 29
Use Cases
● Array Methods: Ideal for concise callbacks in methods like map, filter, and reduce
● Consistent this Context: When the this value should remain the same.
● Short Inline Functions: Perfect for simple, one-liner functions.
11/30/2024 Dr. Amjad AbuHassan 30
Advanced Use of Arrow Functions
● Higher-Order Functions: Pass arrow functions as arguments
● Callbacks:
11/30/2024 Dr. Amjad AbuHassan 31
Arrow Functions vs. Function Expressions
● this Binding:
● Arrow Functions: Use lexical scoping; this is inherited from the parent scope.
● Function Expressions: this is dynamic and depends on the caller.
● Arguments Object:
● Arrow Functions: Do not have their
own arguments object.
● Use rest parameters (...args) if needed.
● Function Expressions: Have access to the arguments object.
11/30/2024 Dr. Amjad AbuHassan 32
Arrow Functions vs. Function Expressions cont
Function Hoisting
● Arrow Functions:
● Not hoisted; cannot be used before they are defined.
● Function Expressions:
● If declared with var, they are hoisted but initialized as undefined.
● If declared with let or const, they are not hoisted.
11/30/2024 Dr. Amjad AbuHassan 33
Anonymous Function
● Definition: An anonymous function is a function without a name.
● Useful for one-time operations or when the function name is unnecessary.
● Cannot call themselves recursively unless assigned to a variable.
● Anonymous functions may appear as <anonymous> in stack traces, making
debugging more challenging.
11/30/2024 Dr. Amjad AbuHassan 34
Use Cases Functions
● Callbacks: Functions passed as arguments to other functions.
● Event Handlers:
● The function passed to addEventListener is anonymous.
● Immediately Invoked Function Expressions (IIFEs): Functions that are executed
immediately after being defined.
11/30/2024 Dr. Amjad AbuHassan 35
Use Cases cont.
● Functional Programming
● Arrow functions are inherently anonymous.
11/30/2024 Dr. Amjad AbuHassan 36
Conclusion
● No One-Size-Fits-All: Both arrow functions and function expressions have their
advantages.
● Choose Based on Needs:
● Use arrow functions for concise syntax and when lexical this is desired.
● Use function expressions when dynamic this or access to arguments is required.
● Prioritize Maintainability: Write clear, consistent, and maintainable code.
● Let the Code Guide You: Your specific coding scenario should dictate the function
type choice.
11/30/2024 Dr. Amjad AbuHassan 37
Modules
11/30/2024 Dr. Amjad AbuHassan 38
Modules
● Modules are a way to organize and encapsulate code into separate files or units.
● Encapsulation: preventing variables and functions from polluting the global
namespace
● Reusability: reuse code across different parts of an apps or even projects
● Maintainability: Breaking code into modules makes it easier to maintain and
understand, especially in large codebases.
● Dependency Management: Modules allow for explicit declaration of
dependencies, making it clear which parts of code rely on others.
11/30/2024 Dr. Amjad AbuHassan 39
Module Systems in JavaScript
● CommonJS Modules
● ES6 Modules (ESM)
● AMD (Asynchronous Module Definition)
● UMD (Universal Module Definition)
● Revealing Module Pattern
11/30/2024 Dr. Amjad AbuHassan 40
CommonJS Modules
● Used primarily in Node.js.
● Modules are loaded synchronously.
11/30/2024 Dr. Amjad AbuHassan 41
ES6 Modules (ESM)
● Introduced in ECMAScript 2015 (ES6).
● Native module system for JavaScript.
● Supports both synchronous and
asynchronous loading.
● Supported in modern browsers and
Node.js (with some configurations).
11/30/2024 Dr. Amjad AbuHassan 42
Exporting from a Module
● Named Exports:
● Allows you to export multiple values.
● Must be imported using the same names.
● Default Exports:
● Allows you to export a single default value.
● Can be imported with any name.
11/30/2024 Dr. Amjad AbuHassan 43
Importing Modules
11/30/2024 Dr. Amjad AbuHassan 44
Modules in Browsers
● Script Type Module:
● To use ES6 modules in browsers, include type="module" in the script tag.html
<script type="module" src="main.js"></script>
● Modules are loaded asynchronously.
● Module scripts are deferred by default, executing after the document has been parsed.
11/30/2024 Dr. Amjad AbuHassan 45
Modules in Node.js
● Historically, Node.js has used CommonJS modules (require and module.exports).
● ES Modules (import and export) are now supported in Node.js.
● To use ES modules, you can:
● Set "type": "module" in package.json.
● Use .mjs extension for your modules.
11/30/2024 Dr. Amjad AbuHassan 46
Dynamic Imports
● Definition: Allow modules to be loaded asynchronously
● Use Cases: Code splitting, lazy loading
11/30/2024 Dr. Amjad AbuHassan 47
Promises and Asynchronous
Programming
11/30/2024 Dr. Amjad AbuHassan 51
Introduction to Asynchronous Programming
● Definition: Allows code to run independently of other tasks.
● Importance: Improves performance and responsiveness.
● Common Use Cases: Network requests, file operations, timers, user interactions.
11/30/2024 Dr. Amjad AbuHassan 52
Callback Functions
● Definition: Functions passed as
arguments to other functions.
● Usage: Executed after a certain
task is completed.
11/30/2024 Dr. Amjad AbuHassan 53
The Callback Hell Problem
● Definition: The issue of
deeply nested callbacks.
● Causes: Asynchronous tasks
depending on each other.
● Challenges: Difficult to
read, maintain, and debug.
11/30/2024 Dr. Amjad AbuHassan 54
Introduction to Promises
● Definition: Objects representing
the eventual completion or failure
of an asynchronous operation.
● States: Pending, Fulfilled,
Rejected.
● Benefits: Simplifies asynchronous
code, improves readability, and
reduces nesting.
11/30/2024 Dr. Amjad AbuHassan 55
Using Promises
● then Method: Handles fulfilled
promises.
● catch Method: Handles rejected
promises.
● Chaining: Allows for sequential
execution of asynchronous operations.
11/30/2024 Dr. Amjad AbuHassan 56
Chaining Promises
● Definition: Sequentially
executing multiple
asynchronous operations.
● Benefits: Improved
readability and
maintainability.
11/30/2024 Dr. Amjad AbuHassan 57
Promisifying Callback Functions
● Definition: Converting callback-based
functions to return promises.
● Benefits: Simplifies the use of
existing callback-based APIs.
11/30/2024 Dr. Amjad AbuHassan 58
Async/Await
● Definition: Syntactic sugar over
promises for writing
asynchronous code.
● Benefits: More readable and
maintainable asynchronous code,
easier error handling.
11/30/2024 Dr. Amjad AbuHassan 59
Handling Multiple Promises
● Promise.all: Waits for all
promises to resolve or any to reject.
● Promise.race: Resolves or
rejects as soon as one promise
resolves or rejects.
● Use Cases: Coordinating multiple
asynchronous operations, handling
the fastest operation.
11/30/2024 Dr. Amjad AbuHassan 60
Promise.any
● Resolves with the first fulfilled promise
11/30/2024 Dr. Amjad AbuHassan 61
Promise. allSettled
● Waits for all promises to settle, regardless of outcome.
11/30/2024 Dr. Amjad AbuHassan 62
Error Handling in Promises
● Chained catch: Catches
errors in the promise
chain.
● Multiple catch Blocks:
● Best Practices: Use
try/catch with
async/await, handle
errors at each step.
11/30/2024 Dr. Amjad AbuHassan 63
Best Practices for Promises and Async/Await
● Avoid nested promises: Use chaining
instead.
● Handle errors properly: Use catch
with promises and try/catch with
async/await.
● Keep functions pure: Avoid side
effects in promise chains.
● Use finally for cleanup:
11/30/2024 Dr. Amjad AbuHassan 64
OR
11/30/2024 Dr. Amjad AbuHassan 65
Closures
11/30/2024 Dr. Amjad AbuHassan 69
Introduction to Closures
● Definition: A closure is a function
that has access to its own scope,
the scope of the outer function,
and the global scope.
● Scope Chain: Closures can access
variables from their own scope
and any outer functions' scopes.
11/30/2024 Dr. Amjad AbuHassan 70
Practical Uses of Closures
● Data Privacy: Encapsulating data and
creating private variables.
● Callback Functions: Preserving data in
asynchronous operations.
11/30/2024 Dr. Amjad AbuHassan 71
Closures for State Management
● Definition: Using
closures to manage
state in JavaScript.
11/30/2024 Dr. Amjad AbuHassan 72
Common Patterns Using Closures
● Module Pattern: Encapsulates private
data and exposes public methods.
11/30/2024 Dr. Amjad AbuHassan 73
Common Patterns Using Closures cont.
● Function Factories: Functions that
return other functions.
11/30/2024 Dr. Amjad AbuHassan 74
Generators in JavaScript
11/30/2024 Dr. Amjad AbuHassan 75
Introduction to Generators
● Definition: Generators are special functions that can pause and resume their
execution.
● Syntax: Defined using the function* keyword.
● Use Cases: Useful for asynchronous operations, lazy evaluation, and implementing
iterators.
11/30/2024 Dr. Amjad AbuHassan 76
Basic Syntax of Generators
● Generator Function Syntax:
● Calling a Generator:
11/30/2024 Dr. Amjad AbuHassan 77
yield Keyword
● Pausing Execution: yield pauses
the generator's execution and
returns a value.
● Resuming Execution: The
generator resumes from where it
left off after yield when next()
is called.
11/30/2024 Dr. Amjad AbuHassan 78
Iterating Over Generators
● Generators as Iterators: Generators are
naturally iterable.
● Using for...of Loop:
● Example with next():
11/30/2024 Dr. Amjad AbuHassan 79
Generator Delegation with yield*
● Delegating Generators: A generator
can delegate part of its operation to
another generator.
11/30/2024 Dr. Amjad AbuHassan 80
Generators and Asynchronous Programming
● Asynchronous Flow Control:
Generators can be combined with
Promises to manage
asynchronous code.
● Concept: Generators allow
pausing and resuming of
asynchronous operations.
11/30/2024 Dr. Amjad AbuHassan 81
Advanced Generator Techniques
● Passing Arguments to next():
11/30/2024 Dr. Amjad AbuHassan 83
Practical Applications of Generators
● Use Cases:
● Lazy Evaluation: Only generating
values when needed.
● State Machines: Modeling state
transitions with generators.
● Asynchronous Control Flow: Managing
async operations in a linear, readable
way.
11/30/2024 Dr. Amjad AbuHassan 84
Handling Errors in Generators
● Using try...catch Inside Generators:
11/30/2024 Dr. Amjad AbuHassan 85
Handling Errors in Generators cont.
● Throwing Errors into Generators:
11/30/2024 Dr. Amjad AbuHassan 86
Generators and Recursion
● Recursive Generators:
Generators can call
themselves recursively.
● Use Cases: Useful for tree
traversal, graph algorithms,
and hierarchical data
processing.
11/30/2024 Dr. Amjad AbuHassan 89
Comparing Generators and Async/Await
● Generators:
● Can pause and resume execution.
● Used for custom iteration, state management, and async control.
● Async/Await:
● Simplifies asynchronous code using Promises.
● Preferred for modern async programming.
● When to Use:
● Generators: When fine-grained control over execution is needed.
● Async/Await: For straightforward async operations.
11/30/2024 Dr. Amjad AbuHassan 91
Higher-Order Functions
11/30/2024 Dr. Amjad AbuHassan 96
Introduction
● A higher-order function is a function that meets at least one of the following
criteria:
● Takes one or more functions as arguments.
● Returns a function as its result.
● By contrast, functions that do neither are called first-order functions.
● Why Use Higher-Order Functions?
● Abstraction, Reusability, Composability, Functional Programming .. Etc.
11/30/2024 Dr. Amjad AbuHassan 97
Functions Taking Other Functions as
Arguments
● JavaScript arrays have several built-in higher-order functions, such as map, filter,
reduce, forEach, and sort.
11/30/2024 Dr. Amjad AbuHassan 98
Functions Taking Other Functions as
Arguments cont.
11/30/2024 Dr. Amjad AbuHassan 99
Functions Returning Other Functions
● The makeMultiplier function returns a new function that multiplies its input by a
specified multiplier.
11/30/2024 Dr. Amjad AbuHassan 100
Common Use Cases (Callbacks)
● A function passed into another function as an argument to be executed later.
11/30/2024 Dr. Amjad AbuHassan 101
Function Composition
● Combining functions to create new functions.
11/30/2024 Dr. Amjad AbuHassan 102
Using Array Methods with Arrow Functions
11/30/2024 Dr. Amjad AbuHassan 103
Higher-Order Functions in Asynchronous
Programming
11/30/2024 Dr. Amjad AbuHassan 104
Currying
● Transforming a function with multiple arguments into a sequence of nested
functions, each taking a single argument.
11/30/2024 Dr. Amjad AbuHassan 105
Example: Creating a Function that Filters
Arrays
11/30/2024 Dr. Amjad AbuHassan 106
this Keyword
11/30/2024 Dr. Amjad AbuHassan 107
Introduction
● The this keyword in JavaScript is a fundamental concept that can be both powerful
and confusing.
● It refers to an object that is executing the current piece of code.
● What Is this in JavaScript?
● Contextual Reference: The value of this is determined by how a function is called
(runtime binding), not where or how the function is defined.
● Dynamic Nature: Unlike some other programming languages, this in JavaScript can
change based on the context in which a function is invoked.
11/30/2024 Dr. Amjad AbuHassan 108
this value
The value of this varies depending on the execution context:
● Global Context (Default Binding)
● Function Context
● Method Context
● Constructor Functions (new Binding)
● Explicit Binding (call, apply, bind)
● Arrow Functions
● Event Handlers
11/30/2024 Dr. Amjad AbuHassan 109
The this Keyword
● Definition: Refers to the
object that is currently
executing the function.
● Context: Determined by how
a function is called.
11/30/2024 Dr. Amjad AbuHassan 110
this in Different Contexts
● Global Context: Refers to the global object (window in browsers).
● Function Context: Depends on how the function is called.
11/30/2024 Dr. Amjad AbuHassan 111
this in Different Contexts cont.
● Constructor Context: Refers to the new instance being created.
11/30/2024 Dr. Amjad AbuHassan 112
Arrow Functions and this
● Lexical this: Arrow functions do
not have their own this context.
● Inherits this: Arrow functions
inherit this from the surrounding
scope.
11/30/2024 Dr. Amjad AbuHassan 113
Handling this in Callbacks
● Using bind: Explicitly bind this to a function.
11/30/2024 Dr. Amjad AbuHassan 114
Handling this in Callbacks cont.
● Using Arrow Functions: Lexically binds this.
11/30/2024 Dr. Amjad AbuHassan 115
