ES6 Katas

Learn ES6 by doing it. Fix failing tests. Keep all learnings.

Promise

easybasics

basics (#75)

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

Difficulty: beginner

Links for futher reading

newthe API

the API (#78)

`Promise` API overview.

Difficulty: intermediate

Array

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

easycreation

creation (#22)

Create a class.

Difficulty: beginner
accessors

accessors (#23)

Getter+setters as class properties.

Difficulty: intermediate
easystatic

static (#24)

Use of the static keyword inside a class.

Difficulty: beginner
easyextends

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

easyarray

array (#10)

Destructuring arrays allows for more concise.

Difficulty: beginner
easystring

string (#11)

Destructuring can also be done on strings.

Difficulty: beginner
easyobject

object (#12)

Destructuring objects is a core concepts for modules and more.

Difficulty: beginner
easydefaults

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

easyBasics

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
easymap.has()

`map.has()` (#62)

Indicates whether an element with a key exists.

Difficulty: beginner

Links for futher reading

Reflect

easyBasics

Basics (#58)

Difficulty: beginner
Reflect.apply()

`Reflect.apply()` (#59)

Calls a target function with given scope and arguments.

Difficulty: intermediate
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
easyset.delete()

`set.delete()` (#64)

Removes an element from a set.

Difficulty: beginner

Links for futher reading

easythe API

the API (#65)

`Set` API overview.

Difficulty: beginner

Links for futher reading

easyset.clear()

`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
easygetter

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

easysetter

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

easystring.includes()

`string.includes()` (#63)

Finds string within another string.

Difficulty: beginner

Links for futher reading

easystring.repeat(count)

`string.repeat(count)` (#71)

Appends `count` copies of `string` to each other and returns it.

Difficulty: beginner

Links for futher reading

easystring.startsWith()

`string.startsWith()` (#72)

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

Difficulty: beginner

Links for futher reading

easystring.endsWith()

`string.endsWith()` (#74)

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

Difficulty: beginner

Links for futher reading

Template strings

easybasics

basics (#1)

A template string, is wrapped in backticks.

Difficulty: beginner

Links for futher reading

easymultiline

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

easybasics

basics (#5)

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

Difficulty: beginner
easyfunction binding

function binding (#6)

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

Difficulty: beginner

Block scope

easy`let` declaration

`let` declaration (#7)

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

Difficulty: beginner
easy`const` declaration

`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 operator in use with arrays.

Difficulty: intermediate
with strings

with strings (#21)

Apply spread operator on strings.

Difficulty: intermediate

Default parameters

easyBasics

Basics (#57)

Default parameters make function parameters more flexible.

Difficulty: beginner

Modules

easy`import` statement

`import` statement (#61)

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

Difficulty: beginner

Number

easyNumber.isInteger()

`Number.isInteger()` (#55)

`Number.isInteger()` determines if a value is an integer.

Difficulty: beginner

Object

easyObject.is()

`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
ES6+reactjs workshop