277 JavaScript Frontend Developer Interview Questions & Answers

ECMAScript is the standard that defines the core JavaScript language. It specifies syntax, values, objects, functions, promises, and other built in language behavior. JavaScript engines implement that standard. New editions add standardized language features over time, but browser support can still vary by version. The DOM and Fetch are not part of ECMAScript. They are Web APIs provided by the browser, so I check language support and Web API support separately.

ECMAScript is the shared set of rules that defines how the main JavaScript language should work. Browser makers use these rules when building the software that runs JavaScript. This helps the same language behave consistently in different browsers. The rules are updated over time as new language features are accepted. A browser may support some newer features before another browser does. Also, some things JavaScript uses on a web page come from the browser rather than from these language rules. Knowing this difference helps developers understand compatibility problems and choose features that work for their users.

1. Would you like me to explain the difference between ECMAScript and browser Web APIs?
2. Should I also explain how yearly ECMAScript editions relate to browser compatibility?

ECMAScript is the specification that defines the core language commonly called JavaScript. A specification is a written standard that describes exactly how language features should behave.

JavaScript engines implement those rules. For example, ECMAScript defines language syntax and behavior for features such as let, const, classes, modules, async functions, Array, Map, Set, Promise, and JSON. Different engines can have different internal implementations, but the observable language behavior should follow the specification.

ECMAScript is published in editions as the language evolves. Modern evergreen browsers are updated regularly, but support still depends on the exact browser and version. A feature being standardized does not mean every browser used by an application supports it immediately. In production, I check compatibility for the target browsers before relying on a newer feature.

It is also important to separate ECMAScript from the browser platform. The DOM and Fetch are Web APIs. They are not defined as part of the ECMAScript language. ECMAScript gives us the JavaScript language used to call those APIs, while the browser provides the APIs themselves.

This distinction matters during development and debugging. A browser can support a particular ECMAScript language feature but lack a particular Web API, or the reverse. I therefore check the support of the language feature and the support of the Web API separately.

A common mistake is saying that ECMAScript and JavaScript are completely separate languages. ECMAScript is the standard that defines the core language commonly called JavaScript. Another mistake is assuming that everything available to JavaScript in a browser belongs to ECMAScript. The DOM and Fetch are browser Web APIs. A third mistake is assuming that a new ECMAScript edition guarantees immediate support in every browser. Actual support depends on the browser and version.

Start by saying that ECMAScript is the standard for the core JavaScript language. Then explain that JavaScript engines implement that standard. Finish by separating ECMAScript features from browser Web APIs such as the DOM and Fetch, and mention that real browser compatibility still needs to be checked.

HTML is the markup language used to describe the structure and meaning of content on a web page. It uses elements for things such as headings, paragraphs, links, images, forms, and buttons. Attributes add extra information to elements, and elements can be nested to form a document structure. The browser parses HTML and creates the DOM, which JavaScript can read and change. HTML provides structure and meaning, CSS controls presentation, and JavaScript adds behavior. Semantic HTML also improves accessibility and maintainability.

HTML tells a browser what content exists on a web page and what that content means. For example, it can describe a heading, paragraph, link, image, button, or form. Elements can contain other elements, which creates the structure of the document. Elements can also have attributes that provide extra information. The browser reads the HTML and builds an internal representation of the page called the DOM. CSS can control how the page looks, while JavaScript can add behavior and change the DOM. Meaningful HTML also helps accessibility tools and makes code easier to maintain.

1. Would you like me to explain how the browser turns HTML into the DOM?
2. Should I also compare semantic HTML with generic elements such as div and span?

HTML stands for HyperText Markup Language. It is the standard markup language used to describe the structure and meaning of web content.

An HTML document is made from elements. Many elements have an opening tag, content, and a closing tag. For example, a p element represents a paragraph. Some elements, such as img, are void elements and do not have closing tags or child content.

Elements can have attributes. Attributes provide extra information. For example, an anchor element uses the href attribute to identify a link destination. An img element uses src to identify the image resource and alt to provide a text alternative when appropriate.

Elements can be nested inside other elements. Correct nesting creates a clear document structure. A normal HTML document has an html element containing head and body. The head contains document information such as metadata and the title. The body contains the page content.

