⏱ 0:00est. 27 min
Globallogic
//
/**
* https://www.glassdoor.co.in/Interview/GlobalLogic-Front-End-Developer-Interview-Questions-EI_IE23009.0,11_KO12,31.htm
* 1. Standard question for FrontEnd developers: let, const difference, hoisting, scopes, closures, promises, async functions, call stack, etc.
* 2. React concepts and javascript concepts
* 3. Does your loyalty for the company begins only from the date of joining ?
* 4. Technical round- basic questions of React
* 5. Basic Angular questions, ES6, live Angular coding round to test Input/Output interaction between 2 components
* 6. basics of react js and redux. Life cycle hooks, JavaScript objects, es6 features, tricked on functions this concept, difference between arrow function and normal old function
* 7. httpCall interceptor for loading
* 8. About JavaScript. what is closure, Hoisting
* 9. what is a generator in javascript? - Regular functions return only one, single value (or nothing). Generators can return (“yield”) multiple values, one after another, on-demand. They work great with iterables, allowing to create data streams with ease.
* 10. basic javascript questions - currying , es6 features , react questions
* 11. Given a string S, remove consecutive duplicates from it recursively.
* 12. var a = 4; { var a = 5}; console.log(a)
* 13. Question - Make a responsive container with childs adapting to screen size https://codesandbox.io/p/sandbox/flexbox-6uuon4?file=%2Fsrc%2Fstyles.css
*
* ROUND 1 From youtube video -
* 1. What do you mean by Web accessibility?
* - Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
* - perceive, understand, navigate, and interact with the Web
* - contribute to the Web
* Accessibility Standards - The Web Content Accessibility Guidelines (WCAG) was developed by the World Wide Web Consortium (W3C)
* Examples of Web Accessibility
* - Add alternative text (alt text) for images
* - Ensure keyboard functionality
* - Provide transcripts for audio
* - Breadcrumbs: Accessible navigation
* - Color Contrast
* - Semantic HTML
* - Heading tags like <h1>, <h2>, <h3>
* - <p> for paragraphs
* - <strong> and <emphasis> to identify important text
* - <ol> for ordered (numbered) lists abd <ul> for unordered lists
* - <a> (anchor) for links
* - <nav> for the section of the page that contains navigational links
* - <button> for, well, buttons
* - Scalable Text
* - ARIA: Accessible Rich Internet Applications. or ARIA, is a group of HTML roles, states, and properties that describe the purpose of specific user interface elements that don’t have semantic HTML tags. ARIA provides more context for assistive technologies where plain HTML cannot.
* - Alert and message dialogs, Breadcrumbs, Buttons, Carousels, Grids, Links, Menus, menu bars, or menu buttons,Sliders,Tables - https://blog.hubspot.com/website/aria-accessibility
* - Button has - aria-pressed
* - aria-hidden— is applied to the SVG file
* - The aria-labelledby property is set to the same value as the id name of the span element, which contains the listbox label
*
*
* 2. Mention some Html5 tags and properties
* - <nav> Defines a section of navigation links.
* - <article> Defines an article.
* - <aside> Defines some content loosely related to the page content.
* - <main> Represents the main or dominant content of the document.
* - <header> Represents the header of a document or a section.
* - <footer> Represents the footer of a document or a section.
* - <section> Defines a section of a document, such as header, footer etc.
* - <mark> Represents text highlighted for reference purposes.
*
*
* 3. Difference between async / Defer on loading scripts
* - async and defer both load JavaScript asynchronously without render blocking
* - but async executes as soon as possible while defer runs in sequence toward the end of the loading process, just before the DOMContentLoaded event. https://pagespeedchecklist.com/async-and-defer
* Async
- Downloads in the background at a low priority (same as defer)
- Can interrupt page rendering to execute
- Executes as soon as possible and in no particular order
- <script async src="super-high-priority.js"></script>
Defer
- Downloads in the background at a low priority (same as async)
- Won't interrupt page rendering to execute
- Executes in sequence just before the DOMContentLoaded event
- <script defer src="general-stuff.js"></script>
* 4. What is the difference between flex / grid in css
- Flexbox was designed for layout in one dimension - either a row or a column.
- Grid was designed for two-dimensional layout - rows, and columns at the same time. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods
- <div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
// FLEX
.wrapper {
width: 500px;
display: flex;
flex-wrap: wrap;
}
.wrapper > div {
flex: 1 1 150px;
}
// GRID
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
* 5. What are rem and em properties on css
- In CSS, the rem unit is only relative to the document's root element,
- while the em unit is only relative to the immediate parent of the targeted element.
- https://refine.dev/blog/rem-vs-em
- It is a good idea to use the rem unit for global values such as font-sizes, margins, and padding, especially if you want to specify a font-size for the entire document and have it scale uniformly rather than being influenced by the font sizes of parent elements.
- em is more suited for values that are specific to a particular element and its children. This allows you to create a consistent and flexible layout that adjusts well to different screen sizes and font sizes.
- I prefer using rem over em for components, but I usually use em for headers and text elements
* 6. What are different ways you can make a webpage responsive
- Media queries, Typical Device Breakpoints
// Extra small devices (phones, 600px and down)
@media only screen and (max-width: 600px) {...}
// Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) {...}
// Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) {...}
// Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {...}
// Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) {...}
- Give it a viewport
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Responsive Images (width:100%), Using the max-width Property (max-width: 100%)
- Responsive Text Size
* 7. When a response is sent from server to browser what gets loaded first? Html? Js or css
- The browser loads the html (DOM) at first
- The browser starts to load the external resources from top to bottom, line by line.
- If a <script> is met, the loading will be blocked and wait until the JS file is loaded and executed and then continue.
- Other resources (CSS/images) are loaded in parallel and executed if needed (like CSS).
- https://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
* 8. Gave a css task, to make a responsive layout ( code share )
- https://codesandbox.io/p/sandbox/flexbox-forked-64thzt?file=%2Fsrc%2Fstyles.css%3A24%2C28
* 9. Uses of mixins? what are different css library you have used?
// smaller than 640px
- .child {
width: calc(33% - 10px);
height: 100px;
background-color: darkblue;
margin-left: 10px;
margin-top: 10px;
}
// bigger than 640px
@media (min-width: 640px) {
.child {
width: calc(25% - 10px);
}
}
// desktop bigger than 940px
@media (min-width: 940px) {
.child {
width: calc(20% - 10px);
}
}
* 10. What is IIFEs (Immediately Invoked Function Expressions)?
- a function that is called immediately after it is defined
(function functionName() {
// function logic
})();
- create private scope
- The module pattern
const makeWithdraw = (balance) =>
((copyBalance) => {
let balance = copyBalance; // This variable is private
const doBadThings = () => {
console.log("I will do bad things with your money");
};
doBadThings();
return {
withdraw(amount) {
if (balance >= amount) {
balance -= amount;
return balance;
}
return "Insufficient money";
},
};
})(balance);
const firstAccount = makeWithdraw(100); // "I will do bad things with your money"
console.log(firstAccount.balance); // undefined
console.log(firstAccount.withdraw(20)); // 80
console.log(firstAccount.withdraw(30)); // 50
console.log(firstAccount.doBadThings); // undefined; this method is private
const secondAccount = makeWithdraw(20); // "I will do bad things with your money"
console.log(secondAccount.withdraw(30)); // "Insufficient money"
console.log(secondAccount.withdraw(20)); // 0
* 11. Why are functions called the first class citizens in js?
- Functions in that language are treated like other variables
- So the functions can be assigned to any other variable or passed as an argument or can be returned by another function.
- It can be stored as a value in a variable.
- It can be returned by another function.
- It can be passed into another function as a parameter.
- It can also stored in an array, queue, or stack.
- Also, It can have its own methods and property.
* 12. What is Coercion in JavaScript?
- Coercion is an automatic type conversion that occurs in JavaScript when you want to perform certain operations or comparisons involving different data types
What is Implicit Type Conversion (Coercion)?
const sum = 35 + "hello"
console.log(sum)
// 35hello
console.log(typeof sum)
// string
* 13. What is hoisting in Js?
- Hoisting in JavaScript is a behavior in which a function or a variable can be used before declaration.
// using test before declaring
console.log(test); // undefined
var test;
Variable Hoisting: In terms of variables and constants, keyword var is hoisted and let and const does not allow hoisting.
// program to display value
a = 5;
console.log(a);
var a; // 5
// program to display value
console.log(a); //undefined
var a = 5;
// The above program behaves as:
var a;
console.log(a);
a = 5;
Function Hoisting: A function can be called before declaring it. For example,
// program to print the text
greet(); // Hi, there
function greet() {
console.log('Hi, there.');
}
However, when a function is used as an expression, an error occurs because only declarations are hoisted. For example;
// program to print the text
greet(); // Uncaught ReferenceError: greet is not defined
let greet = function() {
console.log('Hi, there.');
}
* 14. What is pass by value / pass by reference?
- Pass by Value in JavaScript: Pass by value in JavaScript means that a copy of the actual parameter’s value is made in memory i.e., a new memory allocation is done, and all the changes are made in that new value. The original value and the copied value are independent of each other as they both have a different space in memory i.e., on changing the value inside the function, the variable outside the function is not affected.
let num1 = 70
let num2 = num1
console.log(num1) // 70
console.log(num2) // 70
num1 = 40
console.log(num1) // 40
console.log(num2) // 70
- Pass by Reference in JavaScript: pass by reference in JavaScript does not create a new space in the memory, instead, we pass the reference/address of the actual parameter, which means the function can access the original value of the variable. Thus, if we change the value of the variable inside the function, then the original value also gets changed.
let obj1 = {website: "Academy"}
let obj2 = obj1;
console.log(obj1) // {website: "Academy"}
console.log(obj2) // {website: "Academy"}
obj1.website = "Topics"
console.log(obj1) // {website: "Topics"}
console.log(obj2) // {website: "Topics"}
Pass by Reference in Object (with Function)
let originalObj = {
name: "Academy",
rating: 4.5,
topic: "JavaScript"
};
function demo(tmpObj) {
tmpObj.rating = 5;
console.log(tmpObj.rating);
}
console.log(originalObj.rating); // 4.5
demo(originalObj); // 5
console.log(originalObj.rating); //5
- Pass by Reference in an Array (with Function)
let originalArr = ["TODO", "Academy","is", "the"];
function pushArray(tmpArr) {
tmpArr.push('best')
console.log(tmpArr);
}
console.log(originalArr); // ["TODO", "Academy", "is", "the"]
pushArray(originalArr); // ["TODO", "Academy", "is", "the", "best"]
console.log(originalArr); // ["TODO", "Academy", "is", "the", "best"]
* 15. What is difference between await and yield keyword?
- The await call successfully returns a future.
- yield: appends a value to the output stream of the async*function that surrounds it. It is similar to return, but it does not terminate the function.
- The await keyword is only to be used in async functions, while the yield keyword is only to be used in generator function*s. And those are obviously different as well - the one returns promises, the other returns generators.
- Yes, await will call Promise.resolve on the awaited value.
- yield just yields the value outside of the generator.
* 16. What is the use of currying function in js?
- Reusability: Currying breaks down a complex function into smaller, reusable units
- Each curried function focuses on a single argument, making it easier to understand and maintain. These smaller functions can be reused across different parts of your codebase.
- Partial Function Application
- Code Composition
// https://builtin.com/software-engineering-perspectives/currying-javascript
function currying(fn, ...args) {
return (..._arg) => {
return fn(...args, ..._arg);
}
}
function sum(a,b,c) {
return a + b + c
}
let add = currying(sum,10);
add(20,90); // 120
add(70,60); // 140
* 17. What is the benefit of using Arrow functions?
- Concise syntax: Arrow functions offer a more concise syntax compared to traditional functions, making them easier to read and write.
- Lexical this binding: In traditional functions, the value of the this keyword depends on how the function is called. However, in arrow functions, this is lexically bound to the enclosing execution context, which means it will always refer to the same value regardless of how the function is called. This can help prevent errors and make code more predictable.
- Suitable for use as callback functions: Arrow functions are ideal for use as callback functions, especially when working with asynchronous code. They are also great for defining small, anonymous functions, which can make code more readable.
* 18. Difference between event bubbling and event capturing?
- In their simplest definitions, bubbling travels from the target to the root, and capturing travels from the root to the target.
- EventTarget.addEventListener() has an optional third parameter - which takes its argument as a boolean - which controls the phase of the propagation. The parameter is called useCapture, and passing true will cause the listener to be on the capturing phase. The default is false, which will apply it to the bubbling phase.
* 19. Drawbacks of using ReactJs?
- 1. The high pace of development- environment continually changes so fast, some of the developers not feeling comfortable to relearn the new ways of doing things regularly. It may be hard for them to adopt all these changes with all the continuous updates.
- 2. Poor Documentation - React technologies updating and accelerating so fast that there is no time to make proper documentation
- 3. View Part - ReactJS Covers only the UI Layers of the app and nothing else. So you still need to choose some other technologies to get a complete tooling set for development in the project.
- 4. JSX as a barrier - complexity in the learning curve.
* 20. Difference between class component / functional component
- Functional components are written as a JavaScript function. Class components are written as a JavaScript class.
- Functional components do not have a state or lifecycle methods.
- Class components have a state and can implement lifecycle methods like componentDidMount and componentDidUpdate.
- Functional components are Faster as they do not have state and lifecycle, react needs to do less work to render these components.
- Class components are Slower as they have state and lifecycle, react needs to do comparatively more work to render these components.
- FC - Functional components tend to be shorter and more concise
- Class components require the boilerplate code, such as a constructor method and the use of “this” to access props and state.
- Functional components do not use “this” at all, which makes them easier to understand for beginners.
- Class components use the “this” keyword is used to refer to the current instance of the component which can be confusing for new developers.
* 21. What do you mean by functional setState?
- setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with updated State.
* 22. How do you decide when to use Pure component?
- A React component is considered pure if it renders the same output for the same state and props.
- For this type of class component, React provides the PureComponent base class
- Class components that extend the React. PureComponent class are treated as pure components.
- React.PureComponent Is Primarily Used for Performance Optimization
- The big difference between Component and PureComponent is that PureComponent automatically implements the shouldComponentUpdate() lifecycle method.
- Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
- https://betterprogramming.pub/when-to-use-react-purecomponent-723f85738be1
* 23. What is code-splitting? how do you perform code splitting in Reactjs
- Code splitting is a powerful technique to optimize the performance of React applications
- By splitting your code into smaller chunks and loading them on-demand, you can significantly reduce load times and provide a better user experience.
- React provides built-in tools like React.lazy() and Suspense, along with the support of tools like Webpack, to make code splitting easy to implement.
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => {
return (
<div>
<h1>My React App</h1>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};
export default App;
* 24. What happens if we call seState in render)
- the setState() method is called within the render() method. When render() runs, it triggers setState() , which schedules another render() . This cycle repeats indefinitely, eventually leading to a stack overflow error.
- https://www.w3docs.com/quiz/question/ZGt1
class Example extends React.Component {
state = {
count: 0
};
render() {
this.setState({ count: this.state.count + 1 }); // will lead to an error
return <div>{this.state.count}</div>;
}
}
* 25. What is context Api and its uses
- Context API is used to pass global variables anywhere in the code.
- It helps when there is a need for sharing state between a lot of nested components.
- It is light in weight and easier to use, to create a context just need to call React. createContext().
* 26. What are error boundaries in react?
- Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
- Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
- https://legacy.reactjs.org/docs/error-boundaries.html
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
import React from "react";
import * as Sentry from "@sentry/react";
<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
<Example />
</Sentry.ErrorBoundary>;
* Top 50 Jest Interview Questions and Answers
https://www.lambdatest.com/learning-hub/jest-interview-questions
*/
// Build Node.js User Authentication - Password Login : https://www.youtube.com/watch?v=Ud5xKCYQTjM
// Login session explained: https://www.youtube.com/watch?v=mL8EuL7jSbg
// CSRF, Your App Is NOT Secure If You Don’t Use CSRF Tokens https://www.youtube.com/watch?v=80S8h5hEwTY