Pen2Pencil

Loading course…

JavaScript — Full Course Syllabus

A thorough exploration of JavaScript for building dynamic web applications.

  1. 1. VariablesUnderstanding how to declare and use variables in JavaScript.
  2. 2. Data TypesAn overview of the different data types available in JavaScript.
  3. 3. OperatorsIntroduction to various operators used in JavaScript for manipulation.
  4. 4. Control FlowHow to use conditional statements to control the flow of execution.
  5. 5. FunctionsDefining and invoking functions in JavaScript.
  6. 6. ArraysIntroduction to arrays and their basic operations in JavaScript.
  7. 7. Array.prototype.push()Adding one or more elements to the end of an array.
  8. 8. Array.prototype.pop()Removing the last element from an array and returning that element.
  9. 9. ObjectsUnderstanding objects as collections of key-value pairs.
  10. 10. Array.prototype.forEach()Executes a provided function once for each array element.
  11. 11. Array.prototype.shift()Removes the first element from an array and returns that element.
  12. 12. Array.prototype.unshift()Adds one or more elements to the beginning of an array and returns the new length of the array.
  13. 13. Array.prototype.includes()Determines whether an array includes a certain value among its entries, returning true or false.
  14. 14. String.prototype.charAt()Returns the character at a specified index in a string.
  15. 15. String.prototype.includes()Determines whether one string may be found within another string, returning true or false as appropriate.
  16. 16. String.prototype.split()Splits a String object into an array of strings by separating the string into substrings.
  17. 17. String.prototype.trim()Removes whitespace from both ends of a string and returns a new string, without modifying the original string.
  18. 18. String.prototype.toUpperCase()Returns the calling string value converted to uppercase.
  19. 19. String.prototype.toLowerCase()Returns the calling string value converted to lowercase.
  20. 20. Array.prototype.concat()Used to merge two or more arrays into a new array.
  21. 21. Array.prototype.join()Joins all elements of an array into a string.
  22. 22. Array.prototype.reverse()Reverses the elements of an array in place.
  23. 23. Array.prototype.fill()Fills all the elements of an array from a start index to an end index with a static value.
  24. 24. Array.prototype.indexOf()Returns the first index at which a given element can be found in the array, or -1 if it is not present.
  25. 25. Array.isArray()Determines whether the passed value is an Array.
  26. 26. Object.prototype.hasOwnProperty()Returns a boolean indicating whether the object has the specified property as its own property.
  27. 27. String.prototype.concat()Combines two or more strings and returns a new string.
  28. 28. String.prototype.indexOf()Returns the index of the first occurrence of a specified value in a string.
  29. 29. String.prototype.trimStart()Removes whitespace from the beginning of a string.
  30. 30. String.prototype.trimEnd()Removes whitespace from the end of a string.
  31. 31. Identifiers and Reserved WordsWhat valid identifiers are, naming rules, and reserved keywords in JavaScript.
  32. 32. let DeclarationDeclaring block-scoped mutable variables using let.
  33. 33. const DeclarationDeclaring block-scoped constants with immutable bindings using const.
  34. 34. Console and Debugging Basics (console.log, breakpoints)Using console methods and debugger tools to inspect and step through code.
  35. 35. REPL and Interactive ConsolesUsing the runtime REPL for quick experiments and exploration of language features.
  36. 36. Object.prototype.values()Returning an array of a given object's own enumerable property values.
  37. 37. PromisesUnderstanding promises for handling asynchronous operations.
  38. 38. Promise.prototype.then()Adding fulfillment and rejection handlers to a promise, and returning a new promise.
  39. 39. Arrow FunctionsUsing arrow functions as a concise way to write function expressions.
  40. 40. ScopeExploring variable scope and its implications in JavaScript.
  41. 41. HoistingUnderstanding how hoisting works in JavaScript.
  42. 42. Array.prototype.filter()Creating a new array with all elements that pass the test implemented by the provided function.
  43. 43. Array.prototype.reduce()Executing a reducer function on each element of the array, resulting in a single output value.
  44. 44. Object.prototype.keys()Returning an array of a given object's own enumerable property names.
  45. 45. Event HandlingUnderstanding how to handle events in JavaScript.
  46. 46. Function ExpressionsUnderstanding function expressions and their usage.
  47. 47. String.prototype.substring()Returns the part of the string between the two specified indices.
  48. 48. String.prototype.padStart()Pads the current string with another string (the second argument) until the resulting string reaches the given length.
  49. 49. Object.fromEntries()Transforms a list of key-value pairs into an object.
  50. 50. String.prototype.replace()Returns a new string with some or all matches of a pattern replaced by a replacement.
  51. 51. Object.assign()Copies all enumerable own properties from one or more source objects to a target object.
  52. 52. Array.prototype.slice()Returns a shallow copy of a portion of an array into a new array object.
  53. 53. Array.prototype.flatMap()Maps each element using a mapping function, then flattens the result into a new array.
  54. 54. Array.prototype.findIndex()Returns the index of the first element in the array that satisfies the provided testing function.
  55. 55. Array.from()Creates a new, shallow-copied Array instance from an array-like or iterable object.
  56. 56. Object.create()Creates a new object with the specified prototype object and properties.
  57. 57. Array.prototype.sort()Sorts the elements of an array in place and returns the sorted array.
  58. 58. Array.prototype.some()Tests whether at least one element in the array passes the test implemented by the provided function.
  59. 59. Array.prototype.every()Tests whether all elements in the array pass the test implemented by the provided function.
  60. 60. Array.prototype.flat()Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
  61. 61. Object.defineProperty()Defines a new property directly on an object, or modifies an existing property on an object.
  62. 62. String.prototype.repeat()Returns a new string with a specified number of copies of the string.
  63. 63. String.prototype.endsWith()Determines whether a string ends with the characters of a specified string.
  64. 64. String.prototype.match()Retrieves the matches when matching a string against a regular expression.
  65. 65. Object.entries()Returns an array of a given object's own enumerable string-keyed property [key, value] pairs.
  66. 66. Array.prototype.find()Returns the value of the first element in the array that satisfies the provided testing function.
  67. 67. String.prototype.slice()Extracts a section of a string and returns it as a new string, without modifying the original string.
  68. 68. Array.prototype.splice()Changes the contents of an array by removing or replacing existing elements and/or adding new elements.
  69. 69. Error HandlingTechniques for handling errors in JavaScript, including try/catch.
  70. 70. DOM ManipulationHow to interact with and manipulate the Document Object Model (DOM).
  71. 71. ESModule/CommonJS interopInterop concerns and compiler flags to manage mixed module systems during migration.
  72. 72. String.prototype.startsWith()Determines whether a string begins with the characters of a specified string.
  73. 73. Feature flagsUsing feature flags to control rollout of frontend features and coordinate cross-team releases.
  74. 74. Array.prototype.map()Creating a new array with the results of calling a provided function on every element.
  75. 75. Import mapsBrowser import maps for controlling module resolution and enabling shared runtime modules in microfrontends.
  76. 76. Web Components for integrationUsing standards-based Web Components as a contract for embedding microfrontends.
  77. 77. iFrame integration patternEmbedding microfrontends via iframes and the associated isolation and communication tradeoffs.
  78. 78. Server-side compositionServer-side HTML composition techniques to assemble microfrontends before delivery to the browser.
  79. 79. Routing isolationTechniques to isolate and coordinate routing between host app and microfrontends (routing boundaries, history strategies).
  80. 80. Contract-driven API for frontendsUsing clear public APIs/events for microfrontends to communicate while preserving encapsulation.
  81. 81. Design token distributionManaging and distributing design tokens (colors, spacing, typography) as atomic packages.
  82. 82. API design sketchingDocumenting high-level API endpoints, request/response shapes, and authentication needs.
  83. 83. Data model sketchingDesigning the app's core data entities and their relationships at a conceptual level.
  84. 84. Choosing third-party dependenciesEvaluating and selecting libraries or services that meet project needs without overloading complexity.
  85. 85. Modular code organizationStructuring code into small, single-responsibility modules or components.
  86. 86. Static type checking (optional) for JavaScriptIntroducing optional static type checks (e.g., TypeScript or JSDoc) to reduce runtime errors.
  87. 87. Authentication sketch for demosImplementing a minimal authentication flow suitable for a demo or portfolio project.
  88. 88. String.prototype.padEnd()Pads the current string with another string (the second argument) until the resulting string reaches the given length.
  89. 89. Object.getPrototypeOf()Returns the prototype of the specified object.
  90. 90. Array.prototype.at()Returns the element at the specified index, allowing for negative indexing.
  91. 91. Binary and Text Encodings (UTF-8 basics)Understanding character encodings and handling binary/text data correctly.
  92. 92. Big-O awareness for common operationsTime/space complexity expectations for common JS operations like array push, lookup, and iteration.
  93. 93. Async/AwaitUsing async/await syntax for working with asynchronous code more easily.
  94. 94. ModulesUsing modules to encapsulate code and manage dependencies.
  95. 95. ClassesUnderstanding how to create and use classes in JavaScript.
  96. 96. Class InheritanceUsing inheritance to create subclasses in JavaScript.
  97. 97. Object.freeze()Freezes an object, preventing new properties from being added to it and marking all existing properties as read-only.
  98. 98. Performance OptimizationLearn techniques to optimize the performance of React applications.
  99. 99. Intl API basicsUsing ECMAScript Internationalization APIs for formatting numbers, dates, and strings.