A01-arrow-functions.md

Slides and Exercise

• 🖥 Slides
• ✏️ Fun with Arrays (with answers)

Arrow functions

Read more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow functions are a different way of creating functions in JavaScript. Besides a shorter syntax, they offer advantages when it comes to keeping the scope of the this keyword (see here).

Arrow function syntax may look strange but it's actually simple.

function callMe(name) {
	console.log(name)
}

which you could write as:

const callMe = function(name) {
	console.log(name)
}

becomes:

const callMe = (name) => {
	console.log(name)
}

Important:x

When having no arguments, you have to use empty parentheses in the function declaration:

const callMe = () => {
	console.log('Max!')
}

When having exactly one argument, you may omit the parentheses:

const callMe = name => {
	console.log(name);
}

When just returning a value, you can use the following shortcut:

const returnMe = name => name

That's equal to:

const returnMe = name => {
	return name;
}

Resources

• Javascript.info: Arrow functions, the basics: https://javascript.info/arrow-functions-basics

Exercises

• Rewrite with arrow functions: https://javascript.info/task/rewrite-arrow
• Use Arrow Functions to Write Concise Anonymous Functions
• Write Arrow Functions with Parameters