Forem: S. M. Mahmudur Rahman

Optimized Toggle Visibility

S. M. Mahmudur Rahman — Tue, 18 Jun 2024 16:53:47 +0000

Case 1

<i onClick={() => setVisible(!visible)} 
className="fi fi-rr-eye absolute top-10 right-3">
</i>

Case 2

<i
onClick={() => setVisible((currentVal) => !currentVal)}
className="fi fi-rr-eye absolute top-10 right-3"
></i>

Both of the provided onClick handlers in your elements are functionally similar and will work correctly. However, they have slight differences in terms of readability and potential optimizations.

For Case 1:

This directly toggles the visiblestate using the current value of visible.
If visibleis managed in a parent component, this can lead to stale closures because the visiblevalue might not be the most up-to-date value at the time of execution.

For Case 2:

This uses the functional form of the state setter, which ensures that the state update is based on the most recent state value, even if the component re-renders before the state is updated.

Recommendation:

The second handler is generally more optimized and is the recommended approach because it leverages the functional update form. This method ensures that you always get the latest state value, avoiding potential issues with stale state closures.

Here's the recommended version:

<i
  onClick={() => setVisible((currentVal) => !currentVal)}
  className="fi fi-rr-eye absolute top-10 right-3"
></i>

Explanation:

Stale Closures: In the first handler, if the component re-renders between the time the onClick is set up and the time it is executed, the visible value might be outdated, leading to unexpected behavior. The second handler avoids this by using the current state value directly.
Readability: The second handler is more explicit about its intent to toggle the state based on the current state, making the code easier to understand and maintain.

Backend Concepts

S. M. Mahmudur Rahman — Sat, 05 Mar 2022 13:30:39 +0000

What is Nodejs? Difference between Nodejs and javaScript
Or is Node js blocking or non-blocking?

Ans: Node.js is an extremely powerful framework developed on Chrome’s V8 JavaScript engine that compiles the JavaScript directly into the native machine code. It works on a single-threaded event loop and a non-blocking I/O which provides high rate as it can handle a higher number of concurrent requests.

It is a lightweight framework used for creating server-side web applications and extends JavaScript API to offer usual server-side functionalities. It is generally used for large-scale application development, especially for video streaming sites, single page application, and other web applications.

Difference between Nodejs and javaScript is given below:

JavaScript

Programming Language
Used for any client-side activity for a web application
Spider monkey (FireFox), JavaScript Core (Safari), V8 (Google Chrome), etc. are running engine

Node.js

Interpreter and environment for JavaScript
Used for accessing or performing any non-blocking operation of any operating system
V8 (Google Chrome) is running engine

How does Node.js work?

Ans:

Clients send requests to the webserver to interact with the web application. Requests can be non-blocking or blocking:
Querying for data
Deleting data
Updating the data
Node.js retrieves the incoming requests and adds those to the Event Queue
The requests are then passed one-by-one through the Event Loop. It checks if the requests are simple enough not to require any external resources
The Event Loop processes simple requests (non-blocking operations), such as I/O Polling, and returns the responses to the corresponding clients

A single thread from the Thread Pool is assigned to a single complex request. This thread is responsible for completing a particular blocking request by accessing external resources, such as computation, database, file system, etc.

Once the task is carried out completely, the response is sent to the Event Loop that sends that response back to the client.

What are the differences between SQL and NoSQL database?

Ans: Differences between sql and nosql database are given below:
SQL

Databases are categorized as Relational Database Management System (RDBMS).
SQL databases display data in form of tables so it is known as table-based database.
SQL databases are vertically scalable
SQL databases are best suited for complex queries.
MySQL, Oracle, Sqlite, PostgreSQL and MS-SQL etc. are the example of SQL database

NoSQL

NoSQL databases are categorized as Non-relational or distributed database system.
NoSQL databases display data as collection of key-value pair, documents, graph databases or wide-column stores.
NoSQL databases are horizontally scalable.
NoSQL databases are best suited for hierarchical data storage.
MongoDB, BigTable, Redis, RavenDB, Cassandra, Hbase, Neo4j, CouchDB etc. are the example of nosql database

