Array, Statements, Declarations Flashcards
filter() Method
creates a new array with all elements that pass the test implemented by the provided function. ex: const result = words.filter(word => word.length > 6); sytanx: var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
While loop
repeat a block of code until a condition is met:
ex: var n = 0;
while (n < 3) {
n++;
}Difference between do and while and just a while loop
A do/while loop runs at least once and then checks condition:
do {
i = i + 1;
result = result + i;
} while (i < 5);.shift()
removes the first element of an array
get the length of an array
.length
ex: array.length
unshift()
adds elements to front of array:
ex: arr.unshift(element1[, …[, elementN]])
reverse an array
The reverse() method reverses an array in place. ex: a.reverse()
Map method
The map() method creates a new array with the results of calling a provided function on every element in the calling array. ex: const map1 = array1.map(x => x * 2)
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
concat()
Concat method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
ex:
var new_array = old_array.concat([value1[, value2[, …[, valueN]]]])
ex: array1.concat(array2)
every() method
The every() method tests whether all elements in the array pass the test implemented by the provided function.
ex: function isBelowThreshold(currentValue) {
return currentValue < 40;}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: trueFind() method
The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.
ex: var found = array1.find(function(element) {
return element > 10;
});forEach() method
The forEach() method executes a provided function once for each array element.
ex:
array1.forEach(function(element) {
console.log(element);
});
syn:
arr.forEach(callback[, thisArg]);includes() method
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate. ex: array1.includes(2)
join() method
The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.
elements.join(‘’), elements.join(), elements.join(‘-‘)
pop() method
The pop() method removes the last element from an array and returns that element. This method changes the length of the array. ex: arr.pop()
push() method
The push() method adds one or more elements to the end of an array and returns the new length of the array.
ex: animals.push(‘cows’)
reduce() method
The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value.
ex: const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10
slice() method
The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.
ex: arr.slice([begin[, end]])
animals. slice(2, 4) or just animals.slice(2)
sort() method
The sort() method sorts the elements of an array in place and returns the array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.
splice() method
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements. ex: array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
toString() method
The toString() method returns a string representing the specified array and its elements.
continue statement
The continue statement terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.
debugger statement
The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.
ex:
function potentiallyBuggyCode() {
debugger;
// do potentially buggy stuff to examine, step through, etc.
}
for loop
The for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a block statement) to be executed in the loop.
ex:
var str = “”;
for (var i = 0; i < 9; i++) {
str = str + i;
}
console.log(str); // expected output: “012345678”
for…in statement
The for...in statement iterates over all non-Symbol, enumerable properties of an object.
ex:
var string1 = "";
var object1 = {a: 1, b: 2, c: 3};
for (var property1 in object1) {
string1 += object1[property1];
}
console.log(string1); // expected output: "123"for…of statement
The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.
ex:
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30function declaration
The function declaration (function statement) defines a function with the specified parameters.
function calcRectArea(x, y) {
return x* y;}return statement
The return statement ends function execution and specifies a value to be returned to the function caller.
switch statement
The switch statement evaluates an expression, matching the expression’s value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.
use when you have a lot of else if statements
throw statement
The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won’t be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.
try…catch
The try…catch statement marks a block of statements to try, and specifies a response, should an exception be thrown.
arrow function expression
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.
Default function parameters
Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5, 2));// expected output: 10constructor method
The constructor method is a special method for creating and initializing an object created within a class.
A constructor can use the super keyword to call the constructor of a parent class.
If you do not specify a constructor method, a default constructor is used.
extends keyword
The extends keyword is used in class declarations or class expressions to create a class which is a child of another class.
ex:
class formatDate extends Date {
constructor(dateStr) {
super(dateStr); }Function arguments
arguments are values that are passed into functions that receive them as parameters.. (arg= 2,4)
ex:
function add(a,b){
return a + b;
}
add(2, 4)Function parameters
function add(a,b){
return a + b;
}
parameters are a & b in add function above
arguments are values that are passed into functions that receive them as parameters. What matters the most for parameters is the order in which they were received.return in a block of code within a function
anything written after a return statement will not execute. This is because the return statment will terminate the function after running the line of statements within it.
Function Declaration Hoisting
two-pass compiler. Function declarations are defined in the first pass. It means that function declarations can be invoked before they are defined!
// This code is valid above the definition!
console.log(add(2,4)) // 6
function add(a,b){
return a + b;
}
which functions does hoisting not apply to?
function expressions or arrow functions.
Function expressions differences against function declarations
- A variable is used to store the function for later use
- Anonymous functions are used
- Function expressions are not hoisted. They can only be invoked after a definition has been placed in the execution stack.
An ex of function expression?
const add = function(a,b){
return a + b;
}
console.log(add(2,4)) // 6Why is function expressions and not use a function declaration?
more control over our code now. Our function expression cannot be hoisted so we can tell it when to do its job easier. We also gain the syntactical sugar of an anonymous function. We can place functions within functions easier without having to name them.
syntactical sugar
is syntax within a programming language that is designed to make things easier to read or to express
What are Arrow functions and what do they look like?
fancy looking function expressions with a major feature removed, the this keyword.
ex: const add = (a,b) => {
return a + b;
}
console.log(add(2,4)) // 6
arrow function vs expression function
// function expression syntax
// const add = function(a,b) {
// return a + b;
// }
// arrow function expression syntax
const add = (a,b) => {
return a + b;
}
console.log(add(2,4)) // 6
When not to use arrow functions
- Event handlers (Unless they are inside a class constructor!)
- Object methods
- Prototype methods
- Anytime you need to use arguments Object
difference between:
let
const
var
let can be re-assigned but not overridden
const is immutable and can never be re-assigned
var can be re-assigned and overridden.
Create an object literal
const myPersonalObject = {
firstName: 'Fred',
lastName: 'Flintstone',
};How are Object properties(stored data) organized?
Key:value pairing
Dot Notation and bracket notation for referencing properties in object
dot:
mypersonObject.firstName
Bracket:
mypersonObject[“firstName”]
changing a value in an object
just like a variable. reference what we want to change and set = to it
ex: mypersonObj.firstName = ‘wilma’
This changes the key firstName’s value in the obj to wilma
Are object’s values mutable even though object names start with const?
yes, the values on the obj. It will never point to another object but we can change the props
What does Object.keys()
Gives us an array back of the Object’s properties/keys
ex:
const keys = Object.keys(myPersonalObject);
returns [‘firstName’, ‘lastName’];
What does Object.values()
Gives us an array back of all the Object’s values
ex:
const values = Object.values(myPersonalObject)
returns [‘Wilma’, ‘Flintstone’];
What does Object.entries()
Gives us back an array of the Object’s key/value pairs as a tuple
ex:
const entries = Object.entries(myPersonalObject);
returns [ [ ‘firstName’, ‘Wilma’ ], [ ‘lastName’, ‘Flintstone’ ] ]
An array under the hood might look something like this:
Arrays have a special 0 based indexing (organizational) ability.
array: {
'0': 'firstValue',
'1': 'secondValue,
}Closure statement developers need to ask
“What data do I currently have access to in my program
Two types of scope
Global scope and local
What happens when a function is declared and created? in terms of socope
a new scope is created. Variables declared within functions scope will be enclosed in lexical/private scope.
it is important to remember, that functions look outward for context. If some variable isn’t defined in a function’s scope, the function will look outside the scope chain and search for a variable being referenced in the outer scope.
What are callback functions
callback functions are just functions that are passed into other functions as arguments. That function is then invoked inside the outer function and does some action.
function sayHello(name) {
console.log(`Hello, ${name}`);
}
function callSayHelloWithName(callback) {
const innerName = 'Lars';
callback(innerName);
}
callSayHelloWithName(sayHello);
difference in .forEach and .map
We technically could do whatever we want with that data, but remember that .forEach doesn’t return us anything like .map does.
The three things you’d get back from a callback passed to Map
The current item of the array state
The current index of the current item index
The entire array data
const mappedCityStates = data.map((state, index, data) => {
return {'city': state.city, 'state': state.state};
});
simple for loop add data together
let statePopulations = 0;
for(let i = 0; i < data.length; i++) {
statePopulations += data[i].population;
}Detailed definition of functions and how closure works
The key to remember is that when a function gets declared, it contains a function definition and a closure. The closure is a collection of all the variables in scope at the time of creation of the function.
When a function gets created and passed around or returned from another function, it carries a backpack with it. And in the backpack are all the variables that were in scope when the function was declared.
Equivalent in reg function:
let c = 4
const addX = x => n => n + x
const addThree = addX(3)
let d = addThree(c)
console.log('example partial application', d)let c = 4
function addX(x) {
return function(n) {
return n + x
}
}
const addThree = addX(3)
let d = addThree(c)
console.log('example partial application', d)Good way to think of this keyword and its relationship to objects
a Pointer to an object. For example: you can use the this keyword to reference an object without having to refer to that object’s name.
window/global Object binding: scope for this what does this point to?
this will be the window/console Object
function sayName(name) {
console.log(this);
return name;
}
sayName("D'Artagnan");
Implicit Binding
Whenever a function is called by a preceding dot, the object before that dot is this.
const myObj = {
greeting: 'Hello',
sayHello: function(name) {
console.log(`${this.greeting} my name is ${name}`);
console.log(this);
}
};
myObj.sayHello('Ryan');
What is a constructor function?
A constructor function is a function that returns an object. It’s an object creator. When we call it we have to use the new keyword.
Explicit binding
Whenever JavaScript’s call or apply method is used, this is explicitly defined.
Prototype mechanism
prototype as an object that objects use to hold onto values that can be passed down to other objects. We use it all the time in inheritance.
What does a class function look like and declare an instance of the class
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
} *
Declaring a new Rectangle
const newRect = new Rectangle(400, 800);
console.log(newRect);What do classes return
objects
What binds our classes together for Inheritance with a class
extends and supper(), which bind classes together to achieve some simple object inheritance.
Class inheritance, what does extends do?
The ‘extends’ keyword is used to extend a parent object. A clue to find out if a class is a sub-class is to look for extends.
class Dog extends Animal {
constructor(name) {
super(name);
}
Class inheritance, what does super() do?
super() is used to tell a parent’s constructor to be concerned with the child’s attributes vis versa and abstracts away the Object.create(this, Class) syntax that is really tricky to sink one’s teeth into.
All methods attached to the class body will be stored where?
on the Objects prototype in a special way. There is a bit more magic here than just Object.create(Foo.prototype); and Class.call(this, attrs); But now that we know this, we can accept that the class keyword does this gloriously for us.
If you use extends what else needs to be called
super() needs to be called from within the constructor function. This is to pass any new attributes back up to the constructor of the parent object.
What is the DOM (Document Object Model)
The Document Object Model is an object representation of the html elements of a webpage. It gives an interface to interact with and manipulate the page, changing document structure, content, and styling.
What data structure is the DOM
The object model is a tree structure with each DOM element therefore being a tree node, containing all the same property keys as each other node. Some of these node properties are informational while others are methods that we can use for interaction. The DOM , creating and propagating event objects, which hold information about the event type and target, up the tree.
Selecting DOM elements
document.getElementsByTagName(‘p’)
It will return an array-like object called an HTMLCollection containing all the elements that contain the element name supplied.
document.getElementById(‘idName’);
This method will take a single string as an argument containing the id of an element,
document.getElementsByClassName('className');
This method will take a single string as an argument containing the class of the elements you want to select. It will return an array-like object called an HTMLCollection
What do querySelector Methods do?
These methods give us the opportunity to select element(s) based on CSS style selectors (remember . is class, # is id, etc). Each method takes a string containing the selectors and returns the element(s). Note - We can select by element, id, class or others with both methods.
document.querySelector(‘.custom-style’); vs document.querySelectorAll(‘queryString’);
selector: This method will search for and return the first element that matches the value passed into the method.
selectorAll: This method will search for and return ALL elements matching the query string. returns these elements in an array-like object called a NodeList
The Difference between HTMLCollection, NodeList, and Array
They both have numerical zero-based indices, and the length property but that is all they share with an Array.
NodeList does take it one step further, and has access to .forEach. There is no .reduce or .map or any other array method.
How to create an array from an array-like object
.from()
Array.from(arrayLikeObject)
Why is it necessary to use document in front of querySelector()?
because querySelector is a method of the document object
What are callback functions
come from functional programming. A function is passed as a parameter to another function.
what does the this keyword do?
Pronoun to use in place of an object
gives you the object’s context
nothing to do where the function is written, but where and when the function is called
Four Principles of this?
Explain event delegation
which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.`
