1

Q #1) What is Lightning in Salesforce?

Answer: Lightning is a collection of tools and technology for any form of Salesforce
platform. Lightning is inclusive of the following as shown in the below table:
Sl.
Name Description
No.

1.     Lightning It comprises of Lightning Experience, template-based communities as

Experience well as Salesforce 1 mobile app. It is a set of user interfaces with
optimization for speed. 

2.     Lightning It is a JavaScript framework that comes along with standard

Component components and enables the developers to create components which
Framework  can be reused for standalone applications. These apps are built by
customization of Lightning experience, template-based communities
as well as mobile apps created with Salesforce1.  

3.     Lightning App It offers a fast, easy way of app building and customizations with the
Builder and help of drag-and-drop features. Customization of Lightning
Community Experience is done by using Lightning App Builder for a Salesforce 1
Builder mobile app. On the other hand community builder helps in
customizations of template-based communities. 

4.     Lightning Design LDS makes it possible to build apps matching the looks of the
System (LDS) Salesforce 1 mobile app and Lightning experience. It has modern UX
best practices and style guides. 

5.     Lightning Start with development with a set of 70 + partner components as a

Exchange  section of AppExchange. 
Suggested reading =>> Salesforce Lightning Tutorial
Q #2) What are the components in the Lightning component framework? 
Answer: The components act as functional units of the Lightning component framework. A reusable,
modular section of UI is encapsulated within the components. They can range from a single line of
text up to the entire application in terms of granularity.
Q #3) Where to use Lightning Components?                                    
Answer: The Lightning components can be used in the following ways:
 Drag-and-drop components are meant for the Lightning App Builder and Community
Builder.
 Add Lightning Components for Lightning Pages.
 Add Lightning Components for Lightning Experience Record Pages.
 Launch a Quick-action Lightning Component.
 Overrule the Lightning Component’s standard actions.
 Create custom applications
Q #4) What are the components bundles used in the Lightning component?
Answer: The component bundles are enlisted in the below table:
Sl. Name of Component
Description
No. Bundle

1 Component This contains the mark up.

2 Controller This handles the events on the client side. 

3 Helper The developer can write the common logic inside helper used by
different controller methods, avoiding any sort of repetition

4 Style This is about the style of the component.

5 Documentation This records the component’s use.

6 Renderer This contains the default rendering behaviour of a component.

7 SVG This icon in the Lightning App Builder gets displayed before the
component. 

1
2

Sl. Name of Component

Description
No. Bundle

8 Design It not only helps in component reusability but also controls which all
attributes need to exposed for the tools like Lightning App Builder. 
Q #5) How does Salesforce 1 Mobile app use Lightning components?
Answer: We first create a Lightning tab for the Lightning component and subsequently include the
tab in the navigation select list of Salesforce 1 mobile app and then the newly created tab to it.
Q #6) Can a Lightning component be used that works with both interfaces – Mobile and
Desktop?
Answer: It is possible to use Lightning components, Salesforce 1 mobile app, custom standalone
apps directly in Lightning Experience as well as template-based communities. Lightning components
are used in the Visualforce page, for use in Salesforce Visualforce communities as well as the classic
environment.
Q #7) Does Lightning Component work with Visualforce?
Answer: Yes, it does work with Visualforce.
Q #8) Can Lightning be viewed as an MVC framework?
Answer: Not really. Lightning is a framework based on components.
Q #9) Which Lightning components parts are server-side and which ones are client-side?
Answer: For the Lightning component, the client-side is the component page acting as a JavaScript
controller, on the contrary, the server-side acts as an Apex Controller.
Q #10) What are the differences between Lightning and Visualforce components?
Answer: Visualforce components are page-centric and work is mostly server-based. Lightning
components, on the other hand, are client-side centric which accounts for their dynamic, mobile-
friendly nature.
Q #11) How to add Aura components to your Visualforce page? 
Answer: The developer can add the Aura components to the Visualforce page in the following
three ways:
 Use the <apex:includeLightning/> component and add the Lightning component for
the Visualforce JavaScript library used in your Visualforce page.
 Create a reference to a Lightning app for declaring component dependencies.
 Use the $Lightning.createComponent() to create the component for a page by