Explain the concept of middleware in Node.js?

Ans: In general, middleware is a function receives the Request and Response objects. In other words, in an application’s request-response cycle these functions have access to various request & response objects along with the next function of the cycle. The next function of middleware is represented with the help of a variable, usually named next. Most commonly performed tasks by the middleware functions are:

Execute any type of code
Update or modify the request and the response objects
Finish the request-response cycle
Invoke the next middleware in the stack

What is ExpressJS?

Ans: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

React JS Concept

S. M. Mahmudur Rahman — Sat, 05 Mar 2022 11:52:48 +0000

What is reactjs? Tell us about advantages and disadvantages of using react js.
Or Why will you select ReactJS?
Or there are so many different javascript frameworks. Why will you use ReactJS for your application?

Ans: React is a front-end JavaScript library developed by Facebook in 2011. It follows the component based approach which helps in building reusable UI components and is used for developing complex and interactive web and mobile UI.

Some of the major advantages of React are

Reusable components
Virtual DOM helps to make changes to small component without interfering with the whole application
One-way data flow (Unidirectional) that prevents the app from being unstable

Disadvantages of React are listed below:

Lack of proper documentation due to fast-changing and update in React
Its library is very large and takes time to understand
For new developer Coding gets complex due to JSX

How does React Work?

Ans: Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React finds out what changes have been made, and changes only what needs to be changed.

What is React Component?

Ans: Components are like functions that return HTML elements.

*What is props? *

Ans: The way of handling component properties is called Props. Props are like function arguments, and send them into the component as attributes.

What is hook?
Ans: Hooks are reusable functions. Hooks allow function components to have access to React features such as state and lifecycle methods.

What is useState hook?

Ans: useState Hook allows to track state in a function component. So we can say that State generally refers to data or properties that need to be tracked in an application.

useState accepts an initial state and returns two values:
const [current state, function that update the state] = useState (initial state)

What is useEffect?

Ans: useEffect Hook allows to perform side effects(fetching data, directly updating the DOM, and timers etc.) in a component.

useEffect accepts two arguments. The second argument is optional.
useEffect (, )

What is useContext hook?

Ans: useContext hook is a way to manage state globally. With useState it is used to share data between deeply nested component more easily than useState alone.

Without Context, we will need to pass the state as "props" through each nested componen that may be not needed in that components.

What is JSX? How does it work?

Ans: JSX stands for JavaScript XML and It allows us to write HTML inside JavaScript and place them in the DOM without using appendChild( ) or createElement( ) method. Actually JSX provides syntactic sugar for React.createElement( ) function.

What is Virtual dom? What are the differences between virtual and real dom?
Or what is the diff algorithm? How does it work?

Ans: In simple words, virtual DOM is just a copy of the original DOM. React creates a virtual DOM in its memory

When there is an update in the virtual DOM, React compares the virtual DOM with a snapshot of the virtual DOM taken right before the update of the virtual DOM. With the help of this comparison React figures out which components in the UI need to be updated.

This process is called diffing. The algorithm that is used for the diffing process is called the diffing algorithm. Once React knows which components have been updated, then it replaces the original DOM nodes with the updated DOM node.

The difference between virtual and real DOM are listed below

Real DOM

It updates slow.
Can directly update HTML.
DOM manipulation is very expensive.

Virtual DOM

It updates faster.
Can’t directly update HTML.
DOM manipulation is very easy.

Differences between props and state?
Or How will you pass data from parent to child
Or Can you change props?
Or is Props readonly?

Ans: Props is the shorthand for Properties in React. The way of handling component properties is called Props. Props are like function arguments, and send them into the component as attributes.
They are read-only components that must be immutable. Props are always passed down from the parent to the child components throughout the application.

Props

Data push in HTML is called properties or props
Props are immutable.
Props can be accessed by the child component.
The stateless component can have Props.

State

Changing something on website is called states
State is mutable
State cannot be accessed by child components.
The stateless components cannot have State.

