Since hosting is the default behavior, all functions in JavaScript are hosted in the Creation phase. That’s why we can actually call a function before declaring it.

customFunc();

 function customFunc(){
     let a = 77;
     let b = 4;
     let sum = a + b;
     console.log('Sum : ' + sum) 
 }

The reason for working is for JavaScript default behavior in the Creation phase. Here are some points for convenience:

• The arguments list of the arguments that are passed to the function is created
• The code scans all the functions and each function is stored in a variable object that usually points to the function.
• Then it looks for the declarations of the code variables. And undefined sets the property for each declared variable .

Then the code goes to the execution phase and the line-by-line code is executed according to the execution context.

And that is why since function declaration is earlier in the creation phase and the function call is executed in execution phase, we can use it even before declaring function.

But function expressions will not work this way. Because in function expressions we store our functions in a variable. And that variable undefinedis set as the creation phase . The original function is executed later, so calling the function before declare in the function expression will show the error as it is not a function. Because it’s not really a function right now, just a variable.

 miew();

 var miewVar = function(){
     console.log('Miew is calling')
 }

Similarly, we can use a variable before declaring it. If you use a variable before declaring it undefined because of the Creation phase, it will not show any error, but it will show that variable undefined as it is set in Creation Phase .

console.log('Value of Miew: ' + miew);
var miew = 10

But if you have never declared that variable later, you will want to use it:

console.log('Value of C: ' + miewC);

So hopefully this time, there is a clear idea about hosting. However, for good practice it is not advisable to use a function before declaring it. But there’s definitely a lot of work to be done to understand how JavaScript works within the scene. In some situations, it may be helpful to have such a technique.

The post The concept of hoisting in JavaScript first appeared on Bipon's Diary.

JavaScript is usually run in an environment. Often it may be our most widely used browser, or another application program such as Node JS .

Now from where this JavaScript is run, there is also a JavaScript engine (Google V8 Engine, Spider Monkey, JavaScript Core etc…) whose function is to execute this JavaScript code. Browsers use JavaScript to make JavaScript run. For example, Google Chrome uses Google V8 engine, Firefox uses Spider-Manki / Rihano, Internet Explorer and Edge servers use the engine, and Safari uses JavaScript-core / Nitro (JavaScript has many engines, see here for full reference ).

Now this JavaScript code executes in several steps and runs.

Code > Parser > Convert to machine code > code runs

Here, the code passes through the parser first. Here the syntax error is usually checked. If a syntax error is found, then the error is thrown from here. And if all the syntax is done, then a data structure called Abstract Syntax Tree is created.

The next step is to convert this code into machine code, which our computer can actually understand. And finally our code is run.

Now why do you have to cross such steps before running a code? Yes, our computer does not understand anything but the machine code. Whatever language we write in code, it must be converted to machine code, or our computer may not understand it.

Execution Context and Execution Stack

It is very important to have clear ideas about Execution Context and Execution Stack. There are many trick issues in JavaScript that are difficult to understand unless you can understand exactly the Execution Context and the Execution Stack.

Execution Context:

By default Javascript executes global context. Unlike some other languages, no space functions are executed. And JavaScript’s Global Execution Context is a browser windowobject. Declaring a global variable or assigning it to an windowobject is the same

let bGlobal = 77;

Now I can see if it is window inside:bGlobal

window.bGlobal

Then you see that this seam bGlobalshows the value of your declared

bGlobal === window.bGlobal //true

That means two things are the same. So windowit is the same thing to declare a global variable or assign it to an object.

However, if your environment is not a browser, then this Global Execution Context may be different depending on the environment. For example, Node JS’s Global Execution Context is an globalobject. Depending on the environment it may change.

Execution context is discussed in more detail later.

Execution Stack:

We’ll use an example to get a clear idea about Execution Stack in JavaScript and see how those codes are executed.

