Asynchronous programming

Single Threaded

So basically script is a single thread language which means it runs one line at a time it is not multitasker.so When it receives the code that is going to take time it runs the other code and comes back  to that code when it is done but it cannot do that alone so it takes the help of browser to complete this task browser(made up of c++) contain

Synchronous & Asynchronous

synchronous programming में एक TIME में एक ही चीज को LINE TO LINE चलाताहै । जब हम किसी function को कॉल करते हैं जो लंबे समय तक चलने वाली क्रिया करता है, तो कार्रवाई समाप्त होने पर यह परिणाम देता है। यह कार्रवाई के समय के लिए प्रोग्राम को रोक देता है। इसके विपरीत, एसिंक्रोनस प्रोग्रामिंग एक ही समय में कई चीजें होने देती है। जब हम कोई क्रिया शुरू करते हैं, तो प्रोग्राम चलता रहता है। जब कार्रवाई समाप्त हो जाती है, तो कार्यक्रम को सूचित किया जाता है और परिणाम प्राप्त होता है।

आइए एक उदाहरण का उपयोग करके सिंक्रोनस और एसिंक्रोनस प्रोग्रामिंग की तुलना करें:

एक प्रोग्राम जो नेटवर्क से दो संसाधन प्राप्त करता है और फिर परिणामों को जोड़ता है। सिंक्रोनस प्रोग्रामिंग में, जहां रिक्वेस्ट फंक्शन अपना काम करने के बाद ही वापस आता है। इस कार्य को करने के लिए, हम एक के बाद एक अनुरोध करते हैं। यहां कमी यह है कि दूसरा अनुरोध तभी शुरू किया जाएगा जब पहला समाप्त हो गया हो। मान लीजिए कि पहले अनुरोध द्वारा लिया गया समय 12 सेकंड है, और दूसरे अनुरोध द्वारा लिया गया समय 13 सेकंड है, इसलिए लिया गया कुल समय दो प्रतिक्रिया समयों का योग होगा।

एसिंक्रोनस प्रोग्रामिंग में, धीमी क्रिया करने वाले फ़ंक्शन एक अतिरिक्त तर्क, एक कॉलबैक फ़ंक्शन लेते हैं। कार्रवाई शुरू हो गई है, और जब यह समाप्त हो जाती है, तो कॉलबैक फ़ंक्शन को परिणाम के साथ बुलाया जाता है।

    
<script>

   

for( let index=0 ; index<1000;index++){

    console.log("this is index"+ index)

}

console.log("done print")

   

</script>

यह  synchronous program इस  प्रोग्राम में पहेले  console.log("this is index"+ index)

1000 बार प्रिंट होगा उसके बाद में done print होगा यह synchronous के कारण होता है

अगर इसी asynchronous में देखते ह

<script>

setTimeout(()=>{

    for( let i=0 ; i<10;i++){

    console.log("this is index" +i)

}

},1000)

console.log("done print")

   

</script>

इस में एक setTimeout function लगा देते है जो इसे asynchronous program में बदल देता है

जिस से की जावा स्क्रिप पहले don print को प्रिंट करेगा फिर console.log("this is index"+ index)

रन करेगा यह सब AS के कारण होता हे जब JS setTimeout function को देखता है तो वहा इसे छोड़ देता है

और आगे का कोड रन करता है तब Browser JS की हेल्प करता ह और जब setTimeout function

खत्म हो जाता है तो JS को बता देता है

Call stack - 

यह एक नार्मल कॉल है जो की js को बताता ह की यह Normal फंक्शन है या  as फंक्शन हैं 

-यह last in first out पर वर्क करता है

-जब स्क्रिप्ट किसी भी फ़ंक्शन को कॉल करती है जो पिछले फ़ंक्शन को स्टैक करने के अलावा अन्य फ़ंक्शन को कॉल करती है जब तक कि अंतिम फ़ंक्शन तक नहीं पहुंच जाता है जो मूल्य लौटाता है और बाहर जाता है स्टैक से कुछ हद तक लास्टिन फर्स्ट आउट की तरह

Here isRightAngle call square and get stack square call multiple and stack over isRightAngle

multiply get stack over square and return value and comes out of stack than square return

value and comes out of stack and finally isRightAngle Receive first integer value and move

to second integer ie

Call back