Semantic elements describe the purpose of content. Examples include header, nav, main, article, section, and footer. Native elements such as button also carry built in meaning and behavior. Choosing meaningful elements helps assistive technology understand the page and makes the code easier for developers to read and maintain.

HTML also provides links, images, tables, controls, labels, and forms. Forms collect user input with controls such as input, select, textarea, and button.

When the browser parses HTML, it creates the DOM. The DOM is an object representation of the document. JavaScript can use browser DOM APIs to find elements, listen for events, and change content, properties, or attributes.

HTML should describe structure and meaning. CSS should normally control presentation. JavaScript should add behavior when behavior is needed. Keeping these responsibilities clear makes frontend code easier to understand and maintain.

A common mistake is calling HTML a programming language. HTML is a markup language. Another mistake is using div elements for everything instead of choosing meaningful native elements when they fit. Developers may also confuse HTML with CSS or JavaScript. HTML describes structure and meaning, CSS controls presentation, and JavaScript adds behavior. Other common mistakes include invalid nesting, missing labels for form controls, missing useful alt text for meaningful images, choosing elements only for their default appearance, and assuming the DOM must always have exactly the same structure as malformed source HTML after browser parsing.

Start by saying that HTML describes the structure and meaning of web content. Give a simple example such as a heading, link, image, or form. Then explain that elements can have attributes and can be nested. Mention that the browser parses HTML into the DOM. Finish by separating HTML structure from CSS presentation and JavaScript behavior, and explain that semantic HTML improves accessibility and maintainability.

CSS is the style sheet language I use to control how a web page looks and how its content is arranged. HTML gives the page meaning and structure, CSS controls presentation such as spacing, size, color, and layout, and JavaScript controls application behavior. An important practical point is that several CSS declarations can affect the same element, so the cascade decides which declaration wins.

CSS controls how a web page looks and how its content is arranged on the screen. For example, it can change text size, colors, spacing, widths, and the position of content. It can also help the same page fit a phone, tablet, or large monitor. HTML describes what the content means, such as a heading, button, or paragraph. CSS decides how that content should appear. JavaScript normally handles application behavior, such as responding to a click, loading data, or changing content after the page has loaded.

1. Would you like me to explain the cascade and specificity with an example?
2. Should I also compare Flexbox and Grid for page layout?

CSS stands for Cascading Style Sheets. A CSS rule normally contains a selector and one or more declarations. The selector chooses the elements that the rule can affect. A declaration gives a CSS property a value, such as setting a color, width, or amount of spacing.

The cascade is important because several declarations can apply to the same property on the same element. The browser follows cascade rules to decide which declaration wins. Factors include origin, importance, cascade layers when they are used, specificity, and source order. Specificity compares selectors after higher priority cascade rules have already been considered. If competing declarations still have equal priority and specificity, source order can decide the result.

Inheritance is related but different. Some properties can pass their computed value from a parent element to a child element. Text color commonly inherits. Many layout properties do not inherit automatically.

The box model describes the space around an element. It includes content, padding, border, and margin. This model is important for understanding element size and spacing.

Normal flow is the browser's default way of arranging ordinary document content. Flexbox is useful when items mainly need to be arranged and aligned in one direction. Grid is useful when rows and columns both matter.

Responsive design lets a page adapt to different screen sizes and available space. Common tools include flexible sizing, media queries, Flexbox, and Grid.

In production, I keep HTML focused on meaning, CSS focused on presentation, and JavaScript focused on application behavior. This separation usually makes the interface easier to understand, maintain, test, and change.

A common mistake is saying that CSS gives a page its meaning or structure. HTML provides document meaning and structure, while CSS controls presentation. Another mistake is saying that the last declaration always wins. The cascade first considers factors such as origin, importance, cascade layers when present, and specificity before source order can decide between otherwise equal declarations. Candidates also sometimes confuse inheritance with the cascade, assume every property inherits, misunderstand the box model, or treat Flexbox and Grid as identical layout systems.

Start by saying that CSS controls presentation and layout. Then separate the roles of HTML, CSS, and JavaScript. Next explain selectors and declarations, followed by the cascade, inheritance, specificity, the box model, normal flow, responsive design, Flexbox, and Grid. Keep each idea short and use one small example if the interviewer asks for more detail.

