JavaScript ES6 Functions

Functions allow you to write and reuse code in an organized way. They provide scope and separate logic into more manageable pieces. For example:

let a = 4
let b = 3

a += 50
console.log(a)

b += 50
console.log(b)

This is annoying because we are doing the exact same thing with both a and b. Using a function makes things much cleaner:

let a = 4
let b = 3

const addAndPrint = (x) => { 
  x += 50
  console.log(x)
}

addAndPrint(a)
addAndPrint(b)

Now that we've defined a function addAndPrint(), we can pass in any argument x and perform the same operations. This allows us to use the same logic in other places.

Imagine if you had to perform the same operation on 100 different variables. With the addAndPrint() function, you're saving yourself 2 line of code for each variable, in this case 200 lines of code!

The Anatomy of a Function

You name functions just like you name variables.

let x = 4 // we can define a variable with x

const y = () => { } // just like we can define a function with y

Functions can optionally take parameters

const printSum = (a,b) => { console.log(a + b) }

printSum(2,5) //prints 7 to the console

In this example, we define two parameters (a,b) for our printSum() function. Then we call the function and pass in 2 and 5 as arguments.

Functions can also accept default parameters:

const printSum = (a, b=1) => { console.log(a + b) }

printSum(1)   //prints 2
printSum(1,2) //prints 3

Notice how the second parameter b defaults to 1 unless we optionally provide the second parameter.

Functions can optionally return things. For example

const myFunction = (x) => { return x * 2 }

let myValue = myFunction(2)
//myValue == 4

In the above example, we define a function myFunction() that takes a single parameter x and returns the value of x * 2.

What's important here is that we can assign the returned value of myFunction() to myValue.

Functions don't have to return values. Sometimes functions simply execute code blocks:

const myFunction = () => { console.log("hello world") }

In this example, our function myFunction() doesn't return a value but simply prints "hello world" to the console.

How to Define a Function in JavaScript

There are several ways to define functions in JavaScript:

Arrow Functions

const myFunction = (x,y) => { 
  return x + y
}

Arrow functions get their name from the => operator. This function accepts two parameters (x,y). The code block {} contains the function's logic.

ES5 Syntax

This isn't the only way to define functions. In fact, prior to ES6 arrow functions weren't even supported in JavaScript. Below is an example of how to define functions the "ES5" way.

var myFunction = function(x,y){
  return x + y 
}

This looks a bit different but is doing the same thing as our arrow function above. Notice the use of the keyword function. This allows us to define a function inside an expression.

Outside Expressions

We can also define the function outside any expression. For example:

function myFunction(x,y){
  return x + y
}

myFunction(1,2) //returns 3

This example uses the function keyword to define a function myFunction() all by itself.

Please note: hoisting can occur when you define functions outside an expression like this. This is similar to the hoisting described with var vs let as functions can unexpectedly override each other. To avoid this, use keywords like const to define functions.

Conclusion

There are many different ways to define and work with functions in JavaScript. While the adoption of ES6 is making arrow functions more popular, defining functions the ES5 way is still widely used and accepted.

Now that you're familiar with functions, it's time to start looking at JavaScript loops and iterations.

Your thoughts?