कॉलबैक एक फ़ंक्शन है जिसे किसी अन्य फ़ंक्शन के argument के रूप में पारित किया जाता है  यह technique  एक फ़ंक्शन को दूसरे फ़ंक्शन को कॉल करने की अनुमति देती है किसी अन्य फ़ंक्शन के समाप्त होने के बाद कॉलबैक फ़ंक्शन चल सकता है

A callback the function is a function that is passed to another function as an argument and is executed after some operation has been completed. Below is an example of a simple callback function that logs to the console after some operations have been completed.

function  modifyArray(arr, callback) {
  // do something to arr here
  arr.push(100);
  // then execute the callback function that was passed
  callback();
}
var arr = [1, 2, 3, 4, 5];
modifyArray(arr, function() {
  console.log("array has been modified", arr);
});

Call back hell  

                              इसके अंदर बहुत सारी कॉल  बेक  होती है 

Promise    

यह एक object होता है जिस में दो method या argument  होते हे resolve or reject,अगर हमारी condition true होती तो resolve work krta hai or अगर else होती है तो reject वर्क करता है 

इनकी value  देखने के लिए .that or .chach का प्रयोग करते है 

Async await   

  यह Makeup of promise होता है

अगर हम नोर्मल function के आगे async लगा देते हैं तो वह return में एक promise को return करता  है 

यह promise एक resolve  promise होता है 

await 

अगर किसी फंक्शन की अंदर await लगा दिया जाये तो async function use बिना चेक किये ही आगे बढ़

जाता हा और बाद म आकर चेक करता है

   

API: Application Programming Interface

API stands for application program interface. A programmer writing an application program can make a request to the Operating System using API (using graphical user interface or command interface). It is a set of routines, protocols and tools for building software and applications.

AJAX :-

Asynchronous JavaScript And XML

 JSON :-

JSON एक text-based data interchange format होता है जिसे की design ही किया गया होता है structured data की transmitting करने के लिए.

JSON का Full Form होता है “JavaScript Object Notation” और इसे pronounce किया जाता है “Jason.” इसे सबसे ज्यादा इस्तमाल किया जाता है data को transfer करने के लिए web application और web services के बीच में.

JSON को अक्सर देखा जाता है एक alternative के तोर में XML का, एक दुसरे plain text data interchange format के तोर पर. ज्यादातर cases में, JSON representation एक Object का ज्यादा compact होता है उसके XML representation की तुलना में क्यूंकि इसमें कोई भी tags की जरुरत नहीं होती है प्रत्येक element के लिए.

JSON

{
"computer": {
"name": "Working PC",
"components": {
"CPU": "Intel i5 2.4GHz", "ram": "8GB", "storage": "1TB HDD"
}
}
}

XML

<computer>
<name>Working PC</name>
<components>
<CPU>Intel i5 2.4GHz</CPU>
<ram>8GB</ram>
<storage>1TB HDD</storage>
</components>
</computer>

JavaScript has a built in function for converting JSON strings into JavaScript objects:
इस  फंक्शन से डाटा को object FORMAT में CONVERT कर सकते है 
JSON.parse() 
JavaScript also has a built in function for converting an object into a JSON string:
इस function से data  String की format में convert कर सकते है
JSON.stringify()
<script>
  const data = '{"categories":["explicit"],"created_at":"2020-01-05 13:42:18.823766","value":"The Chuck Norris facts game is played out"}'
  let obj = JSON.parse(data)
  console.log("josn object")
    // let obj=JSON.stringify(data)
    // console.log("josn object")


</script>

Proto type:-

• prototype object का  template होता है जिसमे  की उस object के सभी method होते है,जेसा की नीचे दिखाया गया है एक car नाम का object है जिसमे उसके सभी method है  

function Car (name, modal){

    this.Name=name;

    this.Modal= modal}

    let myCar =new Car("audi","Xts20")

    console.log(myCar)

 output this program is 👇👇👇👇

1. Car {Name: 'audi', Modal: 'Xts20'}
1. Modal: "Xts20"
2. Name: "audi"
3. [[Prototype]]: Object
1. constructor: ƒ Car(name, modal)
2. [[Prototype]]: Object
1. constructor: ƒ Object()
2. hasOwnProperty: ƒ hasOwnProperty()
3. isPrototypeOf: ƒ isPrototypeOf()
4. propertyIsEnumerable: ƒ propertyIsEnumerable()
5. toLocaleString: ƒ toLocaleString()
6. toString: ƒ toString()
7. valueOf: ƒ valueOf()
8. __defineGetter__: ƒ __defineGetter__()
9. __defineSetter__: ƒ __defineSetter__()
10. __lookupGetter__: ƒ __lookupGetter__()
11. __lookupSetter__: ƒ __lookupSetter__()
12. __proto__: (...)
13. get __proto__: ƒ __proto__()
14. set __proto__: ƒ __proto__()