function A(){
    let a = ' call from a';
    B();
    console.log('Hey', name + a);
}
function B(){
    let b = ' call from b';
    C();
    console.log('Hey', name +  b)
}
function C(){
    let c = ' call from c';
    console.log('Hey', name + c)
}
A();

If you run this code above, you will see how it runs:

The last ones are coming before and the first ones are later. How does it look random? Yes here we need to understand how the execution stack works. So only then will we have a clear idea of ​​how this code ran. First notice this diagram below:

Here the number codes will be executed according to the serial number. And the diagram on the right is the Basically Execution Stack. If you have no idea about the stack data structure, then the stack is a structure where the first in-out system is maintained. This means that there will be only one way to get data out, and whenever a data is extracted it can be extracted from the top. If you have several glass plates stacked on top of one, then if you want to take a plate, you have to take the top plate first, otherwise you will not be able to take it down or you will still have an accident. The plate that you place at the end of the stack should be taken if you want to take a plate on the data structure system, since this plate is on top of you. And the plate you put first will be the bottom,

Now when our code is number 1 it is assigned to the namevariable Bipon. Then only the function definitions go one by one A(), then B()and finally into the C()execution stack on the global execution context. Nothing will be excluded from inside the function as we have not called any of the functions yet.

Then we A()call the function at number 5 . It will now be positioned on the global execution context in the first execution stack and will now A()start executing the code from within. Now with a variable at number 1, some data is assigned there. But again another function B()is called at number 5 . So now Execution Stack A A()will have another new execution context B()on it and now B()the code will start executing from within. Now here also some data has been assigned to a new variable in number 1. Again another function called number 7 C()is called. So now another execution context C()will be found in the execution stack and now C()the code will start executing from within. Now C()Inside number 1 again, some new data is assigned with a new variable. And the console is logged in the next line which will now show on your console. So the log here is the first thing you see in your output. Now C()execute is over and it will move away. So now the execution context will go B()as it is now at the top of the execution stack. Now B()inside the console log of the number 12 will be printed on the output and so you will see this as the output in the second position. Now the same way B(), the last one and the execution stack will be gone. Now the execution stack will be at the top A(). So now A()it will be executed.A()Console logs located at number 5 will be printed at the output and this function will be finished and removed from the execution stack. And so you can see the output here. This is how the execution stack works in JavaScript. And so we see output like this.

Details on Execution Context:

It is very important to know the details of the execution context. You may have seen in JavaScript that you can call before you define a function and that code will work perfectly.

miew();
function miew() {
 console.log('Miew');
}

This code will work fine if you run it all together.

Or you can use a variable before defining it (before defining it will show the value undefined, no error).

console.log(miew);
var miew = 'Hello World!';

Output will come like this but no error will come

undefined

What causes it? Yes, that’s why we need to have a more in-depth knowledge of execution context so you can understand why it works.

When a function is called, there are two stages:

2. Creation phase

2. Execution Phase

2. Creation Phase: In Creation Phase, the variable object is created first. Then the scope chain is created.

What happens in the creation phase directly in Bengal:

• The arguments list of the arguments that are passed to the function is created
• The code scans all the functions and each function is stored in a variable object that usually points to the function.
• Then it looks for the declarations of the code variables. And undefinedsets the property for each declared variable .

2. Execution Phase: Then the code is executed in this phase. In the case of code execution, the code execution is executed by executing the context. This is why calling a function before defining it works fine. If you use any other variable before declaring it undefined is set as a value and no error shows.

Reference Source : JS Essentials: The JavaScript Engine , Execution Context , Understanding the “this” Keyword in JavaScript , Behind the Scene

The post Behind the Scene in JavaScript first appeared on Bipon's Diary.

If the arrow function is:

 const customAsyncCode = async() => {      
     // Asynchronous Codes    
} 

This is how you can identify asynchronous code in your function. This time you have to identify the original asynchronous codes one by one and tell Javascript that this is my promise that it cannot go to the next instruction until it is solved. Before that we will need a promiss, right? Yes, let me start with a promise:

      const a1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            resolve('a 1 resolved');
          }else{
            reject('a 1 error');
          }
        }, 3000)
      })