What is the purpose of useState? When and why will you use it?
Or Manage state

Ans: useState Hook allows to track state in a function component. So we can say that State generally refers to data or properties that need to be tracked in an application.

useState accepts an initial state and returns two values:
const [current state, function that update the state] = useState (initial state)

What is prop drilling?
Or What is the best way to pass data 4-5 layers down?
Or What is a context API? How does it work?

Ans: Prop drilling is the process in a React app where props are passed from Parent Component to Child Component

Context API is a way to manage state globally. With useState it is used to share data between deeply nested component more easily than useState alone.

Without Context, we will need to pass the state as "props" through each nested componen that may be not needed in that components .

Difference between useEffect and useState?

Or why do we need to inject dependency for useEffect?
Ans: useEffect allows to perform side effect of component whereas useState allows to keep track state of component.

If we want to stop reload or re-rendering component then we use dependency for useEffect.

What other hooks have you used other than useState and useEffect?

Ans: I have used useContext(), useRefs() hooks

Tell us about React Component lifecycle

Ans: There are three different phases of React component’s lifecycle:

Mounting : Mounting means putting elements into the DOM.

Updating: A component is updated whenever there is a change in the component's states or props.

Unmounting: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

What is the purpose of a custom hook? How will you create a custom hook? Give us an example.

Ans: Hooks are reusable functions. When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook.

Custom Hooks start with "use". Example: useFetch

What is the most challenging task you have accomplished using react?

Ans: I have faced a challenge which is shown on UI of selected booking item details. However, I found a solution to overcome challenges. I used useParams hooks to get selected product ID and applied Find method for filtering selected product from all products.

What is Redux and uses?

Ans: Redux is a state management library that helps to manage state in applications.

Redux is a predictable state container for JavaScript apps. As the application grows, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing application’s state with a single global object called Store. Redux fundamental principles help in maintaining consistency throughout application, which makes debugging and testing easier.

What is a Higher order component? Give us an example.

Ans: Higher order component is a function that takes a component as parameter and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

How would you optimize a react js application?
Or How would you prevent unnecessary component re-render in reactjs?

Ans: There are many ways through which one can optimize the performance of a React app,

Using useMemo( ) -
It is a React hook that is used for caching CPU-Expensive functions.

useMemo( ) hook can be used to cache such functions. By using ]

useMemo( ), the CPU-Expensive function gets called only when it is needed.

Using React.PureComponent -
It is a base component class that checks the state and props of a component to know whether the component should be updated.
Instead of using the simple React.Component, we can use React.PureComponent to reduce the re-renders of a component unnecessarily.

Maintaining State Colocation -
This is a process of moving the state as close to where you need it as possible.

Sometimes in React app, we have a lot of unnecessary states inside the parent component which makes the code less readable and harder to maintain. Not to forget, having many states inside a single component leads to unnecessary re-renders for the component.

It is better to shift states which are less valuable to the parent component, to a separate component.

Lazy Loading -
It is a technique used to reduce the load time of a React app. Lazy loading helps reduce the risk of web app performances to a minimum.

*What are the features of React? *

Ans: Most common features of React are listed below:
React uses the virtual DOM instead of the real DOM.

It uses server-side rendering.
It follows uni-directional data flow or data binding.
It uses reusable or composable UI components for developing the view

Why can’t browsers read JSX?

Ans: Browsers can only read JavaScript objects but JSX is not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

What is React Router?

Ans: React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single-page web applications. React Router has a simple API.

What is the purpose of render() in React.

Ans: Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as

, , etc.

What is the significance of keys in React?

Ans: Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.

What are the different ways to style a React component?

Ans: There are many different ways through which one can style a React component. Some of the ways are :

Inline Styling: We can directly style an element using inline style attributes. Make sure the value of style is a JavaScript object.

Using JavaScript object: We can create a separate JavaScript object and set the desired style properties. This object can be used as the value of the inline style attribute.

CSS Modules: We can create a separate CSS module and import this module inside our component. Create a file with “.module.css”‘ extension.

Why is it necessary to start component names with a capital letter?