writing a JavaScript function
Q #12) Can we create one component for inheriting style/CSS from the parent or we need to
always define it in the Salesforce component?
Answer: Of course, we can do this. The styles can be inherited from parents and not necessarily
defined in the component.
Q #13) What is the purpose of using Aura: method Tag in Lightning?
Answer: The Aura: method tag can be used for defining a method for component API. So, there is
no need to fire and handle a component event, and it allows us to directly invoke the method in the
component’s controller on the client-side. It also helps to simplify the code required for a parent
component to call a method on a child component that forms a part of the parent component.
Q #14) Is it possible to include a Lightning component into another? 
Answer: Yes, it is possible.
Q #15) What are the limits to the number of components used in an application? 
Answer: There are no limits on the usage number of the components used in an application. 
Q #16) What are Aura Components? Why we use Aura: Namespace in the code?
Answer: Aura components are the self-contained and reusable units of an app. Components form the
function units of Aura. Aura is the open-source technology that works for Lightning components.
The building blocks for the Aura: namespace helps to define the components and applications.
Q #17) Are there any CSS (styles) provided by Salesforce.com for Supported Lightning
Components?
Answer: Yes, this is available in Salesforce Lightning Design System.
Q #18) Are Lightning components meant only for mobile apps?
Answer: With a responsive design in mind, Lightning components are meant to be mobile-first. The
components help to build responsive apps faster for desktops, tablets, and mobile. 
Q #19) Is it possible to include external JavaScript/CSS libraries in components?
Answer: Yes, multiple libraries can be used such as JavaScript/CSS libraries, jQuery, Bootstrap, etc
from a local, static resource.
Q #20) Is it possible to integrate lightning components with a framework such as Angular?
Answer: It is possible to insert the third-party code within a Visualforce page. The same Visualforce
page is then put inside a Lightning component. Then the same Lightning Component is used in
another Lightning component that works for various environments.  
Q #21) Do you create an App Bundle first to create a Lightning component?

2
3

Answer: Not really, however, the component bundle can be created first.  

Q #22) Is it possible to deploy components in the production org?
Answer: Yes, deployment of components is possible in the production with any of the
following:
 Managed packages
 Force.com IDE
 Force.com
 Change sets
 Migration Tool
Q #23) How to create custom Lightning record pages in Salesforce with Lightning Experience?
Can you do the same for Salesforce mobile app? 
Answer: Add, remove, or you can even reorder components on a record page for a custom view of
object’s records with the help of Lightning App Builder.
Yes, it is also possible to customize a record page and assign it to the Lightning apps. The users can
access a custom record page for the context of the app they are working on.

Q #24) Are there any options for Lightning Record Page Assignment?
Answer: It can be assigned in different ways, such as:
 Org default
 App Default (overrides the assignment at the org level)
 App Record Type Profile (overrides the assignment at the org and app level).
Q #25) How to create a custom Lightning Record Page?
Answer: We can create it with the following steps:
Setup->App Builder in Quick Find Box->Select Lightning App Builder-> New->Record Page->
Name the page as <xxx>Select Opportunity->Choose Header, Sub header, Right Sidebar template
and Click Finish. 
Please go through the link for further details on creating a custom Lightning Page.
Q #26) What are the types of Lightning Record Pages in Salesforce?
Answer: Here are the types enlisted below:
 App Page
 Home Page
 Record Page
Q #27) What are the attributes? What are the parameters required? 
Answer: Attributes are the variables for storing values. The attribute is defined with a name, type,
default, description, and access. The <aura:attribute> tag is used that requires the values of name
and type attributes.
However, name and type are the only required parameters. This is shown below:

Q #28) Which interface to use if you want your component to be available for all pages?
Answer: You can use the flexipage:availableForAllPageTypes interface.
Q #29) Which interface can be used to get the id of the record from the record Detail page?
Answer: The force:hasRecordId interface can be used for getting rid of the record from the record
Detail page.
Q #30) Which interface should be used to override a standard action? 
Answer: Here you can make use of the Lightning:actionOverride interface.
Q #31) Which interface is for using components in a quick action?
Answer: The interface used here is force:lightningQuickAction.
Q #32) Which interface to use a component in the record home page?
Answer: The interface used here is flexipage:availableForRecordHome.
Q #33) Which interface is used if you want a component to be used as a tab?
Answer: The interface used here is force:appHostable.                       
Q #34) Why Lightning:isUrlAddressable interface is used?
Answer: The lightning:isUrlAddressable interface is used when navigating to the component and
also when the component to be navigated implements this interface.
Q #35) How to find data changes using data handlers?
Answer: You can configure a component for invoking a change handler when the value of the
attributes in one of the many components changes.

Q #36) What are component events? 

3
4

Answer: A component event is fired from the instance of a component. It can be handled by the
event that fired the event or by the component in the containment hierarchy, receiving the event.
There are capture and bubble phases for the propagation of component events.
Q #37) What are application events?
Answer: An application event is fired from an instance of a component. It follows a publish-
subscribe model. The components that provide a handler for the event are notified. The phases
supported by the framework are capture, bubble, and default phase for the propagation of application
events. The capture and bubble phases have similarities with DOM handling patterns.
Q #38) What are the phases in component events propagation?
Answer: The two phases are:
 Bubble phase
 Capture phase
Q #39) What is Lightning Out? 
Answer: Lightning Out is a powerful and flexible feature that allows you to embed the Lightning
web components on any web page. While using this, you do not need to deal with authentication or
even configure a connected app, and this simplifies some of the details when used with Visualforce.

