JAVASCRIPT DEVELOPER I EXAM CHEAT SHEET (UNOFFICIAL) – BY SANTANU BORAL

OVERVIEW

Multiple Choice Questions: 65 ques (5 unscored), pass: 65%, duration: 105 mins (No questions from LWC)

Server Side Testing Variables, Trailmix: Prepare for your Salesforce JavaScript
JavaScript 7% Types, & Developer I Credential
8% Collections
23% Trail: Study for the Salesforce JavaScript Developer
I Exam
Asynchronous
Programming
13%

Debugging &
Error Handling
7% Objects, Lightning Web Components Specialist
Functions, & Superbadge
Browser & Classes
Events 25%
17%

FEW IMPORTANT TOPICS FOR EXAM

DATATYPES & DECLARATIONS

Primitive falsey Object Wrapper & Type Casting Falsey always returns false typeof (‘99’) // “string” returns a
Boolean false Boolean b = new Boolean(‘false); string with a value
if(0){
Number 0 and Number num = new Number(9.08); //block never executes instanceof New String (‘Bat’);
(holds NaN let num2 = 9.08; } //checks value is of object
decimal, float, num === num2; //false instance.
integer, NaN) num == num2; //false; typeof(null); //”object”
Number (‘9’); // 9
String (““) or Type Coercion & Operator
(‘’) Number.parseFloat(‘9.09’); Precedence const p = Number (‘9’);
Number.parseInt(‘2’); p instanceof Number; //false
symbol 10 + ‘2’ + undefined; // “102undefined”
String str = new String(‘sun’); true + 10 * 2; //21 const q = new Number (‘10’);
null null ‘bat’ + null; // “batnull” q instanceof Number; //true
“35” – 5; //30
undefined undefined
Refer: Grammar & Types.

Declaration Usage Initialization Variable Hoisting Scope Example of Scopes

(Use before declare) //block (trying to access let outside of
var var x; //undefined Optional console.log(x); //undefined Function block)
var x = 10; var x = 10; {
let x=10;
let let str = ‘santanu’; Optional console.log(x); //ReferenceError Block }
let name; //undefined let x = 10; console.log(x); //ReferenceError
const const x = 10; Mandatory console.log(x); //ReferenceError Block //function (trying to access var outside of it)
x = 7; //can’t reassign const x = 10; const str =() => {
var initialStr = 'tom';
No declaration x = 7; //same as below Optional console.log(x); //ReferenceError Window or if (!!initialStr) {
console.log(window.x) x = 10; global var changeStr = 'jerry';
; }
console.log(initialStr); //tom
Primitive datatypes are immutable. Variables can be assigned to a new value but existing values cannot console.log(changeStr); //jerry
be changed. }
Check for: &&, II, ==, === , !=, !==, !! operators and usage and comparing value and object types. str();
console.log(changeStr); //ReferenceError
Refer: Expressions & Operators
DATE FUNCTIONS
const myDt = new Date(); //today’s date and time
dt.setDate(myDt + 10); //increment 10 days from today check getTime(), setTime(), Date.toString().
dt = new Date (2008, 12, 30); Refer: Date Functions

STRING METHODS AND USAGE

Few methods have been given for illustrations. Refer String Methods

concat "manu".concat("facture"); // ”manufacture” const str1 = '5';

includes
const sentence = 'The quick brown fox jumps over the lazy dog.'; console.log (str1.padStart(2, '0')); //”05”
indexOf const word = 'fox';
const str2 = '200'; console.log(str2.padEnd(7,'ab'));
const index = 4;
charAt //200abab
match
console.log (sentence.indexOf(word)); //16
var str = "The rain in Spain";
replace console.log (sentence.includes(word)); //true
var res = str.match(/ain/g);
slice console.log (`The character at ${index} is ${sentence.charAt(index)}`);
console.log(res); // Array [“ain”, “ain”]
//"The character at index 4 is q"
substring
console.log(sentence.substring(1,3)); //he
substr console.log(sentence.slice(4,19)); // "quick brown fox"