Ans: In React, it is necessary to start component names with a capital letter. If we start the component name with lower case, it will throw an error as an unrecognized tag. It is because, in JSX, lower case tag names are considered as HTML tags.

What are fragments?

Ans: In React, Fragments are used for components to return multiple elements. It allows you to group a list of multiple children without adding an extra node to the DOM.

How can you create a component in React?

Ans: Function Components: This is the simplest way to create a component in React. These are the pure JavaScript functions that accept props object as the first parameter and return React elements.

function Greeting({ message }) { return <h1>{Hello, ${message}}</h1> }

Class Components: The class components method facilitates you to use ES6 class to define a component. The above function component can be written as:

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

ES6 Concepts

S. M. Mahmudur Rahman — Sat, 05 Mar 2022 10:55:37 +0000

Tell me about Es6
Or what ES6 features did you use?

Ans: ES6 was released in June 2015, which was developed by Brendan Eich and that is the sixth edition of the language. Primarily, it was named ES6 which is renamed as ECMAScript 2015 later. This edition includes several new features that are Let and const keywords, spread operators, class, arrow functions, for...of loop, modules, iterators, promises, and many more.

What are the differences between var, let, and const?

Ans: There few differences between var, let, const which are given below:

Var declaration are globally scoped or functioned scoped whereas let and const are block scoped.
Var variables can be updated and redeclared whereas let and const both variables can not be redeclared. However, let variable can be updated but const variable not.
Var and let variable can be declared without being initialized whereas const variable must be initialized during declaration.

Why will you use default parameters?

Ans: If no value or undefined is passed then we can use the default parameters to set default values for named parameters.

How does the Spread operator work?

Ans: The list of parameters is obtained using the spread operator. Three dots (...) are used to represent it and it divides an iterable (such as an array or a string) into individual elements. It's mostly used in JavaScript to make shallow copies of JS and to join two arrays together or to concatenate them.

Difference between class and object
Ans:

Object

Object is an instance of a class.
Object is a real world entity such as pen, laptop, mobile, bed, keyboard, mouse, chair etc.
Object is a physical entity.
Object is created many times as per requirement.
Object allocates memory when it is created.

Class

Class is a blueprint or template from which objects are created.
Class is a group of similar objects.
Class is a logical entity.
Class is declared once.
Class doesn't allocated memory when it is created.

What is a Prototype chain?
Or how does inheritance work in JavaScript?

Ans: Prototype is basically a property of a JavaScript function. At each time we create a function in JavaScript, JavaScript engine adds an extra property called prototype to the created function.

In JavaScript, each object contains a prototype object that acquires properties and methods from it. Again an object's prototype object may contain a prototype object that also acquires properties and methods, and so on. It can be seen as prototype chaining.

Explain Call by value vs call by reference

Ans: While calling a function, we pass values of variables to it and these functions are known as “Call By Values”.
While calling a function, instead of passing the values of variables, we pass address of variables(location of variables) to the function, and this function is known as “Call By References”.

What is scope in JavaScript?
Or Explain JavaScript scope, Block scope, and global scope?

Ans: Scope refers to the area where an item such as a function or variable is visible and accessible to other code.

When a variable is defined inside a block and it is only accessible to the code within the curly braces { } is called block scope

Variables declared outside any function have Global Scope. Global variables can be accessed from anywhere in a JavaScript program.

What is a Higher-order Function?
Ans: A higher-order function can be defined as a function that accepts one or more functions as arguments and returns a function as a result. Using higher-order functions in our code enhances the execution speed of our code and speeds up our development skills.

What is API? Difference between Get vs post?

Ans: API is the abbreviation of the term Application Programming Interface is used to communicate between apps and to access and fetch the required information.

Difference between Get and Post are given below:

Get

GET requests are often used for fetching documents and GET parameters are used to describe which document we are looking for (or) what page we are on (or) things of that nature.
GET Parameters are included in URL
Get request is not secured because data is exposed in URL bar.
Get request is more efficient and used more than Post.

Post

