Beginning JavaScript Flashcards

Question

What does it mean to say a JS Function is a 1st class citizen?

Answer 1

JS functions are values in themselves - this means that they can be stored in variables and passed into other functions. This allows functions to be handled and moved around just like any other data type.

Answer 2

An anonymous function is just a function declared without a name - they are valid for callbacks or in an IIFE.

Answer 3

An Immediately Invoked Function Expression.

Answer 4

A function expression is when you store a function as a value in a variable.

Answer 5

Because using them gives you bad errors - this is a little outdated, but it used to be tricky to track down what caused an error within a function expression, modern debug tools, however, infer the name of the function from the variable name it's assigned to, and uses that in the error logging.

Answer 6

Because modern browsers can infer the name of the function expression from the variable it's assigned to and use this in error logging.

Answer 7

The main difference is just in how they operate during hoisting. A function expression must be initialized before being run or you'll get an error (no hoisting) - with regular functions defined using the function keyword, they are hoisted to the top, so it's always available everywhere.

Answer 8

1. A concise syntax that's shorter. 2. They don't have their own scope in reference to the 'this' keyword, which is a little more intuitive.

Answer 9

Because, they are a special type of anonymous function.

Answer 10

Place the function all on one line, then make sure to take out the curly brackets (and the return keyword) const implicit = () =\> 'awesome' implicit()

Answer 11

If you only are passing one parameter.

Answer 12

Pop a set of parentheses around the object to be returned and that will contain it and keep the compiler from thinking that the object's opening curly is the block of the function.

Answer 13

Readability - if you come back in 6 months, which type will make the most sense and be understood better in this case.

Answer 14

It's when you wrap an anonymous function inside a parentheses - and parentheses always run first in JS, so the IIFE will run and return a function value then you can immediately run that value by putting another parentheses on the end.

Answer 15

Not really any anymore, but it used to be popular before there were modules and block scoped variables.

Answer 16

A function that lives inside of an object. NOT the same thing as a function, as many functions are not methods.

Answer 17

const robb2 = { name: 'Robb Schuneman' yellHi() { console.log('HEY ROBB') } }

Answer 18

const robb2 = { name: 'Robb Schuneman' whisperHi: () =\> { console.log('HEY ROBB') } }

Answer 19

The object that the function was called against.

Answer 20

An arrow function inherits the parents scope of what 'this' refers to.

Answer 21

A function that will happen when something else is done - prominent examples are a click or a timer.

Answer 22

A callback function (listening for a button click)

Answer 23

A callback function that is defining its own anonymous function (rather than calling a predefined function).

Answer 24

It keeps a running tab of how many times that console.count has been hit, so if you stick it in a function that you suspect is being called multiple times when it shouldn't, you can easily see how many times exactly that it has been called.

Answer 25

If you have a group, say an object or an array of objects, console.table puts them into an easily read attribute table.

Answer 26

It's counting the exact instance of the string that's passed in as a param. So if you use object literal notation to do something like `calling ${person.name}` then it will tell you how many times the log is called for each argument.

Answer 27

It nicely organizes anything that is put under it - this is a way to group together logs or variables or whatever.

Answer 28

console.group to start and console.groupEnd to finish.

Answer 29

it starts the group (still ending with console.groupEnd), but it is collapsed by default to provide less clutter to your console.

Answer 30

$1 is next to last, $2 second to last, and so forth.

Answer 31

If the site is running JQuery, it overrides the meaning of the $ sign so that you can't use it in debugging.

Answer 32

It returns the first matching element or class object selected - so $('p') will return the first paragraph on the page.

Answer 33

This will return all matching elements - so $$('p') will return all paragraphs on the page.

Answer 34

The program will pause running and allow you to see the local variables and what they're exactly set to, as well as the call stack.

Answer 35

Use the play button, it will forward to the next time it hits the debugger call.

Answer 36

It will allow you to go step by step through your code, watching how variables change and what gets called when.

Answer 37

If you click the sources tab, then click on a line of code, it will insert a breakpoint.

Answer 38

If you go to the Network tab, you can see all the files being used. Additionally, if you click on the timing tab, it will let you see where the time was spent (processing, waiting for data to return)

Answer 39

If you right click on an element, you can tell the debugger to break on attribute modification - this will pause in the debugger whenever the attribute change happens. This will let you see which function is calling for a change, as well as to see which attributes are getting passed.

Answer 40

If you go to sources, you'll see an event listener breakpoint - you can tell it to break on mouseClick for example, and then it will give you a breakpoint debugger when they click - or whatever listener you've set,

Answer 41

An anonymous function

Answer 42

Where are my functions and variables available to me?

Answer 43

A variable that is available anywhere within your application.

Answer 44

Any other Javascript running on the page - all functions, modules, if statements, and so on.

Answer 45

The Window object.

Answer 46

Because they are defined on the Window object.

Answer 47

Var variables are attached to the window object and are globally scoped, but const and let do not attach to the Window object.

Answer 48

GTFO - they are a recipe for a disastrous headache.

Answer 49

Only within that function (unless returned to whatever called it)

Answer 50

If a variable isn't found in the scope where it is called, it will then look for it at a higher level.

Answer 51

The one at the most immediate level of scope will prevail. (If a variable is declared both in a function and globally, and then called within the function - it will use the function definition of the variable.)

Answer 52

Because you've limited yourself to not being able to access the variable from the umbrella scope within the more specific scope.

Answer 53

