js basics Flashcards
slice
Returns a shallow copy of a portion of an array from start to end (the end is not included)
[].slice(start, end);
splice
method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place
[].splice(start, deleteCount, item1, item2, itemN)
concat
this method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array
array1.concat(array2);
reduce
it runs a callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value
array1.reduce((previousValue, currentValue) => previousValue+currentValue, initialValue);
filter
creates a new array of all elements that pass the qualifying function argument
[].filter(x => x.length > 6);
map
creates a new array of the elements created by calling the provided function on each element of an array
[].map(x => x * 2);
what does .?? do
a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand
what is this called .??
Nullish coalescing operator
what does .? do?
enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid
get
used to get a resource from a server
If you perform a GET request, the server looks for the data you requested and sends it back to you. In other words, a GET request performs a READ operation.
post
used to create a new resource on a server
If you perform a POST request, the server creates a new entry in the database and tells you whether the creation is successful. In other words, a POST request performs an CREATE operation.
what is .?
a optional chaining operator
PUT
used to update a resource on a server. If you perform a PUT or PATCH request, the server updates an entry in the database and tells you whether the update is successful
PATCH
used to update a resource on a server. If you perform a PUT or PATCH request, the server updates an entry in the database and tells you whether the update is successful
DELETE
used to delete a resource from a server. If you perform a DELETE request, the server deletes an entry in the database and tells you whether the deletion is successful
shift
remove from the begining of an array
push
add an item to the end of the array and returns that element
pop
remove the last item from an array and returns that element
shift
removes the first element from an array and returns that removed element
unshift
adds one or more elements to the beginning of an array and returns the new length of the array
[].unshift(2,3);
throttle
enforces a maximum number of times a function can be called overtime.
bind
returns a function bound to the specified context that can be executed later on
apply
invokes a function with a specified context and passes arguments as an array
call
invokes a function with a specified context and passes arguments as extra arguments
var obj = { num: 2 };
function add(a){
return this.num + a;
}
add.call(obj, 3);
debounce
enforces that a function not be called again until a certain amount of time has passed without it being called
.find
a method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned
array1.find(element => element > 10);
.some
a method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false
array.some((i) => I % 2 === 0)
.every
a method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
[12, 5, 8, 130, 44].every((i) => i > 10)
.includes
method determines whether an array includes a certain value among its entries It returns a Boolean value.
pets.includes(‘cat’)
what is the best way to get the parent el?
el.parentNode
list the 3 best ways to get an elements children
1) children -> gets all the child nodes
2) firstElementChild -> gets the first child element
3) lastElementChild -> last child element
what is the difference between childNodes, firstChild, lastChild and children, lastChildElement, and firstChildElement?
the former will traverse all nodes including text nodes and other types well the later will traverse only the nodes
how can we iterate through all the children nodes?
for (let element of ul.children) {
element.style.background = ‘yellow’;
}
what is the difference between nextElementSibling, previousElementSibling and nextSibling, previousSibling
both sets will get the siblings but the former gets only the element nodes and the latter gets all nodes including text nodes
how do we get the next sibling node of an element?
el.nextElementSibling
how do we get the previous sibling node of and element?
el.previousElementSibling
how can you use class based inheritence in es6
class Child extends Base {.. }
how can we pass arguments to setTimeouts execution function
setTimeout(func, delay, arg1, arg2)
write a selector to get a data attribute
document.querySelector(‘[data-component=”dropdown”]’)
or
document.querySelectorAll(‘[data-dropdown]’);
what can be done to prevent parser blocking due to scripts?
add async to the script
what is the difference between event.currentTarget and event.target
- event.target is a reference to the object that dispatched the event
- event.currentTarget always refers to the element to which the event listener has been attached
example of event delegation
function toggleDone (event) {
if (!event.target.matches(‘input’)) return
console.log(event.target)
//We now have the correct input - we can manipulate the node here
}
characterList.addEventListener(‘click’, toggleDone)
.matches
checks to see if the element would be selected by the provided selector string
event. target.matches(‘input’)
event. target.matches(‘.my-class’)
what are the two ContentTypes for REST?
Content-Type: text/html Content-Type: multipart/form-data Content-Type: application/json Content-Type: text/plain Content-Type: application/x-www-form-urlencoded
application/x-www-form-urlencoded vs multipart/form-data ?
multipart/form-data is better for large forms or binary data
how can we replace all none alphanumaric chars in a string?
string.replace(/[^\w]/g, “”).toLowerCase()
how can you determine how many arguments a function requires?
fn.length
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length
