MyCodeNest

Learn JavaScript: Step by Step

From basics to advanced. 56 lessons, in order, each with a code editor to practice in.

Start with lesson 1: What Is JavaScript? Your First JavaScript Program →

Getting Started

  1. What Is JavaScript? Your First JavaScript ProgramLearn what JavaScript is, why websites need it, how to add it with the script tag, how to use the console, and run your first program.Beginner9 min read
  2. JavaScript Variables: let, const and var ExplainedLearn how to store and reuse data with JavaScript variables. Understand let, const and var, when to use each, and how to name variables well.Beginner9 min read
  3. JavaScript Data Types: String, Number, Boolean and MoreLearn the JavaScript data types: string, number, boolean, null, undefined and BigInt, and use typeof to check the type of any value.Beginner9 min read

Data, Operators and Text

  1. JavaScript Operators: Arithmetic, Comparison and LogicalLearn JavaScript operators: do maths, compare values, understand == vs ===, and combine conditions with logical operators like &&, || and !.Beginner10 min read
  2. JavaScript Type Conversion: String, Number and BooleanLearn how to explicitly convert JavaScript values using String(), Number(), Boolean(), parseInt(), and parseFloat().Beginner13 min read
  3. JavaScript Type Coercion: Implicit Conversion ExplainedUnderstand how JavaScript silently converts types with +, -, comparisons and boolean checks, so you can predict results and avoid sneaky bugs.Beginner12 min read
  4. JavaScript Strings: Methods, Indexing and Template LiteralsLearn to create, read, search, slice, clean and format text in JavaScript using string methods and template literals, with practical examples.Beginner10 min read
  5. JavaScript Numbers and Math: Parsing, NaN and RoundingWork with numbers in JavaScript: parse text, handle NaN and Infinity, round and format values, and use the Math object for random numbers and more.Beginner12 min read

Control Flow

  1. JavaScript Conditions: if, else, switch and TernaryLearn to make decisions in JavaScript with if, else if, else, switch and the ternary operator, plus truthy and falsy values, using real examples.Beginner12 min read
  2. JavaScript Loops: for, while, do...while, break and continueLearn how to repeat code in JavaScript with for, while and do...while loops, control them with break and continue, and avoid infinite loops and off-by-one bugs.Beginner13 min read
  3. JavaScript for...of vs for...in: Loop Over Arrays and ObjectsLearn when to use for...of and for...in in JavaScript, how they differ for arrays, strings and objects, and avoid the most common looping mistakes.Beginner11 min read

Functions

  1. JavaScript Functions: Declarations, Parameters and ReturnLearn how to write reusable JavaScript functions: declarations, expressions, parameters, return values and default parameters, with practical examples.Beginner11 min read
  2. JavaScript Arrow Functions: Syntax, Return and Lexical thisLearn arrow function syntax, implicit return, how scope works, and why arrow functions keep this from the surrounding code, with real examples.Beginner12 min read
  3. Important Function Concepts in JavaScriptLearn anonymous and named functions, first-class functions, IIFEs, and pure and impure functions with practical examples.Intermediate20 min read
  4. JavaScript Scope and Hoisting: var, let, const and the TDZUnderstand global, function, block and lexical scope, how hoisting works for var, let, const and functions, and what the temporal dead zone means.Intermediate15 min read
  5. JavaScript Callbacks and Higher-Order Functions ExplainedLearn what callbacks and higher-order functions are, how map, filter and sort use them, and how function composition builds big logic from small functions.Intermediate13 min read
  6. JavaScript Closures ExplainedLearn JavaScript closures step by step: lexical environment, private state, factories, the loop pitfall and real use cases like counters and caching.Intermediate12 min read

