DEV Community: Sayem Mohammad Ismail

10 interesting and important JavaScript questions

Sayem Mohammad Ismail — Sun, 16 May 2021 14:33:31 +0000

What is the difference between ‘==’ and ‘===’ ?

Answer:

The double equal does not check for the type of the value. It only checks if the value is the same regardless of their types.

const first = 10; // number
const second = ‘10’; // string
if (first == second) {
    console.log(‘condition true’); //this will be logged
} else {
    console.log(‘condition false’);
}

Here, the condition becomes true because == says 10 and '10' are equal, though one of them is a number and the other one is a string. Their types are ignored by ==.

Another example,

const first = 1; //number
const second = true; //boolean 

if (first == second) {
    console.log(‘condition true’); //this will be logged
} else {
    console.log(‘condition false’);
}

Here, with == the Boolean true is taken as value 1 and if there was the Boolean false it would have taken a value 0 for false. Then the value 1 for Boolean true is compared with the number 1 and states the condition to be true. Once again the types are ignored by ==.

However, the === checks for the types as well. It would have stated the conditions of both of the examples here to be false and logged the else statement 'condition false'.

What is Window ?

Answer:

The JavaScript Window object is the field of JavaScript. It is the playground for JavaScript to play.

JavaScript Window is an Object that contains everything global. All global variables, functions, objects are part of the window. Global variables are properties of the Window object and global functions are methods of it.
If you check in the console, document === window.document it will display true.

We use console.log very often. console === window.console will say true.

Items in the window object can be accessed directly in the javaScript.

What is Scope and local and global variables?

Answer:

Scope can be said to be the limit or range of variables. A function has its scope within that function only and the whole JavaScript project has the Global Scope.

A variable gets the associated scope where it is defined. If it is defined within a function then it has the local scope within that function and becomes a local variable. The variable cannot be accessed from outside the function.

However, if a variable is defined outside of any function then it gets the global scope and becomes a global variable. A global variable can be accessed from anywhere in the JavaScript project and obviously from within any function.

What is the ‘this’ keyword ?

Answer:

The JavaScript keyword this refers to the context of the current running functionality. For example, if an object myObj has a property name and a method getName(), and the key word this is used within the method then this will refer to the context myObj.

const myObj = {
    name: ‘Tom Cruise’,
    getName: function() {
        return console.log(this.name);
        }
};

myObj.getName();  // ‘Tom Cruise’ will be logged in the console.

What is JavaScript Event loop?

Answer:

The Event loop is a loop of events. It has two concepts: call stack and event queue.
JavaScript is a single threaded programming language that can do one task at a time. If multiple tasks arrive, it simply adds all of them to a queue which is called an event queue. The event queue is just any real life queue, the event comes first and gets to be done first. Once the thread is done with the current event it picks up the next event from the queue and starts performing that event. The thread continues this way until the event queue is empty.

The thread works on each event with a call stack. When an event calls a function, the thread then stacks that function up on the event and any other function called inside the previous function also gets stacked up. Then the thread starts performing from the top of the stack eliminating each function down the line to get to the bottom of the stack and makes the call stack empty.

How does JavaScript code execute?

Answer:

The web browser Google chrome uses an engine V8 to run the JavaScript on the browser. V8 engine takes the JavaScript source code and reads it. It then performs the just in time compilation on the JavaScript code and makes some optimizations. Finally, V8 engine provides the result/output.

How does a recursive function work?

Answer:

In order to perform a task, a recursive function calls itself over and over again with updated inputs until it reaches a stopping point.

For example, let’s say, we need to find the factorial of 5 or 5! Writing a recursive function findFactorial(),

function findFactorial (number) {
    if (number ===1) {
    return number;
    } else {
    return number * findFactorial(number - 1);
    }
} 

const result = findFactorial(5); 
console.log(result); //result is 120

What is DOM?

Answer:

DOM stands for Document Object Model. To show a HTML file in a web page, the browser converts the HTML file into a JavaScript object. This JavaScript object is known as DOM. The whole HTML file is contained in it.

What is a callback function?

Answer:

A function that is passed as an argument in another function is a call back function.

function greetFriend(name){
    console.log(“Hello ”, name);
}  
function  doGreeting(name, handleGreeting){
    handleGreeting(name);
}

doGreeting(“Tom”, greetFriend); // “Hello Tom”

