grouping code into actionable chunks (the "verbs")
Functions organize a bunch of statements into chunks:
function doStuff(passedInVariable1, passedInVariable2, ...) {
let task1 = passedInVariable1
let task2 = passedInVariable2
const addendum1 = 'and then go to sleep'
const addendum2 = 'and then go to work'
task1 += ' ' + addendum1
task2 += ' ' + addendum2
return task1 + ', then later: ' + task2
}
We can then call (or "invoke") them repeatedly, without having to re-write all the code inside of it:
console.log(doStuff('eat dinner', 'eat breakfast'))
/*
eat dinner and then go to sleep,
then later: eat breakfast and go to work
*/
console.log(doStuff('take a bath', 'skip breakfast'))
/*
take a bath and then go to sleep,
then later: skip breakfast and go to work
*/
Functions thereby allow for code re-use!
Functions encapsulate code into chunks - so unlike HTML and CSS, JavaScript code can look "non-linear" to anyone coming from a background of only HTML and CSS! Most "real" (i.e. functional) programming actually works this way! It takes a lot of "getting used to" from reading code top-down to reading code in terms of references :)
The return keyword
Inside the aforementioned function doStuff we saw this new return keyword that simply means this:
When we make a call to the function doStuff , the call yields a return value
If we put the function call into a variable, the variable holds that return value:
const regime = doStuff('eat dinner', 'eat breakfast')
console.log(regime)
/*
eat dinner and then go to sleep,
then later: eat breakfast and go to work
*/
A function does not need a return keyword but try to avoid that practice; the function would return undefined if no return keyword exists!
Function as an object
// ES6+ shorthand ("fat arrow notation")
const doStuff = (task1, task2) => {
// function content
}
// or without shorthand
const doStuff2 = function(task1, task2) => {
// function content
}
// or (older way)
const doStuff3 = function(task1, task2) {
// function content
}
Functions with default values in parameters
Sometimes, we can have function with optional parameters by setting default values into them:
const doStuff = (param1, param2 = "sleep") => {
return `${param1} then ${param2}`
}
console.log(doStuff("eat", "watch TV"))
// eat then watch TV
console.log(doStuff("eat"))
// eat then sleep
In the example above, param2is an optional parameter which defaults to "sleep" if the function call does not give an argument for param2!
Function as a property of an object
Methods are functions that are properties of an object:
const myObject = {
someKey: "someValue",
doStuff: function() {
// function content - no declaration keyword required
}
}
We will look objects in more detail in the next page...