The DOM is a browser Web API that represents an HTML or XML document as a tree of objects called nodes. JavaScript can use DOM APIs to find elements, read or change content and attributes, create or remove nodes, and listen for events. The DOM is not the original HTML source text, and it is not part of the JavaScript language itself.

When a browser opens a page, it needs a form of the page that it can work with. It builds a tree that represents the page and everything inside it. Each part of the page becomes an object the browser can read or change. Code can find parts of the page, change words, add or remove content, update settings on page items, and respond when a person clicks or types. These changes can also make the browser update what the person sees on the screen.

1. Would you like me to explain the main node types and their relationships?
2. Should I also explain how DOM changes can affect browser rendering?

The DOM stands for Document Object Model. It is a browser Web API that represents an HTML or XML document as a tree of nodes.

The Document object represents the loaded document. Element nodes represent elements such as div, button, and input. Text nodes represent text inside elements. Attributes such as id and class belong to elements and describe them. Attributes are associated with an element rather than being child nodes in the document tree.

Tree relationships let nodes have parents, children, and siblings. For example, a button element inside a form element is a child of that form element.

JavaScript can access the DOM through browser APIs. For example, document.querySelector can select an element. Code can then change its textContent, read or change attributes, create new nodes, append nodes, or remove nodes.

The DOM also provides event APIs. addEventListener registers a function that can run when an event such as click or input is dispatched to an event target. This is a common way for a page to respond to user actions.

DOM changes can affect rendering. A change may cause style calculation, layout, painting, or compositing depending on what changed. Not every change causes every rendering step, so the exact cost varies. Avoiding unnecessary repeated DOM work can improve production performance.

The DOM is different from HTML source text and from JavaScript. HTML source text is input that the browser parses. The DOM is the current object representation of the document and can change after parsing. JavaScript is the programming language. Objects and methods such as document, querySelector, and addEventListener come from browser Web APIs, not from the ECMAScript language itself.

A common mistake is saying that the DOM is JavaScript. The DOM is a browser Web API that JavaScript can use. Another mistake is saying that the DOM is the same as the original HTML source text. The browser creates the DOM by parsing the document, and scripts can later change that DOM without rewriting the original source file. Another mistake is treating attributes as ordinary child nodes of an element. Attributes are associated with elements but are not children in the document tree. Developers can also incorrectly assume that every DOM change causes a complete page redraw. The browser performs only the rendering work required by the specific change.

Start by saying that the DOM is the browser object model for a document. Then describe the tree, explain document, element, text, and attribute relationships, show how JavaScript can select and change nodes, mention event listeners, and finish by separating the DOM from HTML source text and the JavaScript language.

A JavaScript data type tells us what kind of value we are working with. JavaScript has seven primitive types: undefined, null, boolean, number, bigint, string, and symbol. Objects form the non primitive group. JavaScript is dynamically typed, so a variable can hold values of different types at different times. I also pay attention to typeof, type conversion, and strict equality because those rules can otherwise cause surprising results.

A data type tells us what kind of value JavaScript is working with. A value can represent text, a number, true or false, an intentionally empty value, a missing value, or a more complex collection of information. The kind of value matters because the same operation can behave differently with different values. For example, two numbers can be added, while text can be joined together. A named place that stores a value can also receive a different kind of value later. This flexibility is useful, but it means we must understand each value before using it.

1. Would you like me to explain all primitive types and objects?
2. Should I also explain typeof, type conversion, and equality rules?

A JavaScript data type describes the kind of value an operation receives. JavaScript has seven primitive types: undefined, null, boolean, number, bigint, string, and symbol. Undefined usually represents a value that has not been assigned. Null is an intentional absence of a value. Boolean represents true or false. Number represents ordinary numeric values, including special values such as NaN and Infinity. Bigint represents integers that can be larger than the safe integer range of number. String represents text. Symbol creates unique primitive values that are often used as property keys.

Objects form the non primitive group. Arrays, dates, regular expressions, and ordinary objects are all objects. Functions are also objects with callable behavior.

JavaScript is dynamically typed. A variable does not have one permanent data type. The value currently stored in it has a type. A variable can contain the number 10 and later contain the string "ten".

