J A V A S C R I P T

Study Notes & Exercises by Mel Jones

Books

Object-Oriented JavaScript by Stoyan Stefanov

Current Page 81

Eloquent JavaScript by Marijn Haverbeke

Current Page 56

Functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function.
Like the program itself, a function is composed of a sequence of statements called the function body.
Values can be passed to a function, and the function will return a value.

first-class objects

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object.
What distinguishes them from other objects is that functions can be called. In brief, they are [Function](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function) objects.

give us a way to

structure larger programs
reduce repetition
associate names with subprograms
isolate these subprograms from each other

Parameters

JavaScript is not picky at all when it comes to parameters.
If you pass more parameters than the function expects,
the extra parameters will be silently ignored:

    sum(1,2,3,4,5)
    ---
    3

you can also create fucntions that are flexible about the number of parameters they accept.
this possiblye thats to the the:
arguments array
that is create automatically inside each function.

    function args() { return arguments }
    args()

    args(1,2,3,4, true, 'ninja')
    ----
    [1,2,3,4, true, 'ninja']

MDN - Functions Guide

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

Functions - Chapter 3 - Eloquent JavaScript

give us a way to structure larger programs
to reduce repeition
to associate names with subprograms
and to isolate these subprograms from each other

    // Define f to hold a function value
    const f = function(a) {
    	console.log(a + 2)
    }

    // Define g to be a function declaration
    function g(a, b) {
    	return a * b * 3.5
    }


    // A less verbose function value
    let h = a => a % 3

Declaring functions

Function declaration vs Function Expression(value) vs Arrow

Function declaration

    console.log("The future says:", future())

    function future() {
    	return "You'll never have flying cars"
    }

shorter
are not part of the regular top to bottom flow of control
are conceptually moved to the top of their scope,
and can be used by all the code un that scope
this is sometimes useful because it offfers the freedom to order code in a way that seems meaningful, without worrying abut having to define all functions before they are used
ask maja about this

Function expression(value)

    let launchMissiles = function() {
    	missileSystem.lanch("now")
    }
    if (safeMode) {
    	launchMissiles = function() {/* do nothing */}
    }

A function expression is very similar to and has almost the same syntax as a function declaration.
The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions.
A function expression can be used as an IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined.
Function expressions are not hoisted, unlike function declarations. Meaning, you can not use a function expression before you define them;

    console.log(notHoisted) // undefined
    //even though the variable name is hoisted, the definition isn't. so it's undefined.
    notHoisted(); // TypeError: notHoisted is not a function

    var notHoisted = function() {
       console.log('bar');
    };

a function expression/value can do all the things that other values can do
- use it in arbitrary expressions
- call it
- it is possible to store s function value in a new binding
- pass it in as an argument
- and so on
note that a binding that holds a function is still just a regular binding and can if not constant, be assigned a new value!!
it is commonly used as a callback

button.addEventListener('click', function(event) { console.log('button is clicked!') })

Arrow Functions

added in 2015
make it possible to write small functions in a less verbose way

key aspect to understanding functions is understand scopes!

each block creates a new scope
Params and bindings declared in a given scope are local and not visible from the outside
Bindings declared with var behave differently,
they end up in the nearest function scope or the global scope

separating the tasks your program performs into different tasks is helpful

you won't have to repeat yourself
functions can help organise a program by grouping code into pieces that do specific things

Function Scope

a function defined inside another function can also access all variables in it's parent function

a function can access all variable and functions defined inside the scope in which is it defined

Variables deifned inside a function cannot be accessed from anywhere outside the function, because the variable is defined in the scope of the function

Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function.
However, a function can access all variables and functions defined inside the scope in which it is defined.
In other words, a function defined in the global scope can access all variables defined in the global scope.
A function defined inside another function can also access all variables defined in its parent function, and any other variables to which the parent function has access.

MoodyBones/JavaScript-Studies