Functions

Functions

A function is an object that contains executable code.

In Javascript functions are first class, meaning that the can be:

• Assigned to variables

• Passed as parameters

• Returned from other functions

Declaring

Function Declaration

Just like declaring vars with var, the function is always declared in the beginning of the main scope.

• This is called hoisting.

So you can 'call' this function before declaring it.

function a() {
    ...
}

Function Expression

You attribute it to a variable.

const a = function() {

}

Returning Functions

Functions that are returned from other functions can be instantly called with:

const a = () => {
    return () => {
        return 'Do something';
    }
}

console.log( a()() );

const sum = (a, b) => a + b;
const sub = (a, b) => a - b;

const calculator = (fn) => {
    return (a, b) => {
        return fn(a, b);
    }
}

console.log( calculator(sum)(2, 2) );
console.log( calculator(sub)(2, 2) );

Parameters (Arguments)

You can access the list of arguments by accessing the default variable arguments.

const a = () => {
    console.log(arguments);  // -> { '0': 1, '1': 2, '2': 3 }
}

a(1, 2, 3, ...);

Rest Parameter

Using Spread Operator, but must always be the last parameter declared.

const a = (...args) => {
    ...
}

console.log( a(1, 2, 3, 4) );

this

An implicit variable that always references the object responsible for its invocation.

So, it does not matter if you declare a function in global scope or inside an object, if you call the function inside the object, this will reference the object, and if you call it in global scope it will reference the global scope.

IMPORTANT: this cannot be accessed by functions declared as arrow functions.

area: () => { return this.x * this.y };

const rec = {
    x: 10,
    y: 2,
    area() {
        return this.x * this.y;
    }
}

const area = () => { return this.x * this.y };

const area = function() { return this.x * this.y };
const rec = { x: 10, y: 2, area };

console.log( area() );      // -> undefined
console.log( rec.area() );  // -> 20

getter and setter

It is also possible to defined the getters and setters using .defineProperty().

getter

const rec = {
    x: 10,
    y: 2,
    get area() {
        return this.x * this.y;
    }
}

setter

When working with setter always use the function name different from the property name.

It is common practice to just use _property.

const rec = {
    set x(x) {
        this._x = x;
    }
    set y(y) {
        this._y = y;
    }
    get area() {
        return this._x * this._y;
    }
}

rec.x = 10;
rec.y = 2;
console.log( rec.area() );  // -> 20

call, apply, bind

Using .call() and .apply(), you can invoke a function passing this as parameter.

const area = function() {
    return Math.PI * Math.pow(this.radious, 2);
}

const area2 = function(fn, a, ...) {
    return fn(Math.PI * Math.pow(this.radious, 2)) + a;
}

const circle = {
    radious: 10,
    area,
    area2
}

// Traditional way invoking from the object
console.log( circle.area() );                 // -> 314.12412
console.log( circle.area2(Math.round, 1) );   // -> 315

Using call

function.call(obj, ...args):

• function: Is the function to be executed.

• obj: Is the object to give the this context to the function.

• args: Are additional parameters passed to the function.

console.log( area.call(circle) );                  // -> 314.12412
console.log( area2.call(circle, Math.round, 1) );  // -> 315

Using apply

function.call(obj, [...args]):

• function: Is the function to be executed.

• obj: Is the object to give the this context to the function.

• args: Are additional parameters passed to the function by Array.

console.log( area.apply(circle) );                    // -> 314.12412
console.log( area2.apply(circle, [Math.round, 1]) );  // -> 315

Using bind

Allows encapsulating this inside the function, returning it.

const calcArea = area2.bind(circle);

console.log( calcArea(Math.round, 1) );  // -> 315

new

You can create multiple objects that share the same structure with Constructor Functions.

• So that you eliminate duplication and have more reusability.

• By convention they are declared with Capital Letters.

IMPORTANT: Cannot use arrow functions to declare Constructor Functions.

Public properties (the ones that will be returned) will be accessed with this.

const Person = function(name, city, year) {
    this.name = name;
    this.city = city;
    this.year = year;

    // This is private
    let sex = 'whatever';

    // Both of this works
    this.getAge = () => {
        return (new Date()).getFullYear() - this.year;
    }
    this.getAge = function() {
        return (new Date()).getFullYear() - this.year;
    }
}

const person1 = new Person(...);
const person2 = new Person(...);

By declaring the function inside, each person object will have a getAge() of different instance. Thus taking more memory.

To address this...

You declare the getAge() inside the Constructor Funtion prototype.

• Every function has a property prototype __proto__, linked to the object created by new and only the Constructor Functions use them.

  • [This __proto__ is NOT the same __proto__ from objects heritage]

Person.prototype.getAge = () => {} cannot access this.

const Person = function(name, city, year) {
    this.name = name;
    this.city = city;
    this.year = year;
}
Person.prototype.getAge = function() {
    return (new Date()).getFullYear() - this.year;
}

const person1 = new Person(...);
const person2 = new Person(...);

Now all the instances of Person are inheriting the getAge and sharing its code.

instanceof

With it, it is possible to check if a object was created by a specific Constructor Function, analysing all of its prototype chain.

const data = new Date();

console.log( date instanceof Date )  // -> True

Arrow Function

More simple and direct approuch for declaring functions.

Downside is that they dont have their own this and arguments, so they end up inheriting from the upper closure.