JS functions

functions.js

// FUNCTIONS

// use on babeljs.io/repl


function declaration() {
  console.log('declaration');
}

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

declaration();
expression();

setTimeout(function() {
  console.log('timeout');
});

(function(w) {
  console.log('IIFE');
})(window);

// primitive is copied as argument

function inc(x) {
  x++;
  console.log(x);
}

var foo = 3;
inc(foo);
console.log(foo);

// objects/arrays are passed to functions by reference

function inc2(o) {
  o.x++;
  console.log(o);
}

var bar = {
  x: 3
}

inc2(bar);

console.log(bar);

// CLOSURES

var loggers = [];

for (var i = 0; i < 3; i++) {
  (function(i) {
    loggers[i] = function() {
      console.log(i);
    }
  })(i)
}

loggers[0]();
loggers[1]();
loggers[2]();


var logger;
(function() {
  var x = 1;
  (function() {
    var x = 2;
    (function() {
      var x = 3;
      logger = function() {
        console.log(x);
      }
    })();
  })();
})();

var x = 0;
logger();


// apply, call, bind

var o = {
  x: 3
}

var b = {
  x: 4
}

function inc() {
  this.x++;
  console.log(this.x);
}

inc.apply(b);

o.inc = inc.bind(o);
o.inc = inc;
o.inc();


b.inc = inc.bind(b);
b.inc = inc;
b.inc();

var oInc = inc.bind(o);
oInc();


// ES6


// arrow functions

// syntax:
// (param1, param2, paramN) => { statements }
// (param1, param2, paramN) => expression
  // equivalent to:  => { return expression; }
// Parentheses are optional when there's only one argument:
// (singleParam) => { statements }
// singleParam => { statements }
// A function with no arguments requires parentheses:
// () => { statements }


// lexical this

var handler = {
  id: 3,
  init: function() {
    window.addEventListener('resize', () => {
      console.log(this.id);
    });
  }
}

handler.init();

// arguments in regular function

function foo() {
  console.log(arguments);
}

foo(3, 4, 5);

// arguments doesn't exist in arrow functions

var bar = () => {
  console.log(arguments);
}

bar(3, 4, 5);

// rest parameter

function foo(obj, ...rest) {
  obj.sum = rest.reduce((item, acc) => acc + item, 0);
  console.log(obj);
}

foo({}, 3, 4, 5, 1, 3);

// spread operator
var a = [3, 9, 8, 2, 1];
// ES5:
console.log(Math.max.apply(Math, a));
// ES6:
console.log(Math.max(...a));


// bonus - temporal dead zone in let/const

// if (typeof x) { // <= throws an error
//   console.log('foo');
// }

// let x = 3;