DEV Community

Tamilselvan K
Tamilselvan K

Posted on

Day-43 Interview Questions and Answers (Frontend + Node.js + JavaScript)

#webdev #programming #javascript #react

1. What is the difference between a function declaration and function expression?

  • Function Declaration: Declared with the function keyword and hoisted. 
  function greet() { console.log('Hello'); }
Enter fullscreen mode Exit fullscreen mode
  • Function Expression: Assigned to a variable; not hoisted. 
  const greet = function() { console.log('Hello'); }
Enter fullscreen mode Exit fullscreen mode

2. How does setTimeout work?

  • It runs a function after a specified delay asynchronously.
  • Uses the event loop: the function is placed in a task queue after the delay.

3. How do you select elements from the DOM?

  • document.getElementById('id')
  • document.querySelector('selector')
  • document.getElementsByClassName('class')
  • document.querySelectorAll('selector')

4. What is the purpose of async and await in JavaScript?

  • Handle asynchronous operations in a synchronous way.
  • Helps avoid callback hell. 
async function fetchData() {
  const data = await fetch('url');
}
Enter fullscreen mode Exit fullscreen mode

5. What is a callback function?

  • A function passed as an argument to another function to be executed later. 
setTimeout(() => { console.log('Hello'); }, 1000);
Enter fullscreen mode Exit fullscreen mode

6. What is Node.js and how does it work?

  • Node.js is a JavaScript runtime built on Chrome's V8 engine.
  • Uses non-blocking I/O and an event-driven model to handle multiple connections with a single thread.

7. For Node.js, why does Google use the V8 engine?

  • V8 is fast, compiles JavaScript to native machine code.
  • Provides high performance and efficient memory management.

8. Why is Node.js single-threaded?

  • Node uses a single-threaded event loop for scalability.
  • Handles multiple requests asynchronously using callbacks, promises, and async/await.

9. Can you access DOM in Node.js?

  • ❌ No, DOM is a browser-specific API. Node.js runs on the server.

10. How to create a simple HTTP server in Node.js? 

const http = require('http');
const server = http.createServer((req, res) => {
  res.end('Hello World');
});
server.listen(3000);
Enter fullscreen mode Exit fullscreen mode

11. What is the difference between synchronous and asynchronous functions?

  • Synchronous: Blocks the execution until the task completes.
  • Asynchronous: Doesn't block. Tasks like API calls, timers are handled in the background.

12. What are the different types of HTTP requests?

  • GET: Retrieve data.
  • POST: Send data.
  • PUT: Update entire resource.
  • PATCH: Update part of a resource.
  • DELETE: Delete resource.
  • OPTIONS, HEAD

13. Explain this keyword.

  • In object: Refers to the object itself.
  • In function (non-strict): Refers to the global object.
  • In strict mode or arrow functions: this is undefined or inherits from the parent scope.

14. What is the difference between undefined and null?

  • undefined: Variable declared but not assigned.
  • null: Intentional assignment to represent no value.

15. What is the difference between == and === in JavaScript?

  • ==: Compares values with type coercion.
  • ===: Strict comparison without type coercion.

16. What are truthy and falsy values?

  • Falsy: false, 0, '', null, undefined, NaN
  • Truthy: Anything that is not falsy.

17. What is the difference between global and local scope?

  • Global Scope: Available anywhere in the code.
  • Local Scope: Available only within functions or blocks.

18. How to optimize a webpage for performance?

  • Compress images.
  • Minify CSS, JS.
  • Use CDN.
  • Lazy load assets.
  • Implement caching.
  • Remove unused code.

19. How to handle CORS in JavaScript?

  • Set headers like: 
Access-Control-Allow-Origin: '*'
Enter fullscreen mode Exit fullscreen mode
  • Or handle via backend or use proxies.

20. What is a closure and how does it work?

  • A function that remembers its outer scope, even after the outer function has finished. 