Just declare it prior to the block as a let and then modify it - it will keep the scope of where it is declared.

Answer 54

Previously, with the function-scoped var, variables would sometimes leak out of their intended scope - for instance, if you finished a for loop with a var variable declared to count the iterations, the variable would still be there just hanging around after the loop has finished.

Answer 55

It is a feature in some languages, including JS, which means that Scope Lookup begins from the scope in which the function is defined, not by the scope in which the function is called.

Answer 56

Most of modern JS is done within modules, where it is almost impossible to declare a global variable unless you explicitly call the window and attach the variable to it. But don't do that - that's just some hellish bugs.

Answer 57

Their parent function.

Answer 58

It's a feature of JS that allows you to access functions and variables before they've been created within the code.

Answer 59

1. Function Declarations 2. Variable Declarations

Answer 60

Just define your functions and variables at the top of your file, or else put your functions into a separate module (utilFunctions, mathFunctions, etc) and then import them only as needed into the file where you need to run them.

Answer 61

"Some people prefer to first make clear in their code ""what does this file do"", and then below, have the function declarations and variables showing how the sausage is made - but that's just a style preference."

Answer 62

JS will hoist the declaration - but not a value if it's set, so if you call a variable before the value that it's been set to, it will return undefined.

Answer 63

A closure is the ability to access a parent level's scope from the child level's scope even after the parent has been terminated.

Answer 64

JS is able to reach out to the parent scope from the child scope even if the parent is done running because it still maintains the variable or function in memory so that it can be accessed at a later time - it isn't cleaned up or garbage collected.

Answer 65

For one, often they can be used to create private variables that are inaccesible except through a child function.

Answer 66

It is what the browser turns the HTML and CSS you write into.

Answer 67

Think of it as everything about the current browser window - which would include the tabs, browser bar, and other external things.

Answer 68

The document is responsible for everything from the opening html to the end - so not the tabs or the browser bar like the window. This entire HTML document is then accessible through the document keyword.

Answer 69

The navigator is a higher-level thing than the window or document, which give you info about not just the browser, but the device that the code is being run on itself - it can tell you about webcams or battery level or audio access, etc. Device-specific things live on the navigator object.

Answer 70

You won't be able to access the HTML - you should instead put it right before the closing body tag.

Answer 71

You'd need to wrap all of your code in some sort of init function, and then launch that init function from an EventListener listening for the DOMContentLoaded event. function init() { const p = document. querySelector('p'); console.log(p); } document. addEventListener('DOMContentLoaded', init);

Answer 72

.querySelector and querySelectorAll

Answer 73

No, they can be called against any element. Doing so will limit the scope of the selector to only children of that element.

Answer 74

const p = document.querySelector('p');

Answer 75

A NodeList of all matching elements.

Answer 76

The first matching element.

Answer 77

They are lists of things, like array, but they don't have all the functions built in that arrays do (map, filter, reduce, etc.)

Answer 78

const imgs = document.querySelectorAll('.item img');

Answer 79

Though not really used anymore, there are still functions like getElementById, getElementByClassName and the like. Mostly you need to know about them in case you come across them in code, but you should be able to do all you need with querySelector and querySelectorAll.

Answer 80

It will give you the object properties for an element, rather than just the display of the element - so you can see al the methods available, such as the parentNode, textContent and the like.

Answer 81

"Simply by setting it equal to something new via dot notation. heading.textContent = ""Robb is cool"" "

Answer 82

.textContent

Answer 83

.textContent is newer and gets the contant of all elements, including script and style properties within the element - .innerText only shows human-readable element. However, innerText is style-aware, and won't return elements hidden by CSS, whereas textContent just returns everything in the element, hidden or not.

Answer 84

The full HTML within the element.

Answer 85

It returns the full HTML within the element - and also the element it is contained within, as well as keeping any white space.

Answer 86

Instead of seeting the content equal to itself and whatever additions, use the insertAdjacentText property, like so: pizzaList.insertAdjacentText('afterend', 'pizza') The first argument says where to add the text, the second says what to add.

Answer 87

Replacing the textContent is pretty slow in cases where there is lots of text and html getting put back in - and it causes the browser to re-render the entire element instead of just inserting the text.

Answer 88

Everything is a Node, whereas an Element describes only things wrapped in some sort of HTML tag.

Answer 89

developer.mozilla.org/en-US/docs/Web/API

Answer 90

element.classList.add('newClass');

Answer 91

element.classList.remove('oldClass');

Answer 92

It will add the class to the element if it isn't present, or remove it if it is present.

Answer 93

Probably on the element being transitioned, not the class, because otherwise it will only transition one way - when the class is added, not when it's removed.

Answer 94

It will return true or false dependent on whether the classList contains that class - which would be useful if you're basing some conditional on that.

Answer 95

You can either measure the rotation in degrees (360deg) or # of turns (1turn).

Answer 96

transform: rotate(360deg) or transform: scale(1.5) or

Answer 97

You can either pass one argument to scale it both ways, or you can separately pass the X and Y you'd like to scale like: transform: scale(2, 0.5); It's based off of relation to 1 - so 2 would be twice the size, 0.5 would be half the size.

Answer 98

boxShadow: 0 0 10px black;

Answer 99

border-radius: 50%;

Answer 100

Just adding and removing classes at different points in time, which lets us step in with our CSS and add or remove all the different transitions. This is especially common with modals or navs that need to slide in or whatever.

Answer 101

