js-functions-intro.js

// ************************************************************************************************
// PART 1: FUNCTION DECLARATION, INVOKE A FUNCTION, NAMING A FUNCTION, PARAMETERS VS. ARGUMENTS, RETURN STATEMENT
// ************************************************************************************************

// Often we need to perform the same or similar action in many places in our application
// functions can be defined as reusable pieces of code that perform specific actions
// Functions are the main “building blocks” of any program. 
// They allow the code to be reused many times without repetition. They keep our code DRY (Don’t Repeat Yourself).

// create => function declaration
function printCoffeePrice() {
  console.log('Coffee price is 5.');
}

// call => invocation
printCoffeePrice();

function printSandwichPrice() {
  console.log('Sandwich price is 8.');
}

printSandwichPrice();

// Naming conventions:
// - name should be very descriptive and should express what the function does.
// - try to use verbs that describe actions (ex. getUsers)
// - name functions the same as variables using the camelCase
// - use a lowercase letter to begin the name (lowerCase(){}, NOT LowerCase(){})

// when declaring function => PARAMETER (placeholder(s))
// "price" we pass in the func declaration is a placeholder, it can be any word
function printProductPrice(price) {
  console.log(`Product price is: ${price}`);
}

// when calling the function => ARGUMENT (the real value)
// 54 is the real value we pass in
printProductPrice(54);

// THE RETURN STATEMENT 
// (Using "retun" won't automatically display or print this value to the console.
// We need to log the returned value to the console using console.log():
function printInfo(product, price) {
  return `${product} price is ${price}`;
  // console.log(`${product} price is ${price}`); // this doesn't exist for this function because it comes after the return
}

// printInfo("coffee", 7);
printInfo('sandwich', 17);
// printInfo("milk", 3);
// printInfo("gas", 6.5);

// -- multiple return statements --
function printName(name) {
  if (name.length === 0) {
    return 'Please provide a valid name!';
  }
  return `Name is ${name}.`;
}

printName(''); // => Please provide a valid name!
printName('George'); // => Name is George.

// -- return multiple values 
// functions can’t, by default, return multiple values. To surpass this limitation, 
// you can pack return values into an object or array and return it.

// --- returns packed in the object
function getUser() {
  // info could come from an API

  const name = 'ana';
  const age = '32';

  return {
    name,
    age
  };
}
const userInfo = getUser();
console.log(`${userInfo.name}, ${userInfo.age} years`); // ana, 32 years


// ------------- Less important at this stage --------------

// --- returns packed in the array
function getFavorites(fav1, fav2, fav3) {
  const favorites = [fav1, fav2, fav3];
  return favorites;
}

const kevinsFavs = getFavorites('javascript', 'html', 'css'); 
console.log(kevinsFavs); // => [ 'javascript', 'html', 'css' ]

const lanasFavs = getFavorites('javascript', 'node', 'react'); 
console.log(lanasFavs); // => [ 'javascript', 'node', 'react' ]

// --------------------------------------------------------------------------------

// Writing good functions
// main characteristics of good functions

// 1. code reuse
// 2. separation of concerns -  functions allow us to split a big problem into multiple smaller ones
// Single Responsibility Principle - a function should do just one thing. The name of the function has to be very clear so you can identify what is doing just reading the name.

// Refactoring
// Original Code
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName);

// Refactored Code
function getFullName(firstName, lastName) {
  return firstName + " " + lastName;
}

console.log(getFullName(firstName, lastName))

// By using this refactored code, we have separated the logic of getting the full name into a reusable function, 
// making it easier to maintain and update the code in the future.