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)
Discuss the key differences between Vue 2 and Vue 3.
Explain how to embed video content in an HTML document.
What is the purpose of the <noscript> tag in HTML?
Explain the difference between the <strong> and <b> tags in HTML.
Describe the fundamental working mechanism of HTML forms.
Compare SVG and PNG image formats, discussing their differences and use cases.
Explain JavaScript hoisting from a fundamental level, including how the JS Engine works.
Discuss the different data types available in JavaScript.
Compare Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
Explain Vue.js lifecycle hooks and provide examples of their practical usage.
Discuss Vue.js directives and watchers, explaining their purpose and usage.
Explain various methods for passing data between components in Vue.js, covering different types of relationships (parent-child, child-parent, sibling, global).
Discuss design patterns or principles for writing functions/methods that effectively cover all edge cases.
Explain routing in Vue.js, including how to pass and access parameters, and compare hash mode versus history mode.
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.
Create two divs with different background colors and implement a hover effect to change their colors when the mouse is over them.
Add an image and then overlay text inside the image based on specified positions (top, bottom, left, right, center).
Explain what an Abstract Syntax Tree (AST) is in the context of JavaScript.
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.
Behavioral questions were asked during the managerial round.
Behavioral questions were asked during the HR round.