What is a closure? Give a practical use for one.

A closure is a function together with the scope it was created in. The function keeps access to the variables of that scope even after the outer function has returned. function createCounter() { let count = 0; // private: nothing outside can touch it return { increment: () => ++count, value: () => count, }; } const counter = createCounter(); counter.increment(); counter.value(); // 1 Practical uses: private state as above, function factories, and utilities such as debounce and memoize, which keep a timer or a cache between calls. The cost to mention: a closure keeps its captured variables alive for as long as the function is reachable, so a long-lived callback holding a large object is a memory leak.

How does prototypal inheritance work, and what does the class syntax add?

Every object has a hidden link to another object, its prototype. When you read a property that the object does not have, the engine looks on the prototype, then on that object's prototype, and so on until it finds the property or reaches null. A function's prototype property becomes the prototype of the objects it creates with new. That is how all arrays share one copy of map. class is mostly syntax over the same mechanism: methods go on the prototype, extends links the chain and super calls the parent. It does add a few real things: #private fields, static blocks, and the rule that a class cannot be called without new. Object.create(proto) creates an object with a chosen prototype directly, and Object.getPrototypeOf(obj) reads it.

How is the value of this decided? How do call, apply and bind differ?

this depends on how a function is called, not where it is written: - Called as a method (user.greet()): the object before the dot. - Called plainly (greet()): undefined in strict mode and in modules, the global object otherwise. - Called with new: the newly created object. - Called with call, apply or bind: whatever you pass. - Arrow functions have no this of their own. They use the one from the surrounding scope, and it cannot be rebound. call invokes the function with arguments listed one by one, apply takes them as an array, and bind does not invoke anything: it returns a new function with this (and optionally leading arguments) fixed. The classic bug is passing user.greet as a callback. The function is then called plainly and loses its this.

What is event delegation? Explain bubbling and capturing.

A DOM event travels in three phases: down from window to the target (capturing), at the target, then back up to window (bubbling). Listeners run in the bubbling phase unless you pass { capture: true }. Delegation uses bubbling: you put one listener on a common ancestor and work out which child was clicked. list.addEventListener('click', (event) => { const item = event.target.closest('li[data-id]'); if (!item || !list.contains(item)) return; select(item.dataset.id); }); Benefits: one listener instead of hundreds, and it keeps working for items added later. Details that come up: stopPropagation stops the event travelling, preventDefault cancels the browser's default action, and a few events such as focus and blur do not bubble (use focusin and focusout).

How do ES modules differ from CommonJS, and why does tree shaking depend on ES modules?

ES module import and export statements are static. They sit at the top level and are resolved before any code runs, so a bundler can see exactly which exports are used and drop the rest. That removal is tree shaking. CommonJS require is an ordinary function call. It can run inside an if, with a computed path, and it returns a plain object, so the bundler cannot be sure what is unused. Other differences: ES module imports are live bindings to the exported variable, ES modules load asynchronously and support top-level await, and they always run in strict mode. Tree shaking also needs the library to be side-effect free, which packages declare with "sideEffects": false in package.json. Dynamic import() is the tool for code splitting: it returns a promise and creates a separate chunk.

Salesforce Frontend Interview Questions

Web standards, JavaScript depth and accessibility.

Salesforce's UI platform is Lightning Web Components, a framework built directly on web standards: custom elements, shadow DOM, templates and ES modules. Frontend interviews therefore lean towards standard JavaScript and the browser platform more than towards React-specific APIs.

Candidates commonly describe a coding assessment, technical rounds on JavaScript and problem solving, a design discussion and a hiring manager round. Accessibility comes up often, since Salesforce sells to large enterprises and governments.

Questions: 15, 5 with free answers
Interview rounds: 4
Last reviewed: October 2026

Salesforce frontend interview process

The usual shape of the loop. A guide to what to prepare, not a promise of what you will get.

1
Online assessment
Coding problems, usually data structures and algorithms.
2
Technical rounds
JavaScript fundamentals, problem solving, and the DOM and event model.
3
Frontend or design round
Component design, the web platform and how you would structure a feature.
4
Hiring manager
Past work, collaboration and values.

What interviewers tend to look for

Core JavaScript: prototypes, modules, events and this.
The web platform itself, including the ideas behind web components.
Accessibility in every component you describe.
Security, since the products hold customer data.

Your Salesforce mock interview

15 questions. Type an answer under each one and an AI reviewer scores it and tells you what you missed. Stuck on one? Ask for a hint. A free account gets 3 AI replies a day.

Your mock interview

0 of 15 answered

Answer a question and your score shows up here.

JavaScript

6 questions

Question 1 of 15JavaScript
Salesforce interviewer
What is a closure? Give a practical use for one.
Your answer to question 1
Model answer
A closure is a function together with the scope it was created in. The function keeps access to the variables of that scope even after the outer function has returned.
```
function createCounter() {
  let count = 0; // private: nothing outside can touch it
  return {
    increment: () => ++count,
    value: () => count,
  };
}

const counter = createCounter();
counter.increment();
counter.value(); // 1
```
Practical uses: private state as above, function factories, and utilities such as debounce and memoize, which keep a timer or a cache between calls.
The cost to mention: a closure keeps its captured variables alive for as long as the function is reachable, so a long-lived callback holding a large object is a memory leak.
Question 2 of 15JavaScript
Salesforce interviewer
How does prototypal inheritance work, and what does the class syntax add?
Your answer to question 2
Question 3 of 15JavaScript
Salesforce interviewer
How is the value of this decided? How do call, apply and bind differ?
Your answer to question 3
Model answer
this depends on how a function is called, not where it is written:
- Called as a method (user.greet()): the object before the dot.
- Called plainly (greet()): undefined in strict mode and in modules, the global object otherwise.
- Called with new: the newly created object.
- Called with call, apply or bind: whatever you pass.
- Arrow functions have no this of their own. They use the one from the surrounding scope, and it cannot be rebound.
call invokes the function with arguments listed one by one, apply takes them as an array, and bind does not invoke anything: it returns a new function with this (and optionally leading arguments) fixed.
The classic bug is passing user.greet as a callback. The function is then called plainly and loses its this.
Question 4 of 15JavaScript
Salesforce interviewer
What is event delegation? Explain bubbling and capturing.
Your answer to question 4
Model answer
A DOM event travels in three phases: down from window to the target (capturing), at the target, then back up to window (bubbling). Listeners run in the bubbling phase unless you pass { capture: true }.
Delegation uses bubbling: you put one listener on a common ancestor and work out which child was clicked.
```
list.addEventListener('click', (event) => {
  const item = event.target.closest('li[data-id]');
  if (!item || !list.contains(item)) return;
  select(item.dataset.id);
});
```
Benefits: one listener instead of hundreds, and it keeps working for items added later.
Details that come up: stopPropagation stops the event travelling, preventDefault cancels the browser's default action, and a few events such as focus and blur do not bubble (use focusin and focusout).
Question 5 of 15JavaScript
Salesforce interviewer
How do ES modules differ from CommonJS, and why does tree shaking depend on ES modules?
Your answer to question 5
Question 6 of 15JavaScript
Salesforce interviewer
What is the difference between a shallow and a deep copy? How would you deep clone an object?
Your answer to question 6
Model answer
A shallow copy ({ ...obj }, Object.assign, arr.slice()) copies one level. Nested objects are still shared with the original.
structuredClone(value) is the built-in deep clone. It handles dates, maps, sets, typed arrays and circular references. It throws on functions and DOM nodes and does not keep the prototype chain. JSON.parse(JSON.stringify(value)) is weaker: it drops undefined and functions, turns dates into strings and fails on cycles.
Interviewers usually want it written by hand:
```
function deepClone(value, seen = new WeakMap()) {
  if (value === null || typeof value !== 'object') return value;
  if (seen.has(value)) return seen.get(value); // circular reference

  const copy = Array.isArray(value) ? [] : {};
  seen.set(value, copy);

  for (const key of Reflect.ownKeys(value)) {
    copy[key] = deepClone(value[key], seen);
  }
  return copy;
}
```
Say what it does not cover (Date, Map, Set, class instances) and how you would add each one.
Practise this in the editor: Deep Clone Object

TypeScript

2 questions

Question 7 of 15TypeScript
Salesforce interviewer
Explain any, unknown and never.
Your answer to question 7
Model answer
any switches type checking off for a value, and it spreads: anything derived from it is also any.
unknown also accepts any value, but you cannot use it until you narrow it. It is the right type for parsed JSON, a caught error and anything from outside your program.
never is the type with no values. A function that always throws returns never, and a union that has been fully narrowed is never. That gives you an exhaustiveness check:
```
type Shape = { kind: 'circle'; r: number } | { kind: 'square'; side: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.r ** 2;
    case 'square':
      return shape.side ** 2;
    default: {
      // Add a new Shape and forget a case: this line stops compiling.
      const unreachable: never = shape;
      throw new Error('Unhandled shape: ' + JSON.stringify(unreachable));
    }
  }
}
```
Question 8 of 15TypeScript
Salesforce interviewer
What does it mean that TypeScript is structurally typed?
Your answer to question 8
Model answer
TypeScript compares types by their shape, not by their name. A value is assignable to a type if it has at least the required properties with compatible types.
```
interface Point {
  x: number;
  y: number;
}

const marker = { x: 1, y: 2, label: 'home' };
const point: Point = marker; // fine: it has x and y

const direct: Point = { x: 1, y: 2, label: 'home' }; // error
```
The second assignment fails because of excess property checking, a special rule for object literals written directly where a type is expected. It exists to catch typos.
One consequence: two types with the same shape are interchangeable, so a UserId and an OrderId that are both string can be mixed up. Branded types fix that:
```
type UserId = string & { readonly __brand: 'UserId' };
type OrderId = string & { readonly __brand: 'OrderId' };
```

React

1 question

Question 9 of 15React
Salesforce interviewer
What is useRef for? How do you pass a ref to a child component?
Your answer to question 9
Model answer
useRef returns an object with a current property that stays the same between renders. Changing current does not cause a re-render. Two uses:
- Reaching a DOM node, to focus it, measure it or scroll to it.
- Keeping a value that should survive renders but is not shown: a timer id, the previous value of a prop, the latest version of a callback.
Do not read or write current while rendering. Use it in effects and event handlers.
```
function TextField({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

function Form() {
  const inputRef = useRef(null);
  return (
    <>
      <TextField ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>Edit</button>
    </>
  );
}
```
In React 19, ref is an ordinary prop on function components, as above. In React 18 and earlier the child has to be wrapped in forwardRef. useImperativeHandle lets a component expose a small API, such as open() and close(), instead of its DOM node.

CSS

2 questions

Question 10 of 15CSS
Salesforce interviewer
What are CSS custom properties, and how would you build a dark theme with them?
Your answer to question 10
Model answer
A custom property is a value you name with two dashes and read with var(). Unlike a Sass variable, it exists at runtime: it cascades, it is inherited, and it can be changed by a class, a media query or JavaScript without rebuilding anything.
```
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --accent: #4f46e5;
}

[data-theme='dark'] {
  --bg: #0b1020;
  --text: #e2e8f0;
  --accent: #818cf8;
}

body {
  background: var(--bg);
  color: var(--text);
}
```
Components only use the variables, so switching the theme means changing one attribute on the root element.
- Default to the system setting with @media (prefers-color-scheme: dark) and let the user override it.
- Save the choice, and apply it with a small inline script in the head before the page paints. Otherwise the wrong theme flashes on load.
- Set color-scheme: light dark so that form controls and scrollbars match.
- var(--gap, 8px) takes a fallback, and element.style.setProperty('--x', value) sets one from JavaScript.
Question 11 of 15CSS
Salesforce interviewer
What is the difference between a pseudo-class and a pseudo-element?
Your answer to question 11
Model answer
A pseudo-class, written with one colon, selects an element in a particular state or position: :hover, :focus-visible, :disabled, :checked, :first-child, :nth-child(2n), :not(.active).
A pseudo-element, written with two colons, styles a part of an element or a box that is not in the HTML: ::before, ::after, ::placeholder, ::selection, ::marker, ::first-line.
```
/* Pseudo-class: a state */
.field:focus-visible {
  outline: 2px solid var(--accent);
}

/* Pseudo-element: a generated box. It needs content. */
.required::after {
  content: ' *';
  color: crimson;
}

/* :has() selects a parent by what it contains */
.card:has(img) {
  padding-top: 0;
}
```
Two that are worth knowing well: :focus-visible shows a focus ring for keyboard users without showing it on every mouse click, and :has() lets a parent or an earlier sibling be styled by what follows it, which used to need JavaScript.

Browser, performance and system design

3 questions

Question 12 of 15Browser, performance and system design
Salesforce interviewer
How do you make a web page accessible?
Your answer to question 12
Model answer
- Use the right HTML element. A button is focusable, works with Enter and Space and is announced as a button. A div with a click handler does none of that. The same goes for nav, main, headings in order, and a label for every input.
- Keyboard. Everything must be reachable and usable without a mouse, in a sensible order, with a visible focus ring. When a dialog opens, move focus into it, keep it there, and return it to the trigger on close.
- Text alternatives. Images need alt text, or an empty alt if they are decorative. Icon-only buttons need an accessible name.
- Colour. Body text needs a contrast ratio of at least 4.5 to 1, and colour should never be the only signal.
- ARIA, when HTML is not enough. aria-expanded on a toggle, aria-live for updates that appear without a page load, roles for custom widgets. No ARIA is better than wrong ARIA.
- Motion and zoom. Respect prefers-reduced-motion, and make sure the page works at 200% zoom.
For testing: use the page with the keyboard only, run an automated checker such as axe or Lighthouse, and try a screen reader on the main flows. Automated tools catch only part of the problems.
Question 13 of 15Browser, performance and system design
Salesforce interviewer
What are XSS and CSRF, and how do you prevent them?
Your answer to question 13
Model answer
XSS (cross-site scripting): an attacker gets their script to run in your page, with your user's access. It can be stored (saved in a comment and shown to others), reflected (bounced back from a URL parameter) or DOM-based (your own JavaScript writes untrusted text into the page).
- Escape everything you render. React does this by default; dangerouslySetInnerHTML and innerHTML are the holes.
- When you have to render user-supplied HTML, sanitise it with a library such as DOMPurify.
- Add a Content Security Policy that blocks inline scripts and unknown sources.
- Keep session cookies HttpOnly to limit the damage.
- Do not put user input into href or src without checking the scheme, because javascript: URLs execute.
CSRF (cross-site request forgery): another site makes the user's browser send a request to yours, and the browser attaches their cookies.
- Set SameSite on cookies.
- Require a CSRF token, or check the Origin header, on requests that change data.
- Never change data in response to a GET.
Also worth a sentence: frame-ancestors in the CSP stops clickjacking, and anything in the frontend bundle is public, so API secrets cannot live there.
Question 14 of 15Browser, performance and system design
Salesforce interviewer
What is CORS, and what is a preflight request?
Your answer to question 14
Model answer
Browsers enforce the same-origin policy: a script on one origin (scheme, host and port) cannot read a response from another. CORS is how a server opts in to being read by other origins, with response headers such as Access-Control-Allow-Origin.
Simple requests, such as a plain GET or a form-style POST, are sent directly, and the browser hides the response if the header is missing.
Other requests are preflighted. That includes any with a JSON content type, a custom header such as Authorization, or a method such as PUT or DELETE. The browser first sends an OPTIONS request asking whether the real one is allowed:
```
OPTIONS /api/orders
Origin: https://app.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: content-type, authorization

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, PUT
Access-Control-Allow-Headers: content-type, authorization
Access-Control-Max-Age: 600
```
- To send cookies, the request needs credentials: 'include', and the server must answer with Access-Control-Allow-Credentials: true and a specific origin. A wildcard is not allowed with credentials.
- CORS is enforced by browsers only. It does not protect an API from other clients.
- A CORS error is fixed on the server, or by proxying through your own origin. Nothing in the frontend code can bypass it.

Machine coding

1 question

Question 15 of 15Machine coding

Salesforce interviewer

Build an accordion, or a tabs component.

Model answer

Accordion. The state is which panel ids are open: one id for a single-open accordion, a set for multi-open. Each header is a real button.

function Accordion({ items, allowMultiple = false }) {
  const [openIds, setOpenIds] = useState(new Set());

  const toggle = (id) =>
    setOpenIds((current) => {
      const next = new Set(allowMultiple ? current : []);
      if (current.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  return items.map((item) => (
    <section key={item.id}>
      <h3>
        <button
          aria-expanded={openIds.has(item.id)}
          aria-controls={'panel-' + item.id}
          onClick={() => toggle(item.id)}
        >
          {item.title}
        </button>
      </h3>
      <div id={'panel-' + item.id} hidden={!openIds.has(item.id)}>
        {item.content}
      </div>
    </section>
  ));
}

Tabs. The state is the active tab id. Use role="tablist", role="tab" with aria-selected, and role="tabpanel". Left and right arrows move between tabs, and only the active tab is in the Tab order (tabIndex 0 for it, -1 for the rest).

Follow-ups: animate the panel height, make the component controllable from outside, and expose a compound API (Tabs, Tabs.List, Tabs.Panel).

Practise this in the editor: Accordion

Practise for Salesforce

Reading answers is the easy half. These problems run in the browser against real tests.

Salesforce Frontend Interview Questions

Salesforce frontend interview process

Online assessment

Technical rounds

Frontend or design round

Hiring manager

What interviewers tend to look for

Your Salesforce mock interview

Your mock interview

JavaScript

What is a closure? Give a practical use for one.

How does prototypal inheritance work, and what does the `class` syntax add?

How is the value of `this` decided? How do call, apply and bind differ?

What is event delegation? Explain bubbling and capturing.

How do ES modules differ from CommonJS, and why does tree shaking depend on ES modules?

What is the difference between a shallow and a deep copy? How would you deep clone an object?

TypeScript

Explain any, unknown and never.

What does it mean that TypeScript is structurally typed?

React

What is useRef for? How do you pass a ref to a child component?

CSS

What are CSS custom properties, and how would you build a dark theme with them?

What is the difference between a pseudo-class and a pseudo-element?

Browser, performance and system design

What are XSS and CSRF, and how do you prevent them?

What is CORS, and what is a preflight request?

Machine coding

Build an accordion, or a tabs component.

Practise for Salesforce

Other company guides

What interviewers tend to look for

Your Salesforce mock interview

Your mock interview

JavaScript

What is a closure? Give a practical use for one.

How does prototypal inheritance work, and what does the class syntax add?

How is the value of this decided? How do call, apply and bind differ?

What is event delegation? Explain bubbling and capturing.

How do ES modules differ from CommonJS, and why does tree shaking depend on ES modules?

What is the difference between a shallow and a deep copy? How would you deep clone an object?

TypeScript

Explain any, unknown and never.

What does it mean that TypeScript is structurally typed?

React

What is useRef for? How do you pass a ref to a child component?

CSS

What are CSS custom properties, and how would you build a dark theme with them?

What is the difference between a pseudo-class and a pseudo-element?

Browser, performance and system design

How do you make a web page accessible?

What are XSS and CSRF, and how do you prevent them?

What is CORS, and what is a preflight request?

Machine coding

Build an accordion, or a tabs component.

Practise for Salesforce

Other company guides

How does prototypal inheritance work, and what does the `class` syntax add?

How is the value of `this` decided? How do call, apply and bind differ?