The typeof operator identifies many common types. typeof 10 returns "number". typeof "hello" returns "string". typeof true returns "boolean". typeof undefined returns "undefined". typeof 10n returns "bigint". typeof Symbol() returns "symbol". Most objects return "object", while typeof a function returns "function".

One important exception is null. typeof null returns "object" because of a historical JavaScript behavior, even though null is a primitive value. Code that needs to detect null should therefore compare with null directly.

Type conversion matters too. JavaScript can convert values automatically. For example, "5" + 1 produces "51" because 1 is converted to text. Strict equality with === is usually easier to reason about because it does not perform this automatic type conversion. Understanding these rules helps prevent bugs when handling form input, API data, calculations, and conditions.

A common mistake is saying that JavaScript variables have permanent types. Values have types, while a variable can later hold a value of another type. Another mistake is treating null as an object because typeof null returns "object". Null is actually a primitive value. Developers also sometimes expect typeof to identify specific object kinds, but arrays and many other objects return "object". Another mistake is assuming that number can represent every integer exactly. Large integers may require bigint. A further mistake is using loose equality without understanding its automatic conversion rules. Strict equality with === is usually clearer.

Start by saying that a data type describes the kind of value JavaScript is working with. Name the seven primitive types and say that objects form the non primitive group. Then explain dynamic typing, give a few typeof examples, mention the special null behavior, and finish with why deliberate type conversion and strict equality help prevent bugs.

A JavaScript object is a value that stores properties. Each property has a string or symbol key and a value. A property value can also be a function, which is commonly used as a method. Objects are mutable, and variables can hold references to the same object, so changing that object through one reference can be visible through another. I use plain objects when I want to represent related data with meaningful property names.

A JavaScript object is a way to keep related information together. For example, a user can have a name, an age, and an action that creates a greeting. Each piece of information has a name so the program can find it. The program can read a value, change it, add another value, or remove one. Two variables can also refer to the same object, so a change made through one variable can be seen through the other. Objects work well for records with named information, while other structures are better for ordered lists or specialized key and value storage.

1. Would you like me to compare an object with a primitive value, an array, a Map, and JSON text?
2. Would you like me to explain references, prototypes, property ownership, and enumeration with a small example?

A JavaScript object stores properties. Every property key is a string or a symbol. If another type is used as a normal object property key, JavaScript converts it to a string unless it is already a symbol. A property value can be any JavaScript value. A function used as a property value can act as a method.

An object literal is a common way to create an object. For example, { name: "Maya", age: 30 } creates two own properties. We can read them with user.name or user["name"]. We can change a property with user.age = 31.

Objects are mutable. This means their properties can change after the object is created. JavaScript always passes values by value. For an object, the value being copied is a reference to the object. If two variables contain references to the same object, mutation through either reference affects that same object. Reassigning one variable does not change the other variable.

Objects can also inherit properties through a prototype chain. If a property is not found directly on an object, JavaScript can look for it on the object's prototype and continue through the chain. Object.hasOwn() checks whether a property belongs directly to the object.

Enumeration means visiting properties. Object.keys() returns own enumerable string keys. It does not include symbol keys or inherited keys. Object.getOwnPropertySymbols() can retrieve own symbol keys.

A primitive value is not a mutable collection of properties. An array is an object with special behavior for indexed elements and its length property. A Map is a dedicated key and value collection that accepts keys of any JavaScript value type. JSON is a text format, not a live JavaScript object. JSON.parse() converts valid JSON text into a JavaScript value.

For records with known named fields, a plain object is usually simple and natural. For dynamic key and value storage, especially when keys are objects or other non string values, Map can be a better choice.

The example creates one object literal with string keyed properties, a symbol keyed property, and a method. It reads and changes properties, then copies the object reference into another variable to show that both variables refer to the same object. It uses Object.hasOwn to distinguish an own property from a property found through the prototype chain. It uses Object.keys to enumerate own enumerable string keys and Object.getOwnPropertySymbols to retrieve the symbol key. It then contrasts the object with an array, a Map, and JSON text.

A common mistake is saying that JavaScript passes objects by reference. JavaScript always passes values by value. For an object, the copied value is a reference to the object. Another mistake is assuming that assigning an object to another variable creates a new object. It only copies the reference value. Developers also sometimes use an object when an array is better for an ordered sequence or when Map is better for dynamic keys. Another mistake is treating JSON text as if it were already a JavaScript object. JSON.parse() is needed to convert valid JSON text into a JavaScript value. It is also incorrect to assume that Object.keys() includes symbol properties or inherited properties.

