✅ MERN Stack (50 Questions with Answers)
... (previous content retained) ...
✅ JavaScript Practical Questions
1. Capitalize First Letter of Each Word
const str = "mock interview";
const result = str.replace(/\b\w/g, char => char.toUpperCase());
console.log(result); // Mock Interview
1. Compare Two Arrays for Equality
const arr1 = [1,2,3];
const arr2 = [1,2,3];
const isEqual = JSON.stringify(arr1) === JSON.stringify(arr2);
console.log(isEqual); // true
1. Deep Clone an Object
const obj = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(obj));
1. Flatten a Nested Array
const nested = [1, [2, [3, 4]]];
const flat = nested.flat(Infinity);
console.log(flat); // [1,2,3,4]
1. Find Unique Elements in an Array
const arr = [1,2,2,3,4,4];
const unique = [...new Set(arr)];
1. Throttle Function
function throttle(fn, limit) {
let inThrottle;
return function() {
if (!inThrottle) {
fn.apply(this, arguments);
1
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
1. Debounce Function
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}
1. Find Duplicates in Array
const arr = [1,2,2,3,4,4];
const duplicates = arr.filter((item, index) => arr.indexOf(item) !== index);
1. Reverse a String
const str = "hello";
const reversed = str.split('').reverse().join('');
1. Check Palindrome
function isPalindrome(str) {
const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
return cleaned === cleaned.split('').reverse().join('');
}
✅ React.js Practical Examples
1. Form Handling with useState
const [formData, setFormData] = useState({ name: '', email: '' });
function handleChange(e) {
2
setFormData({ ...formData, [e.target.name]: e.target.value });
}
1. Toggle Component Visibility
const [visible, setVisible] = useState(false);
<button onClick={() => setVisible(!visible)}>Toggle</button>
{visible && <div>Hello</div>}
1. Fetching Data with useEffect
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data));
}, []);
1. Conditional Button Disable
<button disabled={!formData.name}>Submit</button>
1. Render List with map()
{items.map(item => <li key={item.id}>{item.name}</li>)}
1. Custom Hook for Window Width
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}
1. Use Context API
const UserContext = createContext();
const App = () => (
<UserContext.Provider value={{ name: 'Manoj' }}>
<Profile />
3
</UserContext.Provider>
);
1. Component Communication via Props
function Child({ onAction }) {
return <button onClick={onAction}>Click</button>;
}
1. Default Props and PropTypes
MyComponent.defaultProps = {
name: 'Guest'
};
MyComponent.propTypes = {
name: PropTypes.string
};
1. React Router Usage
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
