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.

ES6 শিখতে গুরুত্বপূর্ণ কারণ এর একটি কারণ হ’ল এটি জাভাস্ক্রিপ্টকে আরও ভাল লেখা এবং সহজ করে তোলে এবং একই সাথে আজকের আধুনিক ওয়েব প্রযুক্তির সাথে রিঅ্যাক্ট, নোড.জেস এবং আরও অনেকগুলি ব্যবহার করা হচ্ছে ।

এই পোস্টে, আপনি নতুন কীওয়ার্ড শিখতে পারবেন যা ES6  ভ্যারিয়েবল ডিক্লারেশন্স  জন্য নিয়ে আঁচছে: letএবং const। তবে প্রথমে, আসুন কী কী ভুল ছিল তা ব্যাখ্যা করি var।

var সমস্যা কি ছিল?

varভেরিয়েবল ঘোষণার জন্য আমাদের কাছে ইতিমধ্যে জেএসে কীওয়ার্ড ছিল । তাহলে কেন ES6 অতিরিক্ত কীওয়ার্ড চালু করেছে?

সমস্যাটি বোঝার জন্য varপ্রথমে আপনাকে বুঝতে হবে যে scope কী।

Scope determines the accessibility of variables, objects, and functions from different parts of the code. — w3schools

জাভাস্ক্রিপ্টে 3 ধরণের স্কোপ (Scope) রয়েছে:

• ফাংশন (লোকাল ) সুযোগ
• গ্লোবাল স্কোপ (Scope)
• ব্লক স্কোপ (Scope) (ইএস 6 সহ নতুন)

var supports function & global scope, but not block scope.

ফাংশন ( লোকাল ) স্কোপ

যখন কোনও ফাংশনের অভ্যন্তরে কোনও ভেরিয়েবল সংজ্ঞায়িত করা হয় , এটি কেবলমাত্র সেই ফাংশনের জন্য লোকাল হবে এবং বাইরে ব্যবহার করা যাবে না:

function local() {
  var number = 1;
   console.log(number); // 1 gets printed
}
console.log(number); // undefined

গ্লোবাল স্কোপ

যখন কোনও ফাংশনের বাইরে কোনও ভেরিয়েবল ঘোষণা করা হয় বা varকীওয়ার্ড ছাড়াই তখন তা গ্লোবাল হয়ে যাবে এবং যে কোনও জায়গা থেকে অ্যাক্সেসযোগ্য হবে:

var number = 1;

function local() {  
  console.log(number); // 1 gets printed
}

console.log(number); // 1 gets printed

ব্লক স্কোপ

curly braces { }, if-else cases এবং for loops হয় block-scoped

আসুন লুপের ভিতরে একটি ভেরিয়েবল (সহ var) সংজ্ঞায়িত করি এবং দেখুন কী প্রিন্ট হয়…

for(var i = 1; i < 10; i++) {
 console.log(i);
} 
console.log(i);    // What do we expect here?

এখানে সবকিছু ঠিক আছে মনে হচ্ছে। তবে দ্বিতীয় কনসোল.লগের কী হবে?

দ্বিতীয় console.log বাইরে জন্য লুপ এবং  লোকাল ভ্যারিয়েবল
“i” যেহেতু প্রিন্ট হওয়ার কথা ছিল undefined ।

তবে, যদি আমরা  let or const,  ব্যবহার করি, যেহেতু সেগুলি ব্লক-স্কোপড , এই সমস্যাটি সমাধান হবে।

রেডিক্লারেশন ইসু অফ var

এর সাথে আর একটি সমস্যা varহ’ল এটি একই পরিবর্তনশীলগুলিকে বারবার পুনরায় ডিক্লেয়ার করার অনুমতি দেয় :

var number = 1;   // first declaration
var number = 2;   // same variable redeclared with the same name

console.log(number); // And we see no errors

এখন আসুন দেখুন ES6 কীভাবে তাদের সাথে ডিল করে …

var এর পরিবর্তে let

আমি উপরে উল্লিখিত সমস্যাগুলি প্রতিরোধ করতে আসুন এর সাথে আবার চেষ্টা করুন let:

for(let i = 0; i < 10; i++) {   // same local variable with let 
  console.log(i);
}

console.log(i); // This time what do we expect?

তাই let ব্লক-স্কোপ ও দ্বিতীয় console.log প্রিন্ট করছে undefined । পারফেক্ট!

এছাড়াও, একটি ভেরিয়েবলের সাথে একটি ভেরিয়েবল পুনরায় ঘোষণার চেষ্টা করে letএকটি ত্রুটি প্রদান করে:

