Skills
JavaScript

JavaScript

JS01 - JavaScript Basic Syntax

Complexity

Junior

Timeframe

3h

Summary

You should understand all basic syntax features of JavaScript.

Skill Breakdown

You should understand how to execute JavaScript code in the browser and in Node.js.

You should understand the following things about variables and data types:

  • declaring variables with var, let and const
  • why you should never use var and prefer let instead
  • important primitive data types:
    • number
    • boolean
    • string
    • undefined

You need to understand how to form expressions using operators and be familiar with the following operators:

  • assignment operator =
  • arithmetic operators +, -, *, /, **, %
  • comparison operators ==, ===, !=, !==, <, <=, >, >=
  • logical operators &&, ||, !
  • nullish coalescing operator ??
  • shorthand assignment operators +=, -=, *=, /=, **=, %=
  • postfix increment operator ++ and postfix decrement operator --
  • string concatenation operator +
  • ternary operator ? :
  • typeof operator

You should understand why === is always preferrable over ==. You also need to know how to group expressions using parentheses. You should also be aware that working with real numbers can lead to precision problems.

You need to know how to use template strings.

You should understand the basic syntax behind arrays:

  • constructing arrays
  • accessing array elements
  • changing array elements
  • retrieving the length of an array
  • array destructuring
  • using the spread syntax to spread arrays

You should understand the basic syntax behind objects:

  • constructing objects
  • accessing properties with the dot notation and the bracket notation
  • nesting objects
  • object destructuring
  • using the spread syntax to spread objects

You should understand the difference between assigning an array/object and copying an array/object.

You should understand the following conditionals:

  • if...else statement
  • switch statement

You should also be aware of the concept of truthy and falsy values.

You should understand the following loops:

  • while loops
  • do...while loops
  • regular for loops

You should also be able to use the break and the continue statements to change control flow.

You should understand the following things about functions:

  • function definitions
  • function expressions
  • function parameters
  • the return keyword
  • function calls
  • anonymous functions
  • arrow functions
  • default parameters
  • rest parameters

You should understand the concepts of instance methods and static methods.

You should understand the concept of scope and be familiar with the following scopes:

  • block scope
  • function scope

You should know how to throw error using the throw statement and how to catch errors using the try...catch statement.

Required Resources

Getting Things Done in Next.js:

Optional Resources

MDN JavaScript Guide:

Eslint Rules:

MDN JavaScript Reference & Glossary:

JS02 - JavaScript Basic Data Structures

Complexity

Junior

Timeframe

3h

Summary

You should understand the most important JavaScript data structures (strings, arrays, objects, maps and sets) in depth.

Skill Breakdown

You should understand strings beyond the basic familiarity that is required in JS01:

  • string literals (already covered in JS01)
  • concatenating strings with + (already covered in JS01)
  • getting string length using the length property (already covered in JS01)
  • accessing string characters with charAt and []
  • important string methods:
    • concat
    • includes
    • startsWith
    • endsWith
    • indexOf
    • lastIndexOf
    • substring
    • toLowerCase
    • toUpperCase
    • trim
    • split

You should understand arrays beyond the basic familiarity that is required in JS01:

  • array literals (already covered in JS01)
  • accessing array length using the length property (already covered in JS01)
  • accessing array elements using [] (already covered in JS01)
  • important array methods:
    • Array.isArray
    • Array.from
    • Array.of
    • concat
    • includes
    • indexOf
    • lastIndexOf
    • join
    • push
    • pop
    • reverse
  • nested arrays and the flat method

You should understand how to use the for...of loop to iterate over arrays and strings.

You should understand objects beyond the basic familiarity that is required in JS01:

  • object literals (already covered in JS01)
  • working with object properties (already covered in JS01)
  • important object methods:
    • Object.keys
    • Object.values
    • Object.entries

You should understand how to use the for...in loop to over the properties of an object.

You should understand maps:

  • creating maps
  • getting map size using the size property
  • important map methods:
    • set
    • get
    • delete
    • has

