JS | Functions - Cheat sheet

README.md

JS | Functions - Cheat sheet

Function expression

Function expression is created when a variable is assigned a function.

assigned function can be without name (anonymous) like in the example above, or with name.

Function expressions are not hoisted, only the variable is hoisted.

// Function expression

var variableName = function ([parameters]) {
    // Do something in here
}

Function Declaration

Function declarations are hoisted.

// Function declaration

function functionName ([parameters]) {
    // Do something in here
}

Arrow function (ES6)

Arrow functions are not hoisted, only function declarations are.

// Arrow function ES6

var variableName = ([parameters]) => {
	// Do something in here
}

Concise Arrow function

Concise arrow function is used when the code to execute can be written in a single line. Concise arrow function doesn't have { } brackets and we don't need to include keyword return (it is implicit).

var variableName = ([parameters]) => /* expresion or statement */ ;

Function return

Functions by default return undefined.

We have to use return keyword to return the value from the function and avoid returning undefined.

The return keyword stops the execution, exits the function and returns the result.

function concatNames(fistName, lastName) {
    console.log('before return');
    return fistName + ' ' + lastName;
    
    console.log('after return'); // This line will not run  
}

var result = concatNames('John', 'Doe');

console.log('result: ' + result);

Callback Functions

In Javascript we can pass functions as parameters to the function.

The function that is passed as an argument can be called back inside of the parent function.

A higher-order function is a function that can take another function as an argument, or that returns a **function **as a result.

Example:

In the below example startEatingDinner is a Higher order function simply because it takes another function as argument.

eatDesert is a function that is being passed as a callback, which is then invoked (called back) by the startEatingDinner.

function eatDessert(){
  console.log("Eating the dessert 🍰");
}

function startEatingDinner(callback){   
  console.log("Eating the dinner 🍽");
  console.log("Finished eating dinner!");
  
  callback();
}

startEatingDinner(eatDessert);

Hoisting

Function Declaration hoisting

In the below code we call function sumNumbers before declaring it, and it doesn't throw an error. Why ? Function declarations are always hoisted to the top of the script by the engine during compilation, before the script runs.

sumNumbers(10, 50);

function sumNumbers (num1, num2) {
	console.log(num1 + num2);
}

var hoisting

As well var declarations are hoisted (but not initialized :) ).

Meaning that variable is created and hoisted before the script runs, but the value is not assigned.

console.log(cat);		//  undefined

var cat = 'Marshmallow';

console.log(cat);  //  Marshmallow

Remember :

ReferenceError: variable is not defined is different than undefined

Scope

Scope is the context/area in which a variable or a function is visible from the different parts of the program.

In JavaScript there are different types of scope:

• Local scope
• Global scope
• Block scope (using let and const)

var myColor = "green"; // This is in the global scope

function myFunction() {
  var firstName = 'John';  // This is in the local/function scope;
    
  console.log('local scope - firstName -> ', firstName);
  console.log('local scope - myColor -> ', myColor);
}

// myColor is accessible as it is a 
console.log('Global - myColor -> ' + myColor);

// Not accessible because it firstName exists in the local scope of the function
console.log('Global - firstName -> ' + firstName);


// myFunction has acccess to both of the varabiles;
myFunction();

Best Practices

Naming a function

Functions are named using camelCase notation

When naming functions use the verbNoun syntax.

Example sayHello, printDetails

Don't change the passed arguments

Changing the function arguments often creates a code that is hard to debug/maintain.

// BAD - changing the parameters invites bugs and creates bug prone code
function concatFullName(firstName, lastName) {
  firstName = firstName + ' ' + lastName;
  return firstName;
}

// GOOD
function concatFullName(firstName, lastName) {
  var result = firstName + ' ' + lastName; // arguments are not tampered with 
  return result;
}

Knowledge Check/Review:

What is a function ?

What is the meaning of the First Class functions ?

What are different ways(syntaxes) of creating a function ?

How do you invoke a function with values (create a function example and invoke it)?

What is the meaning of “Parameters are functions internal variables” ?

What is Scope ?

What is the difference between a Global Scope and Local (Function) scope ?

What is a Higher Order function ?

Create a Higher Order function that receives a function as an argument and invokes it within.