TCS vue js

 1st round

1. Shallow vs deep copy

2.  string reverse input 'js' output 'sj'

3. Arrow function uses

4. foreach vs map

5. virtual DOM

 2nd round

1. Vuex vs pinina

2. inject provide

3. inject provide vs store management

4. center an element 

5..classA, .classB what it will do

6. .classA .classB what it will do

7. let a =[10],b

b=a

a.push[3]

console.log(a,b)

8. sum(a,b) , sum(a,b,c) how function will received those arguments

9. rest vs spread

10. object de structuring

11. compare object in js

12. remove duplicate in array

13. how will you delete an data in object

14. event bubbling 

 

 

 

1. Shallow Copy vs Deep Copy

• Shallow Copy:
  • Creates a new object but copies only the references to nested objects.
  • Changes made to nested objects in the copied object affect the original.
  • Used with methods like Object.assign() or spread operator {...obj } in JavaScript.

  let original = { a: 1, b: { c: 2 } };
  let shallowCopy = {...original };
  shallowCopy.b.c = 3;
  console.log(original.b.c); // Output: 3 (affected)
  

• Deep Copy:
  • Creates a new object and recursively copies all nested objects and values.
  • Changes in the copied object do not affect the original.
  • Can be implemented using JSON methods or libraries like Lodash's _.cloneDeep.

  let original = { a: 1, b: { c: 2 } };
  let deepCopy = JSON.parse(JSON.stringify(original));
  deepCopy.b.c = 3;
  console.log(original.b.c); // Output: 2 (unaffected)
  

2. Reverse a String (Example with input 'js' output 'sj')

In JavaScript, you can reverse a string by converting it to an array, reversing it, then joining it back:

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('js')); // Output: 'sj'

Explanation:

• split('') converts the string into an array of characters: ['j', 's']
• reverse() reverses the array: ['s', 'j']
• join('') concatenates the array back into a string: 'sj'

3. Arrow Function Usage

Arrow functions are a concise way to write functions in ES6+. They differ from regular functions with respect to this binding and syntax.

Syntax Examples:

• Basic form:

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

• Without parameters:

const sayHello = () => console.log('Hello');
sayHello(); // Output: Hello

• With multiple statements (need curly braces and explicit return):

const multiply = (a, b) => {
  const result = a * b;
  return result;
};
console.log(multiply(2, 4)); // Output: 8

Key Points:

• Arrow functions do not have their own this context; this is inherited from the surrounding lexical scope.
• They cannot be used as constructors (i.e., can't use new with arrow functions).
• They are great for short, inline, and functional programming styles.

---

Summary

• Understand shallow copy (copies object references) vs deep copy (copies fully).
• Reverse strings using split(), reverse(), and join() methods.
• Use arrow functions for concise function definitions especially when no new this binding is needed.

These topics are commonly asked in JavaScript and general programming interviews, so mastering them will prepare you well for the 1st round technical discussions.

 

2nd round

---

✅ 1. Vuex vs Pinia

Vuex:

• Official state management library for Vue 2/3.

• Uses mutations and actions to manage state.

• Boilerplate heavy.

Pinia:

• New recommended store for Vue 3.

• Modular and simpler syntax.

• No mutations required; TypeScript friendly.

🔗 Example Difference

// Vuex
mutations: {
  setCount(state, val) { state.count = val }
}

// Pinia
const store = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    setCount(val) { this.count = val }
  }
});

---

✅ 2. inject & provide in Vue

Used for dependency injection to pass data from a parent to deeply nested children without prop drilling.

🔗 Example

// Parent.vue
provide('msg', 'Hello');

// Child.vue
inject('msg');

---

✅ 3. inject/provide vs store management

• inject/provide: Passes data within parent-child hierarchy. Not reactive by default.

• Store (Vuex/Pinia): Centralized global state management. Reactive and ideal for large apps.

---

✅ 4. How to center an element

Horizontally and vertically center using Flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Horizontally center using margin auto

.child {
  width: 200px;
  margin: 0 auto;
}

---

✅ 5. .classA, .classB selector

Selects both .classA and .classB elements individually.

.classA, .classB {
  color: red;
}

Both become red.

---

✅ 6. .classA .classB selector

Selects .classB elements inside .classA elements only.

.classA .classB {
  color: blue;
}

---

✅ 7. JavaScript snippet analysis

let a = [10], b;
b = a;
a.push(3);
console.log(a, b);

✔️ Output: [10, 3] [10, 3]

Both point to the same array reference.

---

✅ 8. sum(a,b), sum(a,b,c) – how function receives arguments

Using rest parameter:

function sum(...args) {
  console.log(args);
}
sum(1,2); // [1,2]
sum(1,2,3); // [1,2,3]

---

✅ 9. Rest vs Spread operator

Rest

• Collects multiple arguments into an array.

• Used in function parameters.

function sum(a, ...rest) { }

Spread

• Expands array or object.

let arr = [1,2,3];
let newArr = [...arr, 4];

---

✅ 10. Object destructuring

Extracting values from objects.

const obj = {a:1, b:2};
const {a, b} = obj; // a=1, b=2

---

✅ 11. Comparing objects in JS

Shallow comparison

let a = {x:1}, b = {x:1};
console.log(a === b); // false

Deep comparison

JSON.stringify(a) === JSON.stringify(b); // true if structure same

Or use lodash isEqual for deep comparison.

---

✅ 12. Remove duplicates from an array

Using Set

let arr = [1,2,2,3];
let unique = [...new Set(arr)];

Using filter

arr.filter((v,i,a) => a.indexOf(v) === i);

---

✅ 13. Delete data from an object

Using delete keyword:

let obj = {a:1, b:2};
delete obj.a; // removes 'a'

---

✅ 14. Event bubbling

When an event occurs, it bubbles up from the target element to its parent elements in the DOM tree.

🔗 Example

Clicking a button inside a div triggers both button and div click events unless stopped.

To stop bubbling

event.stopPropagation();

---