Functions

JavaScript Workshop

Hello!

My name is Alex Bardanov

I'm a front-end developer at GlobalLogic / AVID

GitHub: dnbard

Skype: dnbard

Contents

1. Function
2. A step into the Functional Programming:
   • First Class Functions
   • Closures
   • Pure Functions
3. Immediately-invoked function expression

Function

function sum(a, b){
  return a + b;
}

Function

Always return some value ( undefined or something else )

//this function will return undefined
function logMe(data){
  console.log(data);
}

//this function will return the timestamp
function getNow(){
  return new Date();
}

Function

The parameters of a function call are the function's arguments

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

example(1, 2); //[1, 2]

Function

Arguments are passed to functions by value

(except for Objects)

var a, b;

function increment(a){
  return a + 1;
}

a = 1; // a = 1; b = undefined
b = increment(a); // a = 1; b = 2

Function

If the function changes the referred object's properties, that change is visible outside the function

var myCat = {
  color: '#000000',
  nickname: 'Vasiliy'
};

function recolorMyCat(cat){
  cat.color = '#FFFFFF';
}

recolorMyCat(myCat); 
/* {
 color: '#FFFFFF',
 nickname: 'Vasiliy'
} */

Function

function Hero(){
  this.id = this.generateId();
  this.name = "Default name";
  this.health = 100;
  this.class = "Warrior";
}

Hero.prototype = {
  generateId: function(){
    // return unique Id
  }
}

var myHero = new Hero();

Constructor

Function

function logContext(){
    console.log(this);
}


logContext.bind({ key: 'value' })();
    // { key: 'value' }

logContext(); // Window { ... }
logContext.bind(1)(); // Window { ... }
logContext.bind(function(){  })();
    // Window { ... }

Bind (ECMAScript 5)

Function

var user = {
  showData: function(){
    return this.name + ' ' + this.age;
  }
}

var cars = [
    {name:"Honda Accord", age:14},
    {name:"Tesla Model S", age:2}
]
​
var showFirstCarData = user.showData.bind (cars[0]);
showFirstCarData(); // Honda Accord 14​

Bind () Allows us to Borrow Methods

Function

function logContext(){
    console.log(this);
    console.log(arguments);
}

logContext.apply({ key: 'value' }, [1, 2]);

// Object {key: "value"}
// [1, 2]


logContext.call({ key: 'value' }, 1, 2);

// Object {key: "value"}
// [1, 2]

Apply & Call (ECMAScript 3)

First class Functions

Constructing new functions during the execution of a program

function sum(a, b){
  return a + b;
}

sum instanceof Object; // true
typeof sum; // 'function'

First class Functions

Passing functions as arguments to other functions

function sum(a, b, callback){
  callback(a + b);
}

sum(1, 2, function(result){
  console.log(result); // 3
});

CLOsUREs

function init(){
  var name = "Alex";

  function printName(){
    console.log(name);
  }
  
  printName(); // Alex
}

init();

The function defined in the closure 'remembers' the environment in which it was created

CLOsUREs

function makeAddFunction(adder){
  return function(value){
    return adder + value;
  }
}

var adder5 = makeAdderFunction(5);
adder5(10); // 15

CLOsUREs

function createUser(name){
  return {
    setName: function(newName){
      name = newName;
    },
    getName: function(){
      return name;
    }
  }
}

var user = createUser("Alex");

user.getName(); // Alex
user.setName('Michael');
user.getName(); // Michael

CLOsUREs

function init(){
  var counter = 0,
    button = document.querySelector('#button');

  button.onclick = function(){
    counter ++;
  }
}

init();

CLOsUREs

function getUser(request, response, next){
  var id = request.params.id;

  database.users.find(id, function(err, user){
    if (err){
      return next(err);
    }

    response.send(user);
  });
}

PURE FUNCTION

The function always evaluates the same result value given the same argument values. The function result value cannot depend on any hidden information or state that may change while program execution proceeds or between different executions of the program, nor can it depend on any external input from I/O devices.

Evaluation of the result does not cause any semantically observable side effect or output

PURE FUNCTION

function Sum(a, b){
  return a + b;
}

var a = 5;

function AddsFive(b){
  return a + b;
}

Unpure function:

Pure function:

Iife

JavaScript design pattern which produces a lexical scope using JavaScript's function scoping.

Immediately-invoked function expressions can be used:

              protect against polluting the global environment

          allow public access to methods while retaining privacy for variables defined within the function

Immediately-invoked function expression

(self-executing anonymous function)

Iife

(function() {
  // the code here is executed
  // in its own scope
})();

Iife

(function($, _) {
  $(function(){
    $('#label').text('Hello, World!');
  })
})(window.jQuery, window.lodash);

Passing the variables

Iife

a = b + c
(function() {
  // code 
})();

"Defensive" semicolon

Won't work

a = b + c
;(function() {
  // code 
})();

OK

Iife

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
})();

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

Private variables

thanks