What is Salesforce Lightning?

Lightning is the collection of tools and technologies behind a significant upgrade to the
Salesforce platform. Lightning includes:

 Experience: A set of modern user interfaces optimized for speed. This includes
the Lightning Experience, Salesforce1 Mobile app and template-based
communities.
 Lightning Component Framework: A JavaScript framework and set of standard
components that allow you to build reusable components to customize the
Lightning Experience, Salesforce1 Mobile app and template-based communities
and build your own standalone apps.
 Visual Building Tools: Drag-and-drop technologies for fast and easy app building
& customizations. Use the Lightning App Builder to customize the Lightning
Experience and Salesforce1 Mobile app. Use the Community Builder to customize
template-based communities.
 Lightning Exchange: A section of the AppExchange where you can find 70+
partner components to jumpstart your development.
 Lightning Design System: Style guides and modern enterprise UX best practices
to build pixel perfect apps that match the look and feel of the Lightning
Experience and Salesforce1 Mobile app.

What are the tools included in lightning ?

 Lightning Component Framework – Components and extensions that allow you to
build reusable components, customize the Salesforce1 Mobile App, and build
standalone apps.
 Lightning App Builder – A new UI tool that lets you build apps lightning fast, using
components provided by Salesforce and platform developers.
 Lightning Connect – An integration tool that makes it easier for your Force.com
app to consume data from any external source that conforms to the OData spec.
 Lightning Process Builder – A UI tool for visualizing and creating automated
business processes.
 Lightning Schema Builder – A UI tool for viewing and creating objects, fields, and
relationships.

What is Aura? Why do I see the aura: namespace in the

code?

4
5

Aura is the open source technology that powers Lightning Components. The aura:
namespace contains all of the basic building blocks for defining components and
applications.

Is Lightning an MVC framework?

No, it’s a component-based framework.

What is difference between Visualforce Components and

Lightning Components?
Visualforce components are page-centric and most of the work is done on the server.
Lightning is designed from the component up, rather than having the concept of a page
as its fundamental unit. Lightning Components are client-side centric, which makes them
more dynamic and mobile-friendly.

Where we can display lightning component?

There are a number of possibilities for display lightning component..

  Lightning Experience: We can display component in the Lightning Experience

using the App Builder. We can edit the home page, edit a record detail page or
create/edit a new app page to include it.
  Salesforce1 Mobile app: We can display component in the Salesforce1 Mobile
app by creating a custom Lightning tab that references it and adding that tab in
mobile navigation.
 Standalone Lightning app: By create a standalone Lightning app (e.g. myapp.app)
and include component in this app. Access Lightning app by URL.
 Add Apps to the Lightning Experience App Launcher: Your Lightning Components
apps and custom tabs are available from the App Launcher.
 Add Apps to Lightning Experience and Salesforce App Navigation:  You can add
Lightning components tabs to an app and they display as items in the app’s
navigation bar.
 Lightning App Builder and Community Builder : We can display component in
template-based (e.g. Napili) community using the Community Builder. Build
custom user interfaces using your own Lightning components, or those you install
from AppExchange, for desktop and mobile devices.
 Add Lightning Components to Lightning Pages: A Lightning Page is a custom
layout that lets you design pages for use in the Salesforce mobile app or in
Lightning Experience. You can use a Lightning Page to create an app home page
and add your favorite Lightning component, such as the Expenses app we’ll be
creating in this module, to it.
 Add Lightning Components to Lightning Experience Record Pages: You can
customize Lightning Experience record pages by adding a Lightning Component.
 Launch a Lightning Component as a Quick Action: Create actions using a
Lightning component, and then add the action to an object’s page layout to make
it instantly accessible from a record page.
 Create Stand-Alone Apps: A standalone app comprises components that use your
Salesforce data and can be used independently from the standard Salesforce
environment.
 Run Lightning Components Apps Inside Visualforce Pages: Add Lightning
components to your Visualforce pages to combine features you’ve built using

5
6

both solutions. Implement new functionality using Lightning components and

then use it with existing Visualforce pages.
 Run Lightning Components Apps on Other Platforms with Lightning Out:
Lightning Out is a feature that extends Lightning apps. It acts as a bridge to
surface Lightning components in any remote web container. This means you can
use your Lightning components inside of an external site (for example, Sharepoint
or SAP), or even elsewhere on the platform such as on Heroku.
 Customize Flow Screens: Create a flow to guide your users through a business
process. By default, you can add simple fields like inputs or radio buttons to a flow
screen. But with a custom Lightning component, you can fully customize the look-
and-feel and functionality of your screen.

What are the different Lightning component bundles?

 Component :UI for lightning component
 Controller: Contains client-side controller methods to handle events in the
component.
 Helper: JavaScript functions that can be called from any JavaScript code in a
component’s bundle
 Style: Contains styles for the component.
 Document: A description, sample code, and one or multiple references to example
