Author: admin

Something Like that:
Function statements and functions expressions

What is Function statement
Fly will be work everywhere

For that you need to create first html code.

HTML

<p>Function statement =  <span id="demo"></span></p>

After that add this JS code.

JS

greet();
function greet(){
    document.getElementById("demo").innerHTML = 'Hi';
}

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

Now you can see

Function statement = Hi

What is Function Expression
Fly work only after function

For that you need to create first html code.

HTML

<p>Function Expression =  <span id="demo"></span></p>

After that add this JS code.

JS

var agreet = function(){
    document.getElementById("demo").innerHTML = 'Hi';
}
agreet();

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

Now you can see
Function Experssion = Hi

We can also Pass function expression into statement

For that you need to create first html code.

HTML

<p>Function Expression into statement =  <span id="demo"></span></p>

After that add this JS code.

JS

    function log(a){
        a();
    }
    log(function(){
        document.getElementById("demo").innerHTML = 'Hi';
    })

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

Now you can see
Function Expression into statement = Hi

Something Like that:
First Class Functions

What is First Class Functions
Everything you can do with other types you can do with functions.
(Assign them to variable, pass them around, create them on the fly)

For that you need to create first html code.

HTML

<p>Greet =  <span id="demo"></span></p>
<p>Greet Data =  <span id="demo2"></span></p>
<p>Greet Lang =  <span id="demo3"></span></p>

After that add this JS code.

JS

function greet(){
    document.getElementById("demo2").innerHTML = 'Hi';
}
greet.lang = 'en';
document.getElementById("demo1").innerHTML = greet;
document.getElementById("demo3").innerHTML = greet.lang;

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

Now you can see

Greet = function greet(){ document.getElementById(“demo2”).innerHTML = ‘Hi’; }
Greet Data =
Greet Lang = en

Something Like that:
JSON and Object literals

What is JSON
JavaScript Object Notation

JSON

{
    "firstname": "Tony",
    "isAP": true
}

How to Convert Object to JSON in javascript

For that you need to create first html code.

HTML

<p>JSON Data =  <span id="demo"></span></p>

After that add this JS code.

JS

var objectliteral = {
    firstname: 'Tony',
    isAP: true
}
document.getElementById("demo").innerHTML = JSON.stringify(objectliteral);

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

Now you can see

JSON Data = {“firstname”:”Tony”,”isAP”:true}

Now I want to convert JSON to Object
How to convert JSON to Object in javascript

For that you need to create first html code.

HTML

<p>JSON Data =  <span id="demo"></span></p>

After that add this JS code.

JS

var jsonValue = JSON.parse('{ "firstname":"Tony", "isAP":true}');
document.getElementById("demo").innerHTML = jsonValue;

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

Now you can see

Object Data = [object Object]

Something Like that:
Namespace

What is Namespace
A container for variable and functions (Typically to keep variable and functions with the same name separate)

For that you need to create first html code.

HTML

<p>Value of greet =  <span id="demo"></span></p>
<p>Value of English =  <span id="demo"></span></p>

After that add this JS code.

JS

var greet = 'Hello!';
var greet = 'Hola!';
document.getElementById("demo1").innerHTML = greet;

var english = {
    greet: 'Hello!'
}
var spanish = {
    greet: 'Hola!'
}
document.getElementById("demo2").innerHTML = english;
console.log(english);

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

Now you can see

Value of greet = Hola!
Value of English = [object Object]

Now again [object object]
Just console it.

Or you have another options.

HTML

<p>Value of English =  <span id="demo3"></span></p>

After that add this JS code.

JS

document.getElementById("demo3").innerHTML = english.greet;

Value of English = Hello!

Something Like that:
Object and Object literals

What is Object and Object literals
Both are work same.

Object

For that you need to create first html code.

HTML

<p>Value of a =  <span id="demo"></span></p>

After that add this JS code.

JS

var person = new Object();
person.firstname = "Tony";
person.lastname = "Alica";
person.address = new Object();
person.address.street = '111 Main'

document.getElementById("demo").innerHTML = person;
console.log(person);

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

Now you can see

Value of a = [object Object]

Looks strange?
In the code you can see one more line.

JS

console.log(person);

How can I see console?
Just Ctrl+Shift+I or F12

Click on Console tab

Now Object literals

JS

var person = { 
    firstname: 'Tony', 
    lastname: 'Alica',
    address: {
        street: '111 Main'
    }
};

document.getElementById("demo").innerHTML = person;
console.log(person);

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

Now you can see

Value of a = [object Object]

and check console window.

Both result are same but point is best way to write code from my side Object literals is best.

Something Like that:
Existence and Boolean

What is Existence
Goes to internet and looks for a value.

For that you need to create first html code.

HTML

