admin – Page 16

Function Constructors and ‘.protype’ in javascript

Something Like that:
Function Constructors and '.protype'

function Person(firstname, lastname){
    document.write(this + '<br>');
    this.firstname = firstname;
    this.lastname = lastname;
    document.write('This function is invoked.' + '<br>');
}

Person.prototype.getFullName = function(){
    return this.firstname + ' ' + this.lastname;
}

var john = new Person('Johan','de');
document.write(john + '<br>');

var jane = new Person('Jane','de');
document.write(jane + '<br>');

Person.prototype.getFormalFullName = function(){
    return this.lastname + ', ' + this.firstname;
}

document.write(john.getFormalFullName() + '<br>');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”JyLqOy” default_tab=”result” user=”pradeepanvi”]See the Pen Function Constructors and ‘.protype’ in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

[object Object]
This function is invoked.
[object Object]
[object Object]
This function is invoked.
[object Object]
de, Johan

Function Constructors, ‘new’, and the History of Javascript

Something Like that:
Function Constructors, 'new', and the History

What is Function Constructors in javascript
A Normal function that is used to construct objects.
(The ‘this’ variable points a new empty object, and that object is returned from the function automatically.)

function Person(){
    document.write(this + '<br>');
    this.firstname = 'John';
    this.lastname = 'Doe';
    document.write('This function is invoked.' + '<br>');
}

var john = new Person();
document.write(john + '<br>');

var jane = new Person();
document.write(jane + '<br>');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VzXOPy” default_tab=”result” user=”pradeepanvi”]See the Pen Function Constructors in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

[object Object]
This function is invoked.
[object Object]
[object Object]
This function is invoked.
[object Object]

Reflection and Extend in javascript

Something Like that:
Reflection and Extend

What is Reflection in javascript
An Object can look at itself, listing and changing its properties and methods.

var person = {
	firstname: 'Default',
	lastname: 'Default',
	getFullName: function(){
		return this.firstname + ' ' + this.lastname;
	}
}

var john = {
	firstname: 'John',
	lastname: 'Doe'
}

john.__proto__ = person;

for(var prop in john){
    if(john.hasOwnProperty(prop)){
      document.write(prop + ': ' + john[prop] + '
');
    }
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”PKRgaO” default_tab=”result” user=”pradeepanvi”]See the Pen Reflection in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

firstname: John
lastname: Doe

Extend (use underscore.js)

var john = {
	firstname: 'John',
	lastname: 'Doe'
}

var jane = {
    address: '111 Main St.',
    getFormalFullName: function(){
        return this.lastname + ', ' + this.firstname;
    }
}

var jim = {
    getFirstName: function(){
        return firstname;
    }
}

_.extend(john, jane, jim);
document.write(john);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qXowLN” default_tab=”result” user=”pradeepanvi”]See the Pen Extend in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

[object Object]

Prototype in javascript

Something Like that:
Prototype

For that you need to create first html code.

HTML

<p id="demo1"></p>
<p id="demo2"></p>

After that add this JS code.

var person = {
	firstname: 'Default',
	lastname: 'Default',
	getFullName: function(){
		return this.firstname + ' ' + this.lastname;
	}
}

var john = {
	firstname: 'John',
	lastname: 'Doe'
}

john.__proto__ = person;

document.getElementById('demo1').innerHTML = john.getFullName();
document.getElementById('demo2').innerHTML = john.firstname;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OjvBBY” default_tab=”result” user=”pradeepanvi”]See the Pen Prototype in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

John Doe
John

HTML

<p id="demo1"></p>

After that add this JS code.

var person = {
	firstname: 'Default',
	lastname: 'Default',
	getFullName: function(){
		return this.firstname + ' ' + this.lastname;
	}
}

var jane = {
	firstname: 'Jane'
}

jane.__proto__ = person;
document.getElementById('demo1').innerHTML = jane.getFullName();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VzXEOE” default_tab=”result” user=”pradeepanvi”]See the Pen Prototype in javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Jane Default

Everything is an Object (Or A Primitive)

For that you need to create first html code.

HTML

<p>What is a = <span id="demo1"></span></p>
<p>What is b = <span id="demo2"></span></p>
<p>What is c = <span id="demo3"></span></p>

After that add this JS code.

var a = {};
var b = function() {};
var c = [];
document.getElementById('demo1').innerHTML = a.__proto__;
document.getElementById('demo2').innerHTML = b.__proto__;
document.getElementById('demo3').innerHTML = c.__proto__;

Now you can see

What is a = [object Object]
What is b = function () { [native code] }
What is c =

Above you can see a is object and b is function
Now we will function is also object.