Start by saying that an object stores properties with string or symbol keys. Give a small object literal example. Then explain mutation, copied reference values, prototypes, ownership, and enumeration. Finish by briefly comparing objects with primitive values, arrays, Map, and JSON text. This shows both JavaScript knowledge and practical judgment.

A JavaScript array is an ordered object designed to hold a sequence of values. Its positions start at index 0, and its length usually tracks one more than the highest index. I can read or replace values by index and use methods such as push, pop, map, filter, and slice. Arrays can contain any JavaScript value, including other arrays. Because an array is an object, assigning it to another variable copies the reference value, so both variables can refer to the same array.

A JavaScript array is useful when I need to keep several values in a clear order. Each value has a numbered place, beginning with 0. I can look up a value, replace it, add new values, remove values, or go through the values one by one. An array can hold numbers, text, records, or other arrays. Some actions change the original collection, while others make a new collection. This matters because changing shared information can also affect another part of an application that uses the same collection.

1. Would you like me to explain common array methods as well as the basic definition?
2. Should I compare arrays with other JavaScript collection types?

A JavaScript array is an Array object designed for an ordered sequence of values. Its normal array indexes start at 0. An array index can range from 0 through 4294967294. The length property is automatically maintained and is one greater than the highest existing array index when that index determines the end of the array. Setting an element beyond the current end increases length. Reducing length deletes elements whose indexes are no longer inside the new length.

I read or write an element with syntax such as items[0]. Arrays are dynamic, so their length can change. Methods such as push, pop, splice, sort, and reverse mutate the original array. Methods such as map, filter, slice, concat, and toSorted return a new array instead of changing the original array. These new arrays are shallow results. If an element is an object, the new array can still contain a reference to that same object.

Arrays can also be sparse. For example, assigning a value to items[5] on an empty array makes its length 6, but indexes 0 through 4 can remain missing. A missing position is not the same as an existing element whose value is undefined. Some array methods skip missing positions, so sparse arrays can produce surprising behavior and are usually best avoided in application code.

Nested arrays are simply arrays that contain other arrays. They are useful for data such as rows and columns or groups of values.

JavaScript always passes arguments by value. For an array, that copied value is a reference to the array object. Assignment between variables works the same way. Mutating the shared array is visible through every reference to that object, but reassigning one variable does not reassign another variable.

Use an array when order and numeric indexes matter. Use a plain object for named properties, Set for unique values, Map for keyed entries, and a typed array when you need a fixed numeric element type and binary data.

This example creates an ordered array, reads and writes indexes, adds a value, creates a filtered array, demonstrates a nested array, and shows reference behavior. The alias variable receives a copy of the reference value, so pushing through alias changes the same array referenced by scores. The array created with slice is a different outer array. Slice makes only a shallow copy, so if the elements were objects, those object references would still be shared between the two arrays.

A common mistake is thinking an array is completely separate from objects. In JavaScript, an array is an object with special indexed behavior and a length property. Another mistake is assuming assignment copies all array elements. Assignment copies the reference value, so both variables can refer to the same array object. Developers also sometimes confuse a missing position in a sparse array with an existing element whose value is undefined. Another mistake is expecting every method to leave the original array unchanged. Methods such as push, splice, sort, and reverse mutate it. Finally, a shallow copy does not deeply copy objects stored inside the array.

Start by saying that an array is an ordered, zero indexed object for a sequence of values. Then explain length, index access, mutation, and reference behavior. Mention one mutating method and one method that returns a new array. Finish by briefly comparing Array with Object, Set, Map, and typed arrays.

A JavaScript function is a callable object that groups statements so I can run them when needed. It can accept parameters and return a value. I can create one with a function declaration, a function expression, or an arrow function. Creating a function does not run its body. I call it separately when I want the code to execute. Functions can also be stored in variables or objects, passed to other functions, returned from functions, and used as callbacks.

