JavaScript Functions

Beginner ~15 min read

What is a Function?

A function is a block of code designed to perform a particular task. A function is executed when "something" invokes it (calls it).

HTML

CSS

<h2>Function Demo</h2>
<p id='demo'></p>

A function can also be defined using an expression. A function expression can be stored in a variable.

const square = function(number) {
  return number * number;
};

let x = square(4); // x gets the value 16

Arrow functions (introduced in ES6) allow for a shorter syntax for writing function expressions.

HTML

CSS

<h2>Arrow Function Demo</h2>
<p id='arrowOutput'></p>

Implicit Return: If an arrow function has a single expression in its body, you can omit the curly braces {} and the return keyword.

Parameters are the names listed in the function definition.
Arguments are the real values passed to the function.

HTML

CSS

<h2>Default Parameters Demo</h2>
<p id='paramsOutput'></p>

Which syntax is correct for an arrow function?

function() => {}

() => {}

=> function() {}

arrow() {}