components
 Design: File required for components used in Lightning App Builder, Lightning
pages, or Community Builder.
 SVG: Custom icon resource for components used in the Lightning App Builder or
Community Builder.
 Renderer: Client-side renderer to override default rendering for a component.

Click Here for official Salesforce documentation.

What is Lightning Experience?

Lightning Experience is the name for the all new Salesforce desktop app, with new
features, built with a modern user interface and optimized for speed.

What is Lightning Design System?

Style guides and modern enterprise UX best practices to build pixel perfect apps that
match the look and feel of the Lightning Experience and Salesforce1 Mobile app. Click
Here for official link.

What happens to my existing Visualforce Pages?

They’ll continue to be supported in the current UI and Lightning Experience. See
the Trailhead module on this topic.

What are the type of events into Salesforce Lightning

component?
 Application Event – Scope of this event is throughout the lightning App and any
component which has registered for this event would get a notification.

6
7

 Component Event– Scope of this event is within itself or the parent component
of this event, all the components declared within the parent component would
get notified of this event.
 System Event- these are the events fired by Salesforce’s system during the
lifecycle of the lightning app.

What is the basic difference between Application Event

and Component Event?
Component events are used to do communication between child and parent. They use
bubbling and capture same as used in DOM events. A change in a child component can
be communicated to the parent component via component event.

Application events are used to communicate any change in the component to a broader
audience. Any component who has registered for this event will get a notified.

Component events vs Application events. Which one I

should use?
Component events can only be handled by components above them in the containment
hierarchy, therefore, their usage is localized to the components that need to know about
them.

Application events are best used for something that should be handled at the application
level, such as navigating to a specific record. Application events allow communication
between components that are in separate parts of the application and have no direct
containment relationship.

What is aura definition bundle?

A bundle contains an Aura definition and its related resources. The definition can be a
component, application, event, interface, or a tokens collection.

An AuraDefinitionBundle component is a folder that contains definition files. Unlike

most other metadata components, an AuraDefinitionBundle component isn’t a single file,
it’s a collection of files. Each file represents a resource in a bundle, such as markup,
applications, code files (including controllers and helpers), events, documentation, and
interfaces.

A bundle doesn’t have a suffix. Definition files can have one of these suffixes:

Suffix Component Type

.app Application

.cmp Component

7
8

Suffix Component Type

.design Design

.evt Event

.intf Interface

.js Controller, Helper, or Renderer

.svg SVG Image

.css Style

.auradoc Documentation

.tokens Tokens collection

What is the use of implements in lightning component?

Implements is use to refer platform interfaces which enables a component to be used in
different contexts or to grant access to extra context data, a component can implement
more than one interfaces.

Here is list of all interfaces that can be implemented in lightning component

Which interface we are supposed to implement so that a

lightning component can be used as a Tab?
We need to implement the following “force:appHostable” so that we can use the
component as a Tab.

Which interface we are supposed to implement so that a

lightning component can be used as quick action?
We need to implement the following “force: lightningQuickAction” so that we can use
the component as a Quick Action.

Which interface we are supposed to implement so that a

lightning component can be used in Community builder?
8
9

We need to implement the following “forceCommunity:availableForAllPageTypes” so

that we can use the component in community builder.

What is use of @AuraEnabled annotation

How to call apex class from lightning component
The AuraEnabled annotation enables Lightning components to access Apex methods
and properties.
The AuraEnabled annotation is overloaded, and is used for two separate and distinct
purposes.

 Use @AuraEnabled on Apex class static methods to make them accessible as

remote controller actions in your Lightning components.
 Use @AuraEnabled on Apex instance methods and properties to make them
serializable when an instance of the class is returned as data from a server-side
action.

For more details, please refer to lightning:datatable example

Can we Include One Lightning component to another ?

Yes we can include one Lightning component inside another Lightning component

How can we use Lightning Components with the

Salesforce1 Mobile App ?
We can create a custom Lightning tab that points to our component and include that tab
in our Salesforce1 Mobile navigation.

How can we use a lightning component in a VisualForce

Page?
A Lightning component can be embed in any webpage using a very powerful and flexible
feature, Lighting out. When used with Visualforce some complexity becomes simpler.
Lightning component can be added to Visualforce page in three steps:

1. We have to first Add the Lightning Components for Visualforce JavaScript library
to your targetted Visualforce page using the tag.
2. Next we have to create and refer a Lightning app which is used to the component
dependencies.
3. Lastly we need to write a JavaScript function which will finally create the the
component on the page using $Lightning.createComponent()

For more details, please refer Use Lightning Components in Visualforce Pages

Can we integrate Lightning components with another

framework like Angular?
Yes, we can integrate lightning with any 3rd party framework.

9
10

Can we include external JavaScript/CSS libraries like

jQuery, bootstrap in components?
Yes, we can use multiple libraries in our lightning component like JQuery, Bootstrap,
custom CSS and custom Javascript libraries using static resource.

