Tata Consultancy Services (TCS) | Interview | Senior Front End
Summary
I interviewed for a Senior Front End role at Tata Consultancy Services (TCS). The process involved two technical rounds, a managerial round, and an HR round. Ultimately, my current CTC and expected CTC exceeded their budget.
Full Experience
Round 1:
- General Introduction.
- Vue 2 vs Vue 3
- HTML:
- How to embed video in HTML?
- Purpose of noscript tag.
- strong vs bold
- How form works?
- svg vs png.
- JS:
- Hoisting (just a tip, explain it from root level like how JS Engine works)
- Datatypes
- SSR vs CSR
- Lifecycle hooks and practical usage
- Directives and watchers
- Pass data between components(all types of relation)
- Which pattern we follow for the functions or methods such that it covers all edge cases
- Routing, how we pass params and access them. Hash vs history modes
- -- 3-5 Code snippet questions -- (sorry i forgot but you can find similar on web)
- Machine Coding:
- Implement a search box which should filter the results respectively. Object = [{name:'Avenatador',brand:'Lamborghini'},{name:'Q5',brand:'Audi'}......] If we enter car name we should return those details. If we enter brand name, return all the car names under that brand. If it's empty print all car names
- Two divs with diff colors and change color when we hover
- Add a image and then add text inside the image based on the position (top,bottom,left,right,center)
Round 2:
- General Introduction
- AST in Javascript
- -- 5 Code snippet questions (tougher than round 1. Includes javscript features too) --
- Machine Coding
- Create a search box and print results (similar to round 1). The results should be printed with alternative colors. Eg: 1st result background blue, 2nd - red, 3rd blue....... (you can achieve with class binding)
Managerial Round
- -- Behavioural questions (which is boring) --
HR Round
- -- Behavioural questions --
Interview Questions (21)
Vue 2 vs Vue 3 Differences
Discuss the key differences between Vue 2 and Vue 3.
Embed Video in HTML
Explain how to embed video content in an HTML document.
Purpose of noscript tag
What is the purpose of the <noscript> tag in HTML?
strong vs bold HTML tags
Explain the difference between the <strong> and <b> tags in HTML.
How HTML Forms Work
Describe the fundamental working mechanism of HTML forms.
SVG vs PNG
Compare SVG and PNG image formats, discussing their differences and use cases.
JavaScript Hoisting Explained
Explain JavaScript hoisting from a fundamental level, including how the JS Engine works.
JavaScript Data Types
Discuss the different data types available in JavaScript.
SSR vs CSR
Compare Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
Vue Lifecycle Hooks and Usage
Explain Vue.js lifecycle hooks and provide examples of their practical usage.
Vue Directives and Watchers
Discuss Vue.js directives and watchers, explaining their purpose and usage.
Vue Component Communication
Explain various methods for passing data between components in Vue.js, covering different types of relationships (parent-child, child-parent, sibling, global).
Robust Function Design Principles
Discuss design patterns or principles for writing functions/methods that effectively cover all edge cases.
Vue Routing: Params and Modes
Explain routing in Vue.js, including how to pass and access parameters, and compare hash mode versus history mode.
Implement Search Box with Filtering
Implement a search box that filters results based on user input. Given an array of objects like [{name:'Avenatador',brand:'Lamborghini'},{name:'Q5',brand:'Audi'}]: if a car name is entered, return its details; if a brand name is entered, return all car names under that brand; if the input is empty, print all car names.
Hover Effect on Divs
Create two divs with different background colors and implement a hover effect to change their colors when the mouse is over them.
Text Overlay on Image
Add an image and then overlay text inside the image based on specified positions (top, bottom, left, right, center).
Abstract Syntax Tree (AST) in JavaScript
Explain what an Abstract Syntax Tree (AST) is in the context of JavaScript.
Search Box with Alternating Result Colors
Create a search box similar to Round 1, but this time, the results should be displayed with alternating background colors (e.g., 1st result blue, 2nd red, 3rd blue, etc.). Hint: This can be achieved with class binding.
General Behavioral Questions
Behavioral questions were asked during the managerial round.
General Behavioral Questions
Behavioral questions were asked during the HR round.