JavaScript Functions
A JavaScript function is a group of instructions that together perform a task; it is defined once and can be used (i.e. called) as many times as needed.
Declaring a function
A function is declared via the `function` keyword:
function sayHello(name) {
return "Hello " + name;
}
Using a function
Here is how to call our sayHello
function, using "Paul" as value for the name
parameter:
sayHello("Paul"); // returns: "Hello Paul"
Returned value
A function always returns a value; if nothing is specified, undefined
is returned. In the example below, we're printing "Hello Paul" to the console but not return a value. The second console.log
will show undefined
as the result of calling sayHello("Paul")
function sayHello(name) {
console.log("Hello " + name);
}
console.log(sayHello("Paul")); // prints: undefined
Default arguments
Let's see what happens if we "forget" to send an argument to the function:
function sayHello(name) {
return "Hello " + name;
}
console.log(sayHello()); // prints: "Hello undefined"
Notice that undefined
is appended to the "Hello " string before being returned.
We can, however, specify a default value to be used for a parameter:
function sayHello(name = "World") {
return "Hello " + name;
}
console.log(sayHello()); // prints: "Hello World"
Anonymous functions
A typical JavaScript function has a name and parameters:
function sayHello(name) {
return "Hello " + name;
}
Just as the name implies, an anonymous JavaScript function is a function without a name. The simplest example is assigning a function to a variable:
let sayHello = function(name) {
return "Hello " + name;
}
Whilst the function doesn't have a name, because we've assigned it to a variable, we can use still call it when required:
console.log(sayHello("Paul")); // prints: "Hello Paul"
Functions as parameters
A very common use-case for anonymous functions are as arguments for JavaScript functions, for example `setTimeout`:
setTimeout(function sayHello() {
console.log("Hello World");
}, 1000);
setTimeout
takes 2 arguments: a function to execute, and an interval in miliseconds after which the function is executed. In the example above, we've passed a function named sayHello
, but, even though we've given it a name, the function won't be available to use:
sayHello(); // ReferenceError: sayHello is not defined
Arrow Functions
ES6 introduced a new syntax for functions - our example can be written more concise as:
let myArray = [1, 4, 42, 11, 79];
let doubleArray = myArray.map( item => {
return item * 2;
});
console.log(doubleArray); // prints: [2, 8, 84, 22, 158]
However, arrow functions come with some limitations:
- no own bindings -
this
orsuper
is not available yield
cannot be used insite them
Manage DOM elements
An area that benefited massively from this new syntax was DOM elements manipulation and actions. For example, triggering actions when a button is clicked is now as simple as:
let signupButton = document.getElementById("signup");
signupButton.click(event => {
console.log(`New signup: ${signupButton}`);
});