COLLECTIONS

ARRAYS [INDEXED COLLECTION] - Stores multiple values into single variable. Refer: Array

let fruits = [‘Apple’, ‘Banana’, ‘Orange’]; //single dimensional array //following creates array taking each character
let fruits = Array.from (‘Apple’); // [“A”, “p”, “p”, “l”, “e”],
let fruits = new Array (‘Apple’, ‘Banana’, ‘Orange’);
let arr = Array.of(5); //[5], here 5 is value of 0th index
let arr = [ [‘a’, 1], [‘b’, 2], [‘c’, 3]]; //multi-dimensional array let arr2 = Array (3); //[undefined, undefined, undefined] , creates array with size 3
Array.isArray(fruits); //true
Loop through an Array

for…in (index wise) for…of (element wise) Traditional for loop for…each (operates on function)
let fruits = ['Apple', 'Banana', 'Orange']; let fruits = ['Apple', const arr = [1, 4, 9, 16]; [2, 5, 9].forEach(logArrayElements);
'Banana', 'Orange'];
for (let x in fruits) { for (let i=0; i< arr.length; i++){ function logArrayElements(element, index,
console.log(fruits[x]); for (let x of fruits) { console.log(arr[i]); array) {
} console.log(x); } console.log('a[' + index + '] = ' + element);
// Apple, Banana, Orange } }
//1,4,9,16
//Apple, Banana, Orange //a[0] = 2, a[1] = 5, a[2] = 9
Creating and returning new Array (original array content does not change)

map function – creates an array based on filter – creates a new array with reduced number slice – returns shallow copy portion of an array
function’s operations on the conditions applied. into new Array object.
const arr = [1, 4, 9, 16]; const arr = [1, 4, 9, 16]; const arr = [1, 4, 9, 16];
// pass a function to map // pass a function to map console.log(arr.slice(1,3)); //final index omitted
const mapA = arr.map(x => x * 2); const mapA = arr.filter(x => x % 2);
// expected output: Array[4,9]
console.log(mapA); console.log(mapA);
// expected output: Array [2, 8, 18, 32] // expected output: Array[4,16]
Changing original array content

sort – returns sorted array splice – changes the content by reduce – executes reducer function on each push – add elements(s) at end.
adding or removing elements element resulting single output value.
const arr = [1, 4, 9, 16]; const arr = [1, 4, 9, 16]; const arr = [1, 4, 9, 16]; const arr = [1, 4, 9, 16];
const reducer = (acc, curr) => acc + curr; arr.push(25); //Array[1,4,9,16,25]
console.log(arr.sort()); //replaces first element with 5
//Array[1,16,4,9] arr.splice(0,1,5); // 1 + 4 + 9 + 16 arr.pop(); //removes last element
console.log(arr.reduce(reducer)); //output: 30
console.log(arr); //Array[5,4,9,10]
refer shift, unshift functions

MAP AND SET

 MAP – holds key/value pair. Refer: Map SET – holds unique values (no duplicates) Refer: Set
let vmap = new Map ([ ['a', 1], ['b', 2], ['c', 3] ]); let pSet = new Set([1,4,9,4,16]);
vmap.set('b',10); //assigns values based on key console.log(Array.from(pSet.values())); //Array[1,4,9,16]
vmap.get('c'); //get the values based on key
pSet.has(16); //check existence
vmap.has('a'); //check existence
pSet.size(); //size of array, output 4
Refer: add, delete, keys, values, forEach functions on Map
Refer: add, delete, keys, values, forEach functions on Set
JSON – Serializing objects, arrays, numbers, strings, booleans and nulls.

JSON.parse – parse a JSON string and converts JavaScript value or JSON.stringify – converts JavaScript object or value to JSON String.
object.
const json = '{"result":true, "count":42}'; console.log(JSON.stringify([new Number(3), new String('false'), new
const obj = JSON.parse(json); Boolean(false)]));
console.log(obj.result); //true
//expected output: "[3,"false", false]"

Object • Prototypical object – defines a template from which new

--------------
toString()
objects can get initial properties.
hasOwnProperty() • Class based are Object oriented languages.
• Every object has __proto__ Object property which refers
__proto__
Parent object.
Animal
• Objects are mutable.
---------------------------
__proto__ • If any property/method is reference on an object, then to find
color (property)
__proto__ this existence system checks entire prototype chain
• Newly created Object which doesn’t refer to a prototype
should have toString() and hasOwnProperty().
Tiger Dog • Objects are passed by reference; primitives are passed by value
CREATING OBJECTS

Using new operator from class Using literal Using function Using Prototype with Object.create
class Employee { let emp = { function createEmp (name, dept){ const employee = {
constructor() { return { name: '',
name: "Santanu",
this.name = ''; name: name, dept: ''
dept: "IT"
this.dept = 'general'; dept: dept }
}
} }
const emp = Object.create (employee);
} }
emp.name = 'Santanu';
let emp = new Employee(); let emp = createEmp('Santanu', 'IT'); emp.dept = 'IT';
emp.name = 'Santanu';
DEFINING AND USING PROPERTIES

Key/value using semi-colon Assigning hardcoded Dynamic assignment Using Object.defineProperty Using getter/setter
property
let emp = { let emp = { emp [dynamicValue] = Object.defineProperty(emp, 'DoJ', let emp = {
‘Kolkata’; { sname: '',
name: "Santanu", name: "Santanu",
value: new Date() get name(){
dept: "IT" dept: "IT" emp [‘id’] = 1001;
}); return this.sname;
} }
Refer: Enumerable, Configurable, },
emp.Id = “1001”;
Writable set name(str){
//to delete property
this.sname = str;
delete emp.name;
}
}
emp.name ='Santanu';

FEW MORE IMPORANT STATIC METHODS

Object.keys – returns enumerable keys let emp = { console.log (Object.keys(emp)); // Array [“name”, “dept”]
console.log (Object.values(emp)); //Array [“Santanu”, “IT”]
Object.values – returns list of property values name: "Santanu",
const returnTarget = Object.assign(emp, {a:1, b:2});
dept: "IT"
Object.assign – copy objects/properties console.log(returnTarget); // Object { a:1,b:2,dept: “IT” ,name: “Santanu” }
}
Object.seal(emp);
Object.freeze – objects cannot be changed anymore
delete emp.name; //cannot delete
Object.seal – no new properties, existing properties Object.freeze(returnTarget);
will be non-configurable returnTarget.dept = “Finance” //cannot change property value
FUNCTIONS
DEFINING FUNCTIONS

Using function Using expression Using Arrow (ES6)

function displayLog(str){ const squareANumber = function square (number) { const squareANumber = (number) => number * number;
console.log(str); //check no function and return keywords (clean writing)
return number * number;
}
console.log(squareANumber(3)); //Output: 9
console.log(displayLog(3)); //3 }
console.log(squareANumber(3)); //Output: 9
//with default parameter
const printLog = () => console.log('Hello'); //without parameters
function multiply (a, b = 1) {
console.log(printLog());//Output: Hello
return a * b;
}
UNDERSTANDING this
- this is determined how function is called
- this cannot be set during execution
- It varies each time when function is called
- bind() to set regardless how it is called
- Arrow function retains this value of => context
this varies context wise

Global Context, refers to Function with/out strict mode Function is called on an Object, this Function is used as Constructor; this refers to
window refers to Object instance itself newly created Object instance
console.log (this === function f1() { var o = { function myFunction() {
window); return this; prop: 10,
this.num = 10;
a = 45; }
myFunc: function() {
console.log(window.a); // In a browser: }
return this.prop;
//45 f1() === window; // true
} var o = new myFunction();
};
function f2() { console.log(o.num); // 10
'use strict'; console.log(o.myFunc()); // 10
return this;
}
f2() === undefined; // true
Arrow function holds this Example of Dynamic Binding Using call: specify this and pass Using apply: this and Using bind: this and
context parameters individually array as parameters receive a reference
var globalObject = this; let product = {name: "Prod1"} works.call(product, 'height', 'width'); works.apply(product, let prod =
['height', 'width']); works.bind(product);
var foo = (() => this); function works(arg1, arg2){
//Output: Prod1 has height and prod('height', 'width');
foo() === globalObject; console.log(`${this.name} has //Output: Prod1 has
width
// true ${arg1} and ${arg2}`); height and width
//Output: Prod1 has
} height and width
ASYNCHRONOUS PROGRAMMING
Not to prevent our applications to perform certain tasks that could be delayed due to other time-consuming operations, perform that in async way.

Callback function – is passed as param which is Promises – Putting aside a long running function, when Async – Typically used with Promise
being called at any point of time. Like, setInterval it is resolved or rejected and call stack is empty, we which resolves to a value and await is also
is calling myCallback in every second up to thrice then use its value. used with it.
var iCount = 1; let myPromise = new Promise((resolve, reject)=>{ const promise1 = Promise.resolve('First')
setTimeout(() => resolve("done"), 1000); const promise2 = Promise.reject('Second')
var intervalID = setInterval (myCallback, 1000,
setTimeout(() => reject("error"), 2000);
'Hello', 'World');
}); const runPromises = async () => {
function myCallback(a, b) { return await Promise.all([promise1,
myPromise.then(result => {console.log(result);}
promise2])
console.log(a,b); ).catch(error => console.log(error)
}
).finally(()=> console.log('finally'));
if (iCount ===3) clearInterval (intervalID);
runPromises()
iCount++; .then(res => console.log(res))
} //Output: done, finally [as resolve is returned first] .catch(err => console.log(err))
//Output: if we change reject timeout to 500 then output will be
Hello World error, finally //Output: Second, if we use Promise.race
Hello World Promise states – fulfilled, rejected, pending then First will be the output.
Hello World For Promise.allSettled, output will Array
Methods – all, allSettled, race. Refer: Promise with First and Second values.
CLASSES
Class is a template for an object and is a “syntactic sugar” on Prototype. It has properties and methods. JavaScript does not support multiple inheritance.

Create a class with height, width Extend Shape class and call parent class’ constructor and Difference with Prototype
property and calculateArea method methods by super keyword
class Shape { class Square extends Shape { 1. Function created by class labelled by special
constructor (height, width, name) { internal property
constructor (height, width) {
super(height, width);
this.height = height; [FunctionKind]]:"classConstructor"
this.name = name;
this.width = width; 2. Unlike regular function, it must be called with
}
} new keyword.
calculateArea(){
calculateArea(){ super.calculateArea(); 3. Methods of a class are non-enumerable. A class
console.log('Calculate Area'); console.log(`${this.name} area is`, this.height* this.width); definition sets enumerable flag to false to all the
} } methods in the prototype.
} } 4. Classes always run in strict mode. Refer Class
//instantiate class and call its method
let myShape = new Square(20,30,'Square Shape');
myShape.calculateArea();
//Output: Calculate Area, Square Shape area is 600
ERROR HANDLING

try-catch-finally try-catch blocks can be nested, also below example of

throwing errors
try { try {
//try to execute the code Few important points
//try to execute the code
try{
} catch(e) { console.log('inner try');
throw err; • try-catch only works for runtime errors
//handle errors
}catch(e){ • try-catch works synchronously
} finally { console.log('inner catch'); • throw operator generates an error
//execute always throw new Error('My Error Desc');
}finally{
• Variables are local inside try-catch-finally
//Output:
} console.log('inner finally'); block
inner try
try without catch and } • Build-in constructors for standard errors:
inner catch
try without finally is possible. } catch(e) { Error, SyntaxError, TypeError,
console.log('outer catch'); inner finally
finally block is optional with try..catch ReferenceError
} finally { outer catch
block • catch only process those error which it
console.log('outer finally'); outer finally
} knows and rethrow all other errors.

MODULES
Module is file which can be reused.

About a Module Sample module script Exporting a module Importing a module

- Each module has its own scope <script type="module" src="hello.js"> //myExport.js //main.js
- Module automatically runs in </script> export default class User { import User from './myExport.js';
strict mode constructor(name) { new User('Santanu');
<script type="module">
- Module is evaluated only first this.name = name;
// The variable is only visible in this
time when it is imported }
module script
- In a module, ‘this’ is undefined } //main2.js
- Module scripts are always let user = "Santanu"; //myExport2.js import {myExport2} from
deferred. console.log('I am a module'); export function sayHi(){ ... } './myExport.js';
</script> export function sayBye() { ... } or,
import * from as user from
'./myExport.js'; //to import all

TESTING WITH CONSOLE METHODS

console.log – outputs a message to web console console.assert – writes an error message when assertion is false, if assertion is
true then nothing happens.
console.info - outputs an informational message to web console
console.assert(false, 'comparing values', !!true);
console.error - outputs an error message to web console
//Output: Assertion failed {“comparing values”} true
console.warn - outputs a warning message to web console
Refer: Console
console.table – displays data in tabular format
TYPES OF TESTING

White-box testing Black-box testing False positive – may not fail when we break
High Complexity. Testing Efficient for large segment of code. application code
Efficient in finding errors and problems. Code access is not required.
Helps to optimize code. Less complex. False negative – fail when we refactor code
Requires developer’s introspection. Separation between user and developer perspective.

DOCUMENT OBJECT MODEL (DOM) AND EVENTS

When webpage is loaded, browser create DOM on the page.

Creating an element, adding event on the fly

Right side screen <script>
- Defining external script. const btn2 = document.createElement('button');
- Attach event listener on btn1 <script src=”myScript.js”/> btn2.innerHTML = 'click on me';
- Dynamically creating btn2 btn2.name = 'click on me';
under DIV and attaching event document.querySelector("#myDivId").appendChild(btn2);
listener dynamic with it. btn2.addEventListener('click', function(e){
- It shows event propagation alert(e.target.name);
during capture and bubble });
phase (default event firing </script>
Bubble
phase). Capture //to fire custom event from button, use following in
addEventListner:
this.dispatchEvent(
<button name=”btn1"
Target onclick=”myClick(event)”/>
new CustomEvent(‘myEvt’, detail: {parameters})
);

Window Object Use of selector Important methods of Event

Variables are global. querySelector – returns first stopPropagation – halt event preventDefault – lets say, you
element of matching selector propagation, let’s say during bubble want restrict user to view a site or
Few important methods to read:
querySelectorAll – returns all phase, you don’t want event to be performing certain action, you use
location, history, open the elements. fired on outer element. Here this method.
event.currentTarget comes into Refer: preventDefault
Refer: querySelector
Refer: Window play.
Refer: stopPropagation

REFERENCES

https://trailhead.salesforce.com/en/content/learn/trails/study-for-the-salesforce-javascript-developer-i-exam
https://javascript.info/js
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

FURTHER READING
Tips for passing Salesforce certified JavaScript Developer I Certification by Santanu Boral

ABOUT AUTHOR
Santanu Boral, Salesforce MVP, 23x certified (including Salesforce JavaScript Dev I certification)
Twitter: @santanuboral
Linkedin: Santanu Boral
My Blog: http://santanuboral.blogspot.com/

Date: 4th Sept 2020