Svelte.js Interview Questions and Answers for internship

0
Svelte.js Internship Interview Questions and Answers

  1. What is Svelte.js?

    • Answer: Svelte is a radical new approach to building user interfaces. Instead of using a virtual DOM like React or Vue, Svelte compiles your code into small, highly optimized vanilla JavaScript that updates the DOM directly. This results in smaller bundle sizes, improved performance, and a simpler development experience.

  2. How does Svelte's reactivity system work?

    • Answer: Svelte uses a compile-time reactivity system. During compilation, Svelte analyzes your code and generates code that only updates the parts of the DOM that have changed. This is different from runtime reactivity systems, which constantly check for changes, leading to improved performance.

  3. Explain the concept of "stores" in Svelte.

    • Answer: Stores are a mechanism for managing and sharing state in Svelte applications. They can be writable, readable, or both, and allow components to subscribe to changes in the store's value. Svelte provides built-in store types like `writable`, `readable`, and `derived` stores, each with its own characteristics.

  4. What are the advantages of using Svelte over other frameworks like React or Vue?

    • Answer: Advantages include smaller bundle sizes, improved performance due to its compile-time reactivity, simpler code (less boilerplate), and a more intuitive learning curve for some developers. However, the smaller ecosystem and community compared to React or Vue are potential drawbacks.

  5. What are Svelte actions? Provide an example.

    • Answer: Svelte actions are functions that can be attached to DOM elements to modify their behavior. For example, you could create an action to add a tooltip to an element or to implement drag-and-drop functionality. They are called with `use: myAction`.

  6. How do you handle events in Svelte?

    • Answer: Event handling in Svelte is straightforward. You use standard HTML event attributes (e.g., `onclick`, `oninput`, `onsubmit`) directly in your components. The event object is automatically passed as an argument to the event handler function.

  7. Explain the difference between `let`, `$:`, and `{#each}` directives in Svelte.

    • Answer: `let` is used to declare variables within loops or other constructs. `$:` creates reactive declarations – changes to the right-hand side trigger a re-render. `{#each}` is used to iterate over arrays or other iterable objects.

  8. What are Svelte components and how are they structured?

    • Answer: Svelte components are reusable pieces of UI. They are typically defined as a `