JavaScript Some Key Topics

JavaScript working process-

Javascript is an interpreted language and this programming language is developed to run in the browser. As we know programming language needs to compile before run and execution, but javascript didn’t need this compiler. An interpreter in the browsers or browser engine did this compilation for javascript code, and that’s the way browser interpreters interpret each line of javascript code and run and execute it.

Like: in chrome browsers, it’s v8 engine, in firefox it’s Spidermonkey

JavaScript code execution process in the browser-

If we want to know how javascript code is executed in the browsers, there are two steps we have to know-

1. Execution Context (Memory Allocation phase, Code Execution phase)

2. Call Stack

Execution Context:

All of the things in javascript are put together into this execution context. This is like a container that holds all information and step-by-step javascript code is benign executed.

Execution Context has two steps or two phases-

Memory Allocation Phase=All of our javascript functions and variables are been stored as a key-value pair in this memory allocation phase. The whole function are been copied to the memory block.

Code Execution Phase= This phase javascript code is executed line by line

Call Stack:

Javascript is maintaining the execution context by pushing new context into the stack. Javascript keeps following these steps until or unless this stack becomes empty or not.

Differences between “==” and “===”

“==” checks only one condition like for equality in value, whereas “===” is a check of two conditions like equality test and returns false if either the value or the type of the two variables are different.

callback function

A function is passing another function as an argument and the function is invoked inside the outer function to complete why the function is been invoked, we can say this is a call back function.

Return more than one value from a function-

We can’t return multiple values from the javascript function. But, we can take whole values into an array or an object, and then we can simply return the array or the object.

bind, call, and apply-

Call=Arguments pass one by one through this call method. And we can pass any function

Apply=We can pass arguments as an array through this apply whenever the evoked

Bind=We can pass arguments as an array of any number through this bind and this returns with a new function.

Bind takes 1 argument.

Apply takes 2 arguments.

Call takes 3 arguments

Closure in JavaScript

Closure in javascript is a way to handle functions and variables. The closure is created when the function is been created. If a function is in the outer function’s scope then closure makes it simple to access this outer function being remaining in the inner function. Mainly the inner function has the ability to access outer functionality is a power of this closure concept.

Event bubbling in js-

Event bubbling concept in javascript is like if an event occurs for reasons that all the reasons or event need to fulfill unless or until it reaches to its parent event and it maintains Bottom-Up approach. So If an event occurred then the innermost element will be triggered first and it propagates to the outer elements towards its root or parents.

Hoisting in JavaScript-

Hoisting is a way to take all the declarations at the top of the scope, it means taking it to before code execution. This hoisting is such like where we declare functions and variables it doesn’t matter at all, caused by hoisting we can access this from a global scope or local scope.

recursive function-

Inside a function, the function is calling itself is a recursive function. A recursive function needs to have a condition to stop calling itself like a return statement with an if condition. Otherwise, the function will be called indefinitely and this will cause an error.

Difference between undefined and null

As simply null is a special value meaning no value or no object.

Null is a special object cause if we see the typeof null we can see it returns ‘object’.

undefined means= that the variable has not been declared, or has not been given a value, the value didn’t exist.

Different data types in JavaScript-

We can see two types of Data. Primitive and Non-primitive. But there is another data called special type.

Here we will see primitive data types and non-primitive data types.

Primitive data types= string, number, boolean

Non-primitive data types= object, array, function

DOM-

DOM= Document Object Model. We also can say that for web documents, DOM is like a programming interface.DOM represents a page but page information like style, font, structure, color can be changed.

Is JavaScript a static type or a dynamic type-

Javascript is a dynamically-typed language. We all know in the dynamically types of variables is been verified its type during run-time. And statically type before the declaration of variable we have to tell that this is an integer type variables or this is a string type variables. For javascript, we didn’t need to tell, so that's why javascript is a dynamically typed language.

Pop up boxes available in JavaScript

3 types-

1. Alert box 2. Confirm box 3. Prompt box