Now we will handle this promise inside an asynchronous function. That is why I will call our Promise talk inside with an asynchronous identifying function. Now this is where we awaitneed the keyword. With this we will identify our Promise so that this Promise does not go to the next instruction until completed:

const promiseHandle = async() => {
        const data = await a1;
        console.log(data);
      }
      promiseHandle();

Notice here that I just printed the data from our premise in the next line. Yes, here asyncis awaitthe magic of it. It helps our asynchronous code behave asynchronously so that we no longer have to call the callback. We can retrieve data with a single line-by-line instruction. Now if you call this function you will see our desired data:

promiseHandle()

Now you will see that your console is printed on the next line of console log. If you have trouble understanding it, then setTimeout()you can extend the time and test it yourself by working code synchronously:

Now if the promise is rejected? Yes then try…catchwe can handle this rejection or error with our previous block. Before that, our promise to create another such thing:

      const a1Rejection = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            reject('a 1 error');
          }else{
            resolve('a 1 resolved');
          }
        }, 3000)
      })

Now we async awaitwill create our function. But before we can take data from this promise, we have to try…catchput the whole thing inside the block. And with that catchblock we can access our error message:

     const promiseErrorHandle = async() => {
        try{
          const data = await a1Rejection;
          console.log(data);
        }catch(err){
          console.log(err);
        }
      }

promiseErrorHandle();

An alternative method to handle more than one promise , now we want to promise more than they can handle synchronously. Suppose we have two promise:

   const a1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            resolve('a 1 resolved');
          }else{
            reject('a 1 error');
          }
        }, 3000)
      })

Another one

     const a2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            if(true) {
              resolve('a 2 Resolved');
            } else {
              reject('a 2 Error');
            }
        }, 3000)
      })

Now here’s something to understand. If we Promise.alluse it, let’s see if it returns:

console.log('Return all Promise :', Promise.all([a1, a2]))

That means the promise also returns:

So with that we can easily handle multiple promises like this:

 const handleMultiplePromise = async() => {
        const data = await Promise.all([a1, a2]);
        console.log(data);
}

Well then how come their data? Yes the data will come in the same array size as we have seen before. Now call the function:

handleMultiplePromise();

The post JavaScript: async and await first appeared on Bipon's Diary.

The task of the Promise is to handle such asynchronous operations. Now we are running the operation on a remote server, but until data arrives we cannot say that operation will not succeed or fail. And basically, the promise works to handle these. In most cases, we do not have to create our own promises. We handle Just Promise. The basic structure of the promise is that the library we work with will be implemented from the system. We have to handle just Promise. But I’ll also look at how we can create our own promise here.

    let bb = new Promise((resolve, reject) => {
      let a = 1 + 1;
      if(a == 2){
        resolve('Success man!')
      }else{
        reject('Faild man!')
      }
    })

    bb.then((message) => {
      console.log('Get', message)
    }).catch((message) =>{
      console.log('Get', message)
    })

Promise takes two arguments, resolveand reject.

Handle Promise:

Now we will handle whether the Promise has succeeded or failed. In that case, if the Promise is successful then we can chain our bb function and .then()give a callback function here, which resolvewill run if the Promise is successful or otherwise:

    bb.then((message) => {
      console.log('Get', message)
    }).catch((message) =>{
      console.log('Get', message)
    })

Callback

After that trueargument resolve, our callback will be triggered by the promise :

  bb.then((message) => {
      console.log('Get', message)
    })

And if the promise is rejected, then we need .catch()to handle it in another chain operation with a callback function. Now we do not know whether the operation will succeed or fail. In that case, we .then()have to .catch()keep both. .catch()If for any reason we will run reject:

.catch((message) =>{
      console.log('Get', message)
    })