function outer() {
  let count = 0;
  return function inner() { count++; }
}
Enter fullscreen mode Exit fullscreen mode

21. Explain CSS positions: relative, absolute, fixed.

  • Relative: Positioned relative to itself.
  • Absolute: Positioned relative to the nearest positioned ancestor.
  • Fixed: Sticks relative to the viewport.

22. What is a media query and how does it work?

  • Used to make responsive designs based on device size. 
@media (max-width: 600px) {
  body { background: red; }
}
Enter fullscreen mode Exit fullscreen mode

23. What is SPA (Single Page Application)?

  • Loads a single HTML page.
  • Updates content dynamically without refreshing the entire page.

24. Client-side vs Server-side Rendering

  • Client-side: Rendering happens in the browser.
  • Server-side: Rendering happens on the server; better SEO and faster initial load.

25. Explain npm and yarn.

  • Both are JavaScript package managers.
  • Yarn is generally faster with better caching and offline capabilities.

26. How do you manage version control and collaboration using Git?

  • Branching (git branch)
  • Merging (git merge)
  • Pull requests (collaborative review)
  • Resolving conflicts and version tracking.

27. What are build tools like Vite or Webpack used for?

  • Bundling, transpiling, and optimizing front-end code for development and production.

28. What is the difference between development and production environments?

  • Development: Includes debugging, detailed logs, source maps.
  • Production: Optimized, minified, no source maps, faster.

29. How do you debug a frontend application?

  • Use browser DevTools (Console, Network, Sources).
  • Add breakpoints.
  • Use console.log() for quick checks.