You should understand the differences between maps and regular objects.

You should understand sets:

  • creating sets
  • getting set size using the size property
  • important set methods:
    • add
    • delete
    • has

Required Resources

Getting Things Done in Next.js:

Optional Resources

MDN JavaScript Guide:

MDN JavaScript Reference & Glossary:

JS03 - JavaScript Functional Programming

Complexity

Junior

Timeframe

3h

Summary

You should be understand how to use map, filter, reduce and other higher-order functions to write programs in a functional style.

Skill Breakdown

You should understand the theoretical concepts behind functional programming:

  • pure functions
  • immutability
  • higher-order functions

You should be able to use important higher-order functions on arrays:

  • map
  • filter
  • reduce
  • find
  • findIndex
  • every
  • some
  • forEach
  • sort

Required Resources

Getting Things Done in Next.js:

Optional Resources

MDN JavaScript Guide:

MDN JavaScript Reference & Glossary:

JS04 - JavaScript Asynchronous Programming Basics

Complexity

Junior

Timeframe

4h

Summary

You should be understand the basics behind promises and async/await. You should know how to correctly send a network request.

Skill Breakdown

You should understand the main idea behind asynchronous programming (handle a long-running operation without blocking the program).

You should understand promises.

You should understand the different states of promises:

  • pending
  • fulfilled
  • rejected
  • settled

You should understand promise chaining and how to use the then method.

You should know how to catch errors using the catch method.

You should know how to correctly send a network request using fetch (with the correct error handling).

You should understand the async/await and how to translate promise chains into async/await code.

Required Resources

Getting Things Done in Next.js:

Optional Resources

MDN JavaScript Guide:

MDN JavaScript Reference & Glossary:

JS05 - JavaScript ES Modules

Complexity

Junior

Timeframe

1h

Summary

You should understand ESM and how to structure programs in an efficient manner.

Skill Breakdown

You should understand how to use named exports and imports:

  • creating a named export using the export keyword
  • creating named exports using export lists
  • creating a named import using the import keyword
  • renaming named imports

You should understand how to use default exports and imports:

  • creating a default export using the export keyword
  • creating a default import using the import keyword

You should understand how to use namespace imports.

You should understand how to setup ESM in both the browser and Node.js.

You should understand how to create JavaScript packages, how to work with dependencies and how to create scripts.

Required Resources

Getting Things Done in Next.js:

Optional Resources

MDN JavaScript Guide:

MDN JavaScript Reference & Glossary:

JS06 - JavaScript Practical Coding

Complexity

Junior

Timeframe

1h

Summary

You should be able to apply basic guidelines to write readable and maintainable code:

  • use meaningful names for variables and functions
  • simplify complex functions by using small helper functions
  • make functions reusable
  • utilize language featues to write good code
  • avoid deep nesting
  • avoid repetition
  • think about edge cases

You should understand the basic principles of keeping your code maintainable as the project grows.

Required Resources

Getting Things Done in Next.js:

Optional Resources

There are no optional resources for this skill.

JS07 - JavaScript Classes

Complexity

Middle

Timeframe

3h

Summary

You should understand how classes work and know about the types of class elements along with their modifiers.

Skill Breakdown

You should understand how to write create new classes using class declarations and class expressions.

You should understand how to write constructors and to create objects from a class.

You should know how to create instance methods on classes.

You should understand fields:

  • public fields
  • private fields
  • accessor fields with get and set

You should understand static properties:

  • static methods
  • static fields

You should know how to create static initialization blocks.

Required Resources

MDN JavaScript Guide:

Optional Resources

MDN JavaScript Reference & Glossary:

JS08 - JavaScript Inheritance

Complexity

Middle

Timeframe

3h

Summary

You should understand inheritance and the prototype chain.

Skill Breakdown

You should understand the basic idea behind inheritance.

You should know how to create and work with derived classes:

  • creating a derived class using the extends keyword
  • using super() inside the constructor
  • inheriting and overriding methods from the parent class
  • using super to access methods from the parent class