POST parameters are often used for updating data for actually making changes to the server (or) to the data held on the server
POST parameters are included in the body
Post request is secured because data is not exposed in URL bar.
Post request is less efficient and used less than get.

Difference between local storage and Session storage

Ans: Session storage is similar to local storage but the difference is that while data in local storage doesn't expire, data in session storage is cleared when the page session ends.

What are cookies? And why will you use it?

Ans: Cookies are files that hold information about you, your web browser and your behavior on the internet. They are tiny files stored on your PC or device, which can be used by websites or web apps to tailor your online experience.

Cookies are used to identify my computer as I use a computer network. Specific cookies known as HTTP cookies are used to identify specific users and improve your web browsing experience.

Data stored in a cookie is created by the server upon internet connection. This data is labeled with an ID unique.

What is object-oriented programming?

Ans: The word object-oriented is the combination of two words that is object and oriented. Object-oriented programming (OOP) is a computer programming model that organizes software design around data, or objects, rather than functions and logic. An object can be defined as a data field that has unique attributes and behavior.

How will you debug a JavaScript application?

Ans: Debugging is not easy but fortunately, all modern browsers have a built-in JavaScript debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user. With a debugger, I can also set breakpoints and examine variables while the code is executing otherwise have to follow the steps at the bottom of that page and activate debugging in browser with the F12 key, and select "Console" in the debugger menu.

What is arrow function? What are the advantages of arrow function?

Ans: Arrow functions are introduced in ES6 and the definition of the arrow function consists of parameters, followed by an arrow (=>) and the body of the function. An Arrow function is also called as 'fat arrow' function. We cannot use them as constructors.

The advantages of the arrow function are listed below:
It reduces code size.

The return statement is optional for a single line function.
Functional braces are optional for a single-line statement.

What are the template literals in ES6?

Ans: Template literals are a new feature introduced in ES6 which provides an easy way of creating multiline strings and performing string interpolation. Template literals are enclosed by the backtick () character and template literals were referred to as template strings prior to ES6.

What is Babel?

Ans: Babel is one of the popular and open-source transpilers of JavaScript. It is mainly used for converting the ES6 plus code into the backward-compatible version of JavaScript that can be run by previous JavaScript engines.

Define about set.

Ans: A set is a data structure that allows us to create a collection of unique values. It is a collection of values that are similar to arrays and it does not include any duplicates. It is used to support both object references and primitive values.

Example let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); console.log(colors); Output: set{'Green', 'Red', 'Orange', 'Yellow', 'Red'}

What is the purpose of using destructuring?
Ans: Destructuring was introduced in ES6 as a way to extract data from arrays and objects into a separate variable. It is used to extract smaller fragments from objects and arrays.

What are the new String methods introduced in ES6?

Ans: Four string methods introduced in ES6 that are listed below:

string.startsWith() : It determines if a string begins with the characters of a given string.

string.endsWith() : It determines if a string ends with the characters of a given string.

string.includes() : It will return true if the given argument is present in the string.

string.repeat() : It creates and returns a new string which contains the given number of copies of the string on which this method was called, concatenated together.

Explain difference between for…of and for…in.

Ans: It is similar to for loop that iterates through the properties of an object. It is useful when we require to visit the properties or keys of the object.

However, for-of loop which allows us to iterate over arrays very easily and the code inside the loop is executed for each element of the iterable array.

What is Bubbling and Capturing?

Ans: The event bubbles up or goes to its parent, grandparents, and grandparent's parent until it reaches the window in the Bubbling Phase and the event starts out from window down to the element that prompted the event or the event target in the Capturing Phase.

What is the difference between const and Object.freeze()?

Ans: Const creates an immutable binding, which means you can't change its value whereas Object.freeze() method freezes an object that prevents new properties from being added to it and this method prevents the modification of existing property, attributes, and values.

Basic JS Concepts

S. M. Mahmudur Rahman — Sat, 05 Mar 2022 09:32:23 +0000

How does JavaScript work?
or What is the JavaScript Event Loop?