greetFriend is passed in as a call back function to the function doGreeting. Here, greetFriend is a named function that has a name to call it. The call back function can be anonymous as well, that is it won’t have a name.

doGreeting(“Tom”, function(name){
    console.log(“Hello”, name);
}) 
//”Hello Tom” will be logged here too.

The call back here does not have a name and so, it is an anonymous call back function.

What is an API and what do GET and POST do?

Answer:

API stands for Application programming Interface. API is what facilitates communication or interaction between applications or usually between client side application and server/servers or system etc.

In simple terms, API is the medium that takes the request of the user and delivers it to the server or system, then takes the response of the system or server and delivers the response to the user.

For example, all our online activity is facilitated by APIs. If you sign up to a website, there is an API that takes your request and system stores your credentials to the database and allows you access, then API delivers your access to you and you are signed in. There are many more such examples.

The GET request characterizes an API to perform the job of delivering the response of the system to the user upon user request.
And the POST request characterizes an API to send or store data or user response to the system or server or database.

10 basic concepts of React JS

Sayem Mohammad Ismail — Sun, 16 May 2021 04:16:37 +0000

Nowadays React Js has been quite a popular framework for web development. It has some incredible features to offer that made it so successful. Here, I present 10 of them that I find interesting —

Virtual DOM:

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.

DOM manipulation in most JavaScript frameworks get the DOM updated/rebuilt in its entirety in response to any change, even for a very small change. Modern websites may have a lot of data and may use a big amount of DOM manipulation. In such a scenario the process gets very inefficient.

The Virtual DOM acts like a blueprint for the real DOM. For every DOM object react creates a corresponding virtual DOM object which becomes a representation of the DOM. Such a VDOM same properties as real DOM but lacks the power to change the screen display elements directly. Manipulating DOM might be slow but manipulating the VDOM is faster as nothing is onscreen. Though VDOM update also makes all of the VDOM objects updated, it is still incredibly faster as mentioned before. Once VDOM gets updated, react compares the updated VDOM with the immediate previous VDOM (before the update). This way react gets to know exactly which VDOM objects got changed and it makes only and only that change to the actual DOM to show on screen.

Thus, react updates only the required parts of the DOM making it very efficient.

JSX :

The JSX in react is a syntactic version of writing just the function React.createElement(component, props, ...children). And the code format for JSX is,

const jsxElement = <h1 className= ”greeting”> Hello World ! </h1>

This is called JSX and it is a syntax extension of JavaScript. This code compiles into React.createElements() calls, this way,

React.createElemet(
    ‘h1’,
    {className: ‘greeting’},
    ‘Hello World !’
)

This function in turn converts into a object like,

const jsxElement = {
    type: ‘h1’,
    props: { 
        className: ‘greeting’,
        children: ‘Hello World !’
    }
}

Embedding expressions in JSX

Valid JavaScript expressions can be embedded in a JSX code, such as

const user = “Tom Cruise”
const jsxElement = <h1> Hello, {user} </h1>

React Elements:

Elements are the building blocks for components. An example for a simple element is such,

const element = <h1>I am an Element</h1>

Rendering Elements:

React apps usually have a single root DOM node in the HTML file, which is <div id="root"></div> and react DOM manages everything inside it.

In order to render a react element in the root DOM node, both of them have to passed into ReactDOM.render().

const element = <h1>I am an Element</h1> ;
ReactDOM.render(element, document.getElementById("root"));

Components:

Components are JavaScript functions that take arbitrary inputs as props and return the elements for UI. It allows the developer to work with different sections of the app discreetly.

Component is defined as a JavaScript function,

function Greeting (props) {
    return <h1>Hello, {props.name}</h1>
}

Now this function can be called as component <Greeting /> .

Class Components:

Components a]can also be defined as ES6 class. Both function and class components have the same features.

class Greeting extends React.Component {
    render () {
         <h1>Hello, {this.props.name}</h1>
        }
}

Both ways of defining components are equivalent to react.

Component rendering:

Rendering a component is the same as rendering an element. The element here shall represent the component defined.

function Greeting (props) {
    return <h1>Hello, {props.name}</h1>
}

const element = <Greeting />;

ReactDOM.render(
    element,
    document.getElementById(“root”)
);

Component Lifecycle:

There are many component lifecycle methods to be called upon either the rending of the component (called “mounting” in react) or removal of the component (called “Unmounting” in react) or change in the props or state (called “updating” in react).

