[2022.10.11(Tue)] JavaScript #5 - Function

Functions are the fundamental building blocks of real-world JavaScript applications. In more simpler mearning, functions are pieces of code that can be re-used over and over again. It operates similar to a variable, but holds various lines of code instead of just a single value.

Essentially, functions have 3 main stages:
1. Input Data
2. Transform Data
3. Output Data

function logger() {
  console.log("My name is HyunJun"); // code that will be executed
}
logger(); // 'My name is HyunJun'

We are also able to create various functions and make them interact with each other.

function fruitProcessor(apples, oranges) {
    console.log(apples, oranges);
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    return juice; // returns the result
}

const appleJuice = fruitProcessor(5, 0); // by storing the function call in a variable, we are able to store the returned result from the function
console.log(appleJuice); // 'Juice with 5 apples and 0 oranges.'

Declaration vs. Expression

Function can be writen either by declaration or expression. The only difference between them is whether the function is stored in a variable or not. There isn't really a set rule for using either method and solely lies with the developers preference. However, storing functions inside variables can make it easier to come back to whenever needed.

// Declaration
function calcAge1(birthYear) {
    const age = 2037 - birthYear;
    return age;
}
const age1 = calcAge1(1991);
console.log(age1);

// Expression
const calcAge2 = function (birthYear) {
    return 2037 - birthYear;
}
const age2 = calcAge2(1991);
console.log(age2);

Arrow Function

The arrow function is a method that was introduced in ES6 and is simply another method to use function. One advantage of arrow function is that it is much more concise and faster to write code. Additionally, an arrow function does not require the return keyword for it tow work. Although it is a faster method to use, many developers still commonly use either declaration or expression. This shows that using methods can depend on various circumstances.

// Ex1)
const calcAge3 = birthYear => 2037 - birthYear;
const age3 = calcAge3(1991);
console.log(age3);

// Ex2)
const yearsUntilRetirement = (birthYear, firstName) => {
    const age = 2037 - birthYear;
    const retirement = 65 - age;
    return `${firstName} retires in ${retirement} years`;
}
console.log(yearsUntilRetirement(1991, 'John'));
console.log(yearsUntilRetirement(1980, 'Matt'));

Functions calling other Functions

As mentioned before, we can create and use various function codes in order to create one single functionality. All we have to do is call a function within another function.

function cutFruitPieces(fruit) {
    return fruit * 4;
}

function fruitProcessor(apples, oranges) {
    const applePieces = cutFruitPieces(apples);
    const orangePieces = cutFruitPieces(oranges);

    const juice = `Juice with ${applePieces} pieces apples and ${orangePieces} pieces of oranges.`;
    return juice;
}
console.log(fruitProcessor(2, 3));