It is a class attribute which gives us a list of classes - but it's older than classList, and classList additionally gives us these very useful functions (add, remove, toggle, contains)

Answer 102

Anything provided to an element as additional info - classes, source, alt, etc.

Answer 103

The same as other things - once you've gotten your element, just set the dot property equal to something new: element.alt = 'Cute Pup'

Answer 104

"NAH, because screen readers will already let the people using them know that this is an image. Just name it ""cute pup"" not ""A photo of a cute pup"""

Answer 105

True, you just do element.width = 300 or myWidth = element.width

Answer 106

Not all - some, like .naturalWidth, can't be changed, which makes sense if you think about it.

Answer 107

You can put it in an event listener with the 'load' trigger - either from the window attribute, or for the element in question. window. addEventLIstener('load', function() { console. log(pic.naturalWidth); }); This waits for it to be loaded first, then executes the function.

Answer 108

Nah. You can use them to watch for actions on specific elements as well.

Answer 109

Because, that is true it will wait for all HTML to load - but certain things are asynchronous, like API calls or things loaded from a server, and it will not wait for those.

Answer 110

They're older for one, but also they work for getting non-standard attributes. But don't set custom attributes, that's pain.

Answer 111

No. Don't go willy-nilly making up your own attributes, because if the HTML spec introduces it in the future, your legacy code will clash with the standard and make for huge bugs. Some popular libraries did this, and that's why JS has to have stupid names for certain methods (.contains instead of .includes)

Answer 112

Use data attributes - which is to say, use data-whatever like so: ![]() This lets you attach data that isn't a standard attribute.

Answer 113

You call element.dataset, which returns an object with each of the properties defined on it - so you can do element.dataset.customWhatever

Answer 114

That's data attributes, homey.

Answer 115

keycode.info

Answer 116

Nothing. It won't play again until it has run its full course.

Answer 117

audio.currentTime = 0

Answer 118

Because that creates multiple places you have to remember to update if you change the time. Also someone on your team might unknowingly change one spot and not the other.

Answer 119

Use the transitionEnd event that fires when the element is done transitioning, rather than trying to time it just right.

Answer 120

false. You can't do that, you instead need to loop over each of them and attach an eventListener to each. keys. forEach(key =\> key.addEventListener('transitionend', removeTransition));

Answer 121

The thing that it got called against.

Answer 122

document.createElement(), and then pass it a tag name ( ('p') or ('div')

Answer 123

That it's an optional param.

Answer 124

False - it just creates it within memory, then you still will need to tell it where to go.

Answer 125

TRICK NO TREAT - there is no shortcut for that, you just have to do it after creation by dot notation on the variable that you stored your newly created element within.

Answer 126

We grab the element we want to add it after and use .appendChild() or insertAdjacentElement()

Answer 127

Easy - with document.body - they give us a nice attribute accessible via dot notation directly on the document.

Answer 128

Every time you use appendChild() you're modifying the DOM, which causes the browser to re-paint what is on the actual page. So, you should use appendChild only after setting all the content and classes and whatever other attributes you need to. And if you have multiple elements going in the same spot, append them to each other before appending them to the DOM.

Answer 129

element.append() - but it doesn't work on IE, or element.appendChild()

Answer 130

You can use .insertAdjacentElement() - which works the same as insertAdjacentText() - you pass it one of several options on where you want the element.

Answer 131

newElement = elementToBeCopied.cloneNode()

Answer 132

It will just be the top level node without any of its children - not even the textContent of that node. To get those along with it, you pass it an argument of 'true' which will tell it to do a deep clone and copy the child elements as well.

Answer 133

If they're coming from user input, you are opening yourself to XSS - cross site scripting, unless you sanitize it.

Answer 134

We would use .innerHTML (as opposed to just .textContent)

Answer 135

What you get are not elements - they're just strings so you can't call functions against them or add event listeners or set attributes unless you first dump it into the DOM and then pull it back out.

Answer 136

Just a collection of elements or HTML that we can then work with.

Answer 137

call .range.createContextualFragment() document.createRange().createContextualFragment(myHTMLString);

Answer 138

Cross-site Scripting - when a third party runs their own JS on your site, which should never happen.

Answer 139

If you grabbed this p, and then called myP.children (which returns the child elements) - youwould only get the em tag - if you called myP.childNodes you would get the text node before the em, the em, and the text node afterward.

Answer 140

For elements: .children .firstElementChild (first element under) .lastElementChild (last element under) .previousElementSibling (the element before this) .nextElementSibling (element after) .parentElement (up one level)

Answer 141

Just use querySelector to grab the one you want, or if you don't know exactly, use .closest()

Answer 142

It grabs the closest element to whatever it is called against.

Answer 143

Because you can't assume the document structure will stay the same - if one div gets inserted between, or something else changes the structure of your code slightly, suddenly your day is ruined.

Answer 144

.firstChild .lastChild .previousSibling .nextSibling .parentNode .childNodes

Answer 145

The exact same properties are available for both and are confusingly named - so you might get them mixed up and then wonder why your results aren't what you thought. Just make sure you're calling the ones you want.

Answer 146

If you remove it - it's taken out of the DOM, but is still present in memory - so you still have access to it, and you can do some stuff to it and then put it back in the same spot or somewhere else.

Answer 147

You'd have to use insertAdjacentHTML instead of insertadjacentElement, as this accepts any valid HTML. Or else do the createRange().createContextualFragment(divToInsert) trick. You can't just use insertAdjacentElement because an HTML string is not an element

Answer 148

1. ) What type of event you want to listen for - 'click', 'keyUp', etc. 2. ) What you want to do when that type of even is detected, in the form of a callback function.

