JS Core 3

Objects

Object

Property

primitive

Property

object

Method

function

var obj = new Object();
obj['property1'] = 'string';  // primitive string as property
obj['property2']  = 12;       // primitive number as property

var str = 'property3';

obj[str] = true;             //primitive boolean as property
var obj = {};
obj.property1 = 'string';  // primitive string as property
obj.property2 = 12;       // primitive number as property

var str = 'property3';

obj.str = true;             //primitive boolean as property
var obj = {
    property1: 'string1',
    property2: 12,
    property3: true,
    property4: {
        name: 'John',
        surname: 'Doe'
    }
}

JavaScript Object Notation

JSON

//JS Obect
var group = {
	studentsCount: 15,
	lessonsPass: 1,
	jsCourse: true,
	otherObj: {
		property: 'prop'
	}
}

//JSON
{
	"studentsCount": "15",
	"lessonsPass": "1",
	"jsCourse": "true",
	"otherObj": {
		"property": "prop"
	}
}

JSON -> JS object

JSON.parse();

JS object -> JSON

JSON.stringify();

First Class Functions

Everything you can do with other types, you can do with functions

Function

Primitive

Object

function

Function is an Object

name (optional)

Code

(invocable)

function hiGuys(){
    console.log('hi guys');
}

hiGuys.property1 = 'new property'; //creation of property

Function

Code

 

console.log('hi guys');

hiGuys

property1

(string)

Function statement &

Function expression

function hiAll() {
    console.log('Hi all');
}

Function statement

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

Function expression

name: 'hiAll'

name: ''

(anonymus)

function invokeFunc(a){
    a();
}

var myVar = function(){
    console.log('Expression created func');
}

invokeFunc(myVar);

invokeFunc(function(){
    console.log('hey Group');
});

By value

&

By reference

Primitive

by value

Objects

by reference

  • undefined
  • null
  • number
  • string
  • boolean
  • object
  • array
  • function
// By value

var a = 1;
var b;

b = a;

a = 2;

console.log(a); // log: 2
console.log(b); // log: 1

// By reference

var obj1 = {};
var obj2;

obj1.greet = 'hello guys';

obj2 = obj1;

obj2.greet = 'Hola guys';

console.log(obj1.greet); // log: Hola guys
console.log(obj2.greet); // log: Hola guys

this

(execution context)

4 Invocation types

Function invocation

var b = 1;

function hey(){
    console.log(this.b);
}

hey(); // log: 1

Method invocation

var b = 1;
var obj = {
    b: 2,
    method1: function(){
        console.log(this.b);
    }
}


obj.method1(); // log: 2
var b = 1;
var obj = {
    b: 2,
    method1: function() {
        //console.log(this.b);

        function depperFunc() {
        	console.log(this.b);
        }
        depperFunc();
    }
}


obj.method1();

LOG: 1

var b = 1;
var obj = {
    b: 2,
    method1: function() {
        var self = this;
        //console.log(this.b);

        function depperFunc() {
        	console.log(self.b);
        }
        depperFunc();
    }
}


obj.method1();

LOG: 2

Context saving pattern

Arrays

(collections of something)

By reference!

var arr1 = new Array();

var arr = [];

arr[0] = true;

console.log(arr);

var multiTypesArray = [1, false, {a: 12}, 'greetings', function () {
	console.log('Hi');
}];

console.log(multiTypesArray[0]); // log: 1
console.log(multiTypesArray[1]); // log: false
console.log(multiTypesArray[2]); // log: Object {a: 12}
console.log(multiTypesArray[3]); // log: greetings
console.log(multiTypesArray[4]); // log: function(){console.log('Hi')}

arguments

Execution contex

Variable environment

Outer environment

This

arguments

function myFunc(a1, a2, a3) {
    console.log(a1, a2, a3);
}
myFunc(1, 2); //  1 2 undefined

function myFunc2(b1, b2, b3) {
    console.log(arguments);
}

myFunc2(1,2); // [1, 2]
function myFunc(a1, a2, a3) {
    if(arguments.length < 3){
    	console.log('Missing some arguments');
    	return;
    } 
}
myFunc(); // Missing some arguments

Function overloading

function sayHi(name, language) {
    switch (language) {
        case 'en':
            console.log('Hello ' + name);
            break;
        case 'es':
            console.log('Hola ' + name);
            break;
        case 'ru':
            console.log('Привет ' + name);
            break;
    }
}

sayHi('Egor', 'es');
sayHi('Sasha', 'ru');
sayHi('Pedro', 'en');

function sayHi(name, language) {
    switch (language) {
        case 'en':
            console.log('Hello ' + name);
            break;
        case 'es':
            console.log('Hola ' + name);
            break;
        case 'ru':
            console.log('Привет ' + name);
            break;
    }
}

function sayHiEnglish(name) {
    sayHi(name, 'en');
}

function sayHiSpanish(name) {
    sayHi(name, 'es');
}

function sayHiRussian(name) {
    sayHi(name, 'ru');
}