Ans: In JavaScript, the event loop is a process that waits for the Call Stack to be clear before pushing callbacks from the Task Queue to the Call Stack. Once the Stack is clear, the event loop triggers and checks the Task Queue for available callbacks and If there are any, it pushes it to the Call Stack, waits for the Call Stack to be clear again, and repeats the same process

Or Though JavaScript is single-threaded, how does it handle concurrent work?
Or Is JavaScript Single-threaded or multi-threaded?

Ans: JavaScript is a single-threaded language. Because the language specification does not allow the programmer to write code so that the interpreter can run parts of it in parallel in multiple threads or processes.
Or Is JavaScript Synchronous or asynchronous?
Ans: JavaScript is a client-side and server-side scripting language inserted into HTML pages and is understood by web browsers. JavaScript is also an Object-based Programming language.

How does JavaScript code is executed in Browser?

Ans: Mostly every web browsers nowadays have their own JavaScript engines. So, it is the JavaScript engine that understands the code and runs it.

In this case, we have used a chrome browser to run our program that has the "V8" JavaScript engine, which is also used for creating the Node.js. As we already know, JavaScript is an interpreted language that means it gets executed in line by line manner or which means the JavaScript engine converts the Js code line by line and runs in the same manner instead of converting the whole program once.

What are the differences between “==” and “===” ?

Ans: Both are comparison operators and “==” is used to compare only values whereas “===” is used to compare both values and types.

What is a callback function?

Ans: In JavaScript the definition of callback is a plain JavaScript function passed to some method as an argument or option. It is a function that is to be executed after another function has finished executing, hence the name ‘call back‘.

When will you return something from a function?
Or How will you return more than one value from a function?

Ans: The return statement is used to return a particular value from the function to the function caller. So we can say that the function will stop executing when the return statement is called and the return statement should be the last statement in a function because the code after the return statement will be unreachable.

We can return primitive values (such as Boolean, number, string, etc.) and Object types (such as functions, objects, arrays, etc.) by using the return statement.

We can also return multiple values using the return statement. It cannot be done directly so that we have to use an Array or Object to return multiple values from a function.

Tell me about bind, call and apply.
Or How many arguments does call apply bind take?

Ans:
Call method invokes the function and allows you to pass in arguments one by one and Apply method invokes the function and allows you to pass in arguments as an array whereas Bind method returns a new function, allowing you to pass in a this array and any number of arguments.

What is a Closure in JavaScript? How does it work?

Ans: A closure can be defined as a JavaScript feature in which the inner function has access to the outer function variable. The closure has three scope chains listed as follows:

Access to its own scope.
Access to the variables of the outer function.
Access to the global variables.

It gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created. To use a closure, simply define a function inside another function and expose it.

What does the “this” keyword indicate in JavaScript?

Ans: In JavaScript this keyword refers to the object it belongs to. It has different values depending on where it is used. In a method, this refers to the owner object and in a function, this refers to the global object.

What is Event bubbling in js?

Ans: Event bubble is a type of event propagation where the event is first triggered on the most bottom target element and then continuously triggered on the ancestor of the target element in the same nesting hierarchy until it reaches the external DOM element or document object.

Or How does event delegate work in JS?

Ans: Event delegate works such a way if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor.

Explain hoisting in JavaScript.

Ans: Housing is the default behavior of javascript. Here declaration of functions and variables are moved on top of the scope.

What is a recursive function function?

Ans: Recursion is a process of calling itself until it arrives at a result. So we can say that, when a function that calls itself is called a recursive function and recursive function must have a condition to stop calling itself. If we do not stop it, the function is called indefinitely.

Difference between undefined and null.

Ans: Null is an object that means it is an assignment value whereas undefined is a type that means a variable is declared, but no value has been assigned a value.

NULL example,
var demo = null; alert(demo); //shows null alert(typeof demo); //shows object

Undefined example,

var demo; alert(demo); //shows undefined alert(typeof demo); //shows undefined

What are the different data types in JavaScript?
Ans: JavaScript has 7 types of data types. These are:
Number
String
Boolean
Undefined
Null
Object
Symbol(From ES6)

