JavaScript Katas

Learn JavaScript (the language and more) by doing it. Fix failing tests. Keep all learnings.

Formerly ES6 Katas - Now JS Katas. Learn JavaScript, the disciplined way. Learn all the details.

ECMAScript 1 Katas available katas: 6, unfinished or planned: 3

Unary Operators

All unary operators easy

All unary operators (#8)

unary - an operation with only one operand

Difficulty: beginner
Unary "+" operator, in depth new

Unary "+" operator, in depth (#10)

converts its operand to the Number type

Difficulty: advanced

Array API

`[].sort()` basics easy

`[].sort()` basics (#1)

The `sort()` function sorts an array as if each element was a string.

Difficulty: beginner

Links for futher reading

`[].sort()` can take a compare function

`[].sort()` can take a compare function (#2)

Passing a callback to the `sort()` function, allows for any custom sorting.

Difficulty: intermediate

Links for futher reading

Type conversion

to boolean planned

to boolean (#5)

Difficulty: intermediate
to number planned

to number (#6)

Difficulty: intermediate

ES2015 (ECMAScript 6) Katas available katas: 81, unfinished or planned: 0

Array API

`Array.from()`

`Array.from()` (#29)

Convert a not-array into an array.

Difficulty: tbd
`Array.of()`

`Array.of()` (#30)

`Array.of` creates an array with the given arguments as elements.

Difficulty: tbd
`[].fill()`

`[].fill()` (#31)

`[].fill` can fill up an array with one value.

Difficulty: tbd

Links for futher reading

`[].find()`

`[].find()` (#32)

`[].find` makes finding items in arrays easier.

Difficulty: tbd
`[].findIndex()`

`[].findIndex()` (#33)

`[].findIndex` makes finding items in arrays easier.

Difficulty: tbd
`[].entries()`

`[].entries()` (#41)

`[].entries()` returns an iterator object with all entries.

Difficulty: intermediate
`[].keys()`

`[].keys()` (#42)

`[].keys()` returns an iterator for all keys in the array.

Difficulty: intermediate
`[].values()`

`[].values()` (#43)

`[].values()` returns an iterator for all values in the array

Difficulty: intermediate

Class

creation easy

creation (#22)

Create a class.

Difficulty: beginner
accessors

accessors (#23)

Getter+setters as class properties.

Difficulty: intermediate
static easy

static (#24)

Use of the static keyword inside a class.

Difficulty: beginner
extends easy

extends (#25)

How to do inheritance, using `extends`.

Difficulty: beginner
more extends

more extends (#26)

More in depth `extends` stuff

Difficulty: advanced
super in method

super in method (#27)

Use of `super` inside a method.

Difficulty: intermediate
super in constructor

super in constructor (#28)

Use of `super` inside the constructor.

Difficulty: intermediate

Destructuring

array easy

array (#10)

Destructuring arrays allows for more concise.

Difficulty: beginner
string easy

string (#11)

Destructuring can also be done on strings.

Difficulty: beginner
object easy

object (#12)

Destructuring objects is a core concepts for modules and more.

Difficulty: beginner
defaults easy

defaults (#13)

When destructuring you can also use default values.

Difficulty: beginner
parameters

parameters (#14)

Destructuring function parameters.

Difficulty: intermediate
assign

assign (#15)

Assign variables while destructuring.

Difficulty: intermediate

Generator

creation

creation (#49)

There are many ways to create a generator

Difficulty: tbd

Links for futher reading

iterator

iterator (#50)

Generators return iterable objects

Difficulty: tbd
yield expressions

yield expressions (#51)

The yield keyword is used to pause and resume a generator function

Difficulty: tbd

Links for futher reading

send value to a generator

send value to a generator (#52)

By calling next() with a parameter, you can pass a value to a generator.

Difficulty: advanced

Links for futher reading

send function to a generator

send function to a generator (#56)

By calling next() with a function, you can pass it to the generator.

Difficulty: expert
`return` inside a generator function

`return` inside a generator function (#73)

Return statement in a generator function is special.

Difficulty: advanced

Links for futher reading

Map

Basics easy

Basics (#44)

Difficulty: beginner
`map.get()`

`map.get()` (#45)

Difficulty: intermediate
`map.set()`

`map.set()` (#46)

Difficulty: expert
initialize

initialize (#53)

Initializing a map with values.

Difficulty: advanced
`map.has()` easy

`map.has()` (#62)

Indicates whether an element with a key exists.

Difficulty: beginner

Links for futher reading

Promise

basics easy

basics (#75)

A promise represents an operation that hasn`t completed yet, but is expected in the future.

Difficulty: beginner

Links for futher reading

the API

the API (#78)

`Promise` API overview.

Difficulty: intermediate
`promise.catch()`

`promise.catch()` (#79)

Returns a Promise and deals with rejected cases only.

Difficulty: intermediate

Links for futher reading

Reflect

Basics easy

Basics (#58)

Difficulty: beginner
`Reflect.apply()`

`Reflect.apply()` (#59)

Calls a target function with given scope and arguments.

Difficulty: intermediate

Links for futher reading

`Reflect.getPrototypeOf()`

`Reflect.getPrototypeOf()` (#60)

It returns the prototype of the given object.

Difficulty: intermediate
`Reflect.defineProperty()`

`Reflect.defineProperty()` (#69)

Defines a property on a given object.

Difficulty: intermediate

Links for futher reading

Set

basics

basics (#47)

Difficulty: tbd
`set.add()`

`set.add()` (#48)

Appends a new element to the end of a Set object.

Difficulty: tbd
`set.delete()` easy

`set.delete()` (#64)

Removes an element from a set.

Difficulty: beginner

Links for futher reading

the API easy

the API (#65)

`Set` API overview.

Difficulty: beginner

Links for futher reading

`set.clear()` easy

`set.clear()` (#70)

Removes all elements from a Set object.

Difficulty: beginner

Links for futher reading

Iterator

array

array (#37)

Difficulty: tbd
string

string (#38)

Difficulty: tbd
protocol

protocol (#39)

Difficulty: expert
usage

usage (#40)

Difficulty: expert

Object literal

basics

basics (#9)

ES6 has new shorthands for objects.

Difficulty: intermediate
computed properties

computed properties (#16)

Object literal properties may be computed values.

Difficulty: advanced
getter easy

getter (#66)

A getter binds an object property to a function that will be called when that property is looked up.

Difficulty: beginner

Links for futher reading

setter easy

setter (#67)

A setter binds an object property to a function to be called when there is an attempt to set that property.

Difficulty: beginner

Links for futher reading

String API

`string.includes()` easy

`string.includes()` (#63)

Finds string within another string.

Difficulty: beginner

Links for futher reading

`string.startsWith()` easy

`string.startsWith()` (#72)

Determines whether a string begins with the characters of another string.

Difficulty: beginner

Links for futher reading

`string.endsWith()` easy

`string.endsWith()` (#74)

Determines whether a string begins with the characters of another string.

Difficulty: beginner

Links for futher reading

Template strings

basics easy

basics (#1)

A template string, is wrapped in backticks.

Difficulty: beginner

Links for futher reading

multiline easy

multiline (#2)

Template strings, can be multiline.

Difficulty: beginner

Links for futher reading

tagged template strings

tagged template strings (#3)

Advanced form of template strings.

Difficulty: intermediate

Links for futher reading

`raw` property

`raw` property (#4)

The `raw` property accesses the string as it was entered.

Difficulty: intermediate

Links for futher reading

Symbol

basics

basics (#34)

Symbol basics.

Difficulty: intermediate
`Symbol.for()`

`Symbol.for()` (#35)

`Symbol.for()` for registering Symbols globally.

Difficulty: intermediate
`Symbol.keyFor()`

`Symbol.keyFor()` (#36)

`Symbol.keyFor()` gets the symbol key for a given symbol.

Difficulty: intermediate

Arrow functions

basics easy

basics (#5)

Arrow functions are a more convinient and shorter way to write a function.

Difficulty: beginner
function binding easy

function binding (#6)

Arrow functions have lexical `this`, no dynamic `this`.

Difficulty: beginner

Block scope

`let` declaration easy

`let` declaration (#7)

`let` restricts the scope of the variable to the current block.

Difficulty: beginner
`const` declaration easy

`const` declaration (#8)

`const` is like `let` plus read-only.

Difficulty: beginner

Rest operator

as parameter

as parameter (#18)

Use the rest operator as parameter.

Difficulty: intermediate
with destructuring

with destructuring (#19)

Use the rest operator with destructuring.

Difficulty: intermediate

Spread operator

with arrays

with arrays (#20)

Spread syntax in use with arrays.

Difficulty: intermediate

Links for futher reading

with strings

with strings (#21)

Spread syntax in use with strings.

Difficulty: intermediate

Links for futher reading

Default parameters

Basics easy

Basics (#57)

Default parameters make function parameters more flexible.

Difficulty: beginner

Modules

`import` statement easy

`import` statement (#61)

Use `import` to import functions that have been exported somewhere else.

Difficulty: beginner

Object API

`Object.is()` easy

`Object.is()` (#54)

`Object.is()` compares if two values are the same.

Difficulty: beginner

Unicode

in strings

in strings (#17)

How to use unicode in strings.

Difficulty: intermediate

ES2016 (ECMAScript 7) Katas available katas: 1, unfinished or planned: 0

ES2017 (ECMAScript 8) Katas available katas: 1, unfinished or planned: 2

Object API

`Object.entries()` planned

`Object.entries()` (#2)

Difficulty: beginner
`Object.values()` planned

`Object.values()` (#3)

Difficulty: beginner

Async Function

ES2019 (ECMAScript 10) Katas available katas: 3, unfinished or planned: 9

try-catch

unbinded `catch` planned

unbinded `catch` (#12)

`catch` can now be used without a binding

Difficulty: beginner

Links for futher reading

Array API

`array.flat()` planned

`array.flat()` (#5)

`array.flat()` creates an array with all sub-array elements concatenated recursively

Difficulty: intermediate

Links for futher reading

`array.flatMap()` planned

`array.flatMap()` (#6)

`array.flatMap()` maps over each element and flattens it afterwards

Difficulty: intermediate

Links for futher reading

stable `array.sort()` planned

stable `array.sort()` (#7)

`array.sort()` - is now a stable sort

Difficulty: intermediate

Links for futher reading

Object API

`Object.fromEntries()`

`Object.fromEntries()` (#1)

`Object.fromEntries()` converts key-value pairs into an object

Difficulty: intermediate

Links for futher reading

String API

`string.trimStart()` easy

`string.trimStart()` (#3)

`string.trimStart()` - removes whitespace from the beginning of a string

Difficulty: beginner

Links for futher reading

`string.trimEnd()` planned

`string.trimEnd()` (#4)

`string.trimEnd()` - removes whitespace from the end of a string

Difficulty: beginner

Links for futher reading

Function API

`function.toString()` planned

`function.toString()` (#8)

`function.toString()` - now returns the complete source code of the function

Difficulty: beginner

Links for futher reading

JSON API

well-formed `JSON.stringify()` planned

well-formed `JSON.stringify()` (#9)

`JSON.stringify()` - now returns well-formed output

Difficulty: beginner

Links for futher reading

JSON superset

Symbol API

`symbol.description` planned

`symbol.description` (#11)

A read-only description of a Symbol object.

Difficulty: intermediate

Links for futher reading

ES2020 (ECMAScript 11) Katas available katas: 0, unfinished or planned: 1

String API

string.matchAll() planned

string.matchAll() (#1)

Returns all results matching a regular expression.

Difficulty: beginner

Links for futher reading

Assertion Library Hamjest available katas: 5, unfinished or planned: 0

matchers

`equalTo()` easy

`equalTo()` (#2)

The most common matcher `equalTo()`.

Difficulty: beginner
`strictlyEqualTo()` easy

`strictlyEqualTo()` (#3)

The strict version of `equalTo()`, just like the `===`.

Difficulty: beginner
`anything()` easy

`anything()` (#4)

The matcher `anything()`, matches any value and never fails.

Difficulty: beginner
`defined()` new

`defined()` (#5)

The matcher `defined()`, matches everything but `undefined`.

Difficulty: beginner

core

`assertThat()` easy

`assertThat()` (#1)

The core function needed for most assertions.

Difficulty: beginner

ECMAScript 1 - Learn by rewriting available katas: 1, unfinished or planned: 0

Array

`indexOf()` new

`indexOf()` (#1)

The `indexOf()` method returns the first index at which a given element can be found in the array

Difficulty: beginner

Links for futher reading