Advanced JavaScript programming I.

This course introduces participants to advanced client-side programming techniques using JavaScript.

Participants will gain a deeper understanding of how JavaScript works under the hood, learn to use advanced language features, and develop the skills to build complex, professional web applications.

By understanding the principles behind how JavaScript works, participants will be able to write clean, efficient, and maintainable code.

This course is designed for people who:

• Already have a basic knowledge of JavaScript
• Want to gain a deeper understanding of how the language works
• Aspire to become professional JavaScript developers
• Want to build complex web applications
• Want to understand how the JavaScript engine works
• Want to learn advanced programming techniques
• Are planning a career in front-end or full-stack development

What will you be able to do after the course?

• Explain how the JavaScript engine works
• Use advanced array methods with confidence
• Work with and restructure complex data structures
• Understand browser storage options (localStorage and sessionStorage)
• Write and use regular expressions
• Apply best practices for exception handling
• Write modular code
• Explain how the this keyword behaves in different contexts
• Use advanced techniques for working with objects

The course aims to help participants develop professional-level JavaScript skills by understanding how the language works under the hood, mastering advanced programming techniques, and learning to write clean, efficient, and scalable code.

The course goes beyond ready-made recipes to explore how the JavaScript engine works, how asynchronous programming works, and how the this keyword behaves in different contexts. By the end of the course, participants will have the knowledge to develop complex, enterprise-grade applications and take on senior developer roles.

Advanced Variables

• Hoisting with var
• Scope of var declarations
• Variable shadowing with var and memory leaks
• Nested scopes
• let and the temporal dead zone (TDZ)
• Redeclaration restrictions for let
• let and block scope
• Using let in if-else statements
• Using let in switch statements
• Using let in for loops
• Adding event listeners in loops with and without let
• Polyfills and transpilers for compatibility with older browsers
• Using const to declare constants
• Freezing objects with Object.freeze()
• The memory lifecycle

Advanced Functions

• Different ways to define functions
• Callback functions
• Closures and lexical scope
• Immediately invoked function expressions (IIFEs)
• Using IIFEs and blocks to create isolated scopes
• Block-scoped functions
• Default parameters
• Using objects as default parameter values
• Arrow function basics
• Returning object literals from arrow functions
• Using arrow functions as callbacks
• Using arrow functions as object methods
• Using arrow functions inside object methods (this binding)
• The heap and the stack in memory management

Advanced Arrays

• forEach() (iterating over elements)
• map() (transforming elements)
• filter() (selecting elements that meet a condition)
• reduce() (combining elements into a single result)
• A functional programming example
• flat() (flattening nested arrays)
• flatMap() (mapping and flattening in one step)
• find(), findIndex(), some(), and every() (searching and testing array elements)
• Typed arrays

Advanced Strings

• Template literal basics
• Using template literals with array map() to generate HTML dynamically
• String methods (startsWith(), endsWith(), includes(), repeat(), padStart(), padEnd(), trimStart(), and trimEnd())
• Multiline strings
• Spread syntax
• Rest parameters (collecting remaining arguments)
• Tagged template literals

Advanced Number Handling

• isFinite() (checking whether a value is finite)
• isNaN() (checking for NaN)
• isSafeInteger() (checking whether a value is a safe integer)
• Binary and octal numeric literals
• Math.sign() (determining the sign of a number)
• Math.trunc() (removing the fractional part of a number)
• BigInt (working with large integers)

Restructuring Data

• Array destructuring (unpacking array elements into variables)
• Swapping values without a temporary variable
• Object destructuring (unpacking object properties)
• Renaming variables during object destructuring
• Using default values in object destructuring
• Combining variable renaming and default values in object destructuring

The Date Object

• Creating dates with new Date()
• Useful Date methods (Date.parse(), Date.now(), and Date.UTC())
• Using getter methods to retrieve date components
• Using UTC getter methods to retrieve date components in UTC
• Using setter methods to update date components
• A practical example of working with dates

Additional JavaScript Features

• for…of (looping over iterable objects)
• Intl.Collator (locale-aware string sorting)
• Intl.NumberFormat (locale-aware currency formatting)
• Intl.DateTimeFormat (locale-aware date and time formatting)
• Creating symbols as unique identifiers
• Symbol.for() and the global symbol registry
• Using symbols as object property keys
• Storing and accessing key-value pairs with Map (get(), set(), and has())
• Removing entries and iterating over keys and values with Map (delete(), keys(), and values())
• WeakMap and weakly held keys
• Working with unique values in Set (add(), size, entries(), values(), and has())
• Removing values and advancing Set iterators (delete(), clear(), and iterator.next())
• WeakSet and weakly held values
• Object property shorthand
• Shorthand syntax for object methods
• Computed property names
• Dynamic object properties

Data Storage Options

• Managing browser cookies
• Using a cookie handler object to manage cookies
• Client-side storage with localStorage and sessionStorage

The JavaScript Module System

• Exporting and importing module members
• Renaming exports with export … as
• Renaming imports with import … as
• Importing all exports into a namespace with import * as
• Default exports with export default
• Combining default and named exports

• HTML5 fundamentals (document structure, elements, and attributes)
• CSS fundamentals (selectors, properties, and the box model)
• JavaScript syntax and basic language features
• Basic use of variable declarations (var, let, and const)
• Working with strings, numbers, booleans, null, undefined, objects, and arrays
• Operators (arithmetic, comparison, and logical operators)
• Control flow statements (if-else and switch)
• Loops (for, while, and do-while)
• Defining and calling functions
• Array basics (creating arrays, accessing elements by index, and using the length property)
• Object basics (properties and methods)
• Basic DOM manipulation (getElementById, querySelector, and innerHTML)
• Basic event handling (addEventListener and onclick)
• Familiarity with the JSON format
• Using browser developer tools (the console and debugger)
• Using a text editor or an IDE

The course assumes that participants have a solid grasp of JavaScript fundamentals and can build simple interactive web pages. It focuses on advanced topics such as how the JavaScript engine works, advanced language constructs, functional programming, and ES6+ features. A working knowledge of variables, functions, loops, and DOM manipulation is essential to follow the course.