JavaScript CheatSheet Flashcards
cheat sheet
What are the (7) Array finding functions?
.indexOf().lastIndexof().length().at().find().findIndex().includes()
What are the (4) Creating array functions
.slice().of().flat().flatMap()
What are the (6) Adding array functions?
.splice().push().copyWithin().fill().concat().unshift()
Name (3) Removing array functions
.shift().pop().splice()
Name (2) Re-arranging array functions
.reverse().sort()
What are (4) functions that can be used for Misc. tasks?
.join().toString().isArray().indexOf()
What are (8) looping array functions
.filter()
.map()
.reduce()
.forEach()
.reduceRight()
.some()
.every()
.entries()
Adding Methods
.push()
.unshift()
.splice()
Reorganizing methods
.copyWithin()
.slice()
.splice()
Combining methods
.concat()
…
Removing methods
.pop()
.shift()
.splice()
Filter/Searching methods
.filter()
.find()
.findIndex()
.indexOf()
.lastIndexOf()
Sort alphabetically.
let a = ['d', 'j', 'a', 'b', 'c', 'g'] a.sort() console.log(a) // ["a", "b", "c", "d", "g", "j"]
Sort in reversed alphabetical order.
let a = ['d', 'j', 'a', 'b', 'c', 'g'] a.sort().reverse() console.log(a) // [ "j", "g", "d", "c", "b", "a"]
Sort numerically.
let a = [5, 10, 7, 1, 3, 2] a.sort((a, b) => a - b) console.log(a) // [ 1, 2, 3, 5, 7, 10]
Descending numerical sort (flip the a and b around).
let a = [5, 10, 7, 1, 3, 2] a.sort((a, b) => b - a) console.log(a) // [10, 7, 5 ,3, 2, 1]
Add anything to the end of an array.
.push()
let a = []
let b = {}
a.push(b)
console.log(a[0] === b) // true
Add more than one item at a time to the end of an array
.push()
let x = ['a']
x.push('b', 'c')
console.log(x) // ['a', 'b', 'c']
Add to the beginning of array and returns the new length of the array.
.unshift()
let x = ['c', 'd']
x.unshift('a', 'b') // 4
console.log(x) // ['a', 'b', 'c', 'd']
Add element to an arbitrary location (second param 0).
.splice()
let a = [1, 2, 3, 4] a.splice(2, 0, 'foo') console.log(a) // [1, 2, "foo", 3, 4]
Copy part of an array to another location within the same array.
.copyWithin()
let a = ['a', 'b', 'c', 'd', 'e'] // target, start, end array1.copyWithin(0, 3, 4) console.log(a) // ["d", "b", "c", "d", "e"]
Returns a portion of an array selected with the start and end parameters.
.slice()
let a = ['ant', 'bison', 'camel', 'duck', 'elephant'] console.log(animals.slice(2)) // ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)) // ["camel", "duck"]
Replace an arbitrary element in array (second param 1).
.splice()
let a = [1, 2, 3, 4] a.splice(2, 1, 'foo') console.log(a) // [1, 2, "foo", 4]
Create a new array from two arrays.
.concat()
let x = ['a', 'b', 'c'] let y = ['d', 'e', 'f'] let z = x.concat(y) console.log(z) // ['a', 'b', 'c', 'd', 'e', 'f']
Not a method, but create a new array from two arrays by spreading them.
...
let x = ['a', 'b'] let y = ['c', 'd'] let z = [...x, ...y] console.log(z) // ['a', 'b', 'c', 'd']
Removes the last element from array and returns it. Changes the length of the array.
.pop()
let a = ['a', 'b', 'c'] console.log(a.pop()) // c console.log(a) // ["a", "b"]
Like pop but removes the first element from array and returns it. Also** changes the length** of the array.
.shift()
let a = ['a', 'b', 'c'] console.log(a.shift()) // a console.log(a) // ["b", "c"]
Remove elements from the middle of an array. Param 1: index to start removing. Param 2: index to stop removing.
.splice()
let a = ['a', 'b', 'c', 'd', 'e'] a.splice(1, 3) console.log(a) // ["a", "e"]
Keeps the items in the array that pass the test provided by the callback function.
.filter()
let a = ['foo', 'bar', 'fooz']
let b = a.filter(v => v.startsWith('foo'))
console.log(b) // ['foo', 'fooz']
Finds the first item in an array that matches.
.find()
let a = [5, 12, 8, 130, 44] let b = a.find(v => v > 10) console.log(b) // 12
Like find but instead of returning the item, it returns the index.
.findIndex()
let a = [5, 12, 8, 130, 44] let b = a.findIndex(v => v > 13) console.log(b) // 3
Finds the first index of an element. Returns ` -1` if not found.
.indexOf()
let a = ['foo', 'bar', 'baz']
console.log(a.indexOf('baz')) // 2
console.log(a.indexOf('quix')) // -1
Like indexOf, but finds the last index of an element. Returns -1 if not found.
.lastIndexOf()
let a = ['foo', 'bar', 'baz', 'foo']
console.log(a.lastIndexOf('foo')) // 3
console.log(a.lastIndexOf('quix')) // -1
Maps an array to another array by executing a callback function on each element.
.map()
let a = [1, 2, 3, 4] let b = a.map(v => v * 2) console.log(b) // 2, 4, 6, 8
Same as map but it flattens the array, same as: [[]].map(v => v).flat().
.flatMap()
let a = [1, 2, 3, 4] let b = a.flatMap(v => [v * 2]) console.log() // 2, 4, 6, 8
Executes a function for every element in array, does not return anything.
.forEach()
let a = [1, 2] a.forEach(x => console.log(x)) // 1 // 2
Executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element.
.reduce()
let a = [1, 2, 3, 4] let b = a.reduce((acc, v) => acc + v) // Basically: 1 + 2 + 3 + 4 console.log(b) // 10
Like reduce but reads the array from right to left.
.reduceRight()
let a = [1, 2, 3, 4] let b = a.reduce((acc, v) => acc + v) // Basically: 1 + 2 + 3 + 4 console.log(b) // 10
Tests if every item in the array passes the test.
.every()
let isBelow = v => v < 40 let a = [1, 30, 39, 29, 10, 13] console.log(a.every(isBelow)) // true
Tests if some items in the array passes the test.
.some()
~~~
let isOver = v => v > 40
let a = [1, 30, 41, 29, 10, 13]
console.log(a.some(isOver)) // true
~~~
Test if an array contains a value.
.includes()
let a = [1, 2, 3] let b = a.includes(2) console.log(b) // true
Creates a new array from the given arguments.
Array.of()
~~~
Array.of(‘foo’, ‘bar’)
// [‘foo’, ‘bar’]
~~~
Creates a new array from an array-like or iterable object.
Array.from()
console.log(Array.from('foo')) // ['f', 'o', 'o']
console.log(Array.from([1, 2, 3], x => x + x)) // [2, 4, 6]
Change all elements in an array to a static value.
.fill()
let a = [1, 2, 3, 4] let b = a.fill(0, 2, 4) console.log(b) // [1, 2, 0, 0]
Adding or removing an element at either end of an Array: (return value: item or new array length)
.push("⭐️").pop().unshift("⭐️").shift().unshift(arr.pop())
Changing all of an Array (the input Array is modified and returned):
.fill("🟡").fill("🍕").map((val,idx) => idx).reverse().sort().copyWithin()
Finding Array elements:
.includes().indexOf().lastIndexOf().find(x => x === 🍕).findIndex(x => x === 🍕)
Creating a new Array from an existing Array:
.slice().splice().filter().map().flatMap().concat()
Computing a summary of an Array:
.some().every().join().reduce().reduceRight()
Listing elements and returning iterators
.keys()
.values()
.entries()`
What is a JavaScript Iterator?
In JavaScript an iterator is an object which defines a sequence and potentially a return value upon its termination.
Specifically, an iterator is any object which implements the Iterator protocol by having a next() method that returns an object with** two properties**:
value
The next value in the iteration sequence.
done
This is true if the last value in the sequence has already been consumed. If value is present alongside done, it is the iterator’s return value.
Once created, an iterator object can be iterated explicitly by repeatedly calling next(). Iterating over an iterator is said to consume the iterator, because it is generally only possible to do once. After a terminating value has been yielded additional calls to next() should continue to return {done: true}.
Not all iterators are arrays
~~~
function makeRangeIterator(start = 0, end = Infinity, step = 1) {
let nextIndex = start;
let iterationCount = 0;
const rangeIterator = {
next() {
let result;
if (nextIndex < end) {
result = { value: nextIndex, done: false };
nextIndex += step;
iterationCount++;
return result;
}
return { value: iterationCount, done: true };
},
};
return rangeIterator;
}
~~~
What is a Generator function in JavaScript?
While custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. Generator functions provide a powerful alternative: they allow you to define an iterative algorithm by writing a single function whose execution is not continuous. Generator functions are written using the function* syntax.
When called, generator functions** do not initially execute their code**. Instead, they return a special type of iterator, called a Generator. When a value is consumed by calling the generator’s next method, the Generator function executes until it encounters the yield keyword.
The** function can be called as many times as desired**, and returns a new Generator each time. Each Generator may only be iterated once.
What are JavaScript Iterables?
An object is iterable if it defines its iteration behavior, such as what values are looped over in a for...of construct. Some built-in types, such as Array or Map, have a default iteration behavior, while other types (such as Object) do not.
In order to be iterable, an object must implement the @@iterator method. This means that the object (or one of the objects up its prototype chain) **must have a property **with a Symbol.iterator key.
It may be possible to iterate over an iterable more than once, or only once. It is up to the programmer to know which is the case.
Iterables which can iterate only once (such as Generators) customarily return this from their @@iterator method, whereas** iterables which can be iterated many times **must return a new iterator on each invocation of @@iterator.
What are syntaxes that expect iterables?
Some statements and expressions expect iterables. For example: the for...of loops, spread syntax, yield*, and destructuring syntax.
What are advanced generators?
Generators compute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to compute (or even infinite sequences, as demonstrated above).
The next() method also accepts a value, which can be used to modify the internal state of the generator. **A value passed to next() will be received by yield **.
Note: A value passed to the** first** invocation of next() is always ignored.
Generators have a return() method that returns the given value and finishes the generator itself.
How do you specify the [[Prototype]] of an object using the __proto__ syntax?
In an object literal like { a: 1, b: 2, __proto__: c }, the value c (which has to be either null or another object) will become the [[Prototype]] of the object represented by the literal, while the other keys like a and b will become the own properties of the object. This syntax reads very naturally, since [[Prototype]] is just an “internal property” of the object.
It’s worth noting that the { __proto__: … } syntax is different from the obj.__proto__ accessor: the former is standard and not deprecated.
Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when it’s intercepted by a getter or setter.
Similarly, you can create longer prototype chains, and a property will be sought on all of them.
Whats an example of setting a longer prototype chain?
How does JavaScript inherit “methods”
JavaScript does not have “methods” in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of method overriding).
When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.
What are Constructors? why do you use them?
Constructors are functions called with new.
We say that new Box(1) is an instance created from the Box constructor function. Box.prototype is not much different from the boxPrototype object we created previously — it’s just a plain object. Every instance created from a constructor function will automatically have the constructor’s prototype property as its [[Prototype]] — that is, Object.getPrototypeOf(new Box()) === Box.prototype.
Constructor.prototype by default has one own property: constructor, which references the constructor function itself — that is, Box.prototype.constructor === Box. This allows one to access the original constructor from any instance.
Note: If a non-primitive is returned from the constructor function, that value will become the result of the new expression. In this case the [[Prototype]] may not be correctly bound — but this should not happen much in practice.
How are Constructors related to Classes?
- you can rewrite constructors as classes
Classes are syntax sugar over constructor functions, which means you can still manipulate Box.prototype to change the behavior of all instances. However, because classes are designed to be an abstraction over the underlying prototype mechanism, we will use the more-lightweight constructor function syntax for this tutorial to fully demonstrate how prototypes work.
Because Box.prototype references the same object as the [[Prototype]] of all instances, we can change the behavior of all instances by mutating Box.prototype.
What are the key differences between var, let and const?
What are the two ways to make a function in JavaScript?
function a(){
console.log(‘I am a normal function’);
}
const b = () => {
console.log(‘I am an arrow function’)
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = (name) => {
console.log(My name is ${name})
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = () => {
const prefix = ‘Mr’
return (name) => {
console.log(${prefix} ${name}, welcome!)
}
}
console.log(greet()(‘Jack’))
What are the 3 types of scope?
Global (declaration outside of any function)
Function (declaration inside a function)
Block (declaration inside a block)
Remember from before that var is globally scoped whereas let and const are block scoped. Let’s understand that now.
What is a lexical environment?
It is essentially the surrounding state – the local memory along with the lexical environment of its parent.
function x() {
var a = 7
function y() {
console.log(a)
}
return y
}
var z = x()
console.log(z) // [Function: y]
z()
When x is invoked, y is returned. Now, y is waiting to be executed. Kind of like a loaded gun waiting to be shot! 🔫
So, when we finally invoke z, y is invoked. Now, y has to log a so it first tries to find 🔍 it in the local memory but it’s not there. It goes to its parent function. It finds a there.
Voila! There you have it - this is closure.
Even when functions are returned (in the above case y) they still remember their lexical scope (where it came from)
Totally unrelated quote for kicks 👻:
They may forget what you said - but they will never forget how you made them feel - Carl W. Buehner
What are the advantages of closures in JavaScript?
- Currying
let add = function (x) {
return function (y) {
console.log(x + y)
}
}
let addByTwo = add(2)
addByTwo(3)
- Data Hiding/Encapsulation
Suppose you want to create a counter application. Every time you call it, the count increases by 1. But you don’t want to expose the variable outside the function. How to do it?
What is Hoisting in JavaScript?
This is JavaScript’s default behavior of moving declarations to the top of the program.
var declaration is hoisted up and initialized with undefined.
let and const declarations are hoisted up but not initialized.
function definitions are also hoisted up and stored as they are.
Async + defer…
When Script tag inside <head>
Async + defer…
Script tag inside <body>
Async + defer…
async when inside the <head> tag
If you want to load external script which is not dependant on the execution of any other scripts, use async.
Note: The async attribute does not guarantee the order of execution of scripts.
Async + defer…
defer when inside the <head> tag
If there are multiple scripts which are dependant on each other, use defer. Defer script are executed in the order which they are defined.
What is Explicit binding?
Explicit binding is when you force a function to use a certain object as its this.
We are using this properly, but can you see the problem with the above code?
We are repeating code. And one of the principles of good programming is keep your code DRY! (Don’t Repeat Yourself)
So, let’s get rid of displayName_2 and simply do:
student_1.displayName_1.call(student_2) // Raj
call forced displayName_1 to use the second object as its this.
What are the three methods used to explicity bind this?
- call()
- apply()
- bind()
How to use the slice() JavaScript array method
- can be used to create a copy of an array or return a portion of an array.
- does not alter the original array but instead creates a shallow copy
MDN: “The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array…”
- Two arguments are INDEXES
- the end is NOT included.
- 1st arg = inclusive, 2nd arg = exclusive.
BASIC SYNTAX:
slice(optional start parameter, optional end parameter)
