DEV Community: Shamima Akter

10 JavaScript Interview Questions you need to know:

Shamima Akter — Sun, 16 May 2021 18:48:54 +0000

What are the scopes of a variable in JavaScript?

The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes.
•Global Variable – A global variable has a global scope which means it is visible everywhere in your JavaScript code.
•Local Variable – A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

What is the Callback function?

A 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 ‘ callback ’. In javascript, functions are objects. Because of this, functions can take functions as arguments, and can be returned by other functions,

What is Closure?

Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope. It gives you access to an outer function 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 and expose it.

What is the difference between var, let, and const keywords?

Var - The javascript variable statement is used to declare a variable and, optionally, we can initialize the value of that variable. Explain: var a = 20; variable declarations are processed before the execution of the code.
Const – The idea of const functions does not allow them to modify the object on which they are called. When a function is declared as const, it can be called on any type of object.
Let – It is single that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in.

What is the difference between “ == “ and “ === “ operators ?

Both are comparison operators. The difference between both the operators is that “ == “ is used to compare values whereas, “ === “ is used to compare both values and types.

What is the difference between null & undefined?

Undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value. Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

How will you remove duplicates from a Javascript array?

There are several possible ways of eliminating duplicates from a JS array. The three most used ones are described as follows:
•Using filter – It is possible to remove duplicates from an array in javascript by applying a filter to the same. To call the filter () method, three arguments are required. These are namely array, current element, and index of the current element function unque_array ( arr){

For example:
Let unique_array = arr.filter(function(elem, index, self) {
Return index == self.index(elem) ; {
Return unique_array }
Console.log ( unique_array (array_with_duplicates));

•By using the For Loop – In this method of removing elements from an array, an empty array is used for storing all the repeating . Example:
elements.Array dups_names = [ ‘Kona ‘ , ‘ Rupa’ , ‘Tumpa’ , ‘Jhorna’ ];
function dups_array( dups_names ) {
let unique = {} ;
names.foreEach(function (i) {
If ( !unique [i] ) {
Unique [i] = true; }
})
Return object.keys (unique); }
Dups_array (names);

•By using Set – This is the simplest approach of removing duplicate elements from an array in Javascript. A set is an inbuilt object for storing unique values in an array. Here’s how to use it for eliminating repeating elements from an array: function unique arrays (array) {

What does the new keyword do?

The new keyword is used with the constructor function to make objects in javascript.
The new keyword does 4 things.
•Creates an empty object.
•Assigns that empty object to the this value.
•The function will inherit from functionName.prototype.
•Returns the this if no Explicit return statement is used.

What is DOM? What is the use of document objects?

DOM stands for Document Object Model. A document object represents the HTML document. It can be used to access and change the content of HTML.

What is the difference between undefined value and null value?

•Undefined value: A value that is not defined and has no keyword is known as an undefined value. For example:
int number; // a number has an undefined value.
•Null value: a value that is explicitly specified by the keyword “ null “ is known as a null value. For example:
String srt = null; // str has a null value.

some of the most important topics in React js

Shamima Akter — Sun, 16 May 2021 08:37:39 +0000

What is React JS?

React JS is a javascript library used in web development to build interactive elements on websites and web applications. React Js used exclusively for “client-side” programming ( building things that a user will see on screen in their browser windows) which makes React JS a Front-End library.

What is the difference between Real DOM and Virtual DOM?

Real DOM: Real DOM updates slow. It can directly update HTML. Real DOM creates a new DOM if the element updates. DOM manipulation is very expensive. It is too much memory wastage.
Virtual DOM: A Virtual DOM is a lightweight Javascript object which originally is just a copy of the real DOM. Virtual DOM updates faster. It can’t directly update HTML. Virtual DOM updates the JSX if the element updates. DOM manipulation is very easy. No memory wastage.

What is the purpose of render() in React.

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. It must return the same result each time it is invoked.

What is Props?

Props are the shorthand for properties in React. They are read-only components that must be kept pure immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and is generally used to render the dynamically generated data.

Arrow function in React

Arrow functions are more of a brief syntax for writing the function expression. They are also called ‘fat arrow’ ( => ) the functions. These functions allow to bind the context of the components property since in ES6 auto binging is not available by default.

Components

In React everything is a component. Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent are reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

What is a state in React?

The state is the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this. state ().

Explain the lifecycle methods of React components in details –-

Every component in React has lifecycle methods that we can tap into, to trigger changes at a particular phase of the cycle. Each component in react goes through three-phase: Mounting, Updating, and unmounting.
Some of the most important lifecycle methods are:

componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.
componentDidMount() - Executed on the client-side only after the first render. 3.componentWillReceiveProps() - Invoked as soon as the props are received from the parent class and before another render is called.
shouldComponentUpdate () - Returns true or false value based on certain conditions. If I want my component to update, return true else return false. By default, it returns false.
componentWillUpdate() - called just before rendering takes place in the DOM.
componentDidUpdate() - Called immediately after rendering takes place. 7.componentWillUnmount ()- called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

React Hooks

React Hooks cannot be used in class components. They let us write components without class. Functional components were called stateless components. Only class components were used for state management and lifecycle methods. The need to change a functional component to a component, whenever state management or lifecycle methods were to be used, led to the development of Hooks.

What is the difference between functional and class components?

Functional components: The components that return React elements as a result are called functional components. They are basically just simple javascript functions.
Class components: Class components, on the other hand, have been around for quite some time. They use plain Java objects for creating pages. With the React create-a-class-factory method, a literal is passed in defining the method of a new component.

JavaScript ES6 and Block Bindings every developer must know!!!!

Shamima Akter — Tue, 11 May 2021 07:06:11 +0000

Arrow Function: The arrow function is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a clearer way compared to regular functions.
Example:
// Normal function
Let a = function( a, b) {
Return a * b;
}
// Arrow function
Let a = ( a, b ) => a * b ;
Default parameters: The concept of default parameters is a new feature introduced in the ES6 version of JavaScript. This allows us to give default values to function parameters.
Example:
Function sum (a = 3, y = 5) {
Return a = b;
}
Console.log( sum (5, 15) ) ; // 20
Console.log (sum( 7)) ; // 12
Console.log (sum () ); // 8
Spread operator: The spread operator is a new addition to the feature available in the JavaScript ES6 version. It allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected. It allows us the privilege to obtain a list of parameters from an array.
Example:
Const arrValue = [ ‘My’ , ‘name’ , ‘is’ , ‘ Shamima ] ;
Console.log (arrValue) ; // [ ‘My’ , ‘name’ , ‘is’ , ‘ Shamima ] ;
Console.log ( … arrValue ) ; // My name is Shamima
Block Binding: Usually binding occur whenever we declare or set a value in a variable. For example, we use var, let, and const to declare or assign a variable.

5.Var Declaration and Hoisting: Variable declarations using var are treated as if they are at the top of the function regardless of where the actual declaration occurs, this is called hoisting.

Block-Level-Declaration: Block-Level declarations are those that declare a variable that is inaccessible outside of given block scope. Block scopes are created.
Inside of a function
Inside of a block “ {} “
Let Declarations: The let declaration syntax is the same as the syntax for var. Just replace var with let to declare a variable with its scope being only that code block.
Const Declarations: The declaration syntax is similar to let & var, the lifecycle is the same as let. The const declaration syntax variable declared using const are considered constants meaning their values cannot be changed once set.
Block Binding in Loops: Block level is very useful when dealing with loops in JavaScript. It is best practice to use let instead of var because var is being hoisted. Consider the following example:
For (var i = 0 ; i < 10 ; i++ ) {
Console. Log ( i) // 10
// same code
For ( let i = 0 ; i < 10 ; i ++ ) {
Console. log ( i ) // error - i is not defined
Global Block Bindings: Global scope behavior for var is different than let and const. For example, when var is used in the global scope, a new global variable is created, which is a property on the global object ( window in browsers), but if use let or const in the global scope, a new binding is created in the global scope but no property added to the global object ( window in browsers. That means for the var I can accidentally overwrite an existing global, but if I use let or const it cannot overwrite.
Emerging Best Practice for Block Bindings: During ES6 development, the convention was to use let instead of var and use const to limit the modification. But as more developers migrated, developers following a convention that uses const as default and use let when I know the variable value may change.
Working with Unnamed Parameters: Earlier in JavaScript function parameters that are passed without defining are inspect through the argument object. Through inspecting arguments works fine in most cases, this object can be a little cumbersome to work with. ES6 introduces the rest parameter to make it easier to work with unnamed parameters.
Block-Level functions: ES6 allows block-level functions which are hoisted on top of the function or hoisted into the global scope. For example:
If ( true ) {
Console .log ( typeof doMath ) // “ function “
Function doMath ( ) {
// some code
}
doMath ()
}
Console. log ( typeof doMath ) // function

Important JavaScript Functions You Need to Know About.

Shamima Akter — Fri, 07 May 2021 14:54:37 +0000

How to use JavaScript fundamental:

1.slice(): extracts a section of a string and returns it as a new string. If you call slice() on a string without passing it any additional information, it will return the whole string.
Example: let friends = [“Tania”, “Mim”, “Tasnim”, “Jannat”, “Nilufa”] ;
Console.log( friends . slice(2 , 4) ) ;
Run: [ Tasnim, jannat ]

2.present: The parseInt is a function of converts its argument to a string and return an integer or NAN. A radix parameter is used to define the numeral system that used. These are represented by a number from 2 to 36. parseInt( ) JavaScript function can have two parameters, the string you want to convert and the radix which identifies the numeral system.
Example: using parseInt()

Console.log (parseInt (“985.99”, 20)); //985
Console.log (parseInt (“F”, 16)); //15
Console.log (parseInt (“Hello”, 10)); // NaN
parseFloat (): The parseFloat function is used to accept the string and convert it into a floating-point number. If the string does not contain a numeral value or if the first character of the string is not a number then it returns Nan. It actually returns a floating-point number parsed up to that point where it encounters a character that is not a Number.
Example: Using parseFloat()
Console.log (parseFloat(“ 30”)): //30
Console.log (parseFlat(“ 3.15”)); // 3.15
Console.log (parseFlat(“ JavaScript”)); // NaN
Console.log (parseFlat(“2021Javascript”)); // 2021

4.Array reduce (): The JavaScript Array reduce() method execute a reducer function on each element of the array and returns a single output value. Reduce () executes the given function for each value from left to right. Reduce () does not change the original array.
Example:
Const numbers = [ 12, 2, 30, 4, 15];
Const sumReducer = (accumulator, currentValue) => accumulator + currentValue;
Console.log( numbers . reduce (sumReducer ) ); // 63

Array filter (): The JavaScript Array filter () method returns a new array with all elements that pass defined by the given function. The JavaScript filter () does not affect the initial array. It applies the callback function to every element to create a new collection with filtered elements. The callback function is with three arguments:
The value of the element
The index of the element
The Array object being traversed
Example:
Const students = [
{Id: 1, name: “Lota”, roll: 101},
{Id: 2, name: “Jomuna”, roll: 102},
{Id: 3, name: “Moriom”, roll: 103}
]
Const filterStudent =students.filter(student => student. roll<102);
Console.log (filterStudent);
Output: [ {id:1 , name: “Lota”, roll: 101} ]
Array find(): The JavaScript Array find() method returns the value of the first array element that satisfies the provided test function.
Example:
Function isEven(element){
Returns element % 2 == 0;
}
Let randomArray = [1, 45, 8, 98, 7 ];
firstEvent = randomArray. Find( isEvent);
console.log ( firstEvent ); // 8
Array map(): The JavaScript Array map() method create a new array with the result of calling a function for every array element. The JavaScript map function is used to invoke a function for every element of an array in order. It should be noted that it does not execute the function on the element without values. The JavaScript map method does not change the original array.
Example:
Const array = [16, 12, 15, 10]
Const result = array. Map ( num => num * 2);
Console.log (result);
Output: Array [32, 24, 30, 20 ]
1. Array pop (): The JavaScript Array pop () method removes the last element from an array and returns that element. Removes the last elements from the array and returns that value. Return undefined if the array is empty. This method changes the original array and its length. Example: Let languages: [ “React” , “JavaScript” , “Java” , “C”, “C++” ] Let popped = languages. pop () ; Console.log (languages) ; // [ “React” , “JavaScript” , “Java” , “C” ] Console.log (popped) ; // C++
Array push (): The JavaScript Array push () method adds zero or more elements to the end of an array and returns the new length of the array. Retunes the new length of the array upon which the method was called. This method changes the original array and its length.

Example:

Const fruits = [ ‘Apple’ , ‘Orange’ , ‘Lemon’ ]

Const result = fruits . push (‘Avocado , ‘Banana , ‘Blackberries )

Console.log (fruits) // = [ ‘Apple’ , ‘Orange’ , ‘Lemon’ , (‘Avocado’ , ‘Banana , ‘Blackberries’]

Console.log (result) // 6
Array indexOf: The JavaScript array indexOf() method returns the first index of occurrence of an array element. Returns the first index of the element in the array if it is present at least once. Return -1 if the element is not found in the array.

Example:

Const priceList = [ 20, 8, 23, 15, 26, 3 ,10 ] ;

Const result = pricelist. indexOf (26);

Console .log (result); // 4