Functions

Intro

• In this tutorial we will cover how Functions work in JavaScript.

• It is recommended that you follow along with each section below. Paste or type the code into your own JavaScript file and view the variable or expression values either with console.logs or using the VS Code Debug sidebar. 

• The example code for the entire tutorial series is at github.com/LearnByCheating/javascript-tutorial. There is a separate file or folder for each tutorial, including the To-Do List example project. The Readme file has instructions on how to run the code.

1. The function declaration: parts of a function

• We will start with function declarations. 

• Functions are self contained blocks of code that accomplish a specific task. 
• Functions are not executed until they are called. 

function name(parameters) { 
  statements;
  return statement;
} 
name(arguments);

• A function declaration starts with the keyword function, followed by the function name.
• Parameters: Then comes parentheses that may contain parameters. Parameters are values are passed into the function when it is called. Parameters are like variables that can be used in the function statements.
• Function Body: Inside the curly braces are the statements of code that get executed as a block of code. 
• Return statements: 
• Functions always return a result. 
• The last statement in a function starts with the keyword "return" followed by whatever you want the function result to be. 
• If there is no return statement, the function returns undefined.

• What makes functions unique is the code block is not executed until the function is called.
• You call the function by entering the function name followed by parentheses that may contain arguments.
• Arguments: In the parentheses you can pass in values for the function's parameters. These values are called arguments. You will often hear the terms parameters and arguments used interchangeably. 
• Parameters are the placeholders for the values that get passed to the function.
• Arguments are the actual values that get passed to the function when it is called. 

function add(x, y) {
  const res = x + y;
  return res;
}
let res = add(5, 3); // returns 8

• The above example function has two parameters, x and y. 
• The function body adds the two parameter value together, the returns the result.
• We call the function passing in two arguments 5 and 3. 
• We assign the function's return value of 8 to the variable res. 

2. Function Hoisting

res = add1(10); // returns 11
function add1(x) {
  const result = x + 1;
  return result;
}

3. Global Scope

4. Function Scoped

function mathFunctions() { 
  function add2(x) { return x + 2; }
  const res = add2(5);
}
console.log(res); // ReferenceError
add2(10); // ReferenceError

5. Function declarations are not block scoped

const x = 2
if (x > 0) {
  function add3(x) {
    const res = x + 3;
    return res;
  }
}
add3(10); // returns 13

6. Arrow functions

const functionName = (parameters) => {
  statements;
  return statement (if you are returning something);
}

const add4 = (x) => {
  const result = x + 4;
  return result;
}
add4(10); // returns 14

7. Arrow functions: single statement arrow functions

const functionName = (parameters) => statement;
functionName(args);

const add5 = (x) => x + 5;
add5(10); // returns 15

8. Immediately Invoking Function Expressions

(function (params) { 
  statements;
  return statement (if any)
}(args));

• Anonymous means the function has no name.
• Instead of calling the function by a name, you place the parentheses and any arguments directly after the function.
• And you wrap the whole thing in parentheses making it one big expression.

(function (x) { 
  const result = x + 6;
  return result;
}(10));

• In the above example our IIFE adds 6 to the argument. 
• The argument in this case is 10.
• The function return value is 16.

9. Methods (functions that are properties of objects)

• Objects are a collection of properties.
• You can think of properties as variables that are attached to an object. 
• Methods are properties that are functions.

const obj = {
  propName1: propValue,
  propName2: propValue,
  methodName: function() { statements; },
};
obj.methodName(arguments);

const user = {
  name: 'Joey',
  age: 22,
  addYear: function() { this.age = this.age + 1 },
};
user.addYear();
user.age; // 23

• Above is an example of an object named user.
• It has properties for name and age.
• The user.age property value is 22.
• And it has a method called addYear that when called, increases the age by 1.
• You call the method by chaining it to the object name. Meaning you place it after the object name separated by a dot.
• At the bottom we called the addYear method by chaining it to the user object. 
• user.addYear();
• The method increases the user.age value by 1. It works like any other function.
• function() { this.age = this.age + 1 }
• The keyword this means the current object. So setting this.age sets the age property of this user object. Then if we access user.age; it will give us the new value 23.

10. JavaScript built-in object methods

const str = 'some text'
str.toUpperCase(); // returns SOME TEXT

11. Parameters and arguments: too many and too few

const add5 = (x) => x + 5;
add5(10, 11, 12); // returns 15

function add(x, y) {
  const result = x + y;
  return result;
}
add(10); // returns NaN

12. Default parameters

function functionName(param1, param2 = defaultVal) { statements }

function multiply(x, y = 0) {
  const result = x * y;
  return result;
}
multiply(10); // returns 0

13. Rest parameters

const funcName = (param1, ...restParamName) => {
  restParamName.forEach((param) => console.log(param));
}
funcName(arg1, [arg2, arg3,...]);

const highScore = (name, ...scores) => {
  const sorted = scores.sort((a,b) => b - a);
  return `${name}'s highest score is ${sorted[0]}.`
}
res = highScore('Judy', 75, 82, 94, 72, 88);

14. Variable scope

let res = 0;
function add6(x) {
  const y = 6; // local variable
  res = x + y; // Assign value to the res variable from the outer scope
}
add6(10);
res; // value is 16
y; // throws ReferenceError: y is not defined

• The res variable was declared in the outer script's scope so we have access to it in the add6 function.  we can set a new value for it in the function.
• add6:
• The add6 function has a parameter called x. The value for x is the argument value that is passed in when the function is called, which is 10 in the above example. The parameter x behaves like a local variable in the function scope.
• The variable y is declared in the adAdd6 function so it is scoped to that function.
• The x parameter and y variable are added together. The result is assigned to the res variable.
• Outside the function, after it is called the res value is now 16.
• When we try to access the y variable we get a ReferenceError. We cannot access y outside the function.

15. Variable scope: shadowing

const num = 10;
function add7(x) {
  const num = 7;
  const res = num + x;
  return res;
}
add7(10); // returns 17
num; // value is 10

16. Arguments: primitives are passed by value

let age = 22;
function changeAge(age) {
  age = age + 1;
  return age;
}
const newAge = changeAge(age); // returns 23
age; // returns 22

• In the above example we declare a variable named age and set it to 22.
• In the function we called the parameter age as well. Parameters are treated as local variables in the function.
• Then we reset the age parameter value to age + 1 which is 23. So changeAge(age) returns 23.
• The original age variable value did not change though. It is still 22. 

17. Arguments: objects are passed by reference

const user = {
  name: 'Joey',
  age: 22
};

function changeObj(obj) {
  obj.age = obj.age + 1;
  return obj;
}

const updatedUser = changeObj(user);
user.age; // returns 23
updatedUser.age; // returns 23
user === updatedUser; // is true

18. Return statement

let res = 'Initial value';
function unreachableCode() {
  res = 'This line is reachable.';
  return;
  res = 'This line is unreachable';
}
unreachableCode();
res; // returns 'This line is reachable.'

• The res variable is declared outside the function.
• The function unreachableCode above starts out with a statement that sets the res variable to a string.
• The next line is the return statement, followed by another line that sets res to a different string.
• Only the line before the return statement gets executed so the res value becomes: "This line is reachable." Everything after the return statement is ignored.

19. Return statement implicit in one-line arrow functions

const funcName = (params) => statement; 

const add9 = (x) => x + 9; 
add9(10); // returns 19

function add10(x) {
  console.log(x + 10); // logs 20 to the console
}
add10(10); // returns undefined

function add10(x) {
  return x + 10;
}
add10.name; // value is "add10"
add10.length; // value is 1