You should know understand that JavaScript doesn't have multiple inheritance.

You should understand the prototype chain:

  • object prototypes
  • own properties
  • getting object prototypes with Object.getPrototypeOf()
  • setting prototypes of new objects with Object.create()
  • prototypes of prototypes and the prototype chain

Required Resources

MDN JavaScript Guide:

MDN JavaScript - Dynamic client-side scripting:

MDN JavaScript Advanced Tutorial:

Optional Resources

JS09 - JavaScript Buffers and Views

Complexity

Middle

Timeframe

3h

Summary

You should understand how to work with buffers and views and how typed arrays fit into the picture. You should be able to process binary data like audio and video using buffers and views.

Skill Breakdown

You should understand buffers:

  • the general idea behind buffers
  • ArrayBuffer
  • Node.js Buffer

You should understand views:

  • typed arrays
  • different typed array types:
    • Int8Array
    • Uint8Array
    • Uint8ClampedArray
    • Int16Array
    • Uint16Array
    • Int32Array
    • Uint32Array
    • Float32Array
    • Float64Array
  • DataView

You should understand blobs.

You should understand how to obtain array buffers from common JavaScript objects:

  • using the arrayBuffer method of the Response object
  • using the arrayBuffer method of the Blob object

Required Resources

MDN JavaScript Guide:

Optional Resources

MDN JavaScript Reference & Glossary:

Node.js documentation:

JS10 - JavaScript Iterators and Iterables

Complexity

Middle

Timeframe

2h

Summary

You should understand how JavaScript iterators, iterables and generators work.

Skill Breakdown

You should understand the concept of an iterator:

  • iterator protocol and the next() method
  • terminating an iterator

You should understand the concept of an iterable:

  • iterables define iteration behaviour
  • implementing the Symbol.iterator method

You should understand the concept of a generator:

  • writing generator functions using the function* keyword
  • using yield to return the next value

You should know how that certain JavaScript constructs like the for...of loop are based on these concepts.

Required Resources

MDN JavaScript Guide:

Optional Resources

MDN JavaScript Reference & Glossary:

JS11 - Regular Expressions

Complexity

Middle

Timeframe

3h

Summary

You should be able to write simple Regular Expressions and have an understanding of when they are useful and when they are not useful.

Skill Breakdown

You should understand the idea behind regular expressions.

You should know how to construct regular expressions:

  • using regular expression literals
  • using the RegExp object

You should know how to write regular expression patterns:

  • literal characters
  • character classes:
    • [xyz] and [a-c] to match any of the enclosed characters
    • [^xyz] and [^a-c] for negated (complemented) character classes
    • \d to match digits
    • \D to match non-digits
    • \w to match alphanumeric characters
    • \W to match non-alphanumeric characters
    • \s to match whitespace
    • \S to match non-whitespace
  • wildcards:
    • . to match all characters
  • quantifiers:
    • * to match 0 or more times
    • + to match 1 or more times
    • ? to match 0 or 1 times
    • {n} to match exactly n times
    • {n,} to match at least n times
    • {n,m} to match between n and m times
    • using ? for non-greedy matches
  • disjunctions:
    • | to specify multiple alternatives
  • assertions:
    • ^ to match beginning of input
    • $ to match end of input
    • \b to match word boundaries
    • \B to match non-word boundaries
  • groups:
    • (x) for capturing groups
    • (?<Name>x) for named capturing groups
    • (?:x) for non-capturing groups
  • backreferences:
    • \n for backreferences to capturing groups
    • \k<Name> for backreferences to named capturing groups

You should be able to use the most important methods of the RegExp object:

  • test
  • exec

You should be able to use the most important method of the String object that works with regular expressions:

  • match
  • matchAll
  • replace
  • replaceAll
  • search
  • split

You should understand the most important flags:

  • g flag
  • i flag
  • m flag
  • s flag

Required Resources

MDN JavaScript Guide:

MDN JavaScript Reference & Glossary:

Optional Resources

MDN JavaScript Reference & Glossary:

HTMLLinux