document.getElementById('demo1').innerHTML = a.__proto__;
document.getElementById('demo2').innerHTML = b.__proto__.__proto__;
document.getElementById('demo3').innerHTML = c.__proto__.__proto__;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”NvYmvY” default_tab=”result” user=”pradeepanvi”]See the Pen Prototype in javascript 04 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

What is a = [object Object]
What is b = [object Object]
What is c = [object Object]

Operator Precedence Table in javascript

Precedence	Operator type	Associativity	Individual operators
20	`Grouping`	n/a	`( … )`
19	`Member Access`	left-to-right	`… . …`
	`Computed Member Access`	left-to-right	`… [ … ]`
	`new` (with argument list)	n/a	`new … ( … )`
	Function Call	left-to-right	`… ( … )`
18	`new` (without argument list)	right-to-left	`new …`
17	`Postfix Increment`	n/a	`… ++`
17	`Postfix Decrement`	n/a	`… --`
16	Logical NOT	right-to-left	`! …`
	Bitwise NOT	right-to-left	`~ …`
	Unary Plus	right-to-left	`+ …`
	Unary Negation	right-to-left	`- …`
	Prefix Increment	right-to-left	`++ …`
	Prefix Decrement	right-to-left	`-- …`
	typeof	right-to-left	`typeof …`
	void	right-to-left	`void …`
	delete	right-to-left	`delete …`
15	Exponentiation	right-to-left	`… ** …`
14	Multiplication	left-to-right	`… * …`
	Division	left-to-right	`… / …`
	Remainder	left-to-right	`… % …`
13	Addition	left-to-right	`… + …`
13	Subtraction	left-to-right	`… - …`
12	Bitwise Left Shift	left-to-right	`… << …`
	Bitwise Right Shift	left-to-right	`… >> …`
	Bitwise Unsigned Right Shift	left-to-right	`… >>> …`
11	Less Than	left-to-right	`… < …`
	Less Than Or Equal	left-to-right	`… <= …`
	Greater Than	left-to-right	`… > …`
	Greater Than Or Equal	left-to-right	`… >= …`
	in	left-to-right	`… in …`
	instanceof	left-to-right	`… instanceof …`
10	Equality	left-to-right	`… == …`
	Inequality	left-to-right	`… != …`
	Strict Equality	left-to-right	`… === …`
	Strict Inequality	left-to-right	`… !== …`
9	Bitwise AND	left-to-right	`… & …`
8	Bitwise XOR	left-to-right	`… ^ …`
7	Bitwise OR	left-to-right	`… \| …`
6	Logical AND	left-to-right	`… && …`
5	Logical OR	left-to-right	`… \|\| …`
4	Conditional	right-to-left	`… ? … : …`
3	Assignment	right-to-left	`… = …`
			`… += …`
			`… -= …`
			`… **= …`
			`… *= …`
			`… /= …`
			`… %= …`
			`… <<= …`
			`… >>= …`
			`… >>>= …`
			`… &= …`
			`… ^= …`
			`… \|= …`
2	yield	right-to-left	`yield …`
2	yield*	right-to-left	`yield* …`
1	Spread	n/a	`...` …
0	Comma / Sequence	left-to-right	`… , …`

Functional Programming in javascript

Something Like that:
Functional Programming

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

function mapForEach(arr, fn){
	var newArr = [];
	for (var i=0; i<arr.length; i++){
		newArr.push(
			fn(arr[i])
		)
	};
	return newArr;
}

var arr1 = [1,2,3];
document.getElementById('demo').innerHTML = arr1;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”eEVZzg” default_tab=”result” user=”pradeepanvi”]See the Pen Functional Programming in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

1,2,3

var arr2 = mapForEach(arr1, function(item){
	return item * 2;
});
document.getElementById('demo').innerHTML = arr2;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”zdRqKz” default_tab=”result” user=”pradeepanvi”]See the Pen Functional Programming in javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

2,4,6

var arr3 = mapForEach(arr1, function(item){
	return item p> 2;
});
document.getElementById('demo').innerHTML = arr3;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XaZdMg” default_tab=”result” user=”pradeepanvi”]See the Pen Functional Programming in javascript 03 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

false,false,true

var checkPastLimit = function(limiter, item){
	return item p> limiter;
}
var arr4 = mapForEach(arr1, checkPastLimit.bind(this, 1));
document.getElementById('demo').innerHTML = arr4;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”WEMwOQ” default_tab=”result” user=”pradeepanvi”]See the Pen Functional Programming in javascript 04 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

false,true,true

var checkPastLimitSimplified = function(limiter){
	return function(limiter, item){
		return item p> limiter;
	}.bind(this, limiter);
};
var arr5 = mapForEach(arr1, checkPastLimitSimplified(2));
document.getElementById('demo').innerHTML = arr5;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rzJezw” default_tab=”result” user=”pradeepanvi”]See the Pen Functional Programming in javascript 05 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