The commonly used Lifecycle methods are as given below,

mounting

These methods are called in the following order when an instance of a component being created and inserted into the DOM.
constructor()
render()
componentDidMount()

updating

An update can be caused by the change in props or state. These methods are called in the following order when a component is re-rendered.
render()
componentDidUpdate()

unmounting

This method is called when a component gets removed from the DOM.
componentWillUnmount()

Other APIs and Properties:

There are Two other APIs that can be called from the component,
setState()
forceUpdate()

There are properties of two categories, and they are class properties and instance properties.

Class Properties

defaultProps
displayName

Instance Properties

props
state

Sources: VDOM, JSX, elements, components and props, state and lifecycle, default props

Some basic concepts for web developers

Sayem Mohammad Ismail — Thu, 13 May 2021 11:36:37 +0000

Websites are a crucial part of this modern digital world. The developers who develop the websites need to have the knowledge of up to date
Tools and technologies. Because, programming languages, tools, frameworks etc. always get modified, updated and replaced with a better one.
Here I present some basic concepts to know in the first place:

JavaScript

Expressions:

In the JavaScript programming language expressions are like questions asked that will be answered by JavaScript. For example,
“ 10+100 ” is an expression and the answer is a value ‘110’. And JavaScript only answers with values.

Values:

JavaScript has 9 different types of values. 7 of them are Primitive Values and the rest two are Object and Function.
An Object is a collection of data, often denoted inside curly braces {}, while a function is a set of commands that does a particular work upon call. A function usually takes a name for it to be referred with and holds its set of commands within curly braces and takes its arguments, if any, in parenthesis, such as

function sum (x, y) {
    const result = x + y;
    return result;
}

Primitive Values:

Primitive values are such values that cannot not be manipulated from the code. Though currently there are 7 of them, we are talking only about the most commonly used 5 of the primitive values. They are as such,
Undefined - (undefined) used for for unintentionally missing values
Null - (null) used for intentionally missing values
Booleans - (true and false) used for logical operations
Numbers - (1,2,3, negative numbers and all other numbers) used for mathematical calculations
Strings - (‘lorem ipsum’ etc.) used for texts

Errors :

Errors are the worst nightmare for programmers. However, JavaScript offers a mechanism, syntax construct “try...catch” that helps in
handling errors. If there is an error the script then dies(stops running immediately), but ‘try...catch’ lets to catch the error and make the
script do something meaningful instead of dying.
Here, ‘err’ is the error object.

try {
    // code here
} catch (err) {
// handle error
}

Error Object:

The error object contains the error name and the error message. We can name the error object with any other word than ‘err’.

The error name is the name of the error that happened, such as, for an undefined variable the name of the error is “ReferenceError”.
Meanwhile, the error message is the text that contains the detailed information about the error.

Try {
    lorrem ipsum;  // making an error 
} catch (err) {
    alert (err.name); // ReferenceError
    alert (err.message); //lorem ipsum is not defined
}

Caching Concepts

Caching:

API communication is like a negotiation between the client and the server, where caching is an aspect.
Caching is a concept of efficiency of data availability. It refers to a mechanism for storing some data, commonly accessed by users, in many places and serving them to users from the common data store.

Data cost:

Data cost is simply the idea that every operation, every function that we do with an API produces some sort of cost, which arises from several factors and systems, originating from both the client and server side. At the end, every bit of data has a cost associated with its generation, storage and transfer. This cost is called the data cost.
The data cost isn’t always controllable and to reduce it caching is helpful.

Client caching:

Client caching refers to storing some commonly asked/requested data in the client/application side. This mechanism helps reduce the data cost and boost up efficiency. For example, an application can have its username and user id for an user cached in, so that every time it might not require asking the server for the username and user id.

Server caching:

Server caching refers to responding to multiple user requests using the same data or parts of the same requests made by other users. This mechanism helps reduce server side data cost.

Cross browser testing

Cross browser testing:

A web developer needs to make it sure that the application works on nearly all web browsers and it is done with cross browser testing.
Cross browser issues commonly occur because, sometimes the browser may have bugs or implement features differently, it may have different levels of support for technology features or even due to some device constraints.
Workflows for cross browser testing is as such,
Initial planning > Development > Test > Fix / iterate

Sources: types of values, try-catch, balancing caching, cross browser testing