1. Javascript Functions Function Declaration Function Expression
Shorthand Method
Function Constructor
Arrow Function Expression
Generator Functions
Immediately Invoked Function Expression
Full article at

2. Function Declaration: Syntax
//declaration and definition function MyFunction() { console.log('hello'); } //invocation MyFunction(); //outputs hello
console.log(typeof MyFunction); //outputs function console.log(MyFunction.name); //outputs MyFunction

3. Function Declaration: Syntax
function Multiply(a, b) { return a * b; } console.log(Multiply(2, 4)); //outputs 8
var calc = Multiply; console.log(calc(2, 4)); //outputs 8 console.log(typeof calc); //outputs function console.log(calc.name); //outputs Multiply

4. Function Declaration: Hoisting
MyFunction(); //outputs B function MyFunction() { console.log('A'); } function MyFunction(someParams) { console.log('B'); }

5. Function Expression: Syntax
var calc = function(a, b) { return a * b; } console.log(calc(2, 4)); //outputs 8 console.log(typeof calc); //outputs function console.log(calc.name); //outputs calc

6. Function Expression: Uses
var math = { 'multiply': function (a, b) { return a * b; } }; console.log(math.multiply(2, 4)); //outputs 8
function run(callback) { return callback(); } var x = run(function(){ return 10; }); console.log(x); //outputs 10

7. Shorthand Method var collection = { items: [],
//function expressions addItems: function(...items) { this.items.push(...items); }, getItem: function(index) { return this.items[index]; },
//shorthand methods
addItems(...items) { this.items.push(...items); }, getItem(index) { return this.items[index]; } }; collection.addItems('C', 'Java', 'PHP'); console.log(collection.getItem(1)); //outputs Java

8. Function Constructor: Syntax
var constructedSum = new Function('a', 'b', 'return a + b'); function declaredSum(a, b) { return a + b; } console.log(constructedSum(2, 6)); // outputs console.log(declaredSum(2, 6)); // outputs 8

9. Function Constructor: Scope
var x = 10; function useConstructor() { var x = 20; return new Function('return x;'); }
function useConstructorImmediately() { var x = 30; return (new Function('return x;'))(); }
function useExpression() { var x = 40; return function() { return x; } }
var a = useConstructor(); var b = useConstructorImmediately(); var c = useExpression();

10. Arrow Function Expression
Creates a unique type of function:
- no local "this"
- no local "arguments"
- no local "super"
- no "prototype" property
- cannot be a constructor
- cannot be a generator

11. Arrow Function Expression: Syntax
Parameters:
(param1, .., paramN) =>
(param1) =>
param1 =>
() =>
Body:
=> { statement; statement; };
=> { return expression };
=> expression; //implicit return
=> ({ ‘key’: value}); //wrap object literals
Full Example:
var myFunc = (a, b) => a * b;
console.log(myFunc(2, 4)); //outputs 8

12. Arrow Function Expression: this
function Person(){ this.age = 0; setInterval(() => { this.age++; }, 1000); } var person = new Person();
var person = { name: 'Bob', getNameWithArrowFunction: () => this.name, getNameWithFunctionExpression: function() {
return this.name;
} }; console.log(person.getNameWithArrowFunction()); //outputs undefined (or something similar, depends on the Javascript engine) console.log(person.getNameWithFunctionExpression()); //outputs Bob

13. Generator Function
function* generator(i) { yield i++; yield i++; yield i++; } var iterator = generator(0); console.log(iterator.next().value); //outputs 0 console.log(iterator.next().value); //outputs 1 console.log(iterator.next().value); //outputs 2 console.log(iterator.next().value); //outputs undefined
iterator.next() returns an object: {
‘value’: yielded_value_or_undefined,
‘done’: true_when_done }

14. Immediately Invoked Function Expression (IIFE)
console.log('a'); //outputs a (function() { console.log('b'); //outputs b })(); console.log('c'); //outputs c
var result = (function() { return 5; })(); console.log(result); //outputs 5

15. Summary