Arrays

  1. JavaScript Arrays: Create, Access, Update and LoopLearn JavaScript arrays from scratch: create lists, read and change items by index, use length, loop over them, and work with nested arrays and objects.Beginner12 min read
  2. JavaScript Array Methods: push, pop, slice, splice and MoreLearn the essential array methods push, pop, shift, unshift, slice, splice, concat, includes, indexOf and join, and which ones change your original array.Beginner13 min read
  3. JavaScript map, filter and reduce: Transform Arrays EasilyMaster the three most useful array methods: map to transform, filter to select, and reduce to combine items, plus how to chain them with real examples.Intermediate15 min read
  4. JavaScript find, findIndex, some, every and includesLearn to search and test arrays in JavaScript: find items and positions with find and findIndex, check conditions with some and every, and use includes.Intermediate13 min read
  5. JavaScript Array sort, reverse, flat and flatMap ExplainedLearn to sort arrays correctly in JavaScript with custom compare functions, reverse them, and flatten nested arrays with flat and flatMap, with real examples.Intermediate12 min read

Objects

  1. JavaScript Objects: Properties, Methods and Nested DataLearn to create JavaScript objects, read and change properties, add methods, work with nested objects, and choose between dot and bracket notation.Beginner13 min read
  2. JavaScript Object Methods: keys, values, entries, assign, freezeUse Object.keys, values, entries, assign, freeze and seal to loop over, copy, merge and protect objects in JavaScript, with simple real-life examples.Intermediate11 min read
  3. JavaScript this Keyword: Global, Object, Function and ArrowUnderstand what this means in JavaScript: global scope, object methods, regular functions and arrow functions, and how to fix the lost this problem.Intermediate12 min read
  4. JavaScript Destructuring, Spread and Rest Explained SimplyLearn array and object destructuring, the spread syntax and rest parameters in JavaScript, with simple real-life examples for copying, merging and unpacking.Intermediate15 min read
  5. JavaScript Value vs Reference: Copying and Shallow CopiesUnderstand primitive vs reference values in JavaScript, why copying objects surprises beginners, and how to make shallow and deep copies safely.Intermediate11 min read
  6. JavaScript Optional Chaining (?.) and Nullish Coalescing (??)Learn optional chaining and nullish coalescing in JavaScript to read nested data safely, set defaults correctly, and avoid the || and falsy value trap.Intermediate10 min read

Built-ins and Data

  1. JavaScript Map and Set: Keys, Values and Iteration ExplainedLearn JavaScript Map and Set: create them, add and read items, loop over them, remove duplicates, and know when to use them instead of objects and arrays.Intermediate11 min read
  2. JavaScript WeakMap and WeakSet: Use Cases and LimitationsLearn what WeakMap and WeakSet are in JavaScript, how they relate to garbage collection, their limitations, and practical uses like private data and caching.Advanced11 min read
  3. JavaScript JSON: parse, stringify and Working with JSON DataLearn JSON in JavaScript: JSON.parse, JSON.stringify, replacers, revivers, errors, localStorage and API data, with real examples and common mistakes.Intermediate11 min read
  4. JavaScript Dates and Time: Date Object and FormattingLearn the JavaScript Date object: create dates, read and change parts, use timestamps, format dates, and calculate ages, differences and deadlines.Intermediate15 min read
  5. JavaScript Regular Expressions: Syntax, Groups, PatternsLearn JavaScript regular expressions step by step: character classes, quantifiers, groups, anchors, flags, lookaheads and ready-to-use patterns.Advanced13 min read

Errors, Debugging and Symbols

  1. JavaScript Error Handling: try, catch, finally and throwLearn JavaScript error handling with try, catch, finally and throw. Understand error types, create custom errors, and handle problems in real projects.Intermediate14 min read
  2. JavaScript Strict Mode: use strict, Rules and RestrictionsLearn JavaScript strict mode: how to enable use strict, what it changes, the common restrictions, and why modern code should use it, with clear examples.Intermediate11 min read
  3. JavaScript Debugging and Browser DevTools: A Practical GuideLearn to debug JavaScript with console methods, breakpoints, the debugger statement, call stack, watch, Network and DOM inspection in browser DevTools.Beginner18 min read
  4. JavaScript Symbols: Unique Keys and Symbol.iterator ExplainedLearn JavaScript Symbols: create unique values, use them as hidden object keys, share them with Symbol.for, and build iterables with Symbol.iterator.Advanced14 min read

