Ember Interview Questions and Answers

1. What is Ember.js?

• Ember.js is an open-source JavaScript framework used for building ambitious web applications. It follows a "Convention over Configuration" philosophy and provides a comprehensive set of tools and patterns for building scalable single-page applications (SPAs).

2. What is Ember CLI?

• Ember CLI is the command-line interface for Ember.js projects. It's a powerful tool used for creating new projects, generating code (routes, components, services, etc.), running tests, building for production, and managing dependencies (addons).

3. What is the core philosophy of Ember.js ("Convention over Configuration")?

• This philosophy means that Ember provides strong opinions and default structures for how applications should be built. By adhering to these conventions, developers can build applications faster and with less boilerplate code, as the framework handles many common tasks automatically.

4. What are the key features of Ember.js?

• Ember CLI for project management.
• Robust Routing for managing application states and URLs.
• Ember Data for interacting with APIs and managing data.
• Components for building reusable UI elements.
• Services for shared state and functionality.
• Built-in testing framework.
• Strong focus on backward compatibility and stability.

5. Explain the MVC (Model-View-Controller) pattern in the context of Ember.js. (Note: Ember's interpretation has evolved, especially with Octane).

• Historically, Ember used MVC.
  • Model: Represents the data (often handled by Ember Data).
  • View: Responsible for rendering the UI (Templates and Components).
  • Controller: Decorates the model and handles user actions (less prominent in modern Ember, actions often handled in Components/Routes).
• Modern Ember emphasizes Components and Routes more, with Services handling shared state.

6. What is the role of the Router in an Ember application?

• The Router maps URLs to application states (routes). It's responsible for transitioning between different parts of the application and loading the necessary data.

7. How do you define routes in Ember?

• Routes are defined in the app/router.js file using the this.route() method within the Router.map() function.

8. What is a dynamic segment in a route? How do you define one?

• A dynamic segment is a part of the URL that represents a piece of data (e.g., an item ID). It's defined using a colon followed by the segment name (e.g., '/posts/:post_id'). Ember automatically attempts to load a model based on dynamic segments.

9. What are nested routes?

• Nested routes allow you to represent hierarchical relationships in your application's UI and URLs. They are defined by nesting this.route() calls within another this.route() block in the router.

10. What is a Route handler in Ember?

• A Route handler (defined in files like app/routes/my-route.js) is responsible for loading the data for a route, setting up the controller (historically), and managing transitions. Key methods include model(), afterModel(), setupController() (older), activate(), deactivate().

11. What is the model() hook in a Route handler?

• The model() hook is the primary place to fetch data for a route. It should return a Promise that resolves to the model data. Ember waits for this Promise to resolve before rendering the route's template.

12. What is the purpose of the afterModel() hook?

• The afterModel() hook is called after the model() hook has resolved successfully. It's often used for performing additional data loading or making transitions based on the loaded model.

13. What is the purpose of the setupController() hook? (Older Ember)

• In older Ember, setupController() was used to set the model on the associated controller and perform any necessary setup for the controller. In modern Ember, with Octane, controllers are less central, and setup often happens in the route or component.

14. What is the purpose of the activate() and deactivate() hooks?

• activate() is called when a route becomes active (after the model is loaded and the controller is set up). Useful for setting up event listeners or side effects.
• deactivate() is called when a route is exited. Useful for tearing down event listeners or cleaning up resources.

15. What are Ember Templates? What templating language does Ember use by default?

• Ember Templates are used to define the structure and presentation of the UI. Ember uses Handlebars as its default templating language.

16. How do you display data in an Ember template?

• You display data using Handlebars expressions within double curly braces ({{property}}).

17. What is a Handlebars Helper? Provide an example.

• Handlebars helpers are functions that can be used within templates to perform logic or format data. Examples include built-in helpers like {{if}}, {{each}}, {{log}}, or custom helpers you define.

18. What is the <LinkTo> component?

• <LinkTo> is the standard way to create links between routes in Ember. It's a component that generates an <a> tag and handles route transitions automatically.

19. What are Components in Ember?

• Components are the primary building blocks for UI in modern Ember. They are reusable, isolated units of UI with their own template and JavaScript class.

20. How do you generate a Component using Ember CLI?

• ember generate component component-name

21. Explain the files associated with a Component.

• app/components/component-name.hbs: The Handlebars template for the component.
• app/components/component-name.js: The JavaScript class for the component, containing properties, actions, and lifecycle hooks.

22. How do you pass data to a Component?

• You pass data to a component using arguments, prefixed with the @ symbol (e.g., ). Inside the component class or template, you access it as @userName.

23. What are Component Arguments vs. Properties?

• Arguments: Data passed *into* a component from its parent using @. They are typically considered external inputs.
• Properties: Data defined *within* the component class. They can be internal state or derived values.

24. What are Component Lifecycle Hooks? Provide examples. (Modern Ember)

• Lifecycle hooks are methods that are called at specific points during a component's lifetime. Examples include:
  • constructor(): Called when the component instance is created.
  • <template>: The component's template is rendered.
  • did-render: Called after the component's template has been rendered and the DOM is updated.
  • willDestroy(): Called just before the component is destroyed.

25. What is {{yield}} used for in a Component?

• {{yield}} is used in a component's template to indicate where the content passed in the block form of the component should be rendered.

26. What is the difference between a Block and Non-block Component?

• Block Component: Used with a closing tag and can wrap content (e.g., Some content). The wrapped content is rendered where {{yield}} is placed in the component's template.
• Non-block Component: Used with a self-closing tag and does not wrap content (e.g., ).

27. What is Ember Data?

• Ember Data is Ember's official data persistence library. It provides a structured way to interact with APIs, manage data locally in a "store," handle relationships between models, and track changes.

28. What is the role of the Store in Ember Data?

• The Store is the central repository for all the data in your application. It's responsible for fetching, creating, updating, and deleting records, and for managing the client-side cache of data.

29. How do you fetch a single record using Ember Data?

• this.store.findRecord('model-name', recordId). This returns a Promise that resolves to the record.

30. How do you fetch all records of a specific type?

• this.store.findAll('model-name'). This returns a Promise that resolves to a DS.RecordArray (or equivalent) containing all records of that type.

31. How do you fetch records with query parameters?

• this.store.query('model-name', { param1: value1, param2: value2 }). This sends a GET request with query parameters and returns a Promise that resolves to a DS.RecordArray.

32. What is an Adapter in Ember Data?

• An Adapter is responsible for communicating with the backend API. It translates requests from the Store into HTTP requests and parses responses into a format Ember Data understands. The default adapter is JSONAPIAdapter.

33. What is a Serializer in Ember Data?

• A Serializer is responsible for transforming data between the format received from the API and the format used by Ember Data models. It works closely with the Adapter. The default serializer is JSONAPISerializer.

34. What is the difference between findRecord and queryRecord?

• findRecord('model', id): Fetches a single record by its ID.
• queryRecord('model', params): Fetches a single record based on query parameters. It expects the API to return a single record (or null).

35. What is the difference between findAll and query?

• findAll('model'): Fetches all records of a given type.
• query('model', params): Fetches a collection of records based on query parameters. It expects the API to return an array of records.

36. How do you create a new record in Ember Data?

• this.store.createRecord('model-name', properties). This creates a new record instance in the Store but does not save it to the backend yet.

37. How do you save changes to a record?

• Call the save() method on the record instance (e.g., record.save()). This returns a Promise that resolves when the save operation is complete.

38. How do you delete a record?

• Call the destroyRecord() method on the record instance (e.g., record.destroyRecord()). This deletes the record from the Store and attempts to delete it from the backend. It returns a Promise.

39. What are Computed Properties?

• Computed properties are properties whose value is calculated based on the value of one or more other properties. They are automatically updated when their dependent properties change.

40. How do you define a Computed Property in modern Ember?

• Using a getter function (e.g., get fullName() { return `${this.firstName} ${this.lastName}`; }). Ember's tracking system automatically detects dependencies.

41. What is @tracked?

• @tracked is a decorator used on properties in a class to make them "tracked." When a tracked property is modified, it invalidates any computed properties or templates that depend on it, triggering a re-render.

42. What is the difference between @tracked and older Observers/Computed Properties?

• @tracked is part of Ember's modern, reactive rendering system (Glimmer VM). It provides more fine-grained and efficient updates compared to older Observers and Computed Properties which relied on manual declaration of dependencies.

43. What are Services in Ember?

• Services are long-lived objects that are instantiated once per application and can be injected into routes, components, or other services. They are used for sharing state, fetching data (alternative to Ember Data), or encapsulating application-wide logic.

44. How do you generate a Service?

• ember generate service service-name

45. How do you inject a Service into a Component or Route?

• Using the @service decorator: @service myService;

46. What are Actions in Ember?

• Actions are methods that are triggered in response to user events (like clicks, form submissions) or other events in the application. They are typically defined in components or routes.

47. How do you trigger an Action from a template?

• Using the {{on}} helper (modern Ember): Click Me
• Using the older {{action}} helper: Click Me

48. What is Action Bubbling?

• Action bubbling is the mechanism by which actions are passed up the component hierarchy. If a component doesn't handle an action, it can "bubble" it up to its parent component, then to the route, and so on.

49. What is Ember Concurrency?

• Ember Concurrency is an addon that provides a powerful and easy-to-use way to manage asynchronous operations (like API calls, animations, timers) in Ember applications. It helps prevent race conditions and provides built-in mechanisms for cancellation and task state management.

50. What is a Task in Ember Concurrency?

• A Task is a special kind of computed property (defined with @task) that represents an asynchronous operation. Tasks can be run, canceled, and their state (running, idle) can be observed in templates.

51. What are Task Modifiers (e.g., .restartable(), .drop())?

• Task modifiers are used to control how a task behaves when it's invoked multiple times concurrently.
  • .restartable(): Cancels any currently running instance of the task and starts a new one.
  • .drop(): If the task is already running, new invocations are ignored.
  • .enqueue(): New invocations are added to a queue and run sequentially.
  • .perform(): Allows multiple instances of the task to run concurrently.

52. Why is Testing important in Ember.js?

• Ember has a strong focus on testing and provides a comprehensive testing framework. Testing helps ensure the application is reliable, prevents regressions when changes are made, and makes refactoring safer.

53. What are the different types of tests in Ember?

• Unit Tests: Test individual units of code in isolation (e.g., services, helpers, util functions).
• Integration Tests: Test how multiple units of code interact (e.g., testing a component in isolation with mocked dependencies).
• Acceptance Tests: Test the application from the user's perspective, simulating user interactions and verifying the overall flow and UI.

54. How do you run tests in Ember?

• Using Ember CLI: ember test (runs tests once) or ember test --server (runs tests in the browser and watches for file changes).

55. What is Ember Inspector?

• Ember Inspector is a browser extension (available for Chrome and Firefox) that provides debugging tools for Ember applications. It allows you to inspect routes, data, components, services, and more.

56. What are Ember Addons?

• Ember Addons are reusable packages of code that extend the functionality of an Ember application. They can contain components, services, routes, build configurations, and more. They are installed using Ember CLI.

57. How do you install an Ember Addon?

• ember install addon-name

58. What is Ember Observer?

• Ember Observer is a website that catalogs and rates Ember Addons based on various factors like test coverage, documentation, and community usage. It helps developers find high-quality addons.

59. What is FastBoot?

• FastBoot is an Ember addon that enables server-side rendering (SSR) for Ember applications. This improves initial render performance and SEO by rendering the HTML on the server before sending it to the browser.

60. Why would you use FastBoot?

• To improve the initial loading speed of your application.
• To make your application content crawlable by search engines and accessible to bots that don't execute JavaScript.

61. What are some limitations of FastBoot?

• Code that relies on browser-specific APIs (like window or document) will not work directly in FastBoot's Node.js environment and needs to be handled carefully.
• Addons must be FastBoot compatible.

62. What is the difference between @tracked and @cached?

• @tracked: Makes a property reactive, triggering re-renders when changed.
• @cached: Caches the result of a getter or function. The getter is only re-evaluated when its dependencies change. Useful for expensive computations.

63. What is the purpose of the did-insert modifier? (Modern Ember)

• The did-insert modifier is used in templates to run a function after the element it's attached to has been inserted into the DOM. Useful for interacting with the DOM directly or integrating with third-party libraries.

64. What is the purpose of the will-destroy modifier? (Modern Ember)

• The will-destroy modifier is used in templates to run a function just before the element it's attached to is removed from the DOM. Useful for cleaning up event listeners or external resources.

65. How do you access route parameters in a Route handler?

• In the model() hook, route parameters are passed as the first argument (e.g., model(params)). You access them like params.param_name.

66. How do you access route parameters in a Controller? (Older Ember)

• Route parameters are automatically available as properties on the controller (e.g., this.get('param_name')).

67. How do you access route parameters in a Component?

• Route parameters are typically passed down to components as arguments from the Route's template or the Controller (if used).

68. What is the purpose of the link-to helper? (Older Ember)

• The older {{link-to 'route-name' model}} helper was used for creating links. It's largely replaced by the component in modern Ember.

69. What is the purpose of the transitionTo method?

• transitionTo is a method available on Route handlers and Controllers (older) or injected Router Service (modern) used to programmatically transition to a different route.

70. How do you handle loading states in Ember?

• Ember automatically creates a loading route (e.g., loading.hbs, loading.js) that is displayed while the model() hook of a route is resolving. You can customize these loading routes.

71. How do you handle error states in Ember?

• Ember automatically creates an error route (e.g., error.hbs, error.js) that is displayed if an error occurs during the model() hook of a route. You can customize these error routes.

72. What is the difference between {{#if}} and {{#unless}} helpers?

• {{#if condition}} ... {{/if}} renders the content if the condition is truthy.
• {{#unless condition}} ... {{/unless}} renders the content if the condition is falsy.

73. What is the purpose of the {{each}} helper?

• The {{each}} helper is used to iterate over a collection and render a block of content for each item in the collection.

74. What is the difference between {{each}} and {{each-in}}?

• {{each}} iterates over arrays.
• {{each-in}} iterates over the properties of an object.

75. How do you access the index when iterating with {{each}}?

• {{#each items as |item index|}} ... {{/each}}

76. What is the purpose of the <Input> component?

• <Input> is a built-in component for creating HTML input elements. It supports two-way data binding using the @value argument.

77. How do you perform two-way data binding in Ember?

• Using the <Input> component with the @value argument (e.g., ).
• Using the older {{input value=this.userName}} helper.

78. What is the purpose of the @action decorator?

• The @action decorator is used on methods in a class (component, route, service) to mark them as actions. This makes them easily callable from templates using the {{on}} helper.

79. What is the recommended way to handle asynchronous operations in modern Ember?

• Using Ember Concurrency tasks.

80. How do you manage dependencies between routes and their models?

• Ember's router automatically handles dependencies. If a parent route's model is a collection, nested routes can access the individual items within that collection.

81. What is the purpose of the refresh() method on a Route?

• Calling this.refresh() in a Route handler forces a full reload of the route's model and re-renders the template, even if the route parameters haven't changed.

82. What is the purpose of the replaceWith() method?

• replaceWith() is similar to transitionTo() but replaces the current URL in the browser history instead of pushing a new entry. Useful for scenarios like redirecting after login.

83. What is a Mixin? (Older Ember)

• Mixins were used to share properties and methods between different classes (components, routes, controllers). They are less common in modern Ember with the advent of services and composition.

84. What is the Ember Inspector's Data tab used for?

• The Data tab in Ember Inspector allows you to inspect the records currently loaded in Ember Data's Store, view their attributes and relationships, and even modify them.

85. What is the Ember Inspector's Component tab used for?

• The Component tab allows you to inspect the component tree, view component arguments and properties, and even trigger actions.

86. What is the purpose of the ember-cli-build.js file?

• ember-cli-build.js is where you configure the Ember CLI build pipeline. You can add addons, configure build options, and customize how your application is built.

87. What is the purpose of the config/environment.js file?

• config/environment.js is where you define application-specific configuration settings based on the current environment (development, test, production).

88. How do you access environment configuration settings in your application?

• Configuration settings are available through the @ember/application module (e.g., import config from 'my-app/config/environment';).

89. What is the purpose of the vendor.js file in a built Ember application?

• vendor.js contains all the third-party libraries and dependencies used by your application (e.g., Ember.js itself, Ember Data, addons).

90. What is the purpose of the app.js file in a built Ember application?

• app.js contains your application's code, including routes, components, services, etc.

91. What is the purpose of the tests/test-helper.js file?

• tests/test-helper.js sets up the testing environment for your Ember application.

92. What is the purpose of the tests/index.html file?

• tests/index.html is the HTML page where your tests are run when you use ember test --server.

93. How do you write an Acceptance Test?

• Acceptance tests are written in files like tests/acceptance/my-feature-test.js. They use testing helpers to visit URLs, interact with the UI (click buttons, fill in fields), and assert the expected outcome.

94. What is the purpose of the visit('/') helper in acceptance tests?

• visit('/') navigates the application to the specified URL, simulating a user visiting that page.

95. What is the purpose of the click() helper in acceptance tests?

• click(selector) simulates a user clicking on the element matched by the CSS selector.

96. What is the purpose of the fillIn() helper in acceptance tests?

• fillIn(selector, value) simulates a user typing a value into an input field matched by the CSS selector.

97. What is the purpose of the andThen() helper? (Older Acceptance Tests)

• andThen() was used in older acceptance tests to wait for asynchronous operations to complete before proceeding with assertions. It's largely replaced by the automatic waiting provided by modern testing helpers.

98. What is the purpose of the assert.dom(selector).exists() assertion?

• This assertion (part of ember-qunit or ember-mocha) checks if an element matching the CSS selector exists in the DOM.

99. What is the purpose of the assert.dom(selector).hasText(text) assertion?

• This assertion checks if the element matched by the selector has the specified text content.

100. What is the purpose of the assert.dom(selector).hasClass(className) assertion?

• This assertion checks if the element matched by the selector has the specified CSS class.

101. What is the purpose of the assert.equal(actual, expected) assertion?

• This is a basic QUnit assertion that checks if two values are equal.

102. What is the purpose of the assert.strictEqual(actual, expected) assertion?

• This is a basic QUnit assertion that checks if two values are strictly equal (value and type).

103. What is the purpose of the assert.ok(value) assertion?

• This assertion checks if a value is truthy.

104. What is the purpose of the assert.expect(count) assertion?

• assert.expect(count) is used to declare the number of assertions expected in a test. If the number of assertions run does not match the expected count, the test will fail.

105. How do you mock services or dependencies in tests?

• In integration or unit tests, you can register mock services or objects in the test container before rendering or instantiating the unit under test.

106. What is the purpose of the setupRenderingTest() helper?

• setupRenderingTest() is used in component integration tests to set up the necessary testing environment for rendering components in isolation.

107. What is the purpose of the setupApplicationTest() helper?

• setupApplicationTest() is used in acceptance tests to set up the full application testing environment.

108. What is the purpose of the setupTest() helper?

• setupTest() is used in unit tests for services, helpers, and other non-rendering units.

109. What is the Glimmer VM?

• The Glimmer VM is Ember's rendering engine. It's designed for high-performance rendering and updates, using a byte-code based approach. It's responsible for efficiently updating the DOM when data changes.

110. What is the difference between Glimmer components and classic components? (Older Ember)

• Glimmer components (introduced in Ember 3.x, standard in Octane) are simpler and more performant, focusing on arguments (@args) and tracked properties (@tracked). Classic components had more lifecycle hooks and relied on older observer patterns.

111. What is Ember Octane?

• Ember Octane was a major edition of Ember.js that introduced significant improvements and new features, including Glimmer components, tracked properties, native classes, and angle-bracket invocation for components. It represents the modern way to write Ember applications.

112. What are Native Classes in Ember Octane?

• Ember Octane encourages using native JavaScript classes (using the class keyword) instead of the older EmberObject.extend() syntax for defining components, services, etc.

113. What is Angle-Bracket Invocation?

• Angle-bracket invocation (e.g., ) is the modern syntax for invoking components in templates, replacing the older curly-brace invocation (e.g., {{my-component}}). It aligns with HTML tag syntax and makes passing arguments clearer.

114. What is the purpose of the <template> tag in modern Ember?

• The <template> tag can be used within a component's JavaScript file (or a dedicated .gjs/.gts file) to define the component's template directly alongside the component class, providing better co-location.

115. What is the difference between .gjs and .gts files? (Glimmer components)

• .gjs files contain both the component class (JavaScript) and the template (Glimmer syntax) within a single file.
• .gts files are similar but use TypeScript instead of JavaScript.

116. What is Dependency Injection in Ember?

• Ember uses a dependency injection system (often referred to as the "container") to manage the creation and injection of objects like services, routes, and components. You declare dependencies, and Ember provides the correct instances.

117. What is the purpose of the lookup() method on the container? (Advanced/Less common)

• The lookup() method (available in tests or advanced scenarios) allows you to retrieve an instance of a registered object directly from the container. Injection (e.g., @service) is the preferred way to get dependencies.

118. How do you handle authentication and authorization in Ember?

• Typically handled using an addon like ember-simple-auth or by implementing custom logic within Services, Routes, or Components that interacts with your backend API.

119. How do you handle internationalization (i18n) and localization (l10n) in Ember?

• Usually done using an addon like ember-intl, which provides helpers and services for managing translations and locale-specific formatting.

120. What is the purpose of the store.peekRecord() method?

• store.peekRecord('model', id) retrieves a record from the Store's cache if it exists, without making an API request. It returns null if the record is not in the cache.

121. What is the purpose of the store.peekAll() method?

• store.peekAll('model') retrieves all records of a given type from the Store's cache, without making an API request.

122. What is the difference between store.findRecord() and store.peekRecord()?

• findRecord() always attempts to fetch the record from the API (though it might return the cached version immediately if available and not stale).
• peekRecord() only looks in the local cache and never makes an API request.

123. What is the purpose of the store.hasRecordForId() method?

• store.hasRecordForId('model', id) checks if a record with the given ID exists in the Store's cache.

124. What is the purpose of the store.query() method's second argument?

• The second argument to store.query() is an object of query parameters that are sent to the API (e.g., { page: 1, size: 10, filter: { status: 'active' } }).

125. What is the purpose of the serialize() method on a Serializer?

• The serialize() method is used to transform an Ember Data record into the format expected by the API when sending data (e.g., for create or update).

126. What is the purpose of the normalizeResponse() method on a Serializer?

• The normalizeResponse() method is used to transform the raw response from the API into a format that Ember Data's Store can understand and load into models.

127. What is the purpose of the handleResponse() method on an Adapter?

• The handleResponse() method processes the raw response from the API and determines whether it was successful or an error occurred.

128. What is the purpose of the shouldReloadRecord() hook on an Adapter?

• shouldReloadRecord() determines whether the Store should make an API request to reload a record that is already in the cache when findRecord() is called.

129. What is the purpose of the shouldBackgroundReloadRecord() hook on an Adapter?

• shouldBackgroundReloadRecord() determines whether the Store should return a cached record immediately and then make an API request in the background to update it when findRecord() is called.

130. What is the purpose of the shouldReloadAll() hook on an Adapter?

• shouldReloadAll() determines whether the Store should make an API request to reload all records of a type when findAll() is called.

131. What is the purpose of the shouldBackgroundReloadAll() hook on an Adapter?

• shouldBackgroundReloadAll() determines whether the Store should return all cached records immediately and then make an API request in the background to update them when findAll() is called.

132. What is the purpose of the belongsTo() relationship in Ember Data?

• belongsTo() defines a one-to-one or many-to-one relationship where one record "belongs to" another (e.g., a Comment belongs to a Post).

133. What is the purpose of the hasMany() relationship in Ember Data?

• hasMany() defines a one-to-many or many-to-many relationship where one record "has many" instances of another type (e.g., a Post has many Comments).

134. How do you access related records in Ember Data?

• You access related records through the defined relationship properties on the model instance (e.g., post.comments, comment.post). Accessing a belongsTo or hasMany relationship typically returns a Promise that resolves to the related record(s).

135. What is the purpose of the async option on relationships?

• The async: true option (default for most relationships) means that accessing the relationship returns a Promise, allowing the framework to load the related data asynchronously.
• async: false means the related data is expected to be available immediately (e.g., included in the initial payload). Accessing the relationship directly returns the record(s) or null/empty array.

136. What is the purpose of the inverse option on relationships?

• The inverse option explicitly defines the inverse relationship on the related model. This helps Ember Data manage relationships correctly, especially when dealing with complex graphs.

137. How do you handle form submissions in Ember?

• Using the {{on "submit" this.myAction}} helper on the form> element and defining an action in the component or route to handle the submission logic.

138. What is the purpose of the mut helper? (Older Ember)

• The {{mut}} helper was used in older Ember to enable two-way data binding for properties that were not automatically mutable (like arguments passed to components). It's less needed with @tracked properties and the <Input> component.

139. What is the purpose of the array helper?

• The {{array}} helper creates a new array instance within a template, allowing you to pass a list of values to a component argument.

140. What is the purpose of the hash helper?

• The {{hash}} helper creates a new object (hash) instance within a template, allowing you to pass a set of key-value pairs to a component argument.

141. How do you conditionally render content in a template?

• Using the {{#if condition}} ... {{/if}} or {{#unless condition}} ... {{/unless}} helpers.

142. How do you iterate over a collection in a template?

• Using the {{#each collection as |item|}} ... {{/each}} helper.

143. What is the purpose of the debugger; statement in Ember?

• Similar to other JavaScript environments, debugger; pauses execution and opens the browser's developer tools debugger at that point, allowing you to inspect variables and step through code.

144. How do you handle errors in Ember Data operations (e.g., save())?

• Ember Data operations return Promises. You can use .catch() on the Promise to handle errors (e.g., record.save().catch(error => { ... });).

145. What is the purpose of the DS.Errors object?

• When a record save operation fails due to validation errors from the backend, the errors are often available on the record's errors property as a DS.Errors object. You can iterate over these errors to display them to the user.

146. How do you customize the default blueprint for generating code?

• You can create your own blueprints in the blueprints/ directory of your project or addon. Ember CLI will use your custom blueprint instead of the default one if it finds a match.

147. What is the purpose of the .eslintrc.js file?

• .eslintrc.js is used to configure ESLint, a popular JavaScript linter, to enforce coding standards and catch potential errors in your Ember project.

148. What is the purpose of the .prettierrc.js file?

• .prettierrc.js is used to configure Prettier, a code formatter, to automatically format your code according to consistent rules.

149. What is the purpose of the package.json file?

• package.json is the standard Node.js package manifest. It lists your project's dependencies (including Ember and addons), scripts for running commands (like ember serve, ember test), and other project metadata.

150. What is the purpose of the yarn.lock or package-lock.json file?

• These files record the exact versions of all installed dependencies (including transitive dependencies). This ensures that everyone working on the project uses the same versions, preventing "works on my machine" issues.

151. What is the purpose of the .ember-cli file?

• .ember-cli is a configuration file for Ember CLI. It can be used to set default options for Ember CLI commands.

152. What is the purpose of the .gitignore file?

• .gitignore specifies files and directories that should be ignored by Git (e.g., node_modules, build output directories like dist).

153. What is the purpose of the dist/ directory?

• The dist/ directory is the output directory when you run ember build. It contains the compiled and minified assets that are ready for deployment.

154. How do you deploy an Ember application?

• You build the application for production (ember build --environment=production) and then deploy the contents of the dist/ directory to a web server or static hosting service (like Netlify, Vercel, S3, etc.). Addons like ember-cli-deploy can automate this process.

155. What are the advantages of using a framework like Ember.js?

• Increased productivity through conventions and built-in tools.
• Predictable structure and patterns for building large applications.
• Long-term stability and backward compatibility commitment from the core team.
• Comprehensive ecosystem of addons for common tasks.
• Strong testing story.

156. What are some potential disadvantages of using Ember.js?

• Steeper learning curve compared to simpler libraries.
• Opinionated nature might feel restrictive if you prefer more flexibility.
• Larger initial bundle size compared to frameworks with more aggressive code splitting or smaller runtimes (though this is improving).