Understanding Functions: From Basics to Better Coding Practices

Functions are one of the most crucial tools in JavaScript programming. We can define a function once and use it without repetition. Functions can be easily modified, and they can be isolated from each other.

Syntax:

function name (param1, param2, ...paramN) {}

Local variables (inside the function): These are only visible within the function and can't be accessed from outside it. This supports the definition that local variables are not visible outside the function.

Outer variables (declared outside the function): Functions can access these outer variables if they are used within the function. However, the reverse is not true — you can't access variables that are declared inside the function from outside it.

--> Inner variables can access outer variables.
--> Inner variables themselves are not accessible from outside the function.

Naming Convention
Function names should include prefixes that describe what the function does, usually verbs that explain the action.

The Modern JavaScript Tutorial provides some examples:

showMessage(..)     // shows a message 
getAge(..)          // returns the age (gets it somehow) 
calcSum(..)         // calculates a sum and returns the result 
createForm(..)      // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false

The Modern JavaScript Tutorial

Each function should do one thing, not more.
For example, the getAge function should only get the age --- not get the age and show it.

Function Declaration
A function declaration is a standalone statement defined somewhere in the code and called when needed. It can be called before or after its declaration because it is hoisted, meaning it is initialized when the script is executed.

function square(number) {
  return number * number;
}

MDN

Function Expression
A function expression is created as part of an assignment to a variable. It is defined when the execution reaches that function in the code.

const square = function (number) {
  return number * number;
};

MDN

Function with () and without ()
In JavaScript, a function is a value. So, when we refer to a function by its name without parentheses, we are accessing its value, which is the function itself (its source code).
Example:

function sayHi() { 
    alert( "Hello" ); 
} 

alert( sayHi ); // shows the function code

The Modern JavaScript Tutorial

This is useful when we want to copy the function to another variable or pass it as a parameter.

Which to Use?
According to The Modern JavaScript Tutorial, a Function Declaration is preferred over a Function Expression for the following reasons:

1. It is visible before its declaration
2. It is more flexible for code organization
3. It is more readable

The Benefits of Clear, Descriptive Code
Writing clear, descriptive code with well-defined functions makes it easier to understand and less likely to break. So, even though the second example contains more code, its structure makes it easier to get right.

let total = 0, count = 1;
while (count <= 10) {
  total += count;
  count += 1;
}
console.log(total);

vs

console.log(sum(range(1, 10)));

The second example is better because it's more descriptive.
Eloquent JavaScript

Higher-Order Functions
Higher-order functions are functions that take another function as a parameter or return a function as a result. This is possible because functions are values.

Functions that take another function as a parameter:

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// → 0
// → 1
// → 2

Functions that return a function as a return value:

function greaterThan(n) {
  return m => m > n;
}
let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true
console.log(greaterThan10(9));
// -> false

Eloquent JavaScript

Functions have many uses and there's more to learn about them. I'll revisit functions as I continue to learn more about JavaScript.