We can see only one button in an alert box and it is an ok button. But in the confirmation box, we can see two buttons, one is an ok button and another one is the canceled button.

break and continue statements-

Break statement exits from the current loop.

In the break statement, the program exits from the immediate loops and didn’t check any other statements.

And the continue statement the program continues to the next statement of its program loop.

Different types of errors in JavaScript-

There are three types of errors:

1. Load time error= there are certain times to load a web page, if it doesn’t load in time then we will see some errors like connection error, bad request
2. Runtime error=if there are problems with any of the code then will face this error.
3. Logical error=if the logic is not properly correct then the code will break and show us the error

Is JavaScript case sensitive-

Yes, javascript behaves as a case-sensitive programming language. As an example:parseInt or parsefloat will not work if we mistakenly spell it wrong like:parseint or parseFloat.

JavaScript and ECMA Script related-

How a programming language will behave, why we called javascript a programming language because all of these rules are been written in the ECMA Script. So Javascript and ECMA Script is related as for rules and guidelines of a programming language.

Scope and Scope Chain in javascript-

Scope in javascript is one of the important concepts. It basically means the accessibility of variables and functions, where we can access and where we can’t.

3 types of Scope-

1. Global Scope
2. Local also known as Function scope
3. Block scope

Global Scope= If any functions and variables are declared in the global Scope then everyone can access those variables and functions.

Function Scope= If any functions and variables are declared in the Function/Local Scope then only inside of that function scope can access those variables and functions.

Block Scope=This block scope concept is for only let and const variables, var didn’t have this scope as it is older version variables. Only variables declared inside a block can be accessed inside of that block, cannot be accessed outside.

ES6 features in js-

ES6 is an updated version of javascript ES5. And This version was introduced in 2015 and all rules and guidelines of ES6 have been written in ECMAScript for more details.

So there were some changes made in the updated javascript version, we are talking about the ES6 version and the new features of ES6 are -

1. let and const Keywords
2. Arrow Functions
3. Multi-line Strings
4. Default Parameters
5. Template Literals
6. Enhanced Object Literals
7. Destructuring
8. Promises
9. Classes
10. Modules

Differences between var, let, and const-

There is no restriction or boundary-making condition for using var as a variable. So In the ES6 version, we can declare variables with let and const, where before we can change our variables with var but using const keyword we can’t change the value also can’t redeclare if once we declared it, otherwise it will show an error that we can’t redeclare const variables value. Let variables can be updated later but can’t be redeclared within its scope. So these restrictions come with let and const variable declaration.

default parameters use-

From user's perspective sometimes users don’t pass any parameter while calling a function, so this will going to show some compilation error, cause the value wasn’t passed, so for this reason for handling such cases in the program needs to run correctly if a function calls.SO, in this case, the default parameter helps to run our program correctly although the user didn’t pass any value, or the user passes the value then the default value will be updated.

The spread operator works-

The spread operator becomes useful when we want to copy an array and reuse that array next time. This spread operator makes it easy to take the one array in one container to take it to another container, and we can easily copy whatever values we want to take or not.

Difference between class and object-

In general, the object is a real-world entity that can be describable as an object. And Class is the container, parent, template, blueprint where all objects are been created. So, we can say an Object is an instance of a Class.

Call by value vs call by reference-

we use to call a function passing a parameter or values and it’s known ad call by values.

On another hand, if we don’t pass the value but we are passing reference of the value or the pointer or the address of the value then we called it a call by reference.

API-

API means Application Programming Interface. With the help of this API, two applications can communicate with each other with a secure HTTP connection.API makes it easy to read the data and extract the data from the internet and reuse the data that are needed where people can make good products or services using these APIs.Example: weather API.

Difference between Get vs Post

The two most used HTTP request is get and post. The get method is used for viewing data and we don’t want to change those data. But in the post method, it is used for changing the data or updating the current data. Mostly get method is used for seeing the data and the post method is used for inserting new data or updating current data.