The DOM

  1. JavaScript DOM Introduction: Nodes, Elements and documentLearn what the DOM is, how the browser turns HTML into a tree of nodes, and how the document object lets JavaScript read and change a web page.Beginner13 min read
  2. JavaScript DOM Selectors: getElementById, querySelector and MoreLearn to select elements with getElementById, getElementsByClassName, getElementsByTagName, querySelector and querySelectorAll, and when to use each one.Beginner12 min read
  3. JavaScript DOM Traversal: parent, children and siblings ExplainedMove around the DOM tree with parentElement, children, childNodes, firstElementChild and sibling properties, using real examples like FAQs and to-do lists.Intermediate12 min read
  4. JavaScript DOM Attributes: getAttribute, setAttribute and MoreLearn to read, change, remove and check HTML attributes with getAttribute, setAttribute, removeAttribute and hasAttribute, plus data attributes and properties.Beginner11 min read
  5. JavaScript textContent, innerText, innerHTML and style ExplainedChange what an element shows with textContent, innerText and innerHTML, and how it looks with style and cssText. Learn the differences and avoid XSS.Beginner13 min read
  6. JavaScript classList: add, remove, toggle and contains ExplainedLearn to control CSS classes from JavaScript with classList.add, remove, toggle, contains and replace, and build dark mode, tabs and menus with real examples.Beginner12 min read
  7. JavaScript createElement, append, prepend and remove ExplainedCreate, insert, move, clone, replace and remove DOM elements with createElement, append, prepend, appendChild, remove, removeChild and replaceChild.Intermediate15 min read

Events

  1. JavaScript Events: click, input, submit, mouse and keyboardLearn what events are and how to react to clicks, typing, form submits, mouse moves and key presses in JavaScriptBeginner15 min read
  2. JavaScript Event Object: target, currentTarget, PropertiesUnderstand the event object: use event.target and currentTarget, read mouse, keyboard and form data, and build features like delegation.Intermediate17 min read
  3. JavaScript addEventListener and removeEventListenerLearn to react to clicks, typing and keys with addEventListener, remove listeners with removeEventListener, and use options like once, passive and signal.Beginner15 min read
  4. JavaScript Event Propagation: Capturing, Target and BubblingUnderstand how events travel through the DOM in three phases, see the order of listeners, and learn when to use stopPropagation and stopImmediatePropagation.Intermediate12 min read
  5. JavaScript Event Delegation: One Listener for Many ElementsLearn event delegation: use bubbling to handle clicks on many or dynamically added elements with one listener, using target, closest and data attributes.Intermediate12 min read
  6. JavaScript preventDefault(): Stop Links and Forms Default ActionsLearn what default browser actions are and how event.preventDefault() lets you control link clicks, form submits, keys and right-clicks, with real examples.Beginner12 min read

Browser, Input and Forms

  1. JavaScript Input and Output: alert, prompt, confirm and consoleLearn how JavaScript talks to users with alert, prompt and confirm, and how to debug with console.log, console.table, console.error and other console methods.Beginner15 min read
  2. JavaScript BOM: window, location, history, navigatorLearn the Browser Object Model: use window, location, history, navigator and screen to read URLs, go back, detect offline status and measure screens.Intermediate16 min read
  3. JavaScript Forms and Validation: Read, Check and Show ErrorsLearn how JavaScript reads form controls, validates user input and shows clear custom error messages before submission.Beginner7 min read
  4. JavaScript FormData: Collect Form Data for APIsLearn how to collect form values with FormData, read entries, build request data and send forms to APIs.Beginner6 min read
  5. JavaScript Browser Storage: localStorage and sessionStorageLearn how to save, read, update and remove browser data with localStorage, sessionStorage and JSON.Beginner6 min read
  6. JavaScript URL and URLSearchParams: Build and Read URLsLearn to create URLs, read query parameters, update search values and build API-friendly URLs with URLSearchParams.Beginner5 min read