Some essential features of javascript syntax.
1.Truthy or Falsy values …
If a statement or a initialize value is a false statement, 0, empty string, null undefined, or NAN then these values will be falsy otherwise all the values will be truthy.
In this picture, we declare an empty string and as the falsy requirement, an empty string is a falsy value.
2. Null and Undefined confusion…
In javascript, Null and undefined are primitive values,
Null: Null is an empty or non-existent value in Javascript. But null must be assigned.
Undefined: Undefined means, a variable has been declared but the value has not been defined.
Here the first one, the value is assigned but the value is null, so the output is null. And the second one … The value is not assigned so the output is undefined.
3. JavaScript Triple Equals Sign VS Double Equals Sign
Double equal(==) check the value and the equality only. Double equal did not concern the type. If the value is equal then it returns true, and on the other hand, triple equal concerns the type of that specific value. Then the value is equal or not.
If we see the screenshot, then it will be crystal clear for us.
4. This keyword in Javascript
Every time we run some JavaScript in a web browser, the engine executes multiple steps, one of them being the creation of an execution context. Execution context is an abstract concept, but it refers to the environment in which the code is evaluated and then executed.
Every execution context references an object and that object references this keyword. This keyword is a reference to the object called the function. The value of this, therefore, depends on where it has been used.
5.Scope in Javascript.
Function Scope
Whenever you declare a variable in a function, the variable is visible only within the function. You can’t access it outside the function. var is the keyword to define a variable for function-scope accessibility.
Block Scope
Block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.
6.Asynchronous JavaScript
Javascript is a single-threaded programming language. When it works synchronously then it faces some function those take time for execution and user will face a blocking behavior. So it is disappointing for those users. That’s why synchronous javascript comes for avoiding this problem.
In this picture, First, we console the take work for the first client and then we call a function, function takes time for processing the work and it takes 3 sec then it runs the process work function and at last complete the work run. This happens because single-threaded javascript busy working in the function and all others work is blocked, no thread is free until this thread is not getting free. In this work, Javascript works in a synchronous way.
In an asynchronous way, javascript has some build-in function , In this picture named sync, we process work for 3 sec in a while loop, then all working process has been blocked. But someone called javascript built-in function/asynchronous function, javascript recognize it and then it will not wait the processing time for asynchronous function and it hand-over built-in function to Web API (It is the part of javascript runtime). Then it executes all processes then when the times up for those built-in function then it automatically return or execute from Web API.
In this picture , setTimeout() is a build-in function.
07.Event Loop in javascript
When an async function is called then it is sent to Web API , and the API starts its own single-threaded operation.
An example of this is the setTimeout() method. When a setTimeout operation is processed in the stack, it is sent to the corresponding API which waits till the specified time to send this operation back in for processing.
we have a cyclic system for running async operations in JavaScript. The language itself is single-threaded, but the browser APIs act as separate threads.
The event loop facilitates this process; it constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.
8.Call stack in javascript:
JavaScript engine uses a call stack to manage execution contexts, the Global Execution Context, and Function Execution Contexts.
The call stack works based on the LIFO, last-in-first-out.
When you execute a script, the JavaScript engine creates a Global Execution Context and pushes it on top of the call stack.
Whenever a function is called, the JavaScript engine creates a Function Execution Context for the function, pushes it on top of the Call Stack, and starts executing the function.
If a function calls another function, the JavaScript engine creates a new Function Execution Context for the function that is being called and pushes it on top of the call stack. When the current function completes, the JavaScript engine pops it off the call stack and resumes the execution where it left off in the last code listing.
The script will stop when the call stack is empty.
09.Callback queue
When an asynchronous function like setTimeout gets called, it doesn’t get added to the call stack. It instead gets added to the callback queue. The callback queue, as the name suggests, is a queue. Hence, functions added to it are processed in a first-in-first-out order. When the event loop in Javascript is fired, it first checks the call stack to see if it’s non-empty. If so, it executes the function at the top of the stack. However, if it finds the call stack to be empty, the program continues on with its execution. Once the end of the program is reached and the event loop is fired, as usual, it first checks the call stack to see if it’s non-empty. If it’s not, it starts executing the functions one by one from the top of the stack. Once the call stack is empty, the event loop then checks the callback queue to see if it’s non-empty as well. If yes, it then proceeds to execute the functions one by one in the queue, starting from its head. Keep in mind that the functions in the callback queue start getting executed only after
1.We have reached the end of the program
2.There are no functions left to be executed in the call stack
10.Bind ,call ,apply
Function borrowing allows us to use the methods of one object on a different object without having to make a copy of that method and maintain it in two separate places. It is accomplished through the use of. call() , . apply() , or . bind(), all of which exist to explicitly set this on the method we are borrowing
Call invokes the function immediately and allows you to pass in arguments one by one
Apply invokes the function immediately and allows you to pass in arguments as an array.
Bind returns a new function, and you can invoke/call it anytime you want by invoking a function.
Below is an example of all these methods
CALL
the first argument e.g name inside call method is always a reference to (this) variable and latter will be function variable
printFullName.call(name,"Mumbai","Taufa"); //Arham Chowdhury, Mumbai, TaufaAPPLY
apply method is same as the call method the only diff is that, the function arguments are passed in Array list
printFullName.apply(name, ["Mumbai","Taufa"]); //Arham Chowdhury, Mumbai, TaufaBIND
bind method is same as call except that ,the bind returns a function that can be used later by invoking it (does’nt call it immediately)
let printMyNAme = printFullName.bind(name,"Mumbai","Taufa");printMyNAme(); //Arham Chowdhury, Mumbai, Taufa
