SalesForce Javascript Developer Certfication

What are the two options for displaying a Lightning web component in the UI.

1. Set the component to support various flexipage types (home, record home, and so on) then add it to a flexipage using the Lightning App Builder. This is the simplest approach and the one you follow in this unit. 2. You can also create a tab which points to an Aura component containing your Lightning web component. The Lightning Web Components Recipes repo uses this approach. You can see the required pieces in the repo.

What is a Callback?

A callback is simply a function passed into another function that invokes it at some point in the future.

What modifiers should the Apex method have in order to be used in LWC?

An Apex method used in a Lightning web component must be static, public or global, and annotated with @AuraEnabled immediately before the method definition.

Why are LWC Application events problematic? What is a good scenario for them?

Application events can be problematic in complex apps because any component can handle the event. This pattern can lead to code that is hard to maintain due to unexpected coupling of components. Unrelated components used in Lightning pages or the Lightning App Builder are examples of sibling components that need to communicate. In those scenarios, the pub-sub pattern is the way to go.

Main purpose of decorators in JS

Basically a way to enhance a functionality without touching the functionality of the class

What is a reactive recordId property in @wire context?

By passing the recordId parameter as a string with a $ prefix, we make recordId reactive. Every time the value of recordId changes, the wire adapter gets new data, either from the cache or from the server. If another component modifies the cached record, the wire adapter provisions the record's new value to the account property.

Name 6 main stages of using Git Developement Cycle

Clone, Branch, Commit, Pull, Deploy, Merge

Name 5 Lifecycle Hooks in LWC

Created Added to the DOM Rendered in the browser Encountering errors Removed from the DOM

What are some of the basic DOM data types?

Document, node, element, nodeList, attribute, and namedNodemap.

Which statement is accurate regarding how Jest tests use jsdom?

Each test file shares the same instance of jsdom, changes are not reset between tests inside the file

There are two ways to interact with Apex methods from Lightning web components, what are they?

Either wire the method or call the method imperatively

What 3 functions can be used to invoke a function while explicitly binding it to a different object context.

Function.apply(), Function.call(), Function.bind()

When chaining promises together, what is returned with the reject method?

The Error object

What is is the main idea behind arrow functions?

Using an arrow function, we can remove the that = this bit

Which statement accurately describes a benefit of Lightning Web Components over Aura?

built on top of on features natively supported by browsers, better performance

What is the proper syntax for adding placeholders in template literals