সুতরাং letকীওয়ার্ড:

• can be used instead of var
• is block-scoped
• doesn’t allow redeclaration, but can be reassigned later

const

অন্য নতুন কীওয়ার্ড যা ES6 এনেছে তা হ’ল const।

letএবং এর মধ্যে পার্থক্য constহ’ল একবার আমরা এর সাথে একটি ভেরিয়েবল ঘোষণা করি const, পরে এটি পরিবর্তন করা যায় না:

মূল constশব্দটি:

The post জাভাস্ক্রিপ্ট – var, let, const 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.

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.

এক্সাম্পল: টাইপ এসেরশন

let code: any = 123; 

let employeeCode = <number> code; 

console.log(typeof(employeeCode)); //Output: number

উদাহরণ: অবজেক্ট সহ এসেরশন টাইপ

let employee = { };

employee.name = “John”; //Compiler Error: Property ‘name’ does not exist on type ‘{}’

employee.code = 123; //Compiler Error: Property ‘code’ does not exist on type ‘{}’

উপরের উদাহরণটি একটি কম্পাইলার এরর দেবে, কারণ কম্পাইলার ধরে নিয়েছে যে name or code এই নামে কোন কিছু এক্সিস্ত করে না। 

তবে, আমরা নীচে দেখানো মত, টাইপ এসেরশন ব্যবহার করে এই পরিস্থিতি এড়াতে পারি।

উদাহরণ: অবজেক্ট সহ এসেরশন টাইপ

interface Employee { 

    name: string; 

    code: number; 

} 

let employee = <Employee> { }; 

employee.name = “John”; // OK

employee.code = 123; // OK

উপরের উদাহরণে, আমরা ইন্টারফেসের নাম এবং কোড সহ একটি ইন্টারফেস এমপ্লয়ী(Employee) তৈরি করেছি। আমরা এমপ্লয়ী(Employee) এর উপর এসেরশন টাইপ ব্যবহার করেছি । ইন্টারফেস সম্পর্কে আরও জানুন।

টাইপ এ্যাসারেশন ব্যবহার করার সময় সতর্কতা অবলম্বন করুন।

টাইপস্ক্রিপ্টে টাইপ এসেরশনের (Assertion) দুটি উপায় রয়েছে:

1. কৌণিক বন্ধনী <> সিনট্যাক্স ব্যবহার করা। 

let code: any = 123; 

let employeeCode = <number> code;

তবে ‘as’ সিনট্যাক্স ব্যবহার করে টাইপ এসেরশনের (Assertion) করার আরও একটি উপায় রয়েছে।

২. কীওয়ার্ড হিসাবে ব্যবহার করা

let code: any = 123; 

let employeeCode = code as number;

The post টাইপস্ক্রিপ্ট এসেরশন(Assertion) first appeared on Bipon's Diary.

যখনই কোনও ভেরিয়েবল তৈরি করা হয় তখন সেই ভেরিয়েবলের জন্য কিছু মান নির্ধারণের উদ্দেশ্য হয় কিন্তু সেই ভেরিয়েবলের জন্য কী ধরণের মান নির্ধারণ করা যায় তা সেই ভেরিয়েবলের ডেটাটাইপের উপর নির্ভর করে। টাইপস্ক্রিপ্টে, টাইপ সিস্টেম বিভিন্ন ধরণের ডেটাটাইপগুলি উপস্থাপন করে যা টাইপস্ক্রিপ্ট দ্বারা সমর্থিত।

বিল্ট-ইন ডাটা টাইপ :

Number –  এটি পূর্ণসংখ্যার পাশাপাশি ফ্লোটিং-পয়েন্ট সংখ্যা উভয়কে উপস্থাপন করতে ব্যবহৃত হয়

Boolean –  সত্য এবং মিথ্যা রিপ্রেসেন্ট করে

String –  এটি অক্ষর উপস্থাপন করতে ব্যবহৃত হয়

Void –  ফাংশন রিটার্ন-টাইপগুলিতে সাধারণত ব্যবহৃত হয়

Null – এটি ব্যবহার করা হয় যখন কোনও অবজেক্টের কোনও মান থাকে না

Undefined –  অস্বীকৃত ভেরিয়েবলকে দেওয়া মানকে চিহ্নিত করে

Any – যদি ভেরিয়েবলটি কোনও ডেটা-টাইপের সাথে ঘোষণা করা হয় তবে যে কোনও ধরণের মান সেই ভেরিয়েবলের জন্য বরাদ্দ করা যেতে পারে

