Jihan Chowdhury

10/05/2024

Here are top 40 Javascript questions that are frequently asked in Frontend interviews -

𝟭-𝟭𝟬: 𝗕𝗮𝘀𝗶𝗰𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

1. What is JavaScript?
2. Explain the difference between let, const, and var.
3. How does hoisting work in JavaScript?
4. Describe the concept of closures.
5. Explain the event loop in JavaScript.
6. What is the difference between == and ===?
7. How do you check the type of a variable in JavaScript?
8. What is the use of the this keyword in JavaScript?
9. Explain the difference between function declaration and function expression.
10. How does the setTimeout function work?

𝟭𝟭-𝟮𝟬: 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗦𝗰𝗼𝗽𝗲

11. What is a callback function?
12. Explain the concept of a pure function.
13. Describe the differences between function.call, function.apply, and function.bind.
14. What is the purpose of the arguments object in a function?
15. How do you create a closure in JavaScript?
16. What is the use of the bind method?
17. What is the difference between a shallow copy and a deep copy?
18. How does the call stack work in JavaScript?
19. Explain the concept of function currying.
20. How can you avoid callback hell in JavaScript?

𝟮𝟭-𝟯𝟬: 𝗢𝗯𝗷𝗲𝗰𝘁𝘀 𝗮𝗻𝗱 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀

21. What is prototypal inheritance?
22. How do you create an object in JavaScript?
23. What is the purpose of the prototype property in JavaScript?
24. Explain the difference between Object.create and the constructor pattern.
25. How do you add a property to an object in JavaScript?
26. What is the hasOwnProperty method used for?
27. How can you prevent modification of object properties in JavaScript?
28. Describe the use of the new keyword.
29. Explain the concept of Object Destructuring in JavaScript.
30. What is the difference between null and undefined?

𝟯𝟭-𝟰𝟬: 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻 𝗮𝗻𝗱 𝗘𝘃𝗲𝗻𝘁𝘀

31. What is the DOM?
32. How do you select elements with Vanilla JavaScript?
33. Explain event delegation in JavaScript.
34. What is the purpose of the addEventListener method?
35. How do you create and remove elements in the DOM?
36. Explain the concept of event propagation.
37. How can you prevent the default behaviour of an event?
38. What is the purpose of the data- attribute in HTML?
39. Describe the difference between innerHTML and textContent.
40. How do you handle asynchronous code in JavaScript?

Source: Linkedin

Call now to connect with business.

24/10/2023

Understanding Event Propagation in JavaScript

Event propagation is a crucial concept when working with web app development and JavaScript. It refers to how events traverse the DOM tree, from the root to the target element and back. Understanding it can help you control the behavior of your web applications.

Event Phases:
Capturing Phase: Events move from the root to the target element.
Target Phase: Event handlers attached to the target element are triggered.
Bubbling Phase: Events bubble up from the target element to the root.

Stopping Event Propagation:
To prevent an event from propagating further, you can use event.stopPropagation(). This can be useful when you want to stop an event from affecting parent or child elements.

Here's a simple JavaScript example:

Click me



const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function(event) {
alert('Parent clicked');
});

child.addEventListener('click', function(event) {
event.stopPropagation(); // Stop event propagation
alert('Child clicked');
});


clicking the child button won't trigger the parent's click event handler, thanks to event.stopPropagation()

26/08/2022

Some important React interview questions:

1. What is React? Why do we use React?
2. Difference between library and framework?
3. What is virtual dom?
4. Difference between virtual dom and actual dom?
5. How does react virtual dom work?
6. What is reconciliation in react?
7. What is state?
8. What is props?
9. Difference between a class component and a functional component?
10. Describe life cycle methods?
11. Why functional component is called a dumb or stateless component?
12. How does the functional component handle extra effect?
13. Difference between map and forEach?
14. Why don’t we use foreach in react instead of map?
15. What is hook in react?
16. Alternative of useSate in a functional component?
17. How to handle props drilling in react?
18. What is render props and why use it?
19. What is a higher order component and why use it?
20. Difference between useMemo and useCallback?
21. How to handle DOM manipulation in react?
22. What is pure component?
23. What is JSX?
24. Difference between useEffect and useLayoutEffect?