Or Primitive data type and non-primitive data type

Ans: Primitives are known as being immutable data types because there is no way to change a primitive value once it gets created. Primitives are compared by value.

Non-primitive values are mutable data types. The value of an object can be changed after it gets created. Objects are not compared by value.

What is DOM?

Ans: JavaScript can access all the elements in a web page using the Document Object Model (DOM). The web browser creates a DOM of the webpage when the page is loaded.

Is JavaScript a static type or a dynamic type?
Or How will you know the type of a JavaScript variable?

Ans: JavaScript is a dynamically typed language. In a dynamically typed language, the type of a variable is checked during run-time in contrast to statically typed language, where the type of a variable is checked during compile-time.

What are the scopes of a variable in JavaScript?

Ans: The scope of a variable means it is the region of a program in which it is defined. JavaScript variable will have only two scopes.

• Global Variables − A global variable which has global scope and it is visible everywhere in your JavaScript code.

• Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

What are the variable naming conventions in JavaScript?

For naming variables in JavaScript following rules are to be followed:

Should not use any of the JavaScript reserved keyword as variable name. For example, break or boolean variable names are not valid.
Should not start with a numeral (0-9) for making JavaScript variable names. They must begin with a letter or the underscore character. For example, 123name is an invalid variable name but _123name or name123 is a valid one.

JavaScript variable names are case sensitive. For example, Test and test are two different variables.

In how many ways can you create an array in JS?

There are three different ways of creating an array in JavaScript, namely:

By creating instance of an array:
var someArray = new Array();

By using an array constructor:
var someArray = new Array(‘value1’, ‘value2’,…, ‘valueN’);

By using an array literal:
var someArray = [value1, value2,…., valueN];

What are global variables? How are these variables declared?

Ans: Global variables are declared outside of a function for accessibility throughout the program, while local variables are stored within a function using var for use only within that function’s scope. If you declare a variable without using var, even if it’s inside a function, it will still be seen as global.

What is the use of the Push method in JavaScript?
Ans: The push method is used to add or append one or more elements to an Array end. Using this method, we can append multiple elements by passing multiple arguments.

How are event handlers utilized in JavaScript?

Ans: Events are the actions that result from activities, such as clicking a link or filling a form by the user. An event handler is required to manage the proper execution of all these events. Event handlers are an extra attribute of the object. This attribute includes the event’s name and the action taken if the event takes place.

What is the unshift method in JavaScript?

Ans: The method of unshift is like the push method, which works at the beginning of the array and this method is used to prepend one or more elements to the beginning of the array.

What is Implicit Type Coercion in javascript?

Ans: Implicit type coercion in javascript is automatic conversion of value from one data type to another. It takes place when the operands of an expression are of different data types.

What is NaN property in JavaScript?

Ans: In JavaScript, NaN property means Not a Number and It represents a value that is not a valid number. It can be used to check whether a number entered is a valid number or not a number.

What is the typeof operator?
Ans: JavaScript typeof operator is used to find the type of a JavaScript variable. It returns the type of a variable or an expression.

-------------------Notes for Hoisting-------------------------

***Note - Variable initializations are not hoisted, only variable declarations are hoisted*

***Note - To avoid hoisting, you can run javascript in strict mode by using “use strict” on top of the code*

CSS Common Concepts

S. M. Mahmudur Rahman — Sat, 05 Mar 2022 06:00:37 +0000

What is Flex layout? Difference Flex and grid layout?

Ans: Flex layout is a one-dimensional layout method for arranging items in rows or columns.
Flexbox is designed for one-dimensional layout whereas grid is 2 dimensional layout. Flexbox is designed for small scale layout while grid is for large scale layout.

Explain CSS position property? What are some differences between absolute position and relative position?

Ans: CSS position property defines the position of an element in document. It works with top, bottom, left , right and Z-index to determine the final position of an element on a page. There are five different properties value which are static, relative, absolute, sticky, fixed.

Relative position places an element relative to it’s current position without changing the layout around it whereas Abosolute position places an element relative to its parent’s position with changing the layout around it.

