js-functions-advanced.js

// ************************************************************************************************
// PART 2: FUNCTION EXPRESSION, CALLBACKS, ANONYMOUS FUNCTIONS, ARROW FUNCTIONS
// ************************************************************************************************

function printInfo(product, price) {
  return `${product} price is ${price}`;
}

// function expression (example 1)
const sandwich = printInfo('sandwich', 17);
console.log(`hello: ${sandwich}`);

const milk = printInfo('milk', 3);
console.log(`hello 1: ${milk}`);

console.log(`Name is: ${name}`); // Name is: undefined
var name = 'ana'; // with var variable is hoisted and can be used before it's declared. however, only declaration is hoisted, not the value itseld
// console.log(`the name is: ${theName}`);
// const theName = "jo"; // ReferenceError: name is not defined

multiply(4, 5); // we can call this function before it's declared
// ✅ function declaration (aka statement) is hoisted all the way to the top of the code doc
function multiply(num1, num2) {
  return num1 * num2;
}

// function expression (example 2)
// function expression - is a function without name stored in a variable

// addition(5, 6) // 🚫 this doesn't work since it's not hoisted 🚫
const addition = function (a, b) {
  return a + b;
}

// A function declaration is a named function and can be stored in a variable if needed.
// A function expression is an un-named (or so-called anonymous) function that is stored in the variable.
// Both can be reused throughout the code.

// ********************************************************************************************
// CALLBACKS
// Callback functions are used to make sure a particular code doesn’t execute until another code has already 
// finished execution. By passing one function as an argument to some other function, we are actually making 
// sure that the first function executes and returns some value so that value can be used in the second function.
// visit this link for code: https://gist.github.com/sandrabosk/99ce9ad8616b1dbad4ebf9867b2245cd

// ********************************************************************************************
// ANONYMOUS FUNCTIONS

// you already used examples of anonymous functions without knowing it: remember .forEach() method?
// let's see how it looks (prior to ES6):
['ana', 'mike'].forEach(function (elem) {
  console.log(elem.toUpperCase());
});
// ANA, MIKE

// we are using no-named function inside this method someArray.forEach(function(elem){})
// this function will be used one time so no need to name it.
// if we would like to name it and then use it with the .forEach() method, we can do so (if it makes sense to name the fucntion):

function getUppercased(name){
  console.log(name.toUpperCase());
}

['ana', 'mike'].forEach(getUppercased)

// we will come to the matter of callbacks next class, but remember this example - we will be using it soon again!!!

// ********************************************************************************************
// ARROW FUNCTIONS

function multiply(num1, num2) {
  return num1 * num2;
}

const multiply1 = x => {  // => if ony one parameter we don't need () around x
  /* somehting happens here*/
}; 

// ES6 - longer version:
const multiply1 = (x, y) => {
  return x * y;
};

// ES6 - shorter version:
const multiply1 = (x, y) => x * y; // if return is only one line, we don't have to use word "return" and we can skip curly braces since arrow function returns by default if used with no curly braces

multiply1(7, 2); // 14

// Benefits of arrow functions:
// Arrow syntax automatically binds `this` to the surrounding code’s context.
// The syntax allows an implicit return when there is no body block, resulting in shorter and simpler code.
// `=>` is shorter and simpler than regular function syntax.