The arguments falsegiven here rejectwill be from the promise . And so  catchthe callback will run inside the block after the operation is finished :

  let bb = new Promise((resolve, reject) => {
      let a = 1 + 2;
      if(a == 2){
        resolve('Success man!')
      }else{
        reject('Faild man!')
      }
    })

    bb.then((message) => {
      console.log('Get', message)
    }).catch((message) =>{
      console.log('Get', message)
    })

The bbfunction that we first returned the Promise here, the creation of the Promise, in most cases, does not require us to write. Rather, the system we use to exchange data, or use the library, is coded as a part of how to do resolveor not do rejectit. In most cases, the promise of our return .then(), and .catch()with the handle. The callbacks that are used inside, in most cases, the data we want from our remote server comes as arguments. We can access those arguments from within a callback.

Handling Multiple Promises: At times, we may have to handle multiple promos. For example, we have two premises:

      const a1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            resolve('a 1 resolved');
          }else{
            reject('a 1 error');
          }
        }, 3000)
      })

We can also directly create promises like this. Below I made another Promise:

      const a2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            if(true) {
              resolve('a 2 Resolved');
            } else {
              reject('a 2 Error');
            }
        }, 3000)
      })

Then .then()I can make a callback call which will run soon after these two promises are completed. And the data from these promos will be arrayed in this callback function:

Promise.all([a1, a2]).then((promiseArr) => {console.log(promiseArr)}) 

The post Promise in JavaScript first appeared on Bipon's Diary.

#synchronous function

    function synch(func){
      func("synchronous")
    }
    synch(alert)
    alert('Test')

#Asynchronous function

setTimeout(alert,1000, "Asynchronous");
    alert('Test')

#Infinity Loop

function _1(){
      console.log('First function')
      _2();
    }
    function _2(){
      console.log('Second function');
      _1();
    }
    _1();

Now what’s the callback job? We know about the asynchronous behavior of JavaScript. If JavaScript takes time to do a task, do not wait and move on to the next code:

    const getCustomFunction = () => {
      setTimeout(function(){
        console.log('A function that takes some time');
      }, 3000)
    }
    const printAnotherFunction = () => {
      console.log('Another Function');
    }
    getCustomFunction();
    printAnotherFunction();

Running this code will show the next as before, and the next one for JavaScript asynchronous behavior:

From the definition of a callback function, we know that it is executed after another function is executed. And so we can use this technique here by writing two functions individually, but we can do it by the callback at the exact time the function is called:

    const getCustomFunction = (callback) => {
      setTimeout(function(){
        console.log('A function that takes some time');
        callback();
      }, 3000)
    }
    const printAnotherFunction = () => {
      console.log('Another Function');
    }
    getCustomFunction(printAnotherFunction);

We passed our function here as an argument inside our Main function call. And then I called it exactly where I needed it. This printAnotherFunction() function here is the callback function. It will give us results like mind. Means one after another. It will wait exactly 3 seconds then give the result. But serial maintenance does. Promise first, the data will come from it, then run the callback function:

The post Callback Function in JavaScript first appeared on Bipon's Diary.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

Now, by applying a filter method, I can simplify it

var newArr = arr.filter(function(item) {
   return item % 2 == 0
})

Functions are assigned to each item. And the one that returns true here is the new array. And the one that returns false is not in the new array.
You can also call here with an anonymous function or an external function, just like a map. View the Result:

newArr

The filter also accentuates three arguments on the map:

Using ES6 syntax

const newArr = arr.filter(item => item % 2 === 0);

The post Filter first appeared on Bipon's Diary.

Suppose you have an array:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

Now you want to find the square of each item in this array. So what you can do:

var anotherArr = []
for(var i = 0; i < arr.length; i++) {
   anotherArr.push(arr[i] * arr[i])
}

Now you will get your desired result in anotherArr. But even if that is true, here we have a new array to look at. Again we have to use another method push. And there are a few other uses inside that are actually Meaningless. No matter the only thing you want to do in the middle of the map. The function you want to apply to each of your items first. Square of each item you want:

