JavaScript Interview Questions & Answers —
Conversational Style
Basics
Q1: Can you walk me through the different ways to declare variables in JavaScript,
and when you’d use each?
A:
Absolutely. JavaScript lets us declare variables using var, let, and const:
var is function-scoped and can be redeclared, but I almost never use it in modern code
because of potential bugs with scope and hoisting.
let is block-scoped and ideal when I know the value will change (for example, in loops or
counters).
const is also block-scoped but ensures the variable identifier can’t be reassigned, which I
prefer for things that should stay constant, like config objects or functions.
Here’s a quick example:
let count = 1; // can reassign
const apiKey = "XYZ"; // can’t reassign
Q2: If I handed you the following code, what would you expect to see in the
console, and why?
[Link](typeof null);
A:
That’s a classic gotcha! It logs "object". The reason is historical: in the original JavaScript
implementation, values were tagged with type info, and null got tagged as an object. So typeof
null returns "object"—but developers today just know this is one of those legacy oddities.
Q3: How would you compare == and ===? Which would you prefer to use, and why?
A:
== is the loose equality operator; it converts types to compare values, which can produce
surprises—like '5' == 5 returning true.
=== is strict equality; it compares both type and value, so '5' === 5 is false.
In production, I always use === unless there’s a very explicit reason not to, because it avoids
confusing bugs from implicit type coercion.
Key Concepts
Q4: Could you explain hoisting in JavaScript with an example?
A:
Sure! Hoisting means variable and function declarations are moved to the top of their scope at
compile time, so you can reference them before they’re declared—though only declarations, not
initializations, are hoisted.
Example:
[Link](a); // undefined, not ReferenceError
var a = 10;
With let or const, though, you get a ReferenceError if you access before the declaration,
because they’re not hoisted the same way.
Q5: Can you describe a closure and give a real-world use case?
A:
A closure is when a function "remembers" its lexical scope—even if executed outside that
scope. In practice, this lets us create private data or maintain state across function calls.
Example: Creating a counter:
function makeCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
const counter = makeCounter();
counter(); // 1
counter(); // 2
A real-world scenario: If I’m building a UI library, I might use closures to encapsulate component
state without exposing it globally.
Q6: You have a variable declared as let num; and you don’t assign anything to it.
What’s its value, and how could you check that in code?
A:
If I declare let num; and do not assign to it, its value is undefined. I can check with:
[Link](num); // logs: undefined
[Link](typeof num); // logs: "undefined"
Functions & Object Handling
Q7: What’s the distinction between function expressions and arrow functions?
When would you choose one over the other?
A:
Both are ways to define functions, but arrow functions don’t bind their own this, arguments, or
super, which is great for callbacks or functional code. If I need dynamic context or to use this,
I’d use a normal function expression. Otherwise, I lean towards arrow functions for brevity.
Example:
const add = (a, b) => a + b;
However, if I’m writing a method that needs this, such as in classes or objects, I’d use a function
expression.
Q8: How do you add and remove properties from an object in JavaScript?
A:
I add properties simply by assignment:
const user = {};
[Link] = "Alice"; // add
To remove, I use:
delete [Link];
If I want immutability, rather than modifying, I’d use object spread to create a new object.
Arrays & Advanced Patterns
Q9: Let’s say you need to check if a string is a palindrome. Can you write and walk
me through your solution?
A:
Certainly! I’d reverse the string and compare to the original, ignoring case and spaces if needed:
function isPalindrome(str) {
return str === [Link]("").reverse().join("");
}
So for "level", isPalindrome("level") returns true. This method is clean and leverages built-in
array and string methods.
Q10: In front-end dev, why are higher-order functions (like map, filter, reduce) so
important?
A:
They make code declarative, concise, and expressive. For example, map lets me transform arrays
without manual loops, filter helps clean data, and reduce is powerful for aggregations.
Using higher-order functions is essential for clean functional patterns, especially in frameworks
like React where state transformations are common.
Asynchronous JavaScript
Q11: Can you talk about Promises and async/await? When would you use each,
and why?
A:
Both let me handle asynchronous operations. I prefer async/await for readability—it makes async
code look more like synchronous code and naturally fits within try/catch blocks for error
handling.
Example:
async function fetchData() {
try {
let res = await fetch(url);
let data = await [Link]();
return data;
} catch (err) {
// handle error
}
}
Promises work well for chaining, but for complex logic, async/await is more intuitive.
Event Handling & the DOM
Q12: Let’s say you want to change the text of a DOM element with id "message". How
would you do this in JavaScript?
A:
I’d use:
[Link]("message").textContent = "New text here!";
This directly targets the element and changes its visible content.
Object-Oriented & Advanced Topics
Q13: Can you briefly explain prototypal inheritance in JavaScript? What’s an
example use case?
A:
Prototypal inheritance allows objects to inherit properties and methods from other objects. This
is distinct from classical inheritance as in Java or C#. In JS, each object has a prototype, and
property lookups climb the prototype chain.
Example:
function Animal(name) { [Link] = name; }
[Link] = function() { [Link]([Link]); };
const dog = new Animal("Max");
[Link](); // Max
Use case: Sharing methods across object instances saves memory and avoids duplication.
Q14: How would you deep clone an object in JavaScript?
A:
For plain objects, the fastest is:
const newObj = [Link]([Link](obj));
However, this doesn’t work with dates, functions, or circular references. For those cases, I’d use
libraries like Lodash’s _.cloneDeep or write a custom recursive function if libraries aren’t allowed.
Coding Problems
Q15: Can you solve the classic FizzBuzz problem? Please code and explain it.
A:
Yes! I’d write a loop from 1 to 100, printing "Fizz" for multiples of 3, "Buzz" for multiples of 5,
and "FizzBuzz" for multiples of both.
for (let i = 1; i <= 100; i++) {
let out = "";
if (i % 3 === 0) out += "Fizz";
if (i % 5 === 0) out += "Buzz";
[Link](out || i);
}
This solution avoids nested if statements and is efficient.
Advanced & Best Practices
Q16: How do you optimize JavaScript for performance, especially in large
projects?
A:
I focus on several factors:
Minimize DOM manipulations, batch updates where possible.
Use memoization for costly computations.
Avoid memory leaks by properly removing event listeners.
Debounce or throttle expensive functions invoked by user input.
Code splitting and lazy loading in front-end bundling.
Write efficient loops, and leverage performant data structures.
Profiling tools like Chrome DevTools help find bottlenecks.
These questions and answers simulate how I’d approach a technical interview, showcasing not
just knowledge, but also communication, best practices, and code reasoning.
