js basics

Question 1

slice

Answer 1

Returns a shallow copy of a portion of an array from start to end (the end is not included)

[].slice(start, end);

Question 2

splice

Answer 2

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)

Question 3

concat

Answer 3

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);

Question 4

reduce

Answer 4

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);

Question 5

filter

Answer 5

creates a new array of all elements that pass the qualifying function argument

[].filter(x => x.length > 6);

Question 6

map

Answer 6

creates a new array of the elements created by calling the provided function on each element of an array
[].map(x => x * 2);

Question 7

what does .?? do

Answer 7

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

Question 8

what is this called .??

Answer 8

Nullish coalescing operator

Question 9

what does .? do?

Answer 9

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

Question 10

get

Answer 10

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.

Question 11

post

Answer 11

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.

Question 12

what is .?

Answer 12

a optional chaining operator

Question 13

PUT

Answer 13

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

Question 14

PATCH

Answer 14

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

Question 15

DELETE

Answer 15

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

Question 16

shift

Answer 16

remove from the begining of an array

Question 17

push

Answer 17

add an item to the end of the array and returns that element

Question 18

pop

Answer 18

remove the last item from an array and returns that element

Question 19

shift

Answer 19

removes the first element from an array and returns that removed element

Question 20

unshift

Answer 20

adds one or more elements to the beginning of an array and returns the new length of the array

[].unshift(2,3);

Question 21

throttle

Answer 21

enforces a maximum number of times a function can be called overtime.

Question 22

bind

Answer 22

returns a function bound to the specified context that can be executed later on

Question 23

apply

Answer 23

invokes a function with a specified context and passes arguments as an array

Question 24

call

Answer 24

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);

Question 25

debounce

Answer 25

enforces that a function not be called again until a certain amount of time has passed without it being called

Question 26

.find

Answer 26

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);

Question 27

.some

Answer 27

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)

Question 28

.every

Answer 28

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)

Question 29

.includes

Answer 29

method determines whether an array includes a certain value among its entries It returns a Boolean value.

pets.includes(‘cat’)

Question 30

what is the best way to get the parent el?

Answer 30

el.parentNode

Question 31

list the 3 best ways to get an elements children

Answer 31

1) children -> gets all the child nodes
2) firstElementChild -> gets the first child element
3) lastElementChild -> last child element

Question 32

what is the difference between childNodes, firstChild, lastChild and children, lastChildElement, and firstChildElement?

Answer 32

the former will traverse all nodes including text nodes and other types well the later will traverse only the nodes

Question 33

how can we iterate through all the children nodes?

Answer 33

for (let element of ul.children) {
element.style.background = ‘yellow’;
}

Question 34

what is the difference between nextElementSibling, previousElementSibling and nextSibling, previousSibling

Answer 34

both sets will get the siblings but the former gets only the element nodes and the latter gets all nodes including text nodes

Question 35

how do we get the next sibling node of an element?

Answer 35

el.nextElementSibling

Question 36

how do we get the previous sibling node of and element?

Answer 36

el.previousElementSibling

Question 37

how can you use class based inheritence in es6

Answer 37

class Child extends Base {.. }

Question 38

how can we pass arguments to setTimeouts execution function

Answer 38

setTimeout(func, delay, arg1, arg2)

Question 39

write a selector to get a data attribute

Answer 39

document.querySelector(‘[data-component=”dropdown”]’)

or

document.querySelectorAll(‘[data-dropdown]’);

Question 40

what can be done to prevent parser blocking due to scripts?

Answer 40

add async to the script

Question 41

what is the difference between event.currentTarget and event.target

Answer 41

• 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

Question 42

example of event delegation

Answer 42

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)

Question 43

.matches

Answer 43

checks to see if the element would be selected by the provided selector string

event. target.matches(‘input’)
event. target.matches(‘.my-class’)

Question 44

what are the two ContentTypes for REST?

Answer 44

Content-Type: text/html
Content-Type: multipart/form-data
Content-Type: application/json
Content-Type: text/plain
Content-Type: application/x-www-form-urlencoded

Question 45

application/x-www-form-urlencoded vs multipart/form-data ?

Answer 45

multipart/form-data is better for large forms or binary data

Question 46

how can we replace all none alphanumaric chars in a string?

Answer 46

string.replace(/[^\w]/g, “”).toLowerCase()

Question 47

how can you determine how many arguments a function requires?

Answer 47

fn.length

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length