Author: admin

Something Like that:
Add value in Arrays

For that you need to create first html code.

JS

function buildFunctions(){
    var arr = [];
    for (var i = 0; i<3; i++){
        arr.push (
            function(){
            document.write(i + '
');
            }  
        ) //appned new element in a array and returns the new langth of the array
    }
    return arr;
}

var fs = buildFunctions();
fs[0]();
fs[1]();
fs[2]();

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

Now you can see

3
3
3

3 all times. Something strange?

JS

function buildFunctions2(){
    var arr = [];
    for (var i = 0; i < 3; i++){
        arr.push(
            (function(j){
                return function(){
                    document.write(j + '
');
                }
            }(i))
        )
    }
    return arr;
}

var fs2 = buildFunctions2();
fs2[0]();
fs2[1]();
fs2[2]();

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

Now you can see

0
1
2

Something Like that:
Closures

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

function greet(whattosay){
    return function(name){
        document.getElementById("demo1").innerHTML = whattosay + ' ' + name;
    }
}
greet('Hi')('Tony');

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

Now you can see

Hi Tony

Second Option

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

function greet(whattosay){
    return function(name){
        document.getElementById("demo1").innerHTML = whattosay + ' ' + name;
    }
}
var sayHi = greet('Hi');
sayHi('Tony');

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

Now you can see

Hi Tony

Something Like that:
Immediately Invoked Function Expressions (IIFE)S

What is (IIFE)S?
Immediately Invoked Function Expressions

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

var greeting = function(name){
    return 'Hello ' + name;
}('John');
document.getElementById("demo1").innerHTML = greeting;

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

Now you can see

Hello John

Another Example

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

var firstname = 'Johan';
(function(name){

    var greeting = 'Inside IIFE: Hello';
    document.getElementById("demo1").innerHTML = greeting + ' ' + name;
}(firstname));

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

Now you can see

Inside IIFE: Hello Johan

IIFE and safe code
1. Doesn’t take global variable with global parameters.
2. replace global variable with IIFE.

For that you need to create first html code.

HTML

<p>Inside Function = <span id="demo1"></span></p>
<p>Global = <span id="demo2"></span></p>

After that add this JS code.

JS

var greeting = 'Hola';
(function(global, name){
    var greeting = 'Hello';
    global.greeting = 'Hello';
    document.getElementById("demo1").innerHTML = greeting + ' ' + name;
}(window, 'John'));

document.getElementById("demo2").innerHTML = greeting;

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

Now you can see

Inside Function = Hello John
Global = Hello

Something Like that:
Whitespace

What is Whitespace?
Invisible characters that create literal ‘space’ in your written code
(carriage return, tabs, space)
basically Whitespace means clean code with comments for easy understand to coder

There are two examples and both are correct

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

var firstname, lastname, lang;
var person = {firstname: 'John', lastname: 'Doe'}

document.getElementById("demo1").innerHTML = person;

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

Now you can see

[object Object]

Now next example with clean code

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

var 
    // first name of the person
    firstname,

    // last name of the person
    lastname,

    // the lang
    // can be 'en' or 'es'
    lang;

var person = {
    // the first name
    firstname: 'John',

    // the last name
    // (always required)
    lastname: 'Doe'
}

document.getElementById("demo1").innerHTML = person;

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

This is the best way to write code.
Now you can see

[object Object]

Something Like that:
Automatic Semicolon Insertion

What is Automatic Semicolon Insertion?
If we write some code and just gave enter, so It will be add automatic semicolon.

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

function getPerson(){
    return
    {
        firstname: 'Tony'
    }
}

document.getElementById("demo1").innerHTML = getPerson();

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

This will be written undefined. because after return javascript insert semicolon due to enter
Now you can see

undefined

Now next example without enter

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

function getPerson(){
    return
    {
        firstname: 'Tony'
    }
}

document.getElementById("demo1").innerHTML = getPerson();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EvXjwa” default_tab=”js” user=”pradeepanvi”]See the Pen Automatic Semicolon Insertion in javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

This will be show Object as written.
Now you can see

[object Object]

Something Like that:
Function overloading

Syntax Parsers: read lang character by character

For that you need to create first html code.

HTML

<p>Lang EN =  <span id="demo1"></span></p>
<p>Lang ES =  <span id="demo2"></span></p>

After that add this JS code.

JS

function greet(firstname, lastname, lang){
    lang = lang || 'en';

    if(lang === 'en'){
        document.getElementById("demo1").innerHTML = 'Hello ' + firstname + ' ' + lastname;
    }

    if(lang === 'es'){
        document.getElementById("demo2").innerHTML = 'Hola ' + firstname + ' ' + lastname;
    }
}

function greetEnglish(firstname, lastname){
    greet(firstname, lastname, 'en');
}

function greetSpanish(firstname, lastname){
    greet(firstname, lastname, 'es');
}

greetEnglish('Johan','Doa');
greetSpanish('Johan','Doe');

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

Now you can see

Lang EN = Hello Johan Doa
Lang ES = Hola Johan Doe

Something Like that:
Arguments

What is Arguments in javascript
The parameters you pass to a function
(Javascript gives you a keyword of the same name which contains them all)

For that you need to create first html code.

HTML

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>

After that add this JS code.

JS

function greet(firstname, lastname, lang, ...other){ // ...other add extra value on parameters
    lang = lang || 'en';

    if(arguments.length === 0){
        document.getElementById("demo1").innerHTML = 'Missing parameters!';
        document.getElementById("demo2").innerHTML = '-------';
        return;
    }
    document.getElementById("demo2").innerHTML = firstname;
    document.getElementById("demo3").innerHTML = lastname;
    document.getElementById("demo4").innerHTML = lang;
    document.getElementById("demo5").innerHTML = arguments; 
    //default variable of Javascript
    document.getElementById("demo6").innerHTML = 'arg 0: ' + arguments[0];
    document.getElementById("demo7").innerHTML = '-------';
}
greet();
greet('John');
greet('John', 'Deo');
greet('John', 'Deo', 'es', '111', 'my');

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

Now you can see

Missing parameters!
John
Deo
es
[object Arguments]
arg 0: John
——-

Something Like that:
Arrays collections

For that you need to create first html code.

HTML

<p>Run Arr =  <span id="demo1"></span></p>
<p>Run Arr with parameter =  <span id="demo2"></span></p>

After that add this JS code.

JS

var arr = [
    1,
    false,
    {
        name:'Tony',
        address: '111 Main st.'
    },
    function(name){
        var greeting = 'hello ';
        document.getElementById("demo2").innerHTML = greeting + name;
    },
    'hello'
];

document.getElementById("demo1").innerHTML = arr;
arr[3](arr[2].name);

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

Now you can see

Run Arr = 1,false,[object Object],function (name){ var greeting = ‘hello ‘; document.getElementById(“demo2”).innerHTML = greeting + name; },hello
Run Arr with parameter = hello Tony

Something Like that:
this

For that you need to create first html code.

HTML

<p>Function a =  <span id="demo1"></span></p>
<p>Function b =  <span id="demo2"></span></p>
<p>Global =  <span id="demo3"></span></p>

After that add this JS code.

JS

function a(){
    document.getElementById("demo1").innerHTML = this;
    this.newvar = 'hello';
}
var b = function(){
    document.getElementById("demo2").innerHTML = this;
}
a(); //this will point window
document.getElementById("demo3").innerHTML = newvar;
b(); //this will point window

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

Now you can see

Function a = [object Window]
Function b = [object Window]
Global = hello

We have another example

For that you need to create first html code.

HTML

<p>Update c =  <span id="demo1"></span></p>
<p>Update again c =  <span id="demo2"></span></p>

After that add this JS code.

JS

var c = {
    name: 'The c object',
    log: function(){
        var self = this;
        self.name = 'Updated c object';
        document.getElementById("demo1").innerHTML = self.name;

        var setname = function(newname){
            self.name = newname;
        }
        setname('Updated again! the c object');
        document.getElementById("demo2").innerHTML = self.name;
    }
}

c.log();

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

Now you can see

Update c = Updated c object
Update again c = Updated again! the c object

Something Like that:
By Value vs By reference

by value (primitive)
For that you need to create first html code.

HTML

<p>Value of a =  <span id="demo1"></span></p>
<p>Value of b =  <span id="demo2"></span></p>

After that add this JS code.

JS

var a = 3;
var b;

b = a; //create copy from a, but not update the value
a = 2; //update the value.

document.getElementById("demo1").innerHTML = a;
document.getElementById("demo2").innerHTML = b;

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

Now you can see

Value of a = 2
Value of b = 3

by reference (all object (including functions))
For that you need to create first html code.

HTML

<p>Value of c =  <span id="demo1"></span></p>
<p>Value of d =  <span id="demo2"></span></p>

After that add this JS code.

JS

var c = { greeting: 'hi'};
var d;

d = c;
c.greeting = 'hello'; //mutate

    /*Mutate: To change something ('Immutate' means it can't be changed.)*/

document.getElementById("demo1").innerHTML = c.greeting;
document.getElementById("demo2").innerHTML = d.greeting;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”YxZjYg” default_tab=”result” user=”pradeepanvi”]See the Pen by reference (all object (including functions)) in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see
Value of c = hello
Value of d = hello

by reference (even as parameters)

For that you need to create first html code.

HTML

<p>Value of c =  <span id="demo1"></span></p>
<p>Value of d =  <span id="demo2"></span></p>

After that add this JS code.

JS

var c = { greeting: 'hi'};
var d;

d = c;
c.greeting = 'hello'; //mutate

//by reference (even as parameters)
function changeG(obj){
    obj.greeting = 'Hola';
}

changeG(d);
document.getElementById("demo1").innerHTML = c.greeting;
document.getElementById("demo2").innerHTML = d.greeting;

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

Now you can see
Value of c = Hola
Value of d = Hola

equal operator sets up new memory space (new address)

For that you need to create first html code.

HTML

<p>Value of c =  <span id="demo1"></span></p>
<p>Value of d =  <span id="demo2"></span></p>

After that add this JS code.

JS

var c = { greeting: 'hi'};
var d;

d = c;
c.greeting = 'hello'; //mutate

c = {greeting: 'howdy'};
document.getElementById("demo1").innerHTML = c.greeting;
document.getElementById("demo2").innerHTML = d.greeting;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OjmmjZ” default_tab=”result” user=”pradeepanvi”]See the Pen equal operator sets up new memory space (new address) in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see
Value of c = howdy
Value of d = hello