JavaScript

Cheat Sheet

Credit -iLoveCoding
 1 Seven (7) Types 2 Basic Vocabulary

{
Variable Operator
1. String "Any text" A named reference to Operators are reserved-words that
Six Primitive Types

a value is a variable. perform action on values and variables.

2. Number 123.45
Examples: + - = * in === typeof != ...
3. Boolean true or false
4. Null null { Statement
5. Undefined undefined var a = 7 + "2"; A group of words, numbers
and operators that do a

{
6. Symbol Symbol('something') task is a statement.

Note: var, let &

7. Object { key: 'value'} const are all Keyword / reserved word
- Array [1, "text", false] valid keywords to Any word that is part of Expression
declare variables. the vocabulary of the
- Function function name() { } The difference A reference, value or a
between them is
programming language is group of reference(s)
covered on page 7 called a keyword and value(s) combined
of this cheatsheet. (a.k.a reserved word). with operator(s), which
3 Object Examples: var = + if for... result in a single value.

An object is a data type in var user = {

JavaScript that is used to store
a combination of data in a
simple key-value pair. Thats it.
name: "Aziz Ali",
yearOfBirth: 1988,
calculateAge: function(){
{ Value
These are the
values of the
respective keys
Method
If a key has a
function as a
value, its called
Key // some code to calculate age in user object. a method.
These are the }
keys in user object.
}
iLoveCoding
 4 Function
Parameters / Arguments
A function is simply a bunch of code bundled in a section. This bunch of code ONLY runs when the (optional)
function is called. Functions allow for organizing code into sections and code reusability. A function can optionally
take parameters (a.k.a
Using a function has ONLY two parts. (1) Declaring/defining a function, and (2) using/running a function. arguments). The
function can then use
this information within
Name of function // Function declaration / Function statement
the code it has.
Thats it, its just a name
function someName(param1, param2){
you give to your function.
Tip: Make your function
names descriptive to what Code block
// bunch of code as needed... Any code within the curly
the function does.
var a = param1 + "love" + param2; braces { ... } is called a
"block of code", "code
return a;
block" or simply "block".
Return (optional)
} This concept is not just
A function can optionally
limited to functions. "if
spit-out or "return" a value
statements", "for loops"
once its invoked. Once a // Invoke (run / call) a function and other statements
function returns, no further
someName("Me", "You") use code blocks as well.
lines of code within the
function run.

Invoke a function Passing parameter(s) to a function (optional)

Invoking, calling or running a function all mean the same At the time of invoking a function, parameter(s)
thing. When we write the function name, in this case may be passed to the function code.
someName, followed by the brackets symbol () like this
someName(), the code inside the function gets executed.

iLoveCoding
5 Vocabulary around variables and scope
Variable Declaration Scope
var a; The creation of the The limits in which a variable exists. var a = "global";
variable.

function first(){
Global scope
Variable Initialization The outer most scope is called the Global var a = "fresh";
a = 12; The initial scope.
assignment of value
function second(){
to a variable.
Functional scope console.log(a);
Any variables inside a function is in scope }
a = "me"; Variable Assignment of the function.
}
Assigning value to a
variable.
Lexical Environment (Lexical scope) Scope chain
The physical location (scope) where a The nested hierarchy of scope is
console.log(a); Hoisting variable or function is declared is its lexical called the scope chain. The JS
Variables are environment (lexical scope). engine looks for variables in the
var a = "me";
declared at the top scope chain upwards (it its
of the function Rule: ancestors, until found)
automatically, and (1) Variables in the outer scope can be
initialized at the time accessed in a nested scope; But variables
they are run. inside a nested scope CANNOT be accessed
by the outer scope. (a.k.a private variables.)

(2) Variables are picked up from the lexical

environment.
iLoveCoding
 Full list of JavaScript operators https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
6 Operators
Operators are reserved-words that perform action on values and variables.

Arithmetic Relational / Comparison Operator Precedence

.. + .. Add .. >= .. Greater than or equal to Given multiple operators are used in an expression, the "Operator
.. - .. Subtract .. <= .. Less than or equal to Precedence" determines which operator will be executed first. The
.. * .. Multiply .. != .. Not equal after coercion higher the precedence, the earlier it will get executed.
.. / .. Divide .. !== .. Not equal
.. % .. Remainder Operator Associativity
.. ** .. Exponential Increment / Decrement Given multiple operators have the same precedence, "Associativity"
..++ Postfix increment determines in which direction the code will be parsed.
Assignment ..-- Postfix decrement
.. = .. Assign value See the Operator Precedence and Associativity table here:
.. += .. Add then assign ++.. Prefix increment http://bit.ly/operatortable
.. -= .. Subtract then assign --.. Prefix increment
.. *= .. Multiply then assign
Others 7 Coercion
Logical typeof ..
When trying to compare different "types", the JavaScript engine
.. || .. Or .. instanceof ..
attempts to convert one type into another so it can compare the two
.. && .. And (..)
values.
...spread-operator
Equality . Type coercion priority order:
.. === .. Equality ..[..] 2 + "7"; // "27"
1. String
.. == .. Equality with coercion new .. 2. Number true - 5 // -4
delete .. 3. Boolean
Conversion ( .. ? .. : .. )
+ .. Convert to number Coercion in action
- .. Convert to number then negate it Does this make sense?
! .. Convert to boolean then inverse it
iLoveCoding
 8 Conditional Statements 9 Truthy / Falsy
Conditional statements allow our program to run specific code only if certain conditions are There are certain values in JavaScript that
met. For instance, lets say we have a shopping app. We can tell our program to hide the return true when coerced into boolean. Such
"checkout" button if the shopping cart is empty. values are called truthy values. On the other
hand, there are certain values that return
If -else Statement: Run certain code, "if" a Switch Statement: Takes a single false when coerced to boolean. These
condition is met. If the condition is not met, expression, and runs the code of the "case" values are knows as falsy values.
the code in the "else" block is run (if where the expression matches. The "break"
available.) keyword is used to end the switch
Truthy Values Falsy Values
statement.
true false
if (a > 0) {
switch (expression) { "text" ""
// run this code
case choice1: 72 0
} else if (a < 0) {
// run this code -72 -0
// run this code
break; Infinity NaN
} else {
-Infinity null
// run this code
case choice1: {} undefined
}
// run this code []

break;
Ternary Operator: A ternary operator returns
the first value if the expression is truthy, or
else returns the second value. default:
// run this code
(expression)? ifTrue: ifFalse; }

iLoveCoding
10 Loop Statements
Loops are used to do something repeatedly. For instance lets say we get a list of 50 Step 1: Run the initial expression.
blog posts from the database and we want to print their titles on our page. Instead of
writing the code 50 times, we would instead use a loop to make this happen. Step 2: Check if condition meets. If
condition meets, proceed; or else end the
loop.
For loop
Step 3: Run the code in block.
for (initial-expression; condition; second-expression){
// run this code in block Step 4: Run the second-expression.
}
Step 5: Go to Step 2.

While loop
Step 1: If the condition is true, proceed; or
while (i<3){ else end the loop.

// run this code in block Step 2: Run the code in block.

i++;
} Step 3: Go to Step 1.

Do while loop Step 1: Run the code in block.

do { Step 2: If the condition is true, proceed; or

// run this code in block else end the loop.
i++;
Step 3: Go to Step 1.
} while (i<3);
iLoveCoding
11 Ways to create a variable
There are 3 ways to create variables in JavaScript:
var, let and const. Variables created with var are var a = "some value"; // functional or global scoped
in scope of the function (or global if declared in the let b = "some value"; // block scoped
global scope); let variables are block scoped; and
const c = "some value"; // block scoped + cannot get new value
const variables are like let plus their values
cannot be re-assigned.

12 Event Loop
o op
ve nt L
E
JavaScript Engine

Message Queue Third-Party

Process
Task Task Task
HTTP Process
Execution Context

Execution Context Timer Process

Global Ex. Context

DOM Events

Call Stack
Last-in - first-out

iLoveCoding
13 Browser
A web browser is a pretty advance piece of software which contains a lot of components. Many of these components are accessible to a
web developer, so we can create complex web apps. At the same time a lot of components are kept out of reach of the web developer for
security purposes. For instance, we as web developers can get access to the user's location, but we cannot get access to the user's saved
passwords or browsing history. Let's see below how a browser is structured:

The browser contains a

Window lot of components that a
Each tab of a browser is Front-End Developer may
considered the window. need, such as Navigator,
JavaScript Engine and
This is the outer most https://...
Dev Tools.
container that a web-app
can access.
Navigator
Notice: A website opened
in one tab CANNOT
Document
access the window HTML / CSS Processor
The viewport or the section
object of another tab.
where the website is displayed is
Pretty cool right?
called the document of the page.
JavaScript Engine

Dev Tools

iLoveCoding
14 DOM - Document Object Model
What is a "Node"?
Query/Get Elements Modify Element (in the context of DOM)
// Preferred way: node.style.color = 'red'
document.querySelector('css-selectors') node.style.padding = '10px', Node: Every item in the DOM
document.querySelectorAll('css-selectors', ...) node.style.fontSize = '200%' tree is called a node. There
are two types of node - A text
// Old ways, and still work: node.setAttribute('attr-name', 'attr-value') node, and an element node:
document.getElementsByTagName('element-name') node.removeAttribute('attr-name')
document.getElementsByClassName('class-name') Text Node: Node that has text.
document.getElementById('id') Get and Modify Element Class
node.classList Element Node: Node that has
Create / clone Element node.classList.add('class-name', ...) an element.
document.createElement('div') node.classList.remove('class-name', ...)
document.createTextNode('some text here') node.classList.toggle('class-name')
node.cloneNode() node.classList.contains('class-name') Child Node: A node which is a
node.textContent = 'some text here' node.classList.replace('old', 'new') child of another node.

Add node to document Remove Node Parent Node: A node which

parentNode.appendChild(nodeToAdd) parentNode.removeChild(nodeToRemove) has one or more child.
parentNode.insertBefore(nodeToAdd, childNode) // Hack to remove self
nodeToRemove.parentNode.removeChild(nodeToRemove) Descendent Node: A node
Get Element Details which is nested deep in the
node.nextSibling tree.
Events
node.firstChild
node.addEventListener('event-name', callback-function)
node.lastChild Sibling Node: A node that
node.removeEventListener('event-name', callback-function)
node.parentNode share the same parent node.
node.childNodes
List of Events: https://developer.mozilla.org/en-US/docs/Web/Events
node.children
or google "Mozilla event reference"
iLoveCoding
15 Auto Inherited Properties
When you create a value in const thing = "some text"; const num = 123.45;
Array
JavaScript, certain properties are Google 'Mozilla Array' to find the docs
automatically inherited by this value. .filter()
This magic happens because every String Number .map()
type has a constructor with a special Google 'Mozilla String' to find the docs Google 'Mozilla Number' to find the docs .find()
property called prototype. All .concat() .toFixed() .every()
methods on the prototype gets .charAt() .toPrecision() .some()
automatically inherited by the new .indexOf() .toString() .sort()
value created for that type. .startsWith() .slice()
Take a look at some of of these .endsWith() Boolean .splice()
methods on the right. .split() Google 'Mozilla Boolean' to find the docs .reduce()
.slice() .toString() .forEach()

16 Built-in Objects Full list of builtin objects in JavaScript visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

JavaScript gives us a ton of useful
Math Date
built-in objects to make our lives
Google 'Mozilla Math' to find the docs Google 'Mozilla Date' to find the docs
easier. The Date and Math objects
Math.pow(2, 3) // 8 const d = new Date('9/17/1988');
are very useful on a regular basis.
Math.sqrt(16) // 4 d.getDay()
Take a look at some of their
Math.min(7, 8, 6) // 6 d.getFullYear()
features on the right.
Math.max(7, 8, 6) // 8 d.getMonth()
Math.floor(123.45) // 123
Math.ceil(123.45) // 124 Date.now()
Math.round(123.45) // 123 Milliseconds since Jan 1, 1970
Math.random() // 0.45..

iLoveCoding
17 Promise
What is a Promise? What is an Async task?
Promise is an object that provides a useful construct when dealing An async task is one in which a third-party process is
with asynchronous tasks. A promise is called a "Promise" because it doing the task.
guarantees it will run upon success or failure of that task. Examples:
- Requesting/sending data to a database
Working with a promise consists of two parts; (A) Creating a promise, - Requesting/sending data via HTTP protocol
and (B) Using a promise. - Working with the file system of the computer

// (A) Create a promise // (B) Using a promise

const p = new Promise((resolve, reject)=>{ p.then((res)=>{
// Do some async task console.log(res)
setTimeout(()=>{ })
if(condition){ .catch((err)=>{
resolve('Successful login'); console.log(err)
} else { })
reject('Login failed');
} Note: 90% of the time you will be working with pre-existing
}, 2000) promises. The step of "Creating a promise" would be done for
you either by a library, framework or environment you are
}) using. Examples of promises: fetch

iLoveCoding
18 'this' keyword
var name = "Fatema";
The this keyword is used inside a function. The this
keyword is merely a reference to another object.
function fun(){
What the this keyword refers to depends on the // some code here
scenario or the way the function is implemented.
console.log(this.name);
Here are the 3 scenarios to remember:
}
Scenario #1: this inside a function
The this keyword points to global object. const user = {
name: "Marium",
Scenario #2: this inside a method yearOfBirth: 1999,
The this keyword points to the object the calcAge: function(){
method is in.
const currentYear = (new Date()).getFullYear();
Scenario #3: When function is run with return currentYear - this.yearOfBirth;
call, bind or apply }
When a function is called using the }
.call(param) .bind(param) or .apply(param)
method, the first param become the object
that the this keyword refers to. fun(); // 'this' is global. Logs "Fatema"
user.calcAge(); // 'this' is the user object
fun.call(user); // 'this' is the user object. Logs "Marium"

Important Note:
In the browser, global is the window object.
In Node.js, global is the global object.

iLoveCoding
19 Constructor
// Defining a Constructor Rule of thumb:
What is a constructor?
function Car(make, model, year){ A) Set properties
In JavaScript, a constructor is a special
this.make = make; inside a constructor.
function that acts as a mold to create
new objects. this.model = model;
B) Set methods inside
this.year = year; the prototype
There are numerous built-in constructors
property.
in JavaScript, such as String, Number,
Promise, Date, Array, Object, and many this.setMiles = function(miles){
more. this.miles = miles
"new" keyword
return miles; The new keyword is
We can create our own custom
} used to create a new
constructors if need be.
} object (instance) from
the constructor.
A great place to use a constructor is
when you are creating multiple objects of // Using a constructor
the same kind.
const car1 = new Car('Toyota', 'Prius', 2016); "prototype" property
const car2 = new Car('Hyundai', 'Sonata', 2018); prototype is a special
There are two parts to working with a
property on every
constructor:
object. Properties
// Adding method to the constructor prototype (methods or values)
(1) Defining a constructor
Car.prototype.age = function(){ attached to the
When creating a custom constructor
return (new Date()).getFullYear() - this.year; prototype property
get inherited to every
(2) Using a constructor }
instance of the
with the "new" keyword
constructor.
car1.age(); // 2

iLoveCoding