A JavaScript function is a reusable piece of work that runs when it is called. You can give it input values, let it do some work, and receive a result back. This helps avoid repeating the same instructions in many places. JavaScript also lets you store a function in a variable or object, give it to other code, or return it as a result. A function can also remember values from the place where it was created. Creating a function and running that function are separate actions.

1. Would you like me to compare function declarations, function expressions, and arrow functions?
2. Should I also explain closures and callbacks with a small example?

A JavaScript function is a callable object. It contains code that executes when the function is called. A function can receive parameters. Arguments are the actual values supplied during a call. A function can return a value with the return statement. If execution finishes without returning another value, the call produces undefined.

A function declaration uses the function keyword with a name. A function expression creates a function as a value, often stored in a variable. An arrow function is another function form with shorter syntax. An arrow function does not create its own this binding. It uses this from the surrounding lexical scope. Arrow functions also cannot be used as constructors with new.

Creating a function and calling it are different actions. Creating the function makes the callable value available. A call such as add(2, 3) executes its body.

Variables declared inside a function are normally local to that function. A nested function can access bindings from its surrounding lexical scopes. If that nested function is later used elsewhere, it can continue to access those bindings. This behavior is called a closure.

Functions are first class values in JavaScript. They can be assigned to variables, stored in object properties, passed as arguments, and returned from other functions. A function used through an object property can act as a method. A function passed to other code so that code can call it is commonly called a callback.

Functions are used for event handling, calculations, validation, data transformation, reusable logic, and callbacks. Closures are useful for keeping related state. However, a closure can keep referenced data reachable in memory for as long as the closure itself remains reachable.

The example creates addition, subtraction, and multiplication functions using three common function forms. It calls them separately to show that creating a function does not execute its body. The makeCounter function demonstrates a closure because the returned function continues to access the count binding from its surrounding lexical scope. The calculator object shows a function used as a method. The runOperation function demonstrates first class function behavior by receiving another function as a callback and calling it.

A common mistake is thinking that creating a function also runs it. It does not. Another mistake is forgetting that a function with no explicit returned value produces undefined. Developers may also assume arrow functions create their own this binding, but they use this from the surrounding lexical scope and cannot be called with new. Another mistake is confusing parameters in a function definition with arguments supplied during a call. Closures are sometimes described as copying surrounding values, but they actually retain access to lexical bindings. Passing a function as a callback is also different from calling that function immediately.

Start by saying that a JavaScript function is a callable object that can accept parameters and return a value. Then clearly separate function creation from function calls. Briefly compare declarations, expressions, and arrow functions. Finish by mentioning local scope, closures, methods, callbacks, and first class function behavior.

Scope tells JavaScript where a binding can be found and used. JavaScript uses lexical scope, so it looks in the current scope first and then in surrounding scopes. Common kinds are global, module, function, and block scope. let and const follow block scope, while var follows function scope inside a function. Closures can keep access to bindings from outer scopes even after an outer function has returned.

Scope is about where a name is available in a program. Imagine putting labels inside boxes. A label inside one box may be visible only there, while a label outside may also be visible inside smaller boxes. JavaScript uses the way the code is written to decide which name is found. This matters because two places can use the same name without referring to the same value. Understanding these boundaries helps developers avoid reading or changing the wrong value and makes larger programs easier to understand.

1. Would you like me to show the difference between var, let, and const with an example?
2. Should I also explain how closures keep access to outer bindings?

Scope is the region of a JavaScript program where a binding can be found and used. A binding connects a name, such as count, with a value.

JavaScript has several important kinds of scope. Code running as a classic script can use global scope. An ES module has its own module scope, so its top level declarations do not automatically become properties of the global object. A function creates function scope. A block, such as an if body or loop body, creates block scope for let, const, class, and some other declarations.

JavaScript uses lexical scope. This means scope relationships are determined by where code is written. When JavaScript needs a name, it checks the current scope first. If the binding is not there, it checks each surrounding lexical scope until it finds the binding or reaches the outer end. If no binding exists, reading that name normally causes a ReferenceError.

An inner scope can declare a name that is also declared outside. The inner binding then hides the outer binding while code is inside that scope. This is called shadowing.

var behaves differently from let and const. Inside a function, var belongs to the containing function rather than to an ordinary block. let and const belong to their containing block. let and const also cannot be accessed before their declarations have been initialized.