What is use of aura:method tag in salesforce lightning?

We can use <aura:method> to define a method as part of a component’s API. This
enables you to directly call a method in a component’s client-side controller instead of
firing and handling a component event. Using <aura:method> simplifies the code needed
for a parent component to call a method on a child component that it contains.

How to ensure FLS while working with Lightning

Component?
FLS and CRUD are not automatically enforced in the lightning component whenever any
object is referenced in the Apex Controller and the component will display the fields and
records for which the users do not have access. Therefore we should manually enforce
the FLS and CRUD in the Apex Controller. Also when we use Lightning Data service  it
takes care of FLS and CRUD for us.

How can we display loading spinner in lightning

component?
Spinners are CSS loading indicators that should be shown when retrieving data or
performing slow computations. lightning:spinner displays an animated spinner image to
indicate that a request is loading. This component can be used when retrieving data or
performing an operation that takes time to complete.

aura:waiting and aura:donewaiting can be used for controlling the loading spinner.

For more details please refer to below post lightning spinner  and Lightning Spinner in
LWC (Lightning Web Component)

How can we conditionally display content in lightning

component?
We can use aura:if to conditionally display content in lightning component. For more
details refer to below post aura:if in lightning component

What is the use of force:hasRecordId interface?

or

How to get current record id in lightning component?

Add the force:hasRecordId interface to a Lightning component to enable the component
to be assigned the ID of the current record. The current record ID is useful if the
component is used on a Lightning record page, as an object-specific custom action or

10
11

action override in Lightning Experience or the Salesforce app, and so on. This interface
has no effect except when used within Lightning Experience, the Salesforce mobile app,
and template-based communities.

For more details refer below link force:hasRecordId

What is a FlexiPage in lightning?

FlexiPage represents the metadata associated with a Lightning page. A Lightning page
represents a customizable screen made up of regions containing Lightning components.
A Lightning page can contain upto 25 components. Flexi page are stored as xml file and
can be deployed using metadata api or any deployment tool.

Lightning pages are referred as FlexiPages in API and referred as Lightning pages
elsewhere in SFDC documentation.

How can we deploy lightning components?

Lightning components can be deployed similar to any other component using changeset,
ant migration tool, eclipse or any other migration tool.

What Is Lightning Data Service?

Use Lightning Data Service to load, create, edit, or delete a record in your component
without requiring Apex code. Lightning Data Service handles sharing rules and field-level
security for you. In addition to not needing Apex, Lightning Data Service improves
performance and user interface consistency. Main advantage of using lightning data
service is that we can perform basic operations without Apex code.

For more details refer to below link Lightning Data Service

What is Locker Service in Salesforce Lightning?

Locker Service is a powerful security architecture for Lightning components. Locker
Service enhances security by isolating Lightning components that belong to one
namespace from components in a different namespace. Locker Service also promotes
best practices that improve the supportability of your code by only allowing access to
supported APIs and eliminating access to non-published framework internals.

For more details please refer below link: Locker Services

What are value providers in Salesforce Lightning ?

Value Providers in lightning Component encapsulate related values together and used to
access data. In Salesforce lightning, we have two value providers for a component they
are v (View) and c (Controller).

 v is component attribute set which helps to access component attribute values in

markup

11
12

 c is component controller helps us to link with event handlers and action for the
component

What are List of Global value providers in lightning?

 $globalID
 $Browser
 $Label
 $Locale
 $Resource

How to create popup in lightning component?

Modals/Popup Box are used to display content in a layer above the app. This paradigm is
used in cases such as the creation or editing of a record, as well as various types of
messaging and wizards.

For more details, refer to below link Modal/Popup Lightning Component Salesforce

Modal/Popup Lightning Web Component(LWC)

1. Can we call the @AuraEnabled function in the apex class using

wire ? 

Ans: Function also needs to have cacheable = true  annotation ie

should be like @AuraEnabled(cacheable = true) 

50 LWC Lightning Web Component Interview Questions Part 1
Part – 2 | 50 LWC Lightning Web Component Interview Questions

1. What do you mean by cacheable = true annotations ?

Ans: First of all when you mark function as cacheable = true it can

only retrieve data i.e. it cant have any DML.

It is used to improve component performance by quickly showing

cached data from client side storage without waiting for server trip.

Remember to refresh the stale data provisioned by Apex we have to

use refreshApex as LDS doesn’t manage data coming from Apex

( In case of wired service)

Read more: What is Salesforce—Everything You Should Know

About This Leading CRM Provider

12
13

1. @wire(getBoats,{boatTypeId : this.boatTypeId})

getBoats(error,data){}

Will the above code deploy? (Assuming all variables and apex class

function exists).

Ans: No it wont when passing a variable in wire you should always

use $ along with variable, it should be written like 

@wire(getBoats,{boatTypeId : ‘$boatTypeId})

