Javascript Functions

#beginners #javascript #functions

Function Declaration and Calls

Functions are reusable blocks of code that take an input value, perform an action, and return an output value. The basic syntax of a Function Declaration is:

 function add (num1, num2) {
      return num1 + num2
 }

This is a Function Declaration. Functions are declared with the keyword function, followed by the function name. Then, the parameters, or input values, follow the function name in quotes. Following the parameters, is the function action wrapped in curly brackets. In this case, the function is named 'add', takes in two parameters: 'num1' and 'num2', and the action is to return the value of these two parameters added together.

Functions can also be declared as Function Expressions. The syntax of a Function Expression is:

 var add = function(num1, num2) {
      return num1 + num2
 }

In a function expression, a variable is assigned to a function with an assignment operator. One important difference in whether a function is defined in a declaration or an expression is that entire function declarations are hoisted to the top of the code-- the name and the body. Function expressions, however, only have their names hoisted to the top. The function body is not hoisted along with the name.

A function is evoked with the function named followed by parentheses.

add(1,2) //=> 3

In this case, 1 and 2 are the 'arguments' passed into the function. When 1 and 2 are passed in, the function will return their sum and the invocation resolves to 3.

A more concise way of declaring functions is using arrow functions.

var add = (num1, num2) => num1 + num2

Arrow functions indicate a function while skipping the keyword 'function' entirely. They are declared by assigning a variable to the function parameters, followed by an arrow, followed by the action. In this case, since the action is only on one line, the curly brackets and the return statement can also be omitted.

Anonymous functions are functions declared without a name. They are usually written when being passed through other functions.

function alterNum(num, func){
     return func(num)
};

alterNum(1, function(num){return num * 10})
//=> 10

The function that was passed unto alterNum is an anonymous function.

Functions and Scope

Functions can access values from the parent scope.

     var firstName = 'Jackie';
     var lastName = 'Wisdom';

     function createName(){
        let fullName = firstName + ' ' + lastName
          return fullName
        }

     console.log(createName());//=> 'Jackie Wisdom'

In the above example, the createName function has access to variables created in the parent scope, outside of the function scope. However, variables created inside of a function are function-scoped; they cannot be accessed outside of the function.

     var firstName = 'Jackie';
     var lastName = 'Wisdom';

     function createName(){
         let fullName = firstName + ' ' + lastName
          return fullName
         }

     console.log(fullName)//=> Reference Error: fullName is not defined

In the above code, logging fullName to the console will result in an error. This is because fullName was created inside of the createName function, and therefore cannot be referenced outside of this function.

Functions are capable of closure. This means they can contain references to variables in their parent scopes.

     function makePizzaOrder(customer, total){

     var toppings = [];

     return {
     customer: customer,
     total: total,
     addToppings: function(top1, top2){
     toppings.push(top1, top2)
              }
     getToppings: function(){
     return toppings;
             }

         }
     };

     var order1 = makePizzaOrder('Bob', 20.00);
     order1.addToppings('cheese', 'pepperoni');
     console.log(order1.getToppings()); //=> ['cheese', 'pepperoni']

The above is an example of closure because the functions inside of the makePizzaOrder function refer to the toppings array, which was created in the parent function. The toppings array is not available outside of the makePizzaOrder function, but, because of closure, it is kept alive.