Closures are closely connected to lexical scope. A function keeps access to the lexical environment where it was created. An inner function can therefore keep using an outer binding after the outer function returns. This is useful for callbacks and private state, but retained bindings can also keep referenced data in memory for as long as the closure remains reachable.

Scope is different from object property lookup and from this. A property is found through an object and possibly its prototype chain. The value of this follows function call rules, while an arrow function gets this from its surrounding context. Neither behavior is lexical variable lookup.

The example starts with an outer message binding. A nested block declares another message binding, so the inner binding shadows the outer one only inside that block. The example also shows that var declared inside an if block is still available throughout its containing function, while let is limited to the block. Finally, makeCounter returns a function that forms a closure and keeps access to the count binding created by makeCounter.

A common mistake is thinking var has block scope like let and const. Another is assuming an inner declaration changes an outer binding when it actually shadows it. Developers may also confuse lexical scope with object property lookup or with the value of this. Another mistake is believing a closure copies an outer value once. A closure keeps access to the relevant outer binding, so later changes to that binding can be observed. It is also incorrect to assume every top level declaration becomes a property of the browser global object, especially inside ES modules.

Start by saying that scope controls where a binding can be found. Then explain lexical lookup from the current scope through surrounding scopes. Name global, module, function, and block scope. Finish with shadowing, the var versus let and const difference, and the connection between lexical scope and closures.

A browser event is an object that reports something that happened in the browser, such as a click, keyboard input, a document lifecycle change, or completion reported by a browser API. JavaScript can register a listener and receive the event object when the event is dispatched. For DOM events, the browser can process the event through capture, target, and bubble phases. Bubbling also makes event delegation possible, where one parent listener can handle events from many child elements.

A browser event is an object that tells JavaScript that something happened. A person may click a button, press a key, or use a form. The browser can also report page lifecycle changes, and some browser APIs report completed work with events. JavaScript can listen for an event and run a function when it happens. The event object gives useful information about what happened and where it started. This lets a page react when something occurs instead of repeatedly checking whether something has changed.

1. Should I focus mainly on DOM events and event propagation?
2. Would you like me to include event delegation in the example?

A browser event is an object that describes something that happened. For a DOM event, the object referenced by event.target is where the event was dispatched. JavaScript can register a listener with addEventListener so a function runs when that event reaches the listener.

A DOM event can travel through three phases when propagation applies. During capture, it travels through ancestors toward the target. At the target phase, listeners on the target can run. If the event bubbles, it then travels back through ancestors during the bubble phase. Most listeners registered with addEventListener use the bubble behavior unless capture is requested.

The event object contains information about the event. event.target identifies the original target. event.currentTarget identifies the object whose listener is currently running. These values can be different when a child event reaches a parent listener.

Some events have a default browser action. For example, clicking a normal link usually starts navigation. Calling preventDefault prevents that action when the event is cancelable. Calling stopPropagation prevents the event from continuing to later objects in its propagation path. Calling stopImmediatePropagation also prevents later listeners on the same object from running. These methods do not mean the same thing as preventDefault.

Event delegation uses propagation, usually bubbling. Instead of adding a listener to every child, a parent can have one listener and inspect event.target to identify the child involved. This is useful for lists whose items can change over time. It can reduce listener registrations, but the handler must carefully validate the target.

The example creates one container with two links and registers one click listener on the container. A click on either link bubbles to the container. The listener checks that the original target is an Element, uses closest to find the relevant link, confirms that the link belongs to the container, and calls preventDefault so the browser does not perform normal link navigation. It then displays the selected link text. One parent listener therefore handles both links and demonstrates event delegation.

A common mistake is thinking event.target and event.currentTarget always refer to the same object. They can differ when an event reaches a listener on an ancestor. Another mistake is assuming preventDefault stops propagation. It only prevents a default browser action when the event is cancelable. Developers also sometimes use stopPropagation without a clear need, which can prevent other listeners from receiving the event. With delegation, another mistake is assuming every event bubbles or failing to verify that the discovered child actually belongs to the intended container.

Start by defining an event as an object that reports something that happened. Then explain the target and listener, describe capture, target, and bubble in that order, and clearly separate preventDefault from propagation control. Finish with a small event delegation example because it shows why bubbling is useful in real frontend code.