1. Why do we use $ when passing property in wire function, what

does it mean? [Latest Salesforce lightning interview questions and

answeres]

Ans: $ prefix tells the wire service to treat values passed as a

property of the class and evaluate it as this.propertyName and the 

property is reactive. If the property’s value changes, new data is

provisioned and the component renders.

1. See the below code and answer the following

question: [Scenario based Salesforce Lightning Interview question

with relevant answer]

If I want to refresh the wired data in the above function, can I call

refreshApex(this.someVar) ? 
@wire(getBoats,{boatTypeId : ‘$boatTypeId’})
getBoats({error,data}){
if(data){
this.someVar = data;
this.error = undefined;
}
else if(error){
this.error = error;
this.someVar = undefined ;
}
}

Ans:
No we cant call refreshApex(this.someVar) rather refreshApex is called on
whole result provisioned from the wire service not just the data part, we will
have to rewrite it as below : 
@wire(getBoats,{boatTypeId : ‘$boatTypeId’})
getBoats(result){
this.mainResult = result;
if(result.data){

13
14

this.someVar = result.data;
this.error = undefined;
}
else if(result.error){
this.error = result.error;
this.someVar = undefined ;
}
}
Now we can refresh data as refreshApex(this.mainResult)

1. Can we call a wire function inside a javascript function like

