TCS · engineering
Preparation guide for Frontend Developer positions at Tata Consultancy Services. Covers their Online Test (NQT) → Technical → HR process with technical, behavioral, and HR questions.
What is the difference between `==` and `===` in JavaScript?
Tip: `==` uses type coercion (0 == '0' is true). `===` checks both value and type (0 === '0' is false). Always prefer `===` in production code to avoid subtle bugs.
What is the virtual DOM in React and why does it exist?
Tip: It is an in-memory representation of the real DOM. React diffs the virtual DOM before touching the real DOM, minimising expensive repaints and reflows.
Explain CSS specificity. Which rule wins: an ID selector or a class selector?
Tip: Specificity order: inline style > ID > class/pseudo-class/attribute > element. An ID selector (0,1,0,0) beats a class selector (0,0,1,0). Use the three-number notation to explain.
What is event bubbling in JavaScript? How do you stop it?
Tip: Events bubble up from the target element to the root. Use `event.stopPropagation()` to stop bubbling. Distinguish this from `event.preventDefault()` which stops default browser behaviour.
What are the differences between `let`, `const`, and `var`?
Tip: `var`: function-scoped, hoisted. `let`: block-scoped, not hoisted to usable state. `const`: block-scoped, must be initialised, cannot be reassigned (but object properties can mutate).
What is the difference between controlled and uncontrolled components in React?
Tip: Controlled: form data driven by React state via `value` + `onChange`. Uncontrolled: form data handled by the DOM itself, accessed via a ref. Prefer controlled for complex forms.
How do you optimise the performance of a React application?
Tip: Key strategies: React.memo/useMemo/useCallback to prevent unnecessary re-renders; code splitting with lazy(); virtualising long lists with react-virtual; avoiding inline function definitions in JSX.
How do you ensure cross-browser compatibility in your CSS and JavaScript?
Tip: Use caniuse.com to check feature support; Autoprefixer for vendor prefixes; Babel for JS transpilation; test in Chrome, Firefox, Safari. Mention fallback strategies.
Tell me about a frontend component or feature you built that you are most proud of.
Tip: Be specific — name the component, the challenge it solved, and what you'd do differently now. Showing genuine reflection impresses interviewers more than generic answers.
How would you approach building a fully responsive design from a desktop Figma mockup?
Tip: Mobile-first CSS, fluid typography with clamp(), CSS Grid for layouts, relative units (%, rem) over fixed pixels, media breakpoints at content-break points not device widths.
Take a full scored mock interview tailored to your resume. Get feedback on technical depth, clarity, structure, confidence, and relevance — free to start.