About the course
JavaScript is the foundational language for modern web development and is increasingly used in other domains via Node.js. With the evolution of ECMAScript standards (ES6+), the language has gained powerful features that enable developers to write cleaner, more efficient, and more maintainable code. This 4-day workshop provides experienced software developers, potentially new to JavaScript, with a practical introduction to the core modern JavaScript language features, essential paradigms, and the tooling necessary for building modern applications, particularly in a frontend context.
The course begins by exploring the modern JavaScript ecosystem, setting up your development environment (Node.js, NPM), and reviewing language fundamentals assuming a programming background. You will then dive deep into essential ECMAScript 2015 (ES6) and later features, mastering syntax like arrow functions, destructuring, and the spread operator. A significant focus is placed on understanding key JavaScript concepts such as scope, closure, and the complexities of the this keyword, which are crucial for writing robust JavaScript code.
You will explore functional programming concepts in JavaScript using array methods (map, filter, reduce), and object-oriented patterns including ES6 classes and inheritance. The course provides solid coverage of asynchronous programming, progressing from callbacks to mastering Promises and the async/await syntax for handling operations like data fetching efficiently. You will also gain practical experience interacting with the Browser Document Object Model (DOM) and understand how to structure code using ES Modules. Key tooling essential for modern frontend development, such as NPM, module bundlers, and transpilers, is introduced, alongside the fundamentals of writing unit tests using a testing framework.
By covering the core modern language features, essential async patterns, browser interaction, and necessary tooling, this workshop provides the fundamental knowledge and practical skills with JavaScript that serve as a great starting point for further exploration of topics such as TypeScript, backend development with Node.js, and popular frameworks like React and Angular.
-
- Understand the modern JavaScript ecosystem, including different runtimes and build tools.
- Use fundamental JavaScript language features (variables, data types, arrays, objects, functions) and understand copy by value/reference.
- Apply modern ECMAScript (ES6+) syntax features (let, const, arrow functions, destructuring, spread/rest, template literals).
- Understand and apply concepts of scope, closure, and the this keyword in JavaScript, along with bind, call, and apply.
- Use functional programming techniques with array iteration methods (map, filter, reduce, etc.).
- Implement object-oriented patterns using ES6 classes and inheritance.
- Master asynchronous programming with Promises and the async/await syntax.
- Interact with and manipulate the Browser Document Object Model (DOM) and handle browser events.
- Structure code using ECMAScript Modules (import/export).
- Use essential tools like Node.js, NPM, module bundlers, and transpilers for modern JavaScript development.
- Write and run basic unit tests using a JavaScript testing framework.
- Understand common JavaScript design patterns and principles for writing maintainable code.
-
This 4-day workshop is designed for experienced software developers who are new to the JavaScript language or need to update their skills to Modern ECMAScript (ES6+) for use with contemporary frameworks like React, Angular, or Vue. It is ideal for:
Developers transitioning from other languages (C#, Java, Python etc.) to JavaScript development.
Developers with some older JavaScript experience looking to learn modern practices.
Developers preparing to work with modern front-end frameworks.
-
Participants should have:
Solid understanding of programming concepts and experience developing applications in at least one other software development language (e.g., C#, Java, Python, PHP).
Familiarity with web concepts (HTTP, HTML basics) is beneficial.
No prior experience with JavaScript is required, though some prior exposure may be useful.
We can customise the training to match your team's experience and needs - with more time and coverage of fundamentals for new developers, or a swifter pace / focus on specific topics for experienced coders. -
This Modern JavaScript course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
JavaScript Fundamentals and Getting Started
The JavaScript Ecosystem Today: Overview of Modern ECMAScript (ES6+), different JavaScript runtimes (Browser, Node.js), and the role of frameworks and build tools.
Setting Up Your Development Environment: Installing Node.js and NPM, understanding package.json, using a modern code editor (e.g., VS Code).
Language Fundamentals Review (Assuming Programming Background):
Variables (var, let, const) and Data Types (primitives like string, number, boolean, null, undefined, symbol, bigint; objects).
Working with Arrays and Objects (literals, accessing properties/elements).
Functions (declarations, expressions).
Understanding Copy by Value vs. Copy by Reference for different data types.
Truthy and Falsy values and type coercion.
Introduction to the Browser Environment: The window and document objects, basics of running JS in the browser console and script tags.
Hands-On Labs: Setting up the development environment, basic JS coding exercises, working with variables, data types, arrays, objects, functions, executing JS in the browser.
Modern ECMAScript (ES6+) Syntax and Scope
Key ECMAScript 2015 (ES6) and onwards to today:
Block Scoping with let and const.
Arrow Functions (=>): Syntax, benefits, and differences from regular functions.
Template Literals for easy string interpolation.
Destructuring Assignment for Arrays and Objects.
The Spread (...) and Rest (...) Operators.
Default Function Parameters.
Enhanced Object Literals (shorthand properties, method definitions).
Understanding Scope in JavaScript: Global scope, Function scope (var), and Block scope (let, const).
Closure: How closures work and their practical use cases (e.g., data privacy, factory functions).
The this Keyword: Understanding its dynamic binding in different contexts (global, method, constructor, explicit, arrow function).
Using bind, call, and apply methods to control this.
Immediately Invoked Function Expressions (IIFEs) - historical context and uses.
Hands-On Labs: Refactoring code using modern ES6+ syntax, exercises exploring different types of scope and closure, practicing this and bind.
Data Manipulation and Object-Oriented Programming
Functional Programming Concepts in JavaScript:
Pure Functions: Principles and benefits.
Key Array Iteration Methods: map, filter, reduce.
Other useful Array methods (forEach, find, findIndex, some, every).
Chaining Array Methods for efficient data transformation pipelines.
Object-Oriented Patterns in JavaScript:
Understanding JavaScript's Prototype-based nature (brief overview).
Constructor Functions and the new keyword.
ES6 Classes: Syntactic sugar for creating constructor functions and managing prototypes. Defining classes, constructors, methods, getters/setters.
Class Inheritance with extends and super.
Understanding Modules (import/export): Introduction to ES Module syntax.
Hands-On Labs: Using map, filter, and reduce to transform data, chaining array methods, implementing simple classes and inheritance using ES6 syntax.
Asynchronous JavaScript
Introduction to Asynchronous Programming: Why it's essential in JavaScript (handling operations that take time without blocking).
Callbacks: Understanding the callback pattern (brief recap/context).
The "Callback Hell" problem.
Promises:
Understanding Promises as objects representing the eventual completion or failure of an asynchronous operation.
Creating and consuming Promises (.then(), .catch(), .finally()).
Chaining Promises for sequential async operations.
Using static Promise methods (Promise.all(), Promise.race()).
Async/await:
Simplifying asynchronous code with the async function keyword.
Waiting for Promises to resolve with the await operator.
Error Handling in async functions using try...catch.
Combining async/await with Promise methods (Promise.all() with await).
Practical Async Examples: Fetching data from a web API.
Hands-On Labs: Working with Promises, converting callback-based code to Promises, using async/await to consume Promises, implementing data fetching from a public API asynchronously.
Working with the Browser Document Object Model (DOM)
The Browser Runtime Environment: window and document objects.
Introduction to the Document Object Model (DOM): Understanding the tree structure of a web page.
Selecting DOM Elements: Using methods like getElementById, querySelector, querySelectorAll.
Manipulating DOM Elements: Changing content (textContent, innerHTML), modifying attributes, managing CSS classes and styles.
Handling Events: Attaching event listeners (addEventListener), understanding the Event object, common event types (click, submit, input etc.).
Event Propagation (Bubbling, Capturing - brief).
Event Delegation.
(Optional/Brief): Introduction to common Browser Web APIs (e.g., localStorage, sessionStorage, setTimeout, setInterval).
Hands-On Labs: Scripting the DOM to select elements, change content/styles, add and handle events, implement basic event delegation.
Modules, Tooling, and Basic Testing
ECMAScript Modules in Practice:
Defining and Exporting (export) module members (variables, functions, classes).
Importing (import) members from other modules.
Structuring code into modules.
Managing dependencies between modules.
The Modern JavaScript Toolchain Overview.
NPM (Node Package Manager): Using NPM for managing project dependencies (package.json), installing packages.
Introduction to Module Bundlers (e.g., Webpack, Parcel, esbuild): Why they are needed for frontend development, basic concepts (bundling modules, handling assets - high-level).
Introduction to Transpilers (e.g., Babel): Why transpile modern JavaScript code (e.g., ES6+) for compatibility with older browsers or environments.
Using Build Scripts defined in package.json to automate tasks.
JavaScript Testing Fundamentals: Why automated testing is important (unit, integration, end-to-end - concepts).
Unit Testing with JavaScript: Introduction to a testing framework (e.g. Jest or Jasmine - let us know your preference). Writing and running basic unit tests for JavaScript functions or modules.
Hands-On Labs: Working with ES Modules across multiple files, using NPM to manage project dependencies, setting up a basic build process using a bundler/transpiler (guided lab), writing and running basic unit tests for simple functions.
Design Patterns, Framework Context, and Summary
Relevant JavaScript Design Patterns: Discussion of patterns commonly applied in JavaScript (e.g., Module pattern revisited, Factory, Observer pattern - linking to events/async).
Principles for writing clean, maintainable, and scalable JavaScript code.
Review of core Modern JavaScript concepts covered.
Connecting to Frameworks: How the learned concepts (ES6+, async, modules, this, patterns) are applied and utilised in popular frameworks like Angular, React, and Vue (conceptual discussion to bridge to next steps).
Q&A
Optional Topics for Custom Courses:
These topics provide deeper dives into specific libraries or paradigms that extend beyond the core fundamentals. Including them will extend the course duration beyond 4 days and may require additional prerequisites.
RxJS: Reactive Extensions For JavaScript:
Adopting the Reactive way of thinking and programming with asynchronous data streams.
Subscribing to a stream of events over time.
Transforming and combining streams of data with operators (map, filter, etc.).
Applying Reactive ideas to real-world problems.
Using RxJS in the context of frameworks like Angular and React (briefly).
Redux:
Understanding the need for predictable state management in complex applications.
Isolating application state with Redux: Core concepts (State, Actions, Reducers, Store).
The Redux pattern and data flow.
Using Redux in the context of frameworks (brief conceptual mention of integration).
-
MDN Web Docs (JavaScript Guide and Reference): The comprehensive, canonical resource for JavaScript. https://developer.mozilla.org/en-US/docs/Web/JavaScript
Node.js Documentation: Official documentation for the JavaScript runtime environment. https://nodejs.org/en/docs/
NPM Documentation: Official documentation for the Node package manager. https://docs.npmjs.com/
Babel Documentation: Official documentation for the popular JavaScript transpiler. https://babeljs.io/docs/
Jest Documentation: Official documentation for a widely used JavaScript testing framework. https://jestjs.io/docs/
Trusted by