below :
searchBoats(event){
@wire(getBoats,{boatTypeId: ‘$boatTypeId’}
getBoats(data,error){
}
}
Assume searchBoats is being called on click of button? Will I be able to
deploy the code ?

Ans: No you cant call it like this , code will not deploy. You will receive error
as leading decorators must be attached to  class which means decorators like
wire can be directly under class only not inside any other function.
Similarly if you try to define variable with @track or api decorator inside a
function it will fail.

1. When is the wire method/property called in the lifecycle of a

component ?
Ans: Wired service is called right after component is created ie after
constructor and is again called when parameter that you are passing is made
available.

1. What are lifecycle hooks in LWC ? 

Ans: A lifecycle hook is a callback method triggered at a specific phase of a
component instance’s lifecycle.
There are following hooks supported in LWC :
Constructor : Called when the component is created.
Connectedcallback : Called when the element is inserted into a document.
This hook flows from parent to child.
RenderedCallback : Called after every render of the component. This lifecycle
hook is specific to Lightning Web Components, it isn’t from the HTML custom
elements specification. This hook flows from child to parent. Ie its not part of
HTMLElement rather defined in LightningElement.
Disconnectedcallback : Called when the element is removed from a
document. This hook flows from parent to child.

14
15

Errorcallback  : Called when a descendant component throws an error. The

error argument is a JavaScript native error object, and the stack argument is a
string. This lifecycle hook is specific to Lightning Web Components, it isn’t
from the HTML custom elements specification

1. Is wire method called multiple times during lifecycle of

component ? (True / False)

Ans: True

1. What is the difference in below two codes , will they both

compile ? Give same results ? 

2. [tricky Salesforce Lightning Interview question with relevant answer]

Code 1 :
@wire(getBoats)
getBoats({data,error}){
if(data)
console.log(‘print here’);
Else if(error)
console.log(‘print in else’);
}
@wire(getBoats,{})
getBoats({error,data}){
if(data)
console.log(‘print here’);
Else if(error)
console.log(‘print in else’);
}

Ans: Both will compile they are same.

1. Is it mandatory to use data,error only in wired method, can I

use some other variable like below : Scenario based interview

question with answers

@wire(getBoats)
getBoats({myData,myError}){
if(mydata)
console.log(‘i am in data’);
else if(myError)
console.log(‘I am in error’);
}
Will the code deploy successfully or I will receive an error ?

15
16

Salesforce Lightning LWC interview questions and answers

Ans: We cant use any other variable name other than data, error they are
hardcoded in wire service. Code will successfully deploy but wire service wont
be able to fetch any data.

1. What is the difference between event.StopPropogation() and

Event.preventDefault()?

Ans: stopPropagation prevents further propagation of the current

event in the capturing and bubbling phases. preventDefault prevents

the default action the browser makes on that event.

1. If we add required attribute in lightning-input , will I get an error

on leaving the field empty ? 

Ans: No unless you also add logic in backend javascript file to

actually throw an error using checkValidity and reportValidity.

2. Are quick actions supported for LWC components ?

Ans: Quick actions are supported by LWC in Summer 21 or later

orgs. LWC quick actions are only supported on record pages.

16
17

3. How can i reference record ID of page in my component which

is fired from quick action.

Ans: There are two types of quick actions in LWC : 

Screen actions : Normal action which open a modal 

Headless actions : Which dont have any html file rather just logic

written in js ie no modal window will come up 

In case of screen actions we will be able to get recordID by just

defining recordID as public property in the component.

For headless action you have to define @api invoke method which

is auto called and recordID will be set after this function is called.

1. What is a promise in async transactions? What are it different

stages. [Latest Salesforce lightning interview questions and

answers]

Ans:

Promise is object returned in async transaction which notifies you

about completion or failure of transaction.

For example when you call apex imperatively it returns you a

promise object on the basis of object returned execution either goes

into (then) ie transaction was successful or (catch) which means

transaction failed.

Stages of promises are : 

Pending: Waiting for result.

Fulfilled: Promise results in success.

Rejected: Promise result in failure.

1. What is the difference between Promise and Promise.all 

Promise.All takes in multiple promises in it and returns a single

promise object.

Promise.all is used when I want to make sure once all promises are

resolved then only execute then block.

1. What are web components, Is LWC based on web

components ?
17
18

Ans: In simplest language , web components can be explained as it

allows you to create and re-use custom components as html tags in

a component with their functionality encapsulated from rest of your

code.

Web components has 4 pillars which make it so amazing.

HTML Template : user defined templates which are rendered until

called upon.

Custom Elements : With this we can embed as components merely

as html tags in our template.

Shadow DOM : With this we can separate DOM of each custom

element from each other to make sure nothing from any

components leaks into each other.

HTML Imports : You can import other html documents in another

html document for example we can import multiple templates into

one component then use render function to display a template.

Yes LWC is based on web components

If you look at LWC architecture Salesforce only adds security , LDS

and base components rest is based on web components and es 7.

1. Why do we extend  LightningElement ?

Ans: LightningElement is custom wrapper on HTMLElement which

actually contains all the lifecycle hooks methods over which

Salesforce did some customization.

2. When we create new component why does it say export default

ComponentName ?

Ans: Because of export default component only we are able to

embed one component into another

3. How do I retrieve elements on the basis of ID?

Ans: We should never use “id” in lwc as id that you will define in

LWC may get transformed into something entirely different on

rendering, rather use data-id in your tags to reference them.

4. How to send data from Parent to Child in LWC ?

Ans: For parent to child communication you just need to expose

18
19

your function or attribute as @api then in your parent component

you can use querySelector to actually query the child component

access exposed attribute or method

5. If we parent component A and there are two component B and

C as child components. How can we communicate between B

and C ?

Ans: We should fire up event from child component B to parent A

then from A call attribute / function exposed (as @api) and pass

data into C component.

6. What does composed = true does in an event ?

Ans: These type of events can bubble up inside dom and also able

to cross shadow boundary.

7. When you fire an event, can i capture it in same template/

component ?

Ans: No
8. Is bubble : false and composed : true possible in an event ?

Ans: No

9. What is the difference between below :

a. Bubble : false and composed : false

b. Bubble : true and composed : true

c. Bubble : true and composed : false

10. What are callback functions in LWC ?

Ans: Callback functions are nothing but functions passed as

parameter into other functions.

11. Are callback functions synchronous or asynchronous ?

Ans: Functions are neither async or sync  in themselves rather

depend on where are they being passed for example if a function in

passed into reduce method is sync but if function is being passed

into setTimeout function its async.

12. What is callback hell ?

19
20

Ans: In most simple words callback hell occurs when there are many functions
you want to call async and you end up puting them one side each another and
as the code grows it becomes very difficult to read for example : 

getData(function(x)
{
getMoreData(x, function(y)
{
getMoreData(y, function(z)
{ ... }
);
});
});

1. What are decorators in LWC (Lightning web components) in

Salesforce? Latest interview question.

Ans: The Lightning Web Components programming model has three

decorators that add functionality to a property or function. There are

3 decorators for LWC

@track , @wire, @api

1. When do I use @track on a property ? Do I still need it

considering all properties are by default reactive now?

Ans: After Spring 20 all the properties are made by default reactive

ie we dont need @track for primitive properties. We still need it for

array or object type properties 

2. Can I use multiple decorators on one property ?

Ans: No we cant use multiple decorators on same property.

3. Can I deploy component with empty css file ?

Ans: No we cant do that

4. What is difference between var and let in JS ?

Ans: In simple words difference is var is function scoped while let is

block scoped

Var allows you to redeclare same variable while let will throw an

error 

Var variables are hoisted that is you can access them even before

they are declared in code its just they will return undefined value

while with let it will throw an error.

20
21

5. Is there any difference in how we add LWC component inside

another LWC component and inside AURA component ?

Ans: Difference is how they are added in the component.

LWC follows kebab case ie if you are adding any LWC component

inside another component you will have to add in kebab case form

while in AURA it will be added without kebab case for example :

We have component with name “childLWCComponent”

In LWC it will be added as  <c-child-l-w-c-component/>

In Aura it will be added as <c:childLWCComponent/>

6. What is LMS ?

Ans: LMS is defined as the standard publish-subscribe library that

enables communication with DOM across the components be it

Visualforce Pages, Aura components, and Lightning Web

Components (LWC) all can use it to publish message and listen to

messages published by others.

7. Do we have application events in LWC?

Ans: We dont have application event as such in LWC like Aura

rather we have LMS in LWC to communicate between components

which are not part of same hierarchy

8. How can we navigate user from LWC component to record

detail page?

Ans: Can be done using NavigationMixin service

9. Do we have force:createRecord equivalent in LWC?

Ans: Using navigation mixin only you can also create new record

where you define object , action as new and pass any default values

you want to set.

10. What is render() , is it part of lifecycle hook? Why do we use

it ?

Ans: Render is not part of lifecycle hook its a protected function, we

only use it if we have imported multiple templates in our component

and we want to render particular template on meeting certain

criteria.
21
22

11. Can I get current user ID in LWC without apex?

Ans: Yes we can get current user ID without apex by simply

importing

import Id from ‘@salesforce/user/Id’

12. What is difference between ‘==’ and ‘===’ ?

Ans: Both are used to compare two variables but == doesnt take

data type into consideration and does type coercion ie interpreter

tries to automatically convert data types to match the values while in

=== case if data type is not same it will always return false.

For example :

2==”2” will return True (Type coercion happens)

2===”2” will return False ( No Type coercion)

13. What is String interpolation ? [important interview questions

and Salesforce Lightning]

Ans: It means simply when string literal is evaluated all the

placeholders added into it are calculated at run time and replaced in

string with values. Place holder can be anything a variable ,

expression even a function call. In javascript its performed

using (backtick).

For example:

const greeting = 'Hello';

const who = 'World';

const message = ${greeting}, ${who}!`;

message; // => ‘Hello, World!’

14. What are template literals ? What is the use?

Ans: In javascript string interpolation is performed using template

literals.

Template literals are created using (`) backtick character apart from