function getSquare(item) {
   return item * item
}

Now you want to apply this function to every item in your array. This is where the map () comes in.

arr.map(getSquare)

Now we know that this also returns an array. Now where to store that array:

var newArr = arr.map(getSquare);

Now the whole thing can be written like this

var newArr = arr.map(function(item) {
   return item * item;
})

This will give the same result as before. Now here we see that we have used an item as an argument. But here, map () accepts three arguments. The first argument is that it selects every item in the array, the second argument is the index number of the item in the array, and the third number will always return the whole array.

var newArr = arr.map(function(item, index, fullArr) {
    console.log('Item: ' + item + ' and index: ' + index + '. Full Array: ' + fullArr)
})

Result:

And if you use ES6 syntax then see how it is:

const newArr = arr.map(item => item * item);

The post Map first appeared on Bipon's Diary.

Do not mistake this map Mapas a map map. The reason mapis a method. But the map we Mapwill talk about here today is a data structure. The new introduction has been introduced to developers in the ES6 version of JavaScript. But this is a bit different from the object type data structure. It has its own method, its own properties. The map can also access all kinds of functions, booleans, integers, characters, strings. So we will discuss this in detail today.

Map ( Map)create:

Taking a new map: If we want to take a new map data structure, we can take it like this:

const bName = new Map()

Diameter! There bNamea map called. Now inside the map there are keys and values. If we want to put any new value inside this map:

bName.set('fullName', 'Bipon Biswas');

Now if you want to access any data from the map, there is another method. Want to know bName fullName

bName.get('fullName')

Again we can also check if there is a specific value in our map:

bName.has('fullName');

Since our map fullNameis what it is, it will be true:

Now if that is not the case then it will be false:

bName.has('something');

Now we can delete any such pair from the map if we want. First, we have not added another new pair:

bName.set('sajib', 'biswas')

Now if you want to double check whether the new pair has been added to the map:

bName.has('sajib');

Now we want sajibdelete this removal:

bName.delete('sajib');

Diameter! Deleted. Now if I check this is sajibthere:

bName.has('sajib');

That would be a lie, because we’ve already deleted it from our map

Now we bNamecan clear the entire map if we want :

bName.clear();

Now if you check bName, nothing can be found inside:

console.log(bName);

Suppose we have a map like the following with a few elements:

const boxItem = new Map();

Now put some elements inside it:

boxItem.set('name', 'Bipon Biswas');
boxItem.set('job', 'student');
boxItem.set('color', 'blue')
boxItem.set('os', 'windows')
boxItem.set('mobile', 'iOS')
boxItem.set('city', 'dhaka')

Now you will find boxItem all the data inside this map:

console.log(boxItem);

If we want to know how many elements inside the map we can find the properties of the map size: Now we can also loop in the map if we want:

console.log(boxItem.size);

boxItem.forEach((value, key) => console.log(`Key is: ${key} and the value is: ${value}`));

forEach In the second argument in the method, we usually get the index but here in the case of the map we get the key of the map:

Likewise, we can for…ofalso run a loop:

for(let [key, value] of favorite.entries()) {
   console.log(`Key is: ${key} and the value is: ${value}`);
}

Note: One of the important differences is also that you’re able to use anything for the keys. You’re not just limited to primitive values like symbols, numbers, or strings, but you can even use functions, objects and dates – too. Keys won’t be casted to strings like with regular objects, either.

var map = new Map()
map.set(new Date(), function today () {})
map.set(() => 'key', { pony: 'foo' })
map.set(Symbol('items'), [1, 2])

This is how we can use the newly introduced map in JavaScript ES6. Now, is there more to it than other data structures? Yes this is

In the Map Data Structure:

1. We can easily run the loop.

2. We can find out the size of the map

3. Finally, it is much easier to insert or delete data from the map.

Reference Source

The post Javascript ES6 – Map first appeared on Bipon's Diary.