Answer 149

1. ) Go get something 2. ) Listen for something on what you got 3. ) Do something when it detects what it's listening for.

Answer 150

handleWhatever (e.g. handleClick, handleDrag, handleKeyUp)

Answer 151

The browser will run the function for us, we won't initiate it. If you put the parentheses afterward, you're telling it to run on page load instead of on the event.

Answer 152

1. ) It allows for DRYer code - if you use an anonymous function you can't access it, so you'll have to define the same thing over if you want to listen on multiple things - with a function it's very easy for multiple listeners to trigger the same action. 2. ) If you later want to remove a listener from an element, you have to have access to the function. There's no way to access an anonymous function. This is required by removeEventLIstener - you have to pass it the event to stop listening for, as well as the function to stop responding with in order for it to unbind the listener.

Answer 153

Just taking a function and listening for a specific click against an element with it. This **binds** the function to the element.

Answer 154

The event object.

Answer 155

It returns a boolean of whether the click was actually from a mouse (or whatever you're listening for), or was programatically made.

Answer 156

How much pressure was clicked or pressed, such as on the newer iPads and macs where you can do things differently dependent on Force Touch.

Answer 157

There's no difference unless you have elements nested inside of the element you're listening on - in that case, the event.target is the node that actually got clicked (even if it's just a TextNode), while the event.currentTarget is the element that fired the event.

Answer 158

event.currentTarget, because you generally are wanting to deal with the element that triggered the event. You would use event.target if you need to do different things based off of exactly where the interaction occurred.

Answer 159

Propagation is how, if you click an area that has multiple listeners, it will propagate up the scope (bubble up) and fire all the event listeners that are within scope.

Answer 160

It will stop the event (say, a click) from firing the parent scope listeners as well, and only fire up to the element which calls the method.

Answer 161

Kind of the opposite effect of bubbling - capture is the path downward through the scope from parent to child, where as bubbling is going up from the most immediate child through its parents.

Answer 162

You can pass a third argument into addEventLIstener() which is an options object - if you set capture: true there, it will operate top-down instead of bubbling down-up window. addEventListener('click', function(event) { console. log('you clicked the window'); }, {capture: 'true' } Then, the order in which events are fired will flip, and you can use stopPropagation() to prevent the event listeners at a lower level from firing.

Answer 163

It tells you what sort of event this was - say, a click, or a drag, or whatever.

Answer 164

It returns a boolean that tells you whether this element will bubble the eventListener upwards or if stopPropagation() has been called.

Answer 165

It detects every time the mouse moves over the element that called it.

Answer 166

It detects any time the mouse moves onto the element it was called against.

Answer 167

The element the callback was called on. An easy way to think about this is just that it will be whatever is to the left of the dot in the event listener call.

Answer 168

In that case it will be scoped to the parent, it won't be the element it was called against.

Answer 169

It's probably best to always go ahead and just use e.currentTarget or e.target instead of 'this'.

Answer 170

You can call event.preventDefault() on an eventListener for that element, and then do whatever it is you're stopping the default in order to do.

Answer 171

"Similar to alert(), except it gives you a yes or no option, which you can then assign to a variable: const shouldChangePage = confirm(""This site sucks, sure you want to go?"") shouldChangePage will hold the true/false value of whichever they click. "

Answer 172

Similar to alert() or confirm(), but it gives you a text box, whose entry you can assign to a variable.

Answer 173

event.currentTarget.href

Answer 174

Give the form a name, rather than a class - then grab it with an attribute selector.

Answer 175

"const signupForm = document.querySelector('[name=""signup""]');"

Answer 176

Just add 'required' to the input and it will throw an error if submit happens with no input on it.

Answer 177

"Within the form, it creates properties for each of the fields **IF** they're given a name - so if you have an input with name=""email"", you can then access it from a form.email attribute, accessible as event.currentTarget.email (or event.currentTarget.email.value for the raw value) This is all the more reason to use valid semantic HTML by giving inputs a name. "

Answer 178

myString.includes('whatiamtestingfor') will check if it is included in a given string - but it's also case sensitive.

Answer 179

Focus is when a field gains focus, blur is when a field loses focus.

Answer 180

Buttons are to be used for actions that happen inside of an application, links are used to change the page. Don't mix those up or you will mess up all sorts of accessibility features in specialized readers.

Answer 181

Things that are not keyboard accessible should not have clicks registered on them, because not everyone has a mouse.

Answer 182

"You can give an element a role of button to solve this (role=""button"") as well as a tabindex=""0"" to make sure it can be tabbed to. But a better option would be to just wrap whatever the element is inside of a button."

Answer 183

You can put a keyUp listener on the image: function handlePhotoClick(event) { if(event.type === 'click' || event.key === 'Enter') { console.log('you clicked the photo!') } }

Answer 184

Within the html, set the width and height to twice what you need, and then halve that in the size of the canvas using CSS - that will keep the picture from looking pixelated.

Answer 185

First you grab it, and then grab the context, passing it either 2d or 3d, and then you will have a set of APIs or methods that are used for drawing. Everything you can imagine from MS Paint is available. const canvas = document.querySelector('#etch-a-sketch'); const ctx = canvas.getContext('2d'); ctx. lineJoin = 'round'; ctx. lineCap = 'round'; ctx. lineWidth = 10; ctx. beginPath(); ctx. moveTo(x, y); ctx. lineTo(x, y); ctx. stroke();

Answer 186

"ctx.lineJoin = ""round"" and ctx.lineCap = ""round"""

Answer 187

ctx.lineWidth = 10 - the default is 1px, and you don't have to specify the px.

Answer 188

You call ctx.beginPath()

Answer 189

ctx.moveto(x, y), where x and y are whatever value you've determined - typically, to move up you decrement y, to move down you increment y, and then to move right you increment to x, and then to move left you decrement x.

Answer 190

You need to call ctx.stroke() in order to actually commit the drawing to the canvas.

Answer 191

Just add the listener on to the window.

Answer 192

To scroll the page (up or down, left or right, respectively), so you'll have to listen for the up and down arrow key and preventDefault() on them if you don't want that to happen.

Answer 193

You should make an options object and make each of the parameters an attribute on the options object. That way, it's much easier to deal with some of them being optional, and they don't have to all be passed in in a certain order.

Answer 194

Destructure the attributes you need in the parameters instead. Not this: function draw(options) { console.log(options.key); } But this: function draw({ key }) { console.log(key); }

Answer 195

name them in ALL\_CAPS with underscores between words.

Answer 196

www.mothereffinghsl.com

Answer 197

Just a way to declare colors, similar to hex codes or RGB, except the 'h' or hue value goes from 0-360, and then once you pass 360 the browser is smart enough to modulo 360 and get the proper result to loop back around to 1 - so it's easy for changing colors.

Answer 198

ctx.strokeStyle('hslValueOrHexCodeOrWhatever')

Answer 199

It has to be called every time you want to change - it's a one-time setting, it's not like it's listening for changes on the values passed in, it just affects the next stroke, not continuing to affect the ones that follow.

Answer 200

'animationend'

Answer 201

If you set one up, it will remain on the object, and then if you've set it up within a function call or something, that will actually create a new event listener each time the function is called. If you only want it to listen once per instance of being called and then remove itself instead of continuing to be called, you have to pass in the argument options to your addEventListener with { once: true } - then it will unbind itself. function clearCanvas() { canvas. classList.add('shake'); ctx. clearRect(0, 0, width, height); canvas. addEventListener( 'animationend', function() { canvas.classList.remove('shake'); }, { once: true } ); }

Answer 202

ctx.clearRect(startX, startY, howFarToGoX, howFarToGoY) - where you pass it where to start (0, 0) if you want to clear the whole thing, and then how far to go with erasing (width of the canvas and height of the canvas if you want to wipe the whole thing)

Answer 203

If set to 'none' it will tell the browser to ignore any events that come to that element, and it won't capture them - so you'll be able to click objects below the element, for instance.

Answer 204

Just set it up in HTML how you want it, and then set the opacity to 0 and the pointer-events to none.

Answer 205

It will look up the DOM tree of elements, where as querySelector() looks down the DOM tree.

Answer 206

const imgSrc = card.querySelector('img').src;

Answer 207

You can call .replace on the string, then pass it what text you want to replace if it exists in the string, along with what you want to replace it with.

Answer 208

In the developer tools, under the network tab, there are checkboxes to simulate various networks, including a slow 3G connection.

Answer 209

An IntersectionObserver.

Answer 210

You set the CSS property of overflow to 'scroll'

Answer 211

Wrap your code in a function, then test for the needed elements and if they aren't there, just return out of the function you've made, rather than have a breaking error.

Answer 212

How far the element is scrolled from the top of the element.

Answer 213

.scrollHeight

Answer 214

It can tell you whether an element is on the page or not. It can even tell you if the element is just partially on or off the screen.

Answer 215

Answer 216

Every time the element is on the page, as well as everytime it leaves the page.

Answer 217

It's just a watcher, so you still have to tell it which elements to watch for it to work. If your observer is in a variable called ob, just call ob.observe(thingToBeObserved)

Answer 218

An IntersectionObserver can give you the time that something has been on this page - which could be very useful in making games.

Answer 219

How far onto the page the element is - with 1 meaning 'completely on' and decimals telling us what percentage if not completely on.

Answer 220

An options object, where, for instance, you can set the root of what we are scrolling with (by default, it's the body), as well as define the threshold - which is at what point of being on the screen it should notify the function (1 being totally on the page, .5 being half on, etc.) const ob = new IntersectionObserver(obCallback, { root: terms, threshold: 1 });

Answer 221

You could just add an * * * or some type of element to bump it off of the very bottom, which will get it to go 100% on to the page.

Answer 222

call observer.unobserve(theElementYouWereObserving);

Answer 223

It will watch and tell you (or at least your callback function) when an element has been resized to whatever percent you listen for.

Answer 224

It tells the screen reader what this element is about.

Answer 225

It just tells which element should be set to active - as with tab bars and panels.

Answer 226

Accessible Rich Internet Applications

Answer 227

A set of attributes that define ways to make web content and web apps more accesible to people with disabilities.

Answer 228

Just add the hidden attribute to it - this also makes it accessible.

Answer 229

For most attributes you can just access them directly via dot notation in order to set or get, but with aria properties, you have to use the setAttribute() method on the element to set it and getAttribute() to get it.

Answer 230

Whenever you can (whenever one exists) - it saves you from having to double up and set aria attributes in addition to classes.

Answer 231

Wrap it in an Array.from() method.

Answer 232

Same as math - BEDMAS - Brackets (Parentheses), Exponents, Division, Multiplication, Addition, Subtraction

Answer 233

You use the \*\* operator - so 2 \*\* 2 is 2 squared.

Answer 234

Global - To find all things that match, not just the first thing.

Answer 235

"Leave off the ending else block, like this: ![]() This evaluates to the same thing because of the return keyword - which returns out of the functions and stops the rest of the function code from running. "

Answer 236

"To check if a variable is either null OR undefined easily - since with == they evaluate to be the same - but this is very rarely needed or used, because we have the concept of ""truthy' and ""falsey"" instead."

Answer 237

An empty string is falsey, while a string with any value, even a space, is true.

Answer 238

Falsey - because its length is 0.

Answer 239

Falsey, because it evaluates to zero.

Answer 240

When we force something of one type to become another type - usually things are coerced into booleans.

Answer 241

If you put a bang in front of it, that will return a boolean of whether or not it has a value in the string - true if it doesn't have a value, false if it does. You can use a double bang (!!) to get the more logical true if it does have a value, false if it doesn't.

Answer 242

!emptyStringName will return true if it is an empty string, whereas !!emptyStringName will return false if it is an empty string.

Answer 243

In if statements we use them to take a truth or falsey value and coerce it into a real boolean true and false value.

Answer 244

"Well, the cool thing about chaining &&s in JS is that if any condition fails along the way (or otherwise returns false), the chain will stop running and immediately return without running any of the rest of the commands. This is referred to as short circuiting. This can be manipulated so that instead of writing: ![]() You can write ![]() If isAdmin is false, showAdminBar will never run. This is extremely common in React, when deciding whether to display a component or not. Some people hate this, but it seems reasonable to most and is very common. "

Answer 245

"If an if statement is on one line, you can leave off the curly brackets: ![]() Again, this is purely stylistic in choice - it makes sense to just keep the curly brackets to be more readable, and otherwise, if you move the result to a second line, the statement will be broken and not work - it must all be on one line. "

Answer 246

"A callback function and the number of milliseconds to run that callback after. ![]() "

Answer 247

Nah. You're thinking of Async/Await - as soon as it has stored a reference to the timeout, it will continue with the code and just listen for the number of milliseconds to be up, and then will call the callback function. It is asynchronous.

Answer 248

setTImeout will run once after the given number of milliseconds, setInterval will repeatedly run every few milliseconds

Answer 249

True - it will wait the specified amount of time before running for the first time.

Answer 250

"You could roll your own setImmediateInterval() function - ![]() "

Answer 251

You msut save the reference to it into a variable - there's no other way to stop an interval or timeout. Once that's done, you can call clearTimeout(referenceToRunningTimer) or clearInterval(referenceToRunningInterval)

Answer 252

"You can set a clearInterval call within a setTimeout: ![]() This will run the interval for 3 seconds, and then clear the interval. "

Answer 253

When the order doesn't matter - there's no guarantee object properties will appear in the order you set them in.

Answer 254

Any type - even other objects or arrays or variables set elsewhere or functions

Answer 255

You can just list the variable - so if both are named age, you just put 'age,' in the object properties list instead of doing 'age: age'

Answer 256

No, you can also have keys with dashes and spaces in them if needed, just list them in a string. This is different from variable names which cannot have either of those things.

Answer 257

Otherwise, if someone else comes in and adds a property, and adds a comma to your line, then the GIT Blame is messed up and shows that line as theirs, so you can't figure out who messed up as easily.

Answer 258

No - it means the binding of the variable can't change - so if you define an object with const, any of its properties can change, but you can't set up a new object to overwrite it with the same name. Like, as a human grows up, many of their characteristics and particulars will change, but they are still themselves, and can't be another person.

Answer 259

Instead of using const, you'd use the 'freeze' keyword. Object.freeze(newObject) Then, none of its properties can be overwritten.

Answer 260

If you want to programmatically call a property, that is, when the exact key may change depending on how the variable is set - then you'll need to use square bracket notation to pass it the variable - through dot notation it will look for the variable in the object's properties, which ain't what you want.

Answer 261

Use square bracket notation and stick them within a string. This will likely only happen if your values are coming from a different language, or someone is very messed up in their Javascript understanding, but there it is.

Answer 262

"We have to first check for its existence before we do anything with its further properties or we'll get an error: ![]() "

Answer 263

You just call delete: delete wes.job

Answer 264

It will return a true value if the value has been deleted and a false if it has not.

Answer 265

A method is just a function which lives inside of an object.

Answer 266

They are copied by value, so you can change the copy without changing the original.

Answer 267

The properties of both objects change, because the reference has changed. This is also true for arrays, maps, and sets.

Answer 268

"Use the spread operation (...object) and assign it to a new variable. ![]() "

Answer 269

" ![]() But this is very rarely used anymore - just something to know in case you see it in legacy code. "

Answer 270

The copy by value with a spread only goes 1-level deep - so if there are sub-objects, they will be copied by reference. Sometimes that's what you want, but if you want to copy the sub objects by value (so they can be changed without changing the original) you have to use Lodash currently.

Answer 271

You can use the cloneDeep function from LoDash.

Answer 272

"First, load LoDash from unpkg - ![]() Then you can use \_.cloneDeep: ![]() "

Answer 273

When you need some complicated, harder methods than is available in standard JS - especially in regards to arrays.

Answer 274

As many as you want.

Answer 275

The last one spread in will win, so the order you spread them in in matters.

Answer 276

It will modify the external object as well as the internal if you make any changes - as opposed to a string, where only the value of the internal string would change.

Answer 277

"The key of the map, and the value for that key: ![]() "

Answer 278

Using dot notation will make the entered value a property on the map, instead of a value within the map. You must use .set()

Answer 279

A key can be any type - not just a string. You can use a number as a key. This is different from an object, where, yes, the value can be any type - but the key itself must be a string or a key.

Answer 280

A way to store additional metadata about something.

Answer 281

"You can use maps as a dictionary, to store additional metadata. Maps let you use a reference to an object as a key in your Map, like so: ![]() "

Answer 282

myMap.size

Answer 283

Yes, unlike with an object.

Answer 284

forOf and forEach

Answer 285

Mainly, if you need to maintain the order of your items. Also, they're useful as dictionaries with meta info about an object.

Answer 286

You can't - with Maps you have to use the const newMap = new Map(); syntax

Answer 287

You can't put functions inside of Maps like you can Objects - Maps are simply for storing data.

Answer 288

JSON doesn't recognize maps right now - you have to convert the Map to an Object before being able to stringify it - something like Object.fromEntries(myMap) - but that won't be perfect - if you're using the cool benefits like using an object as a key, those get all messed up and don't really work when JSON'd.

Answer 289

Any type at all.

Answer 290

"It has no keys, silly - TRICKS! That's the main difference between an object and an array - the only ""key-like"" thing with an array is its index."

Answer 291

You can call Array.isArray(thingToCheck) - this returns true/false. You can't use typeOf because an Array isn't its own type - just a special kind of object.

Answer 292

Mutable methods change the original array, whereas immutable methods don't, they just return a new array.

Answer 293

Mutable. It will change the orginal array, even if you're using it in order to set a new variable.

Answer 294

It lets you take a portion of the array and make it into a new array. It is an immutable method - it won't change the original data.

Answer 295

"Take a copy of the original array using spread notation, prior to calling the mutable method on it: ![]() "

Answer 296

"Use Array.unshift('thingToAdd'): ![]() "

Answer 297

.slice is immutable and .splice is mutable - that is, .splice will actually carve the chunk you describe out of the original array.

Answer 298

.slice() takes a starting index and an ending index, whereas .splice() takes a starting index and then how many indices to go forward.

Answer 299

"It's best to use spread to do this: ![]() You spread in a slice up until where you want to enter, enter the new value, then spread in a slice from where you left off until the end. "

Answer 300

It will start from the index given as the first argument and just go until the end of the array.

Answer 301

"You just slice twice - once up until the thing you want to leave out, and then continue from the next one: ![]() "

Answer 302

newBikes[0], newBikes[1], and newBikes[2] (slice is non-inclusive of the second argument given)

Answer 303

"It loops over every single item in the array, then returns the index of the element that matches the condition: ![]() "

Answer 304

"You don't need an if statement because the === already returns a true or false. THen we can use an implicit return instead of an explicit return: ![]() "

Answer 305

It will flatten any nested arrays into the main one.

Answer 306

Instance methods are called against individual instances of the element, whereas static methods are called against the class itself.

Answer 307

"You pass it in whatever you'd like to make an array from, and they will become elements in the new array. This is rarely used as you can almost always just use the array literal notation ( myArray = [] ) ![]() "

Answer 308

It would set the new array to each iterated letter - so ['r', 'o', 'b', 'b']

Answer 309

Something that is iterable - that is, something with a length property. This can be an object that has been given a length property.

Answer 310

It's creating a range with a dynamic number of elements,

Answer 311

"Think of an object like this: ![]() Object.entries(meats) will return a 2d array, where the inner arrays are each of the key and value pairs. Object.keys(meats) will return an array of just the keys. Object.values(meats) will return an array of each of the quantities - which would be useful if we then wanted to total them up with .reduce() "

Answer 312

"Use destructuring to make this easier on yourself: ![]() or this would be even more concise: ![]() "

Answer 313

"It turns the array into a string joined together with a comma. This method takes an argument, which is just what you want to join on - e.g. myArray.join(', ') or myArray.join(' or "") - by default, elements are joined with a comma."

Answer 314

"It will split a string on whatever character we want (usually a comma) and break it up into separate elements within an array. ![]() "

Answer 315

It will, by default, split every letter of the string, since you passed no argument of which it should separate on.

Answer 316

It don't work, jerk. Emojis are typically 2-3 emojis layered on top of each other, so they break the way split() normally does stuff.

Answer 317

It returns the last item in the array, and removes it from the array.

Answer 318

It puts a variable onto the end of the array.

Answer 319

The new length of the array, just in case you need it.

Answer 320

myArray.shift() and myArray.unshift()

Answer 321

1. ) The individual element you are looping over. 2. ) The index of that element. 3. ) The entire array itself.

Answer 322

"It can be nice, structurally, to put them all inside a util object, and then call them with util.findBurger or whatever. ![]() "

Answer 323

High Order Functions.

Answer 324

"Instead, create a function that creates those functions for us: ![]() Here's how to call it: ![]() This is so flexible - pass in whatever word you want, and it returns a referemce to a function to feed to find and grab it. "

Answer 325

"It takes an argument and uses that to return a new array - the argument is usually an if/else or some other true/false arrangement that determines to carry the element to the new array if true, and not to carry it if it's false. ![]() "

Answer 326

What's cool is that, if you have a generator, you can pass it to both, and one will give you the first match, the other will give you a new array of all matching occurences, and that's flippin cool. Both from one function!

Answer 327

It tests whether at least one element in the array passes the test you define, and then it returrns a boolean.

Answer 328

It tests whether at least one element in the array passes the test, and returns a boolean.

Answer 329

It checks that every member of the array meets whatever criteria you pass as an argument, and returns a boolean of whether or not they done did.

Answer 330

Kind of what you'd expect - .some() just checks that at least one meets the criteria whereas .every() checks that everything in the array meets the criteria (the 'criteria' being whatever you set in your function within the .some() or .every() call.

Answer 331

You probably get confused, because by default .sort() treats things as strings, so it would do something like 1, 100, 2 and so forth.

Answer 332

"Pass it a funky function, brotha. It takes that callback function goodness, and gives you arguments for the firstItem and secondItem, then you write a test it repeatedly runs until there are no changes. Which is all to say: ![]() "

Answer 333

If it returns less than zero, it will put the first item first. If it returns 0, it leaves the two items alone. If it returns greater than zero, it puts the second item first.

Answer 334

a method lives on an array (forEach, or map or reduce or filter, etc.), and we pass it a callback function, or else define an anonymous function - it then runs once for every item in the array, giving us access to each individual item.

Answer 335

The .forEach method.

Answer 336

It doesn't return anything - it simply takes in the elements of an array and does some work on them. If you assign it to a variable, the variable returns undefined.

Answer 337

const toys = faces.map(addArms);

Answer 338

forEach is great for side effects - reaching outside of the current function to do something else (like put data on the page, or attach an event listener, for example) Other loops just take in data, do something with it, then return the modified, massaged or transformed data.

Answer 339

Functions that take in data, return the same length of data, and always work the same way given the data that is supplied without reaching outside themselves

Answer 340

The length of the array on the other side will be 8. .map always returns the same length of array as what is passed to it.

Answer 341

No can do.

Answer 342

You could chain multiple maps together in order to achieve multiple transformations. You could also do multiple transformations in a single .map callback function, but chaining them will keep your functions single-purposed.

Answer 343

It repeats the string however many times you pass it as the argument.

Answer 344

It would create an array with 3 indices, all of them empty.

Answer 345

It fills the array's empty indices with whatever you pass it as an argument, just repeated across all empty indices. (I'm not actually sure if it's only empty indices, or if it overwrites pre-filled indices.)

Answer 346

an API usually returns a bunch of data, but it isn't in the format you need - you use map to massage the data and return it formatted how you need it for your purposes.

Answer 347

Don't go off and update the DOM - that's what a .forEach is for.

Answer 348

The current date - if you pass it a string of a date, it will convert it into a Date object.

Answer 349

You need to convert them to timestamps. You do this by calling .getTime on a JS Date object, which returns to us a random-looking number that is actually the number of milliseconds since January 1, 1970.

Answer 350

You can call Date.now(), rather than creating a new Date object and calling getTime() on it.

Answer 351

"Epoch.now.sh"

Answer 352

Map takes in an item and returns a transformed version of that item. Filter takes in items and returns a filtered subset of those items. Reduce takes in an array of data and returns a tally of some part of those items. It could be a single number total, or an object representing instances of something.

Answer 353

You're having to reach outside of the function to do it, which is a side effect.

Answer 354

Map transforms each item in the array, filter edits out the parts that don't work, while reduce puts everything together into something new.

Answer 355

An accumulator, and a currentValue - the accumulator is the running tally, while currentValue is each iteration's individual value.

Answer 356

The value at which you'd like to start the accumulator - after this the accumulator always goes off the return of the last iteration, but the first time in you can define the starting value. Often, for totaling something up, this will be 0.

Answer 357

"What is passed in as the return value from each iteration of the loop. If you don't return anything, the accumulator is undefined after the first time. If you return something static like ""hello"" - each iteration will just return ""hello"". To accumulate, add the currentValue to the tally, and return that."

Answer 358

"If the attribute key is undefined, and you try to add to it, undefined + 1 = NaN, and that will mess up the rest. We have to catch the case where it's undefined and set an initial value. Something like: ![]() "

Answer 359

An initial expression, an exit condition, and an increment expression.

Answer 360

"Running a code block N number of times. ![]() "

Answer 361

at the end, you'd always have a global variable sitting around with the last value put into it. let fixed this since it is block scoped.

Answer 362

We use a forEach, map, or reduce to execute similar functions.

Answer 363

The canvas element has a getImageData method that pulls the RGBA values for every pixel - since there are 4 values, it's useful to be able to jump over and increment by 4 when looping over them - that would be harder with map or forEach.

Answer 364

It can handle emojis - forEach gets thrown off by the fact emojis are multiple images blended together, but for of handles them like you'd think it should - listing out each image that is part of the composite.

Answer 365

If you are having to sequence a large amount of data that takes time to process, you can do async and await within for of, which you can't inside of a forEach.

Answer 366

It doesn't give us the index of our item, it also doesn't allow us to filter or anything like that.

Answer 367

It's not..but it's there - you might see it somewhere. It just also loops over keys.

Answer 368

If you have a prototyped object, for in will grab the prototyped keys as well as the explicit ones - Object.entries only grabs the explicit keys.

Answer 369

It takes a condition and runs infinitely until that exit condition is met.

Answer 370

The do while loop will execute the first go round prior to checking the condition, whereas while will check prior to executing.

Beginning JavaScript Flashcards

(438 cards)