Difference between local storage and session storage and cookies-

If we want to save data into the user’s browsers for their record what they did if no problems occurred on the internet. Then we can save this data in two ways. One is sessionStorage and another one is localStorage.The main difference is the sessionStorage data has been destroyed after the browser has been closed and on the other hand localStorage data will not be destroyed if browsers have been closed or not.

cookies, why will we use it-

Cookies are nothing but a sort of protocol that enables users to know the behavior of the users and show results on that criteria. Cookies values are stored on the client to establish the browsers and server mutual scripting like reading and writing cookies for the users. Javascript also can use this cookie and manipulate cookies using scripting.

object-oriented programming in js-

Object-oriented programming started because of the reusing of data and organizing the design more effectively. The four main OOP concept is Inheritance, Abstraction, Polymorphism, and Encapsulation. This way we can organize the code more effectively as we can reuse our code and maintain the code easily.

Difference between Array vs LinkedList.

We can see that array is a collection of elements of a similar data type, it doesn’t need to be similar though. But a linked list is a collection of objects where data has been connected to each other by pointing to the header address and the next pointing to the next value. The array is stored in the same memory location. Where Linked list can be stored anywhere in the memory location cause linked list storing the data basis of address.

debugging a JavaScript application-

As a developer, we have to write code as well as we have to be ready for handling errors in our codes. And fixing and searching for code correcting is also known as debugging. Software developers try a different methods to fix the error.

A simple way to find an error to go back to where the error been occurred and fix it. If it didn’t fix the problem then we have to set up the breakpoints in certain points as we think the problem can be. So giving a breakpoint and finding the errors is also a known method. Another way we can see by console log the code and trying and seeing that everything is showing the right result or not.

For javascript developers, we can use the Chrome dev tool to debug all these methods and find the bugs as we are looking in our code.

the arrow function-

If we want to write a function in a short way ES6 gives us those features by using the arrow function. An arrow function can be written in many ways like for empty parameter arrow function, for a single parameter, for more than one parameter. In general, An arrow function structure looks like-

const functionName = (argument1, argument2) => { }

.

template literals in ES6-

This template literal is one of the best features of ES6. This allows us to add more than one expression and string literals. This way we can dynamically put the string literals into the backtick (` `). And this is so beneficial cause now we can handle dynamically logic if we needed.

Destructuring t in ES6-

If we want to access some values inside of any objects and arrays we need to loop through this data and this looping over data is only for accessing data from the objects and array. But in a destructuring method in ES6 is so easy way we can access this data and extract the data from the main container and we don’t need to loop the overall array or object now. Simply writing third bracket[] or second bracket to destructuring any array and objects now.

IIFE (Immediately invoked function expressions)-

We know that the IFFE function is run immediately when it is defined. We know this function as a self-executing anonymous function.

Discuss the for…in the loop? Discuss the for…of the loop?

If we want to loop through an object then we use for..in the loop. And when we need to loop through arrays or string we use for..of the loop.

Map in js-

If we want to extract data from an array of objects then we need to loop through it and then save each item into a separate variable to identify each item. But using a map we don’t need this for loop and declaring a variable to save the data. We can use the map to do this thing easily and this map will do the same work as we did for looping over the array and saving them into a separate value. So this map is very much effective in writing efficient code.

Promises in ES6-

Promises in Javascript are like the promise that will surely return something as we make any promise call. As javascript is asynchronous it takes time so promise is one of a great ways to return something when the promise will be ready for return.

Promise has three states-

1.Pending=promise is still not completed

2.Fullfilled= promise return with successfully

3.Rejected=promise returned with unsuccessfully

That’s all for today.

Thank you

MD MUSTAFIZUR RAHMAN

Support me at Youtube:https://www.youtube.com/channel/UCU_GV9uLrxHl4-1WkTPzr1g

Linkedin:https://www.linkedin.com/in/md-mustafizur-rahman-sayem-22b856156/

Github:https://github.com/rahmancoder