string interpolation they also are used for adding multi-line strings

without having to use “\n”

For example : 

22
23

console.log('string text line 1\n' +

'string text line 2');
console.log(`string text line 1
string text line 2`);
//Both will result in same output

1. Can i call function annotated with @AuraEnabled(cacheable=

true) imperatively ?

Ans: Yes

2. Can we do DML in method annotated with 

@AuraEnabled(cacheable= true)? 

Ans: No we cant do DML inside any method annotated with

cacheable = true , you will receive an error as DMLLimit Exception. 

3. How to refresh cache when calling method imperatively ?

Ans: We have to use getRecordNotifyChange(RecordIds) which

refreshes the LDS cache providing you the latest data this will work

only if cacheable = true was there.

Otherwise we will have to call the function again from our js to get
the latest data.

1. When do we face error of “Cant assign to Read only property”

in LWC?

Ans: This error usually occurs when you are trying to make changes

to a property which is marked as @api , ideally you should clone the

value then make the changes to it.

2. How can I evaluate expression in situation like <template if:true

= {someVariable % 7==0}

Ans: We cant add expressions directly in html file rather what we

can do is create getter which will evaluate value for us which we can

use in html like below : 

get isMod7() { return this.index % 7 == 0; }
<template if:true ={isMod7}

1. Why do we put constants outside of class in LWC?

Ans: We cant put constants inside a class or function in javascript its

illegal for example below piece of code will throw you an error
export default class someClass extends LightningElement {
const someVar = ‘someValue’ ;

23
24

1. How to query all lightning-input , combobox, radio buttons

using one querySelector or do I have to use multiple ?

Ans: We can query all of them using one query selector only no

need to write multiple for each tag. We can pass all tags (,)

separated to query all.

const allValid = […this.template.querySelectorAll(‘lightning-input,lightning-
combobox,lightning-radio-group’)]; 
If you are wondering why are we using (…) spread operator before
querySelectorAll its because querySelector returns you the nodelist and using
spread operator we convert it to array of items otherwise we wouldnt be able
to use array functions like map or reduce.

1. What is reduce method in JS ?

Reduce method calls the reducer function (callback function) for each item of
the array to reduce the whole array into single value.
Remember it doesnt change the actual array
Remember it doesnt change the actual array.
array.reduce((accumulator , currentVal , currentIndex , array)=>{
},0)
As the name suggests accumulator collects all the value
currentVal - denotes the current val of array
currentIndex - denotes the index of current val of array [optional]
Array - array object being passed. [optional]

Remember : If default value is passed accumulator is set to default value and

index starts with 0 , if no default value is passes accumulator is assigned 0th
index value and currentIndex starts from 1.

1. What would be the output of : 1+3+”4” ?

//A 44 because type coercion will take place.
statu
get statusVal(){
return statusVal ;
}
set statusVal(value){
this.statusVal = value;
}
renderedCallback(){
this.statusVal = ‘ABC’
}

Ans: Yes you will receive an error “Maximum depth exceeded”  as in set
function you are again setting statusVal itself which means it will keep on
setting itself (infinitely).

24
25

25