30. Difference between id and class in HTML?

  • id: Unique identifier (#id), used once per page.
  • class: Reusable (.class), used for styling and selecting multiple elements.

31. How to use the CSS box model?

  • Content → Padding → Border → Margin
  • Controls layout spacing in CSS.

32. Difference between arrow function and traditional function.

  • Arrow functions: Don't have their own this, arguments.
  • Shorter syntax. 
const add = (a, b) => a + b;
Enter fullscreen mode Exit fullscreen mode

33. Explain em, rem, and px in CSS.

  • px: Absolute pixels.
  • em: Relative to parent font size.
  • rem: Relative to root (html) font size.

34. What are template literals and why are they used?

  • String literals using backticks for interpolation. 
`Hello, ${name}`
Enter fullscreen mode Exit fullscreen mode
  • Supports multi-line strings and embedding expressions.

35. Explain var, let, and const.

  • var: Function-scoped, hoisted.
  • let: Block-scoped, not hoisted.
  • const: Block-scoped, cannot be reassigned.

36. Explain synchronous and asynchronous in JavaScript.

  • Synchronous: Runs line by line, blocks execution.
  • Asynchronous: Runs in the background, non-blocking.

37. How does the event loop work in JavaScript?

  • Executes synchronous code first.
  • Moves asynchronous tasks (like setTimeout, promises) to the callback/task queue.
  • Processes them when the call stack is empty.

Conclusion

This numbered format gives a clean overview of the most important frontend, JavaScript, and Node.js concepts for interviews. You can directly use this for your blog or study notes.

Top comments (13)

Collapse
 
oculus42 profile image
Samuel Rouse • • Edited

Thanks for putting this together! I have a couple of notes/details that may not be necessary for most cases, but could help better paint a picture for some.

#13: The missing word here is context: the this keyword is the context the function runs in. For a method on an object, it is the "source" object. For an arrow-function, it is the context it was created in.

#14: These descriptions of null and undefined are more convention than design. Earlier conventions used null specifically to represent an object placeholder and used undefined to represent a missing primitive value. Optional chaining (?.) further blurs this line as it returns undefined.

#20: While your description is a pretty common response, it's not accurate. A closure is the combination of the function and its "scope" (lexical environment).. Every function creates a closure, but we don't usually have to think about that outside of these "special" cases.

#35: One additional difference of var is that it can be re-declared and has no temporal dead zone. let and const will throw an error if you declare the same variable twice. This is a very small addition, but it used to be pretty important in the days before modules, when you might write var myVar = myVar || new Thing();

Collapse
 
tamilselvan1812 profile image
Tamilselvan K •

Thanks for putting this together! This is a solid overview. I have a few notes that might help refine or expand some of the points for readers who want a deeper understanding:

13: The missing word here is context. The this keyword refers to the context in which the function runs. For methods on an object, it refers to the "source" object. For arrow functions, this is lexically bound — meaning it retains the context of where the function was created.

14: The distinctions between null and undefined are more about convention than strict design. Historically, null was meant to represent an intentional absence of an object, while undefined indicated a missing primitive value. Modern JavaScript blurs this a bit — for example, optional chaining (?.) returns undefined when something doesn't exist.

20: The common explanation of closures as something "special" isn't entirely accurate. A closure is simply the combination of a function and its lexical environment (the scope in which it was created). Every function in JavaScript forms a closure, but we usually only have to think about closures explicitly when functions are returned, passed, or invoked in a different context than where they were created.

35: One more subtle but important difference with var is that it can be re-declared without throwing an error, unlike let and const, which will throw if you try to declare the same variable twice in the same scope. This was especially relevant before modules became common — patterns like var myVar = myVar || new Thing(); were often used as safeguards.

Thanks again for this write-up — it’s a helpful resource!

Collapse
 
oculus42 profile image
Samuel Rouse •

I'm confused by this response. It seems like you used an LLM to re-write/re-state my comment? I'm not opposed to any additional clarification, but it seemed odd.

Also, you can avoid the number sign from becoming an H1 using a backslash, i.e. \#13

Collapse
 
neurabot profile image
Neurabot •

Great. Useful.

Cool. Great post.

When updating code of website files in management files cpanel, I have problems.

I don't easily automatically update them in browser. I must do it 1 time. After it, i must clean browser to show another upgrade of code of files. How should I easily update browser to easily program in internet ?

Related to your post, when I selected in my tasks, document. getelementByClassName rule to use DOM, it doesn't work. Why ?

That are my main questions.

Collapse
 
tamilselvan1812 profile image
Tamilselvan K •

Thanks!

1️⃣ Browser not updating: Do Ctrl + F5 or use Inspect → Network → Disable cache. Or add ?v=2 after file names to force update.

2️⃣ getElementByClassName error: It should be getElementsByClassName() (with "s"). Example:

document.getElementsByClassName("class")[0]
Enter fullscreen mode Exit fullscreen mode

Or use:

document.querySelector(".class")
Enter fullscreen mode Exit fullscreen mode

Hope this helps!

Collapse
 
nevodavid profile image
Nevo David •

damn, that’s a ton packed in one spot, super handy tbh - you ever wish someone taught you this all at once instead of bits and pieces?

Collapse
 
tamilselvan1812 profile image
Tamilselvan K •

Absolutely, I completely agree. Having all this information consolidated in one place would have been incredibly helpful early on, rather than learning it in fragments over time. That said, the process of figuring things out piece by piece has certainly strengthened problem-solving skills along the way.

Collapse
 
kevenrussel61723 profile image
Keven_Russel61 •

This is impressive

Collapse
 
tamilselvan1812 profile image
Tamilselvan K •

Thank you.

Collapse
 
dotallio profile image
Dotallio •

This is such a handy reference, honestly covers so much ground for quick interview prep! Have you thought about adding some trickier or real-world scenario questions next?

Collapse
 
tamilselvan1812 profile image
Tamilselvan K •

Thanks a lot! Great idea — I’ll definitely add some real-world and trickier questions soon.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

This is extremely impressive, I've enjoyed all of the research you've put into this project - it adds up

Collapse
 
tamilselvan1812 profile image
Tamilselvan K •

Thank you so much! I really appreciate your feedback. Glad to hear the research and effort are adding value.

View full discussion (13 comments)
OSZAR »