const classes = `header ${ isLargeScreen() ? '' : (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

A developer wants to set a breakpoint in his code while in the editor so they don't have to switch to the browser. What is the in-line command for setting a breakpoint?

debugger

Which statements are necessary for using JavaScript modules?

export, import

how to conditionally show element in LWC?

for e.g. <template if:true={property.data}>

how to commit files to git repo?

git add . git commit --message "bla"

create feature main steps:

git checkout -b <name of branch> add files to project folder (develop) sfdx force:org:create --setdefaultusername --setalias <Project Name or Alias> --definitionfile config/project-scratch-def.json sfdx force:source:push

pushing files to repo requires what steps?

git remote add origin https://github.com/YOUR_GITHUB_USERNAME/Project_Name.git git push origin master

When JavaScript is executed without any containing object that you write as a developer, it runs in a ... object

global object, aka window (in browsers)

How should a developer use a JavaScript library from a remote third-party site in a Lightning Web Component?

import at a static resource, and reference in LWC

Which import is required and only available in Lightning Web Component Jest tests?

import {createElement} from 'lwc'

explain what is "export module as default" scenario

instead of named export you can export the whole set as an object. Afterwards it can be imported as an object too.

What does the "class" syntax in JavaScript force you to do when creating an object?

invoke a constructor with the new keyword, so you can't misdirect your context.

What doest Object.freeze() do?

makes the object properties readonly.

What are the two main properties of an error object that's passed as an argument to catch in a try...catch construct?

name and message

name 2 types of modules imports in JS

named and alias (*) imports

Name 8 data types in JS

number, string, boolean, bigInt, undefined, null, object, symbol

Which function must be used to register Apex Wire adapters to be used in tests?

registerApexTestWireAdapter() from "@salesforce/sfdx-lwc-jest";

There are three types of attributes available in ARIA? What are they? Give examples

roles: role=button states: selected properties: multiselect vs regular select

The promise object returned by the new Promise constructor has internal properties. What are they?

state — initially "pending", then changes to either "fulfilled" when resolve is called or "rejected" when reject is called. result — initially undefined, then changes to value when resolve(value) called or error when reject(error) is called.

What is object desctructuring?

var employee = { firstName: "Nikhil", lastName: "Na" }; var {firstName, lastName} = employee

Which keyword allows a function to access all or none parameters

(...)

Data Type cohersion: What will null convert to if converted to a number data type. number(null)

0

name 4 uses of the Spread operator

1. create a copy of the array var x = [1,2,3] var y = [...x] 2. concatinate var y = [...x, 4] 3. passing array to a function as separate arguments function add(a,b,c){ return a+b+c; } add(...x) 4. convert string to array var z =[..."ABCD"]

DOM Manipulation: Name 3-4 different ways to select an element in the DOM.

1. document.getElementById 2. document.getElementByClass 3. document.querySelector("div/#id/.class") 4. document.querySelectorAll("div/#id/.class")

name 2 uses of the Rest operator

1. you can gather any number of arguments into an array function(...args) { console.log(args) } add(1,2,3) results in 1,2,3 2. to gather any number of arguments after a certain argument number function (x,y, ...z) { console.log(x, '', y); console.log(z); }

New Date(2018, 11, 24); What date is this?

24 Dec 2018, months start from 0.

Which statement is true about the rendering of the inner div with css class title in the following component composition: <template> <c-custom-card> <div class="title">{title}</div> </c-custom-card> </template>

<customInput label="{#v.currLabel}"/>

What Is a Developer Hub Org?

A Developer Hub (Dev Hub) is the main Salesforce org that you and your team use to create and manage your scratch orgs.

Here is the package.json for the bar.awesome module: {"name": "bar.awesome","version": "1.3.5","peerDependencies": { "baz": "5.x" }} A particular project has the package.json definition below. {"name": "UC Project Extra","version": "0.0.5","dependencies": { "bar.awesome": "1.3.5", "baz": "6.0.0" }} What happens when a developer executes npm install?

A The command fails because bar.awesome does not have any dependency. Incorrect. bar does have a dependency on baz. B The command fails because bar versions are not compatible. Incorrect. The bar versions are compatible, but the baz versions are not. C The command succeeds but displays a warning about a version mismatch. Correct. There is a mismatch on the baz dependency that causes the warning. D The command succeeds with no errors or warnings. Incorrect. The command does succeed but there is a warning for the mismatched baz dependency.

const getId = new Promise((resolve, reject) => { setTimeout(() => resolve(15), 1500); }); const getBook = bookId => new Promise((resolve, reject) => { setTimeout(() => resolve('${bookId}:JavaScript Algorithms'), 1500); }); getId.then(id => getBook(id)).then(data => data); What is the correct code to replace the last line with an async/await function?

A async function getBookInfo() { const Id = await getId; const result = await getBook(id); } getBookInfo(); Correct. Correct use of await with an async function. The await expression is always inside an async function. B async function getBookInfo() { const Id = await getId; const result = await getBook(id); } await getBookInfo(); Incorrect. Extra await calling getBookInfo() not necessary. C await function getBookInfo() { const Id = getId; const result = getBook(id); } async getBookInfo(); Incorrect. Wrong use of await and async to get info. The await expression is always inside an async function. D async function getBookInfo() { const Id = getId; const result = getBook(id); } await getBookInfo(); Incorrect. Wrong use of await and async to get info. The await expression is always inside an async function.

const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('P1 Resolved'); }, 1500); }); const p2 = (data) => new Promise((resolve, reject) => { setTimeout(() => resolve('${data}, P2 Resolved'), 1500, data); }); Which two answers correctly execute p1 and p2?

A p1.then((data) => p2(data)).then(result => result); Correct. The method promise.then() is used to associate further action with a promise that becomes settled. B async function getResult() { const data = await p1; return await p2(data); } getResult(); Correct. Using await inside the function causes both to execute. C p1().then(function() { p2().then(function(result) { return result; }); }); Incorrect. The syntax is wrong for calling p1 and p2. D async function getResult() { const data = p1; const result = p2(data); } await getResult(); Incorrect. The await is outside the function calling the data.

If an application manipulates the browser history using the History API, which event should a developer use to detect when the browser's native back or forward button is clicked?

A popstate Correct. A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document. B navigate Incorrect. The navigate() method loads a specified URL. C pushstate Incorrect. The pushstate() method pushes the given data onto the session history stack with the specified title. D change Incorrect. The change event is fired for changes to , , and elements.<!--EndFragment--> </body> </html>

Refer to the code below: 01 const https = require('https'); 02 const server = https.createServer((req, res) => { 03 // code goes here 04 let reqData = JSON.parse(chunk); 05 console.log(reqData); 06 }); 07 res.end('OK'); 08 }); 09 server.listen(8000); Which code does the developer need to add to line 03 to receive incoming request data?

A req.on('data', (chunk) => { Correct. The chunk argument is passed in for JSON.parse to use. B req.get((chunk) => { Incorrect. The get method is used with http requests. C req.data((chunk) => { Incorrect. Data is what is getting passed in, not a method. D req.on('get', (chunk) => { Incorrect. The get argument is not passed in so can not be used this way.

What Is a Scratch Org?

A scratch org is a dedicated, configurable, and short-term Salesforce environment that you can quickly spin up when starting a new project, a new feature branch, or a feature test.

Events are fired inside the browser window and tend to attach to specific items residing in the browser. What are some of these items?

A single element, set of elements, the HTML document loaded in the current tab, or the entire browser window.

What must be done to Jest tests to cause a module import statement inside a JavaScript file to resolve to the mocked version of this module?

Add mocked module to the moduleNameMapper setting in jest.config file

Given the Aura components named auraParent and auraChild and the Lightning web components named lwcParent and lwcChild, which statement or component composition is valid?

Aura can contain LWC, not the other way around.

difference between function declaration and function expression

Declaration allows to call function directly function funcDeclar(a,b) { return a * b; } funcDeclar(2,3) vs Expression is called from a variable that the function expression is assigned to var x = function(a, b) {return a*b}; x(a,b)

Name three adapters for mocking wire service data in Jest.

Generic wire adapter: The generic adapter emits data on demand when you call the emit() API. It does not include any extra information about the data itself. Lightning Data Service (LDS) wire adapter: The LDS adapter mimics Lightning Data Service behavior and includes information about the data's properties. Apex wire adapter: The Apex wire adapter mimics calls to an Apex method and includes any error status.

What is an IIFE

Immediately Invoked function Expression To create one, wrap the anonymous function with brackets. (function(a,b){ return a*b })(2,3)

What is DataBinding in Aura? How is Lightning Web Component Data Binding different?

In Aura components, this data binding is two way. Changes to the fName attribute are passed into the child component's firstName attribute, and changes in the value of the firstName attribute in the child component are passed back to the fName attribute of the owner component. In Lightning web components, the data binding for property values is one way. If the property value changes in the owner component, the updated value propagates to the child component. The reverse is not true.

What is a facet in Aura? And what is the equivalent in LWC?

In Aura, a facet is any attribute of type Aura.Component[] Lightning web components use slots instead of facets.

Explain how is information passed down from Parent to Child component

Information can be passed down using public properties and public methods. You can make a component property public by prefacing it with the @api decorator. Then, set the public property by an external component.

What is the LWC equivalent of a proprietary "Event" Object in Aura

Instead of the proprietary Event object in Aura components, use the Event or CustomEvent standard DOM interfaces. Preferably the former, the framework may need to patch properties and methods of events to normalize implementations between browsers, and using CustomEvent guarantees that your component is covered.

Where can you use the await keyword and what does it do?

Keyword await only works inside async functions and makes JavaScript wait until that promise settles and returns its result.

When using LDS what does the createRecord function return?

LDS createRecord function returns a promise

Do LWC children inherit parent's CSS Styling?

Lightning web component styles don't cascade to their children. Overriding styles that you don't own can create many problems, so Lightning web components don't allow it.

Which collections in JS are ordered by a key

Maps and Sets of Objects

What is the most notable difference between PowerShell (Windows) and BASH (macOS/Linux). Hint: It has to do with output.

Most notably, BASH treats outputs as strings such as writing to .txt files. Whereas PowerShell treats the output as objects.

3 ways to create an object?

Object literal Object constructor Object.create();

When using an async function what is always returned?

Promise object

What is a promise in JS?

Promises developed as libraries to handle asynchronous code in a way that made it easier to reason about when your code succeeded or failed. They also contain built-in mechanisms to chain one call after the other. Competing libraries eventually standardized in the browser as the Promise object.

Explain what .call function does?

Sets the context of a function and optionally passes in the parameters. var person = { firstName: "Liu", id: 1, getFullName : function() { return this.firstName; } } var person1 = { firstName: "NotLiu" } person.getFullName.call(person1); optional parameters (if they were defined in getFullName)person.getFullName.call(person1, "A", "B");

Purpose of .forceignore and .gitignore

Similar to .forceignore, which excludes files or directories from syncing between your local project and your Salesforce org, .gitignore excludes files from being added to your version control system.

Explain how is information passed from Child component to Parent.

The child component dispatches the event and the parent component listens for it. Dispatching the event includes creating an event object the child can pass to the parent component. The parent has a handler to respond to the event.

Difference between connectedCallback() and disconnectedCallback()

The connectedCallback() is invoked when a component is inserted into the DOM. The disconnectedCallback() is invoked when a component is removed from the DOM.

Which sequence allows for testing a property without waiting for an asynchronous update?

The property is set after or before (I don't remember) appendChild() call

2 main uses of the '...' operator in JS?

The three dots ( ... ) operator has two uses. As the rest operator, it is used to gather up all the remaining arguments into an array. But as the spread operator, it is used to expand a single variable into an array. In both cases, it is working with arrays. It is just either expanding or collapsing that array. Make sense?

What should you use @wire for in a JavaScript file?

To Read Data (cacheable=true)

how to refresh the cache data returned from an Apex method?

To refresh the data that was cached by an Apex method, call the refreshApex function. Note: Lightning Data Service is unaware of the data that's cached by Apex methods. When an LDS function updates a record, that update has no impact on data that was cached by an Apex method.

How can the LWC child component change the value of an attribute that was passed to it from an LWC Parent?

To trigger a mutation for the property value provided by the owner component, the child component can send an event to the parent. If the parent owns the data, the parent can change the property value, which propagates down to the child component via the one-way data binding.

how to use third-party JS libraries in LWC?

To use a third-party JavaScript library in an Aura component or a Lightning web component, you must upload the library as a static resource. import resourceName from '@salesforce/resourceUrl/resourceName'; You then use loadScript and loadStyle to load the third-party library.

How do you access an exported variable that was imported as a single object?

Use the keyword to assign an alias, reference the alias AND property name

Explain how the @wire decorator works.

We import the needed wire adapter. We tell the wire adapter which fields to retrieve To wire the a property, we apply the @wire decorator and specify the wire adapter to call, and the parameters that the adapter needs (recordId and fields). Then the wire adapter provisions a stream of values to the a designated property, which will be set multiple times. If a record is retrieved, it's stored in account.data. If the record retrieval fails, the error is stored in account.error.

When is the init event executed in reference to component's construction and rendering?

We use the init event in an Aura component to initialize a component after component construction but before rendering.

What is a closure?

When a function is declared, it holds a reference to any variables or arguments declared within it, and any variables it references in the scope that it is contained within. This combination of its variables and arguments along with local variables and arguments from its containing scope is called a closure.

When is the context not set? When a function is declared or when the function is invoked?

When a function is invoked, there is always an object container around that function. This object container is its context and the this keyword points to that context. So context is not set when a function is declared, but rather where the function is invoked.

What is a closure?

When an inner function allows access to the private variables of the outer function. for e.g. function outer() { var counter = 0 return function inner() { counter +=1 return counter } } var counter = outer() undefined counter() 1 counter() 2 counter() 3

When is it necessary to include the return keyword in an arrow function?

When multiple function calls are made (when using curly brackets)

How are asynchronous DOM Changes tested in Jest?

When the state of a Lightning web component changes, the DOM updates asynchronously. To ensure that your test waits for updates to complete before evaluating the result, return a resolved Promise. To do this, chain the rest of your test code to the resolved Promise. Jest waits for the Promise chain to complete before ending the test. If the Promise ends in the rejected state, Jest fails the test.

When would a Lightning Developer use renderedCallback() instead of connectedCallback()?

When there is a requirement to perform logic after the component finishes rendering phase

Describe working with External APIs through LWC

Working with external APIs in a Lightning web component is similar to Aura components. By default, you can't make calls to third-party APIs from JavaScript code in Lightning web components. Add a remote site as a CSP Trusted Site to allow JavaScript component code to load assets from and make API requests to that site's domain. Aura components and Lightning web components have the same restrictions around running JavaScript code from third-party sites. To use a third-party library, you must upload the library as a static resource.

Do LWC inherit Aura CSS styling?

Yes, Aura component styles cascade to any Lightning web components that they contain.

What are two ways of handling Events in LWC

You can handle events in HTML (add an event listener in the template) or JavaScript (write an event listener function).

Can you import multiple decorators? Can you apply multiple decorators?

You can import multiple decorators, but a single property or function can have only one decorator. For example, a property can't have @api and @wire decorators.

difference between call and apply functions

call passes in arguments as strings, apply passes arguments in an array person.getFullName.apply(person1 ["A", "B"]]);

Given an error caught in the try-catch block from a Lightning web component JavaScript file, which statement must be used to view the contents of the object err in the console as a string?

console.log(JSON.parse(err))

Give an example of Closure

const greetingMaker = function(greeting){ return function(whoGreeting){ return greeting + ", " + whoGreeting + "!"; } } const greetingHello = greetingMaker("Hello"); const greetingBonjour = greetingMaker("Bonjour"); const greetingCiao = greetingMaker("Ciao"); console.log(greetingHello("Gemma")); // Hello, Gemma! console.log(greetingBonjour("Fabien")); // Bonjour, Fabien! console.log(greetingCiao("Emanuela")); // Ciao, Emanuela!

Which statement lets the Jest test to catch a mock handler for a toast event?

const handler = jest.fn(); element.addEventListener(ShowToastEventName, handler);

Which statement returns all the paragraphs in the Shadow Dom element?

const.shadowRoot.querySelectorAll('p');

DOM manipulation: Name 2 ways to manipulate elements, attributes and classes

document.querySelector(#id).innerText, innerHTML, textContent, setAttribute, getAttribute, style, classList.add

Given a registered Apex wire adapter named findRecordsAdapter and a mocked @wire named mockRecords, which statement causes a Jest test to use the mocked records once the Apex method is called?

findRecordsAdapter.emit(mockRecords);

Which statement must be used to set fake timers before all the tests in a Jest JavaScript file?

jest.useFakeTimers() inside the beforeAll() function

Why would a developer use <apex:includeLightning/> on a regular Visualforce page?

to load the JS file used by the LWC for VF

When would developers use sfdx force:source:deploy?

when they want to deploy metadata changes to developer sandbox or a scratch org