Module 3: Changing Function Context and Built-in Functions

Function is a specialized object, hence they can has property/methods. Objective of module:

Understanding context
call and apply
bind
JS Built-in functions
- eval
- parseInt
- parseFloat
- esape
- unesacpe

Understanding Function Context

general function's context in window object

function sayHi() {
    console.log('Hi');
    console.log(this);
}
sayHi(); // Hi
         // Window {...}

function's context can also belong to a specitic object

let greeting = {}; // define a greeting variable, and assign empty object to it
greeting.sayHi = function() { // define a property sayHi for greeting, whose value is a anonymous function
    console.log('Hi');
    console.log(this);
}
greeting.sayHi(); // Hi
                  // {sayHi:f}, this refer to the object referenced by greeting variable

Use constructor function new to create object

function sayHi() {
    console.log('Hi');
    console.log(this);
}
let greeting = new sayHi(); // Hi
                            // [obj Object], this refer to the empty object

Details of new is in W3school JS Object

What is the call Method?

W3school JavaScript Function Call

All JS object has few default properties, call is one of them
By parsing another object as arguemnt of call function of other object

e.g. of using call function

let person1 = {name: 'John', age: 22};
let person2 = {name: 'Mary', age: 26};
let sayHi = function () {
    console.log('Hi, ' + this.name);
}
sayHi.call(person1) // Hi, John
// Parse person1 object to call method as argument of sayHi, bind of this in sayHi to person1 object
sayHi.call(person2) // Hi, Mary

e.g.

let person1 = {name: 'John', age: 22};
let person2 = {name: 'Mary', age: 26};

let sayHi = function() {
    console.log('Hi, ' + this.name);
};
sayHi.call(); // calling call() without parameter, is same as calling the function

What is the apply Method?

JS Function Apply:

apply() is also a default method of JS object, which is similar as call

Difference btw call & apply:

The call() method takes arguments separately.
The apply() method takes arguments as an array.

function introduction(name, profession) {
    console.log('My name is ' + name + ' and I am a ' + profession + '.');
    console.log(this);
}
introduction('John', 'student');
introduction.apply(undefined, ['Mary', 'Lawyer']);
introduction.call(undefined, 'James', 'artiest');

When to use apply() vs call():

apply(): array input with similar elements
call(): individual arguments with varying type

What is the bind Method?

MDN: Function.prototype.bind()

call & apply call an existing function and change the function context (i.e. value of this object)
bind create/copy the function and then change context of copied function to given/parsed object. Notice: bind return a function, instead of executing it.

let person1 = {
    name: 'Mary',
    getName: function(){
        return this.name;
    }
};
let person2 = {
    name: 'John'
};
let getNameCopy = person1.getName.bind(person2); // won't change context of function
console.log(getNameCopy());

// If want to use call
let NameCopied = person1.getName.call(person2); // The call will execute directly.
console.log(NameCopied);

Using Built-in Functions

Javascript come with built-in functions.

eval

eval accept a string of expression, evaluate it and return as output

let x = 1;
let y = 2;
console.log(eval('x+y+1')); // 4

let x = 1;
let y = 2;
let s = 'abc';
console.log(eval('x+y+s')); // 3abc

parseInt

parseInt parse a string and return it as integer, user can assign base

console.log(parseInt('F', 16)); // 15
console.log(parseInt('15', 10)); // 15

parseFloat

parseFloat parse a string and return a floating number

console.log(parseFloat('3.99e-1')); // 39.9
console.log(parseFloat('')); // NaN

escape

Deprecated in JS 1.5