Ultimate Reference on Javascript Functions 2021

What is Function?

function wizardSpell (){
// what the spell does
}
wizardSpell()
function returnOne(){
//this function will give you the number one
return 1
}
// logging the result of invoking the function
console.log("Invoking: ", returnOne())
// logging the value of the function
console.log("Function Value ", returnOne)

Function Declarations

// defining our function with a function declaration
function someFunction(){
}// invoking the function we defined
someFunction()
// invoking that is defined later on
someFunction()
// defining our function with a function declaration
function someFunction(){
}

Function Expressions

Ways to write function expressions

// define the function via function expression
const someFunction = function funcName(){
}// invoke the function
someFunction()
// define the function via function expression
const someFunction = function(){
}// invoke the function
someFunction()
// define the function via function expression
const someFunction = () => {
}// invoke the function
someFunction()

Parameters & Arguments

// cheese and bread are parameter, acting as a placeholder for data we don't have yet
const someFunction = function(cheese, bread){
console.log(cheese)
console.log(bread)
}
// we will pass the string "gouda" as the first argument which gets stored in cheese as the function runs, we also pass "rye" as the second argument which gets stored as bread during the run.
someFunction("gouda", "rye")

Functions Return Values

// function that logs instead of returning a value, kind of like a butler showing the bottle of wine you asked for but never bringing it to you.
const noReturn = () => {
console.log("Hello World")
}
const result1 = noReturn() //no return value, so the variable gets nothingconsole.log(result1) // undefined is logged, since the variable has no value//////////////////////////////////
//////////////////////////////////
// function that returns a value, this is like the wine being brought and placed in your hands
const returnSomething = () => {
return "Hello World"
}
const result2 = returnSomething() // the variable will hold the return value of "Hello World"console.log(result2) // this will log "Hello World"

Cool Function Tricks

Parameter Default Values

// we assign 4 & 6 as default value to x & y
const someFunction = (x = 4, y = 6) => {
return x + y
}
console.log(someFunction()) // log 10
console.log(someFunction(2,2)) // log 4

Variable Number of Arguments

const someFunction = function(){
// log the arguments object
console.log(arguments)
// loop over the arguments object
for (arg of arguments){
console.log(arg)
}
// turn it into a proper array
const argArray = [...arguments]
}
someFunction(1,2,3,4,5,6,7)
// function that adds up all the numbers
const someFunction = (x, y, ...args) => {
// add the first two arguments
let sum = x + y
// add in the remaining arguments
for (num of args){
sum += num
}
return sum}console.log(someFunction(1,2,3,4,5,6,7,8))

Closure

const parentFunction = (startingValue) => {
// creating a variable with an initial value
const value = startingValue
// define a function that returns the value
const getValue = () => { return value }
// define a function that alters the value
const setValue = (newValue) => { value = newValue }
// return both functions in an array
return [getValue, setValue]
}
// destructure the return value of the parent function
const [getValue, setValue] = parentFunction(1)
console.log(getValue()) // logs 1
setValue(2)
console.log(getValue()) // logs 2

Currying

const addAndMultiply = (x, y, z) => {
return x + y * z
}
console.log(addAndMultiply(2,3,4)) // 2+3*4=20
const addAndMultiply = (x) => (y) => (z) => {
return x + y + z
}
//invoking the functions back to back
console.log(addAndMultiply(2)(3)(4)) // 20
// doing it step by stepconst add = addAndMultiply(2)
const multiply = add(3)
const result = multiply(4)
console.log(result)//20

Destructuring Arguments

// For Objects
const myFunction = ({name, age}) => {
console.log(name)
console.log(age)
}
myFunction({name: "Alex Merced", age: 35})// For Arrays
const myFunction = ([name, age]) => {
console.log(name)
console.log(age)
}
myFunction(["Alex Merced", 35])

Arrow Function Shorthand

const quickFunction = x => x + 1const longExpression = y => (y + y * y - y * y)

Good Function Design Tips

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store