I learned ES6 by writing it and failing. Out of this the es6katas
evolved. And since, this allowed me to always again go back and
(re-)learn ES6 I wrote katas for ES8, later ES1 (I always got the
sort()
function wrong). At some point I started to learn a
very expressive assertion library
hamjest by writing katas
for it, and so this page came about.
Enjoy and I hope you have fun learning with it.
Wolfram Kriesing
ECMAScript 1 Katas
Unary Operators
All unary operators (#8)
unary - an operation with only one operand
Difficulty: beginnerUnary "+" operator (#9)
converts its operand to the Number type
Difficulty: intermediateLinks for futher reading
Unary "+" operator, in depth (#10)
converts its operand to the Number type
Difficulty: advancedArray API
`[].sort()` basics (#1)
The `sort()` function sorts an array as if each element was a string.
Difficulty: beginnerLinks for futher reading
`[].sort()` can take a compare function (#2)
Passing a callback to the `sort()` function, allows for any custom sorting.
Difficulty: intermediateLinks for futher reading
Global Object API
Type conversion
ECMAScript 6 (ES2015) Katas
Number API
`Number.isInteger()` (#55)
`Number.isInteger()` determines if a value is an integer.
Difficulty: beginner`Number.isNaN()` (#80)
`Number.isNaN()` determines if a value is `NaN`.
Difficulty: beginnerLinks for futher reading
`Number.parseInt()` (#81)
`Number.parseInt()` parses a string and returns an integer.
Difficulty: beginnerLinks for futher reading
Array API
`Array.from()` (#29)
Convert a not-array into an array.
Difficulty: tbd`Array.of()` (#30)
`Array.of` creates an array with the given arguments as elements.
Difficulty: tbd`[].fill()` (#31)
`[].fill` can fill up an array with one value.
Difficulty: tbdLinks for futher reading
`[].find()` (#32)
`[].find` makes finding items in arrays easier.
Difficulty: tbd`[].findIndex()` (#33)
`[].findIndex` makes finding items in arrays easier.
Difficulty: tbd`[].entries()` (#41)
`[].entries()` returns an iterator object with all entries.
Difficulty: intermediate`[].keys()` (#42)
`[].keys()` returns an iterator for all keys in the array.
Difficulty: intermediate`[].values()` (#43)
`[].values()` returns an iterator for all values in the array
Difficulty: intermediateClass
accessors (#23)
Getter+setters as class properties.
Difficulty: intermediatemore extends (#26)
More in depth `extends` stuff
Difficulty: advancedsuper in method (#27)
Use of `super` inside a method.
Difficulty: intermediatesuper in constructor (#28)
Use of `super` inside the constructor.
Difficulty: intermediateDestructuring
object (#12)
Destructuring objects is a core concepts for modules and more.
Difficulty: beginnerdefaults (#13)
When destructuring you can also use default values.
Difficulty: beginnerparameters (#14)
Destructuring function parameters.
Difficulty: intermediateassign (#15)
Assign variables while destructuring.
Difficulty: intermediateGenerator
creation (#49)
There are many ways to create a generator
Difficulty: tbdLinks for futher reading
iterator (#50)
Generators return iterable objects
Difficulty: tbdyield expressions (#51)
The yield keyword is used to pause and resume a generator function
Difficulty: tbdLinks for futher reading
send value to a generator (#52)
By calling next() with a parameter, you can pass a value to a generator.
Difficulty: advancedLinks for futher reading
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 (#73)
Return statement in a generator function is special.
Difficulty: advancedLinks for futher reading
Map
`map.get()` (#45)
Difficulty: intermediate`map.set()` (#46)
Difficulty: expertinitialize (#53)
Initializing a map with values.
Difficulty: advanced`map.has()` (#62)
Indicates whether an element with a key exists.
Difficulty: beginnerLinks for futher reading
Promise
basics (#75)
A promise represents an operation that hasn`t completed yet, but is expected in the future.
Difficulty: beginnerLinks for futher reading
creation (#76)
A promise can be created in multiple ways, learn them all here.
Difficulty: intermediateLinks for futher reading
- Describing the promise constructor.
- How `Promise.all()` is specified.
- Documenting `Promise.all()`.
- How `Promise.race()` is specified.
- Documenting `Promise.race()`.
- How `Promise.resolve()` is specified.
- Documenting `Promise.resolve()`.
- How `Promise.resolve()` is specified.
- Documenting `Promise.reject()`.
chaining `then()` (#77)
Chaining promises can enhance readability of asynchronous code.
Difficulty: advancedLinks for futher reading
the API (#78)
`Promise` API overview.
Difficulty: intermediate`promise.catch()` (#79)
Returns a Promise and deals with rejected cases only.
Difficulty: intermediateLinks for futher reading
Reflect
`Reflect.apply()` (#59)
Calls a target function with given scope and arguments.
Difficulty: intermediateLinks for futher reading
`Reflect.getPrototypeOf()` (#60)
It returns the prototype of the given object.
Difficulty: intermediate`Reflect.construct()` (#68)
The `new` operator as a function.
Difficulty: intermediateLinks for futher reading
- How this function is specified.
- How the arguments list that can be passed as second parameter is specified.
- Axel Rauschmayer explaining in his book "The data flow between class constructors is different from the canonical way of subclassing in ES5."
- The chapter on Reflect in the book "Exploring ES6"
- Announcement of this kata on twitter.
`Reflect.defineProperty()` (#69)
Defines a property on a given object.
Difficulty: intermediateLinks for futher reading
Set
basics (#47)
Difficulty: tbd`set.add()` (#48)
Appends a new element to the end of a Set object.
Difficulty: tbd`set.delete()` (#64)
Removes an element from a set.
Difficulty: beginnerLinks for futher reading
`set.clear()` (#70)
Removes all elements from a Set object.
Difficulty: beginnerLinks for futher reading
Iterator
array (#37)
Difficulty: tbdstring (#38)
Difficulty: tbdprotocol (#39)
Difficulty: expertusage (#40)
Difficulty: expertObject literal
basics (#9)
ES6 has new shorthands for objects.
Difficulty: intermediatecomputed properties (#16)
Object literal properties may be computed values.
Difficulty: advancedgetter (#66)
A getter binds an object property to a function that will be called when that property is looked up.
Difficulty: beginnerLinks for futher reading
setter (#67)
A setter binds an object property to a function to be called when there is an attempt to set that property.
Difficulty: beginnerLinks for futher reading
String API
`string.includes()` (#63)
Finds string within another string.
Difficulty: beginnerLinks for futher reading
`string.repeat(count)` (#71)
Appends `count` copies of `string` to each other and returns it.
Difficulty: beginnerLinks for futher reading
`string.startsWith()` (#72)
Determines whether a string begins with the characters of another string.
Difficulty: beginnerLinks for futher reading
`string.endsWith()` (#74)
Determines whether a string begins with the characters of another string.
Difficulty: beginnerLinks for futher reading
Template strings
basics (#1)
A template string, is wrapped in backticks.
Difficulty: beginnerLinks for futher reading
multiline (#2)
Template strings, can be multiline.
Difficulty: beginnerLinks for futher reading
tagged template strings (#3)
Advanced form of template strings.
Difficulty: intermediateLinks for futher reading
`raw` property (#4)
The `raw` property accesses the string as it was entered.
Difficulty: intermediateLinks for futher reading
Symbol
basics (#34)
Symbol basics.
Difficulty: intermediate`Symbol.for()` (#35)
`Symbol.for()` for registering Symbols globally.
Difficulty: intermediate`Symbol.keyFor()` (#36)
`Symbol.keyFor()` gets the symbol key for a given symbol.
Difficulty: intermediateArrow functions
basics (#5)
Arrow functions are a more convinient and shorter way to write a function.
Difficulty: beginnerfunction binding (#6)
Arrow functions have lexical `this`, no dynamic `this`.
Difficulty: beginnerBlock scope
`let` declaration (#7)
`let` restricts the scope of the variable to the current block.
Difficulty: beginner`const` declaration (#8)
`const` is like `let` plus read-only.
Difficulty: beginnerRest operator
as parameter (#18)
Use the rest operator as parameter.
Difficulty: intermediatewith destructuring (#19)
Use the rest operator with destructuring.
Difficulty: intermediateSpread operator
with arrays (#20)
Spread syntax in use with arrays.
Difficulty: intermediateLinks for futher reading
with strings (#21)
Spread syntax in use with strings.
Difficulty: intermediateLinks for futher reading
Default parameters
Basics (#57)
Default parameters make function parameters more flexible.
Difficulty: beginnerModules
`import` statement (#61)
Use `import` to import functions that have been exported somewhere else.
Difficulty: beginnerObject API
`Object.is()` (#54)
`Object.is()` compares if two values are the same.
Difficulty: beginnerUnicode
in strings (#17)
How to use unicode in strings.
Difficulty: intermediateECMAScript 7 (ES2016) Katas
Array API
`[].includes()` (#1)
`Array.prototype.includes()` determines whether an array includes a certain value
Difficulty: beginnerLinks for futher reading
ECMAScript 8 (ES2017) Katas
Object API
Async Function
basics (#1)
Difficulty: intermediateLinks for futher reading
ECMAScript 10 (ES2019) Katas
String API
`string.trimStart()` (#3)
`string.trimStart()` - removes whitespace from the beginning of a string
Difficulty: beginnerLinks for futher reading
Object API
`Object.fromEntries()` (#1)
`Object.fromEntries()` converts key-value pairs into an object
Difficulty: intermediateLinks for futher reading
`Object.fromEntries()` in depth (#2)
`Object.fromEntries()` converts key-value pairs into an object
Difficulty: expertLinks for futher reading
Assertion Library Hamjest
matchers
`strictlyEqualTo()` (#3)
The strict version of `equalTo()`, just like the `===`.
Difficulty: beginner`anything()` (#4)
The matcher `anything()`, matches any value and never fails.
Difficulty: beginner`defined()` (#5)
The matcher `defined()`, matches everything but `undefined`.
Difficulty: beginnercore
`assertThat()` (#1)
The core function needed for most assertions.
Difficulty: beginnerECMAScript 1 - Learn by rewriting
Array
`indexOf()` (#1)
The `indexOf()` method returns the first index at which a given element can be found in the array
Difficulty: beginner