sayHiRussian('Ivan');
sayHiEnglish('Egor');
sayHiSpanish('Iakov');

IIFE

Immediately Invoked Function Expression

function myFuncStatement() {
    console.log('I am statement');
}

myFuncStatement();


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

funcExpression();

var funcExpression = function() {
    return 'I am function expression';
}();

console.log(funcExpression);

(function() {
    console.log('Something')
})(); // Something

(function(name, surname) {
    console.log('Hello ' + name + ' ' + surname);
})('John', 'Doe'); // Hello John Doe

//some code
myVar = 'Hi all';

(function() {
    var myVar = 'Hello group';
    console.log(myVar);
})();


//some code

Global execution environment

Execution context

(created by anonymous func )

myVar: Hello group

myVar: Hi all



(function(global) {
    var myVar = 12;
    global.myVar = myVar;
})(window);

Closures

function hi() {
    return function(name) {
        console.log('Hello ' + name);
    };
}
function hi(greet) {
    return function(name) {
        console.log(greet + ' ' + name);
    };
}

var greetingEng = hi('Hello');
var greetingSpanish = hi('Hola');
var greetingRussian = hi('Привет');

greetingEng('Егор');
greetingSpanish('Егор');
greetingRussian('Егор');
function example() {
    var myVar = 12;
    return function() {
        console.log(myVar);
    }
}

var resultFuncObj = example();
resultFuncObj();

Global execution environment

example()

example execution context

myVar : 12

resultFuncObj : function object

anonymous func execution context

myVar : ?

Anonymous function closure variable of outer environment on itself.

function funcBuilder() {
    var arr = [];

    for (var i = 0; i < 3; i++) {
        arr.push(function() {
            console.log(i);
        });
    };

    return arr;
}


var builder = funcBuilder();

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

Log ?

3

3

3

Global

funcBuilder

builder 

funcBuilder()

arr : [func, func, func]

i: 3

builder[0] , builder[1], builder[2]

function funcBuilder() {
    var arr = [];

    for (var i = 0; i < 3; i++) {
        arr.push((function(j) {
            return function() {
                console.log(j);
            }
        })(i));
    };

    return arr;
}


var builder = funcBuilder();

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

Callbacks

function logWithDelay() {

    var log = 'some log';

    setTimeout(function() {
        console.log(log);
    }, 3000);
}


logWithDelay();

Callback function - function you give to another function to be run when the other function finished.

function myOwnFunc(a, b, callback) {
    var c = a + b;

    callback(c);
}

myOwnFunc(1, 2, function(arg) {
    alert(arg);
});


myOwnFunc(4, 2, function(arg) {
    alert(arg);
});

call()

apply()

bind()

bind

(binds context to function)

fun.bind(thisArg[, arg1[, arg2[, ...]]])

returns function

var prop1 = 1;
var prop2 = 1;


var obj = {
    prop1: 2,
    prop2: 2,
    method: function() {
        console.log(this.prop1 + this.prop2);
    }
}

obj.method(); // 4

var globalCall = obj.method; // assign method to other var

globalCall(); // 2


globalCall = globalCall.bind(obj); // we bind context to function

globalCall(); // 4
function multiply(a, b) {
    return a * b;
}

console.log(multiply(2, 2)); // 4

var sqrt = multiply.bind(null, 2);

console.log(sqrt(4)); // 8

Call

(calls function with setted context )

fun.bind(thisArg[, arg1[, arg2[, ...]]])

invokes function

var prop1 = 1;
var prop2 = 1;


var obj = {
    prop1: 2,
    prop2: 2,
    method: function() {
        console.log(this.prop1 + this.prop2);
    }
}

obj.method(); // 4

var globalCall = obj.method; // assign method to other var

globalCall(); // 2

globalCall.call(obj); //call function with specail context

Apply

(calls function with setted context )

var obj = {
    index: 12
}

function getSum(a, b) {
    var sum = 0;

    for (var i = arguments.length - 1; i >= 0; i--) {
        sum += arguments[i];
    };

    return this.index * sum;
}

getSum.call(obj, 1, 2);
getSum.apply(obj, [1, 2, 3, 4]);

var arr = [{
    a: 12,
    b: 1
}, {
    a: 12,
    b: 2
}, {
    a: 3,
    b: 12
}, {
    a:1,
    c:21
}];

function countArithmetical() {
    return (this.a + this.b) / 2;
}

for (var i = arr.length - 1; i >= 0; i--) {
    if (arr[i].hasOwnProperty('a') && arr[i].hasOwnProperty('b')) {
        arr[i].countArithmetical = countArithmetical.bind(arr[i]);
    };
};
console.log(arr);
console.log(arr[0].countArithmetical());
console.log(arr[1].countArithmetical());
console.log(arr[2].countArithmetical());

Function borrowing

JS Core 1_3

By Tarun Sharma

Source: Mikki Churilov

JS Core 1_3

  • 1,092

More from Tarun Sharma