• इसमें हम नये में method बना भी सकते है  जेसे की दिखाया गया है
• इसमें हम method को overlap भी कर सकते है

Introduction to JavaScript constructor functions

 learned how to use the object literal syntax to create a new object.

For example, the following creates a new person object with two properties firstName and lastName:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
Code language: JavaScript (javascript)

In practice, you often need to create many similar objects like the person object.

To do that, you can use a constructor function to define a custom type and the new operator to create multiple objects from this type.

Technically speaking, a constructor function is a regular function with the following convention:

• The name of a constructor function starts with a capital letter like Person, Document, etc.
• A constructor function should be called only with the new operator.

The following example defines a constructor function called Person:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}
Code language: JavaScript (javascript)

In this example, the Person is the same as a regular function except that its name starts with the capital letter P.

To create a new instance of the Person, you use the new operator:

let person = new Person('John','Doe');
Code language: JavaScript (javascript)

Basically, the new operator does the following:

• Create a new empty object and assign it to the this variable.
• Assign the arguments 'John' and 'Doe' to the firstName and lastName properties of the object.
• Return the this value.

It’s functionally equivalent to the following:

function Person(firstName, lastName) {
    // this = {};

    // add properties to this
    this.firstName = firstName;
    this.lastName = lastName;

    // return this;
}
Code language: JavaScript (javascript)

Therefore, the following statement:

let person = new Person('John','Doe');
Code language: JavaScript (javascript)

… returns the same result as the following statement:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};
Code language: JavaScript (javascript)

However, the constructor function Person allows you to create multiple similar objects. For example:

let person1 = new Person('Jane', 'Doe') let person2 = new Person('James','Smith')

 JavaScript closures

In JavaScript, a closure is a  function that references variables in the outer scope from its inner scope. The closure preserves the outer scope inside its inner scope.

To understand the closures, you need to know how the lexical scoping works first.

• Lexical scoping

Lexical scoping defines the  scope of a variable  by the position of that variable declared in the source code. For example:

let name = 'John';

function greeting() { 
    let message = 'Hi';
    console.log(message + ' '+ name);
}
Code language: JavaScript (javascript)

In this example:

• The variable name is a global variable. It is accessible from anywhere including within the greeting() function.
• The variable message is a local variable that is accessible only within the greeting() function.

If you try to access the message variable outside the greeting() function, you will get an error.

So the JavaScript engine uses the scope to manage the variable accessibility.

According to lexical scoping, the scopes can be nested and the inner function can access the variables declared in its outer scope. For example:

function greeting() {
    let message = 'Hi';

    function sayHi() {
        console.log(message);
    }

    sayHi();
}

greeting();
Code language: JavaScript (javascript)

The greeting() function creates a local variable named message and a function named sayHi().

The sayHi() is the inner function that is available only within the body of the greeting() function.

The sayHi() function can access the variables of the outer function such as the message variable of the greeting() function.

Inside the greeting() function, we call the sayHi() function to display the message Hi.

• JavaScript closures

Let’s modify the greeting() function:

function greeting() {
    let message = 'Hi';

    function sayHi() {
        console.log(message);
    }

    return sayHi;
}
let hi = greeting();
hi(); // still can access the message variable
Code language: JavaScript (javascript)

Now, instead of executing the sayHi() function inside the greeting() function, the greeting() function returns the sayHi() function object.

Note that functions are the  first- class Citizen in java sctript , therefore, you can return a function from another function.

Outside of the greeting() function, we assigned the hi variable the value returned by the greeting() function, which is a reference of the sayHi() function.

Then we executed the sayHi() function using the reference of that function: hi(). If you run the code, you will get the same effect as the one above.

However, the interesting point here is that, normally, a local variable only exists during the execution of the function.

It means that when the greeting() function has completed executing, the message variable is no longer accessible.

In this case, we execute the hi() function that references the sayHi() function, the message variable still exists.

The magic of this is closure. In other words, the sayHi() function is a closure.

A closure is a function that preserves the outer scope in its inner scope.