<p>Value of a =  <span id="demo"></span></p>

After that add this JS code.

JS

var a;
a = '';
if(a){
    document.getElementById("demo").innerHTML = 'something is there!';
} else {
    document.getElementById("demo").innerHTML = 'Nothing is there!';
}

You can see a = ”; So now It will be print ‘Nothing is there!’

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

Now you can see

Value of a = Nothing is there!

Other side I want this should be print ‘something is there!’

JS

var a;
a = 'something';
if(a){
    document.getElementById("demo").innerHTML = 'something is there!';
} else {
    document.getElementById("demo").innerHTML = 'Nothing is there!';
}

You can see a = ‘something’; So now It will be print ‘something is there!’

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

Now you can see

Value of a = something is there!

Let’s try Boolean as well true/false.

JS

var a;
a = false;
if(a){
    document.getElementById("demo").innerHTML = 'something is there!';
} else {
    document.getElementById("demo").innerHTML = 'Nothing is there!';
}

You can see a = false; So now It will be print ‘Nothing is there!’

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

Now you can see

Value of a = Nothing is there!

JS

var a;
a = true;
if(a){
    document.getElementById("demo").innerHTML = 'something is there!';
} else {
    document.getElementById("demo").innerHTML = 'Nothing is there!';
}

You can see a = ‘something’; So now It will be print ‘something is there!’

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

Value of a = something is there!

You can try number as well.

Something Like that:
Comparison

What is Comparison
Number of true,false,undefined,null value.

For that you need to create first html code.

HTML

<p>Value of a =  <span id="demo"></span></p>

After that add this JS code.

JS

var a = 1 < 2 < 3;
document.getElementById("demo").innerHTML = a;

[codepen_embed height="265" theme_id="0" slug_hash="Kvgopy" default_tab="result" user="pradeepanvi"]See the Pen Comparison Operator in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Value of a = true

Why it is?
True because It's due to Comparison Number.

Number(false) = 0
Number(true) = 1
Number(undefined) = NaN
Number(null) = 0

And you also already know about "<" Associativity. You can find this into Operator Precedence Table, left-to-right.
There you can see.

JS

var a = 1 < 2;
document.getElementById("demo").innerHTML = a;

[codepen_embed height="265" theme_id="0" slug_hash="aymGwm" default_tab="result" user="pradeepanvi"]See the Pen Comparison Operator in javascript 03 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now
Value of a = true

And True Number is 1.

JS

var a = 1 < 3;
document.getElementById("demo").innerHTML = a;

[codepen_embed height="265" theme_id="0" slug_hash="EvgLwy" default_tab="result" user="pradeepanvi"]See the Pen Comparison Operator in javascript 04 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Value of a = true.

We will try one other example

For that you need to create first html code.

HTML

<p>a and b =  <span id="demo"></span></p>

After that add this JS code.

JS

var a = 0;
var b = false;

if(a === b){
    document.getElementById("demo").innerHTML = 'They are equal!';
} else {
    document.getElementById("demo").innerHTML = 'Nope, not equal!';
}

[codepen_embed height="265" theme_id="0" slug_hash="OjRZVv" default_tab="result" user="pradeepanvi"]See the Pen Comparison Operator in javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

a and b = Nope, not equal!

Something Like that:
Coercion

What is Coercion
converting a value from one type to another (this happens quite often in Javascript because it’s dynamically typed)

For that you need to create first html code.

HTML

<p>Value of a =  <span id="demo"></span></p>

After that add this JS code.

JS

var a = 1 + '2';
document.getElementById("demo").innerHTML = a;

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

Now you can see

Value of a = 12

Why it is?
Because String and number will not equal. For that you need to convert string into number as well. For this click here.

Something Like that:
Associativity

What is Associativity
what order Operator function get called in – left to right or right to left.

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>
<p>Value of c =  <span id="demo3"></span></p>

After that add this JS code.

JS

var a = 2, b = 3, c = 4;
a = b = c;

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

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

Now you can see

Value of a = 4
Value of b = 4
Value of c = 4

You can see all of showing 4.

Why it is?
Due to Associativity

For more detail check Operator Lecture

Something Like that:
Operator

What is Operator
A special function that is syntactically (written) Differently

For that you need to create first html code.

HTML

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

After that add this JS code.

JS

var a = 4 + 3;
document.getElementById("demo1").innerHTML = a;

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

Now you can see

Value of a = 7

---

Now I want

var b = 4 + 3 * 5;
So what will be answer of b 35?

Wrong

It will be 19.

Why will it be 19?

Operator Precedence

Which Operator Function Gets Called first
* then +

JS

var b = 4 + 3 * 5;
document.getElementById("demo2").innerHTML = b;

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

Operator Precedence Table