What is a box model? And what are the different elements of a box model?

Ans: Around every HTML element a rectangle box is wrapped. The box model consists of width and height of rectangle box and is used to determine width and height of the rectangle box.
There are main four elements in a box model which are content, padding, border, margin

What is a Hover effect? What is the purpose of the active class?

Ans: CSS hover effect takes place when an user hover over the element and the element responds with transition effects. It is used to mark an element on web page and it is an effective way to improving user experience.

The use of :active pseudo-class to select an element which is activated when the user clicks on it.

What are the different types of Selectors in CSS?

Ans: There are different types of Selectors in CSS which are listed below.

Universal Selector: The provided style will be applied to all elements by selecting all elements on a page

Element type Selector: The element selector selects HTML elements based on the element name.

ID Selector: The id selector uses the id attribute of an HTML element to select a specific element.

Class Selector: The class selector selects HTML elements with a specific class attribute.

Grouping Selector: The grouping selector selects all the HTML elements with the same style definitions.

What is CSS Specificity?

Ans: It is a process of determining which CSS rule will be applied to an element.

What is a CSS Preprocessor? What are some benefits of Sass?

Ans: A CSS preprocessor is a scripting language that extends CSS and is compiled into regular CSS syntax.

There are some benefits of Sass which are given below.
To write clean, easy and less CSS in a programming construct
Contain fewer codes and help to write CSS quicker
Compatible with all version of CSS so that any available CSS libraries can be used.

More stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.

What is a Pseudo element? What is pseudo-class?

Ans: Pseudo Element: Task of Pseudo element create items that do not normally exist in the document tree. For example ::after, ::before, ::first-letter, ::first-line, ::selection

Pseudo Class: Pseudo class help us to select regular items under certain conditions. For example :hover, :focus, :link, :active, :visited

How will you use media queries to make a website responsive?

Ans: There are many ways of media queries to make website responsive which are

Using min-width and max-width media queries
Multiple media queries for one call
Media queries for landscape layout
Media queries for portrait layout

How will you make font size responsive?

Ans: Two best way to make font size responsive which is listed below:
By using vwunit for font size as a result font size will follow the size of browser window

Using media queries font size can be changed so that font size can vary on specific devices.

What are the difference between reset CSS and normalze CSS?
Ans: Normalize CSS means to make built-in browser styling whereas Reset CSS means to remove built-in browser styling

How is the different border-box from content-box?

Ans: In content-box, there is height and the width properties consist only of the content by excluding the border and padding whereas border-box property includes the content, padding and border in the height and width properties

Why should we use floating property in CSS?

Ans: For positioning HTML elements horizontally either towards the left or right of the container.

What are the different ways to hide elements using CSS?

Ans: By using display:none, visibility:hidden, position:absolute

What is cascading in CSS?

Ans: Cascading is a process of style declarations and defining weight or importance to the styling rules that help the browser to select what rules have to be applied in times of conflict.

What is differences between nth-child() and nth-of-type?

Ans: The purpose of nth-child() pseudo-class is to match elements based on the number that represents the position of an element based on the siblings. The number is used to match an element on the basis of the element’s position amongst its siblings.

However, The nth-of-type() pseudo-class helps in matching the selector based on a number that represents the position of the element within the elements that are the siblings of its same type. The number can also be given as a function or give keywords like odd or even.

What does ! important means in CSS?

Ans: Important will have the highest precedence and it overrides cascading property.

What is the importance of CSS sprites?

Ans: CSS sprites is used for combining multiple images in a single larger image. Actually, it helps to represent icons that are used in the user interfaces. It reduces the number of HTTP requests to get data of multiple images.

How does Z-index function?

Ans: While using CSS for positioning HTML elements, overlapping may occur. Z-index helps in specifying the overlapping element. The number of Z-index can be negative or positive and the default value is zero.

What is the difference between padding and margin?

Ans: Padding creates space around the content of elements whereas margin creates space around elements. So we can say that margin generates space outer side of content of element but padding generates space inner side of content