false,false,true

Now with Underscore JS
https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

var arr6 = _.map(arr1, function(item){
	return item * 3
});
console.log(arr6);
document.getElementById('demo').innerHTML = arr6;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GvQZMa” default_tab=”result” user=”pradeepanvi”]See the Pen Functional Programming in javascript 06 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

3,6,9

var arr7 = _.filter([2,3,4,5,6,7], function(item){
	return item % 2 === 0;
})
document.getElementById('demo').innerHTML = arr7;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MvQyQm” default_tab=”result” user=”pradeepanvi”]See the Pen Functional Programming in javascript 07 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

2,4,6

function currying in javascript

Something Like that:
function currying

What is function currying in javascript?
Creating a copy of a function but with some preset parameters (very useful in mathematical situations).

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

function multiply(a, b){
    document.getElementById('demo').innerHTML = a * b;
}

var multipleByTwo = multiply.bind(this, 2);
multipleByTwo(4);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”brLpNP” default_tab=”result” user=”pradeepanvi”]See the Pen function currying in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

call, apply and bind in javascript

Something Like that:
call(), apply() and bind()

For that you need to create first html code.

HTML

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

After that add this JS code.

var person = {
    firstname: 'John',
    lastname: 'Doe',
    getFullName: function(){
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
}

var logName = function(lang1, lang2){
    document.getElementById('demo1').innerHTML = 'Logged: ' + this.getFullName();
    document.getElementById('demo2').innerHTML = 'Arguments: ' + lang1 + ' ' + lang2;
    document.getElementById('demo3').innerHTML = '-------';
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”brLEYQ” default_tab=”result” user=”pradeepanvi”]See the Pen call, apply and bind in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Right now we can’t see anything. Because we didn’t use these three call(), apply() and bind()

bind()
For a given functions, creates a bound function that has the same body as the original function.
The this object of the bound functions is associated with the specified object, and has the specified initial parameters.

var logPersonName = logName.bind(person);
logPersonName();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qXxbym” default_tab=”result” user=”pradeepanvi”]See the Pen bind in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Logged: John Doe
Arguments: undefined undefined
——-

call()
Calls a method of an object, substituting another object for the current object.

logName.call(person, 'en', 'es');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”JypGaW” default_tab=”result” user=”pradeepanvi”]See the Pen call in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Logged: John Doe
Arguments: en es
——-

apply()
Calls the function, substituting the specified object for the this value of the function,
and the specified array for the arguments of the function.

logName.apply(person, ['en', 'es']);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”dzdGgZ” default_tab=”result” user=”pradeepanvi”]See the Pen apply in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Logged: John Doe
Arguments: en es
——-

Closures and CallBack in javascript

Something Like that:
Closures and CallBack

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

function sayHiLater(){
    var greeting = 'Hi!';
    setTimeout(function(){
        document.getElementById('demo').innerHTML = greeting;
    }, 3000);
}

sayHiLater();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KvZoxx” default_tab=”result” user=”pradeepanvi”]See the Pen Closures and CallBack in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Hi!

CallBack Function
A Function you give to another function, to be run when the other function is finished
(So the function you call (i.e. invoke), ‘calls back’ by calling the function you gave it when it finishes.)

For that you need to create first html code.

HTML

<p id="demo1"></p>
<p id="demo2"></p>

After that add this JS code.

function tellMeWhenDone(callback){
    var a = 1000; //some work
    var b = 2000; //some work

    callback(); // the 'callback', it runs the function I give it!
}

tellMeWhenDone(function(){
    document.getElementById('demo1').innerHTML = 'I am done!';
});

tellMeWhenDone(function(){
    document.getElementById('demo2').innerHTML = 'All done!';
});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”bravOv” default_tab=”result” user=”pradeepanvi”]See the Pen CallBack Function in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

I am done!
All done!

Function factory in javascript

Something Like that:
Function factory

For that you need to create first html code.

function makeGreeting(lang){
    return function(firstname, lastname){
        if(lang === 'en'){
            document.write('Hello ' + firstname + ' ' + lastname);
        }
        if(lang === 'es'){
            document.write('Hola ' + firstname + ' ' + lastname);
        }
    }
}
var greetEnglish = makeGreeting('en');
var greetSpanish = makeGreeting('es');

greetEnglish('John', 'Doa');
document.write('
');
greetSpanish('John', 'Doa');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ZJvxrV” default_tab=”result” user=”pradeepanvi”]See the Pen Function factory in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Hello John Doa
Hola John Doa