26/06/2022

Some important JS interview questions according to my experience(Part 1):
1. how does JS work?
2. how the asynchronous method works?
3. what is an event bubble?
4. how to stop the event bubble?
5. what is promise?
6. what is async/await?
7. what is event loop?
8. how does the event loop work?
9. what are apply, call, and bind?
10. what is pure function?
11. what is first-class function?
12. what is higher-order function?
13. what is event delegation?

if this post gets enough response, I will post more essential questions on JS and React.

31/05/2022

I want to start my blog journey by sharing some of my previous articles that were written a few years back. If anyone is interested to read it on medium you can visit the link from the first comment.

If anyone wants to start learning React. These are some important terms to learn first. I tried to describe it in an easy way.

There might be some mistakes as I wrote this while I was learning react. I got react docs and some other articles as my resources.
If anyone finds any mistakes, please correct me. Thank you.

Things to know about React.JS:

1. What is React?
React is a javascript library, not a framework. It is not a complete solution. No one can build a whole web app with only React. They must use other libraries as well with React. React is a Javascript library for building user interfaces. With React, developers can make web apps with less time and less work than before with other frameworks and vanilla Javascript.

2. How Does React Work?
React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes. The declarative view makes the code more predictable and easier to debug.

3. What is Virtual DOM?
The virtual DOM is a programming concept where an ideal. Or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. This approach enables the declarative API to React. Virtual DOM is different from Shadow DOM. The virtual DOM is a concept implemented by libraries in Javascript on top of browser APIs. Where Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components.

4.What is JSX?
JSX means Javascript XML or Javascript Extension. It is a syntax extension to Javascript. Developers should use JSX to React.But it is not required. So by using JSX developers can describe what the UI should look like. JSX also has the full power of Javascript. Example —
const element = (

Hello!
Good to see you here.

);

5. What is a Component?
React use component concept for building interactive UI. Components let the developers split the UI into independent, reusable pieces, and think about each piece in isolation. Components are like Javascript Functions. They accept arbitrary inputs called props and return React elements describing what should appear on the screen.
function Welcome(props) { return Hello, {props.name};
}

const element = ;ReactDOM.render(
element,
document.getElementById('root')
);

6. What are Props?
“Props” stands for properties. Props are arguments passed into React Components. Props are passed to components via HTML attributes. By using the same syntax as HTML attributes, props are sent to components. The component receives the argument as a props object.
class Car extends React.Component {
render() {
return I am a {this.props.brand}!;
}
}

7. What is State?
The state object is where developers store property values that belongs to the component. React components has a built-in state object. When the state object changes, the component re-renders. The state object can contain as many properties as developers like. To change a value in the state object, Developers use this.setState() method.
function Clock(props) {
return (
Hello, world! It is {props.date.toLocaleTimeString()}. );
}

function tick() {
ReactDOM.render(
, document.getElementById('root')
);
}

setInterval(tick, 1000);

8. How does React handle Events?
Handling events with React elements is very similar to handling events on DOM elements. But there are some syntax difference. React events are named using camelCase, rather than lowercase. With JSX developers pass a function as the event handler, rather than a string. Developers cannot return false to prevent default behavior in React. Developers must call preventDefault explicitly.
Activate Lasers


9.What is conditional rendering?
In React, developers can create distinct components that encapsulate behavior they need. Then, developers can render only some of them, depending on the state of their application. Conditional rendering in React works the same way conditions work in Javascript. Use Javascript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) { return ; } return ;}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
, document.getElementById('root'));

10.What are hooks?
Hooks are the new features in React. Hook let developers use state and other features without writing a class. Hooks are backward-compatible. Hooks are Javascript functions, but developers need to follow two rules when using them. Developers should not call Hooks inside loops, conditions, or nested functions. Also, developers should not call Hooks from the regular Javascript function. Hooks should be called from React function components. And from custom Hooks.
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}

25/05/2022

Very soon I will publish my blog site. Where I will store and share all of my blogs related to web technologies.