Examples:

let a: null = null;

let b: number = 123;

let c: number = 123.456;

let d: string = ‘Typescript’;

let e: undefined = undefined;

let f: boolean = true;

let g: number = 0b111001; // Binary

let h: number = 0o436; // Octal

let i: number = 0xadf0d; // Hexa-Decimal

let example1: boolean | number = 35;

ইউজার-ডিফাইন ডাটা টাইপ: অন্তর্নির্মিত ডেটা প্রকারগুলি ছাড়াও, ব্যবহারকারী তার নিজস্ব ডেটা প্রকারটিও সংজ্ঞায়িত করতে পারেন। ব্যবহারকারী-সংজ্ঞায়িত প্রকারগুলির মধ্যে এনুমারেশন (এনাম), শ্রেণি, ইন্টারফেস, অ্যারে এবং টিপল অন্তর্ভুক্ত রয়েছে।

নোট: অন্তর্নির্মিত ডেটা টাইপগুলিতে যে কোনও any একটি বিশেষ ডেটা-টাইপ, সমস্ত ডাটা টাইপের সুপার ডেটা-টাইপ। যদি কোনও ডেটা টাইপের সাথে ভেরিয়েবল ঘোষণা করা হয় তবে আমরা সেই ভেরিয়েবলের জন্য যে কোনও ধরণের মান নির্ধারণ করতে পারি।

Examples:

let a: any = null;

let b: any =123;

let c: any = 123.456;

let d: any = ‘Typescript’;

let e: any = undefined;

let f: any = true;

The post টাইপস্ক্রিপ্টে ডেটার প্রকারভেদ first appeared on Bipon's Diary.

Framework to build client side application

Great for SPAs

# Why

Modular approach

Re-usable code

Development quicker and easier (like validation, routing)

Unit testable and easily maintainable code

Google + Microsoft product (Angular + Typescript)

# Angular’s History

2010 – AngularJS

2016 – Angular version 2. Just called Angular

2016 Dec – Angular version 4

2017 Nov – Angular version 5

2018 Oct – Angular version 7

Day1 – Basic Functioning 

Prerequisites – to learn Angular

• HTML, CSS, JS
• Basic of Typescript

Development Environment: 

• Node – https://nodejs.org/en/
• Node Version check – node -v
• NPM (npm install -g. Check = npm -v)
• Angular CLI (npm install -g @angular/cli)
• CLI version check (ng -v)
• Text Editor like VS Editor

 New project creation 

• Open your Git bash interface and then write bellow command 

• ng new project_name (ng new hello-world) 

#way 2

VS Editor

• View >> Integrated Terminal >> ng new hello-world
• Going to project – cd hello-world
• Run the project – ng serve
• After compile successfully 
• Then going to browser localhost:4200

Module

• First building block is a Module

• Angular application is collection individual module
• Angular must have on module Root Module – AppModule
  • Module have two things
  • Component (Root component – AppComponent)
  • Service – Here have business logic
• Export and Import (interact and ultimately render the view in the browser)

Component

• Angular must have on component Root component – AppComponent 
  • Component have two things
  • HTML Template (To represent the view)
  • Class (View logic – control the particular logic)

Service 

• Module 
  • Service under Module 
  • Service there write business logic of your application 

Architecture Summary 

• Angular app – one or more modules
• Module – one or more components and services
• Components – HTML (contain the html template) + Class (class control the logic for the particular view )
• Service – Business Logic (contains the business logic)
• Modules interact and ultimately render the view in the browser 

Package.json

• This file contains the dependency & the dev dependency that are required for angular application 
• Project run – ng serve or npm start (npm start means internally call ng serve)

Main.ts 

• This is the entry point to the application 
• If run the ng serve command then application come to main.ts file then bootstrap and kickstart appModule → bootstrap appComponent. And appComponent (have two things HTML template + class (contains the data for particular view logic)
• ) and render the HTML.  Initially class have title property sync/bound with component html by interpolation. Also other html is static 

App.module.ts: 

• This is the main module for any angular application. Also app.component.ts file is the root component of angular application 

Operation flow: 

• When we run the command ng serve into git bash then execution comes to main.ts file . then goes to app.module.ts file. then bootstrap: [AppComponent] 
• Then goes to app.component 
• Then data property title gets render in the app.component.html 
•  AppComponent have two things
  • Html file
  • Component – (contain class >  to control the view logic)

The post Day 1 – Basic Functioning first appeared on Bipon's Diary.