< Back to JavaScript notes

Functions

Using functions, the core of JavaScript code

Resources:


Functions are the core of Javascript, allowing coders to wrap larger functionalities inside different values. This reduces repetition and makes it easier to manage complexity.

Functions begin with the keyword function, followed by any parameters (may have multiple or none) and then the body with the statements the function executes. The traditional syntax always requires curly braces around the body (ES6 rules have exceptions). Two examples of different functions the book gives are below, showing some variety in parameters and complexity. Note that the first doesn’t return a value (would give undefined) while the second does (using return).

const makeNoise = function() {
  console.log("Pling!");
};

makeNoise();
// → Pling!

const power = function(base, exponent) {
  let result = 1;
  for (let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
};

console.log(power(2, 10));
// → 1024

Arrow Functions

Arrow functions are the new ES6 syntax for JavaScript functions. They’re great for keeping your JS concise, especially for simpler functions. The big difference is they don’t need the function keyword to set them up, instead using an => icon.

Arrow Function With Body

These are more similar to ES5 functions, since it gives you multiple lines and must implicitly return a value.

const arrowFunction = () => {
  return 'This is a string being returned!';
}

Arrow Function Without Body

Without the body, arrow functions are limited to one line and implicitly return what’s there. Great for simpler code so it’s easier to read.

// Parenthesis are either blank or hold parameters
const arrowFunction = () => 'This is a string being returned!';
const doubleNumber = (n) => n * 2;

// Can break the line for neater syntax
const arrowFunction = () =>
  'This is a string being returned!';