Beginning JavaScript Flashcards
Where should your scripts / script tags always go?
At the bottom of your body tag, because for you to access elements on the page, they first must have loaded onto the page.
What, in folder symbol language, is “this folder”
./
What’s the downside of multiple script tags in the same file?
Every time the browser hits a script tag it will go off and download and parse that file.
What should you do instead of having multiple script tags within the same HTML document?
Either bundle your files into one JS file or employ code-splitting.
What is code splitting?
When you split JS files into multiple smaller files and then have them load on demand.
What is the keyboard shortcut within the browser to inspect an element?
Cmd + Shift + C, then you can hold it while hovering over the element you need.
What is the keyboard shortcut to open the console directly in the browser?
Option + Cmd + J
Why don’t we have to type ‘use strict’ every time?
Because it is enforced by default in JS modules, which is how almost all modern JS will be written.
What is the difference in scope between var, let, and const?
let and const are block scoped while var is function scoped.
What is Wes’s opinion of when to use var, let, or const?
By default always use const, once it needs to change switch it to let…never use var.
What are the 7 types in JavaScript?
BS BONUS - BigInt, Symbol, Boolean, Object, Null, Undefined, String
Everything in javascript is an….
Object.
What is the only non-primitive Type?
Object
Which type always gives us a guaranteed unique identifier?
Symbols.
How do you disable eslint on a particular file?
Just make a comment at the top:
/* eslint-disable */
How do you disable eslint for just one line?
Make a comment above the line
/* eslint-disable-line */
How can use a single quote within single quotes?
Escape it with a backslash /
This tells the interpreter to take what follows as text, not as javascript.
‘he/’s so cool’
What does it mean to say the plus sign is ‘loaded’?
It can both add and concatenate and if you use different types, you could be in for a world of hurt and misunderstanding, bugs and misery.
How should you store money?
Just in cents, so that you have a whole number that is easy to do math with rather than a floating point integer that is prone to errors, then just divide by 100 when you need to display it.
What is the difference between undefined and null?
Undefined is when a variable has been created but never defined, null is when something has explicitly been set to nothing. It’s the difference between Cher being born with only one name (undefined) and Teller of Penn & Teller legally setting his name to just Teller (marking his last name as null explicitly)
What is the difference between using a double and triple equal sign?
“It’s almost always wrong to use the double equal sign to test equality.
Triple equal tests that the value and the type are the same, whereas a double equal sign tests only that the value is the same, not the type.
So, ““10”” == 10 is true, but ““10”” === 10 is false because they are different types.
“
What is the tab keyword to get lorem ipsum text with the emmet extension?
lorem500 (or however many words you would like)
What built in JS function will let you move the navbar to any x, y coordinate on the page?
scrollTo - it either accepts an x and y coordinate as the params, or else accepts an option object which would have the position defined by top, left, bottom.
What argument can you pass if you need a function parameter to fall back to its default (but, for example, it’s in the middle of the argument list, so you can’t just skip it)
If you pass undefined, then the function will fall back to its default.
What does it mean to say a JS Function is a 1st class citizen?
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.
What is an anonymous function?
An anonymous function is just a function declared without a name - they are valid for callbacks or in an IIFE.
What is an IIFE?
An Immediately Invoked Function Expression.
What is a function expression?
A function expression is when you store a function as a value in a variable.
Why do some say you shouldn’t use function expressions?
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.
Why is it ok to use function expressions now when it used to be a faux pas?
Because modern browsers can infer the name of the function expression from the variable it’s assigned to and use this in error logging.
What is the difference between a regular function declaration and a function expression (as far as how they work, not syntax)?
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.
What are the advantages of arrow functions?
- A concise syntax that’s shorter.
- They don’t have their own scope in reference to the ‘this’ keyword, which is a little more intuitive.
Why must arrow functions be stuck into a variable?
Because, they are a special type of anonymous function.
How can you use implicit returns within an arrow function?
Place the function all on one line, then make sure to take out the curly brackets (and the return keyword)
const implicit = () => ‘awesome’
implicit()
When do you not need parentheses around a parameter sent into an arrow function?
If you only are passing one parameter.
What can you do if you need to implicitly return an object from an arrow function?
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.
What is the most important factor when determining whether to use an arrow function or a normal function?
Readability - if you come back in 6 months, which type will make the most sense and be understood better in this case.
What is an IIFE? (Not the acronym - but what is an immediately invoked function expression?)
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.
What is this an example of?
(function() {
console.log(‘running the anon function’);
return ‘You are Cool’;
})();
An IIFE
What is the benefit of an IIFE?
Not really any anymore, but it used to be popular before there were modules and block scoped variables.
What is a method?
A function that lives inside of an object. NOT the same thing as a function, as many functions are not methods.
“What is the normal function shorthand way to write this method?
const robb = {
name: ‘Robb Schuneman’
sayHi: function() {
console.log(‘Hey Robb’)
return ““Hey Robb””;
}
}
“
const robb2 = {
name: ‘Robb Schuneman’
yellHi() {
console.log(‘HEY ROBB’)
}
}
“What is the method arrow shorthand way to rewrite this function?
const robb = {
name: ‘Robb Schuneman’
sayHi: function() {
console.log(‘Hey Robb’)
return ““Hey Robb””;
}
}
”
const robb2 = {
name: ‘Robb Schuneman’
whisperHi: () => {
console.log(‘HEY ROBB’)
}
}
What is ‘this’ equal to in normal functions?
The object that the function was called against.
What does ‘this’ refer to in an arrow function?
An arrow function inherits the parents scope of what ‘this’ refers to.
What is a callback function?
A function that will happen when something else is done - prominent examples are a click or a timer.
What type of function is this an example of?
const button = document.querySelector(‘.clickMe’); button.addEventListener(‘click’, robb.yellHi)
A callback function (listening for a button click)
What is this an example of?
button.addEventListener(‘click’, function() { console.log(‘nice’);
});
A callback function that is defining its own anonymous function (rather than calling a predefined function).
What does console.count(‘message’) do?
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.
What does console.table do?
If you have a group, say an object or an array of objects, console.table puts them into an easily read attribute table.
What is the advantage of passing in a variable to console.count
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.
What does console.group do?
It nicely organizes anything that is put under it - this is a way to group together logs or variables or whatever.
How do you start and end a console.group?
console.group to start and console.groupEnd to finish.
What does console.groupCollapsed do?
it starts the group (still ending with console.groupEnd), but it is collapsed by default to provide less clutter to your console.
What is the console command (not keyboard shortcut) to return whatever element you currently have selected?
$0
In addition to $0, how do you call the second to last element, or beyond that?
$1 is next to last, $2 second to last, and so forth.
What aspect of a webpage will keep the $ command from working within the debugger console?
If the site is running JQuery, it overrides the meaning of the $ sign so that you can’t use it in debugging.
What does the $(‘element’) console selector do?
It returns the first matching element or class object selected - so $(‘p’) will return the first paragraph on the page.
What does the $$ selector select?
This will return all matching elements - so $$(‘p’) will return all paragraphs on the page.
What command will pause JS from running at the specified point in the code and give you a lot of tools you can use to figure out what’s wrong?
debugger;
What all can you see when using the ‘debugger’ command within your code?
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.
How do you progress when using the debugger command to insert linebreaks?
Use the play button, it will forward to the next time it hits the debugger call.
What does the Step Over command do in the debugger console?
It will allow you to go step by step through your code, watching how variables change and what gets called when.
What is a second way to set a breakpoint, in addition to putting the ‘debugger’ command into your code?
If you click the sources tab, then click on a line of code, it will insert a breakpoint.
Where can you see which network calls are being fired when?
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)
What does it mean to break on an attribute within the console debugger, and how do you do it?
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.
How can you put a breakpoint on a specific event (like a click, or a network call)
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,
What is this an example of?
var anon = function() {
alert('I am anonymous');
} anon();
An anonymous function
What question does scope answer?
Where are my functions and variables available to me?
What is a global variable?
A variable that is available anywhere within your application.
What can a global variable be accessed by?
Any other Javascript running on the page - all functions, modules, if statements, and so on.
What is the global scope in terms of the browser?
The Window object.
How are common pre-defined methods available to us throughout Javascript?
Because they are defined on the Window object.
What is the difference between var variables and let and const when talking about variables declared on the top level?
Var variables are attached to the window object and are globally scoped, but const and let do not attach to the Window object.
Global variables are awesome!
GTFO - they are a recipe for a disastrous headache.
Where are variables available if they are created within a function?
Only within that function (unless returned to whatever called it)
What is Scope Lookup?
If a variable isn’t found in the scope where it is called, it will then look for it at a higher level.
What happens if two variables of different scope are declared with the same name?
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.)
Why is it not a good idea to name variables at different scopes the same thing (shadow variables)?
Because you’ve limited yourself to not being able to access the variable from the umbrella scope within the more specific scope.
How can you access a variable outside of a block where it is modified?
Just declare it prior to the block as a let and then modify it - it will keep the scope of where it is declared.
What is one of the best things about block scoping on let and const?
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.
What is Lexical Scoping (or Static Scoping)
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.
We shouldn’t create global variables - how does modern JS make it hard to do so?
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.
What are functions scoped to?
Their parent function.
What is hoisting?
It’s a feature of JS that allows you to access functions and variables before they’ve been created within the code.
Which two things in JS are hoisted?
- Function Declarations
- Variable Declarations
What might be a preferred method instead of relying on hoisting?
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.
What might be one use for hoisting?
“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.”
What’s the gotcha on hoisting variable declarations?
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.
What is a closure?
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.
How does a closure work?
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.
Why would a closure be helpful?
For one, often they can be used to create private variables that are inaccesible except through a child function.
What is the Document Object Model (DOM)?
It is what the browser turns the HTML and CSS you write into.
What is the best way to think of the Window object?
Think of it as everything about the current browser window - which would include the tabs, browser bar, and other external things.
What is the best way to think of the document?
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.
What is the navigator keyword?
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.
What happens if you load your Javascript before the HTML is created, like putting the script tag in the Head section as CSS is?
You won’t be able to access the HTML - you should instead put it right before the closing body tag.
If you really needed to load your JS from the header section for some reason, how could you do it?
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);
What are the two main ways to select elements on the page?
.querySelector and querySelectorAll
Can .querySelector and .querySelectorAll only be called against the document object?
No, they can be called against any element. Doing so will limit the scope of the selector to only children of that element.
Give an example of how to select the first paragraph on a page.
const p = document.querySelector(‘p’);
What does querySelectorAll return?
A NodeList of all matching elements.
What does querySelector return?
The first matching element.
What are NodeLists?
They are lists of things, like array, but they don’t have all the functions built in that arrays do (map, filter, reduce, etc.)
Give an example of a parent -> child selector within JS?
const imgs = document.querySelectorAll(‘.item img’);
What are additional ways to select elements on a page, beyond querySelector and querySelectorAll?
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.
What does console.dir do?
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.
How do you set a property of an HTML element once you’ve gotten it with a querySelector?
“Simply by setting it equal to something new via dot notation.
heading.textContent = ““Robb is cool””
“
What is the property for the text within an element?
.textContent
What are the differences between .innerText and .textContent?
.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.
What does the element.innerHTML property give you?
The full HTML within the element.
What does the element.outerHTML property give you?
It returns the full HTML within the element - and also the element it is contained within, as well as keeping any white space.
How should you tack some content onto preexisting content?
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.
Why should you use element.insertAdjacentText instead of setting the textContent equal to what’s already there plus whatever is new?
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.
What is the difference between an HTML Node and an Element?
Everything is a Node, whereas an Element describes only things wrapped in some sort of HTML tag.
What’s the best website to find a list of all the element properties and methods?
developer.mozilla.org/en-US/docs/Web/API
How do you add a class to an element using JS?
element.classList.add(‘newClass’);
How do you remove a class from an element?
element.classList.remove(‘oldClass’);
What does element.classList.toggle(‘aClass’) do ?
It will add the class to the element if it isn’t present, or remove it if it is present.
Where should you generally put transitions? On the element? Or on a class?
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.
What does element.classList.contains(‘someClass’) do?
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.
What two measurements can you pass in to CSS transform: rotate()?
You can either measure the rotation in degrees (360deg) or # of turns (1turn).
What are some common transform properties?
transform: rotate(360deg) or
transform: scale(1.5) or
What arguments get passed to transform: scale() ?
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.
Give me an example of a common, basic argument set for the boxShadow CSS property?
boxShadow: 0 0 10px black;
What border radius will give you a circle?
border-radius: 50%;
What is probably the most common way to interact between CSS and JS?
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.
What is the className element attribute?
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)
What is an HTML attribute?
Anything provided to an element as additional info - classes, source, alt, etc.
How do you set an HTML attribute?
The same as other things - once you’ve gotten your element, just set the dot property equal to something new:
element.alt = ‘Cute Pup’
“Do you need to title an alt attribute something like ““photo of (whatever)””?”
“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”””
True or False - dot attributes like element.width or element.title work as both setters and getters?
True, you just do element.width = 300 or myWidth = element.width
All dot attributes are setters and getters?
Not all - some, like .naturalWidth, can’t be changed, which makes sense if you think about it.
What can you do if you have an element that you’re waiting to load before you can do something with it in JS?
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.
True of False - eventListeners can only be fired on the Window element.
Nah. You can use them to watch for actions on specific elements as well.
Why do you have to wait for things to load even if the script tag is at the bottom of the body tag?
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.
Why do we have getAttribute, setAttribute and hasAttribute methods when we can just use dot notation on an attribute?
They’re older for one, but also they work for getting non-standard attributes. But don’t set custom attributes, that’s pain.
Should you set non-standard attributes on HTML elements?
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)
How should you set your own custom attributes?
Use data attributes - which is to say, use data-whatever like so:
This lets you attach data that isn’t a standard attribute.
How do you access data attributes?
You call element.dataset, which returns an object with each of the properties defined on it - so you can do element.dataset.customWhatever
What is it an example of if you have an image, and set a custom attribute of data-largeUrl that is the source to a larger picture you can use in the link?
That’s data attributes, homey.
What is a good website to figure out keycodes?
keycode.info
What happens if you call .play() on an audio element already playing?
Nothing. It won’t play again until it has run its full course.
How do you rewind an audio element to the beginning?
audio.currentTime = 0
Why shouldn’t you have a timeout in your JS to run when a transition ends, in addition to a transition manually set to the same amount of time?
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.
What is a better solution than setting two corresponding timers (one as a transition, one as a timer before running code)?
Use the transitionEnd event that fires when the element is done transitioning, rather than trying to time it just right.
You can attach a listener to a JS array? T/F?
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));
What is this (almost) always equal to?
The thing that it got called against.
What is the main way to create HTML elements in Javascript?
document.createElement(), and then pass it a tag name ( (‘p’) or (‘div’)
What do square brackets around a param on MDN mean?
That it’s an optional param.
When you use document.createElement() it automatically puts that element on the page. T/F?
False - it just creates it within memory, then you still will need to tell it where to go.
What is the shortcut to give a class or title to an element via document.createElement?
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.
How do we add some created HTML to the DOM?
We grab the element we want to add it after and use .appendChild() or insertAdjacentElement()
How do you access the body of the document?
Easy - with document.body - they give us a nice attribute accessible via dot notation directly on the document.
Why shouldn’t you update the created element and re-append it to the document.body a bunch of times?
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.
How can you add a JS created element to another element?
element.append() - but it doesn’t work on IE, or element.appendChild()
What built-in function can you use to append somewhere other than as a child of an existing element?
You can use .insertAdjacentElement() - which works the same as insertAdjacentText() - you pass it one of several options on where you want the element.
What built-in function will copy the contents of a node to a new variable?
newElement = elementToBeCopied.cloneNode()
When you use .cloneNode() but don’t pass any arguments, what should you expect?
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.
What’s a major gotcha when using backtick strings to dump HTML into the DOM?
If they’re coming from user input, you are opening yourself to XSS - cross site scripting, unless you sanitize it.
What do we use to set or change the actual HTML of the item we have selected?
We would use .innerHTML (as opposed to just .textContent)
Other than security risks - what is another downside to setting innerHTML to backtick HTML?
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.
What is a range?
Just a collection of elements or HTML that we can then work with.
How can you turn a back-tick string into actual HTML so that you can use your element built-in functions?
call .range.createContextualFragment()
document.createRange().createContextualFragment(myHTMLString);
What is XSS?
Cross-site Scripting - when a third party runs their own JS on your site, which should never happen.
Explain the difference between a node and an element in terms of this element:
I am SO Cool
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.
List the properties we have available for traversing and working with elements?
For elements:
.children
.firstElementChild (first element under)
.lastElementChild (last element under)
.previousElementSibling (the element before this)
.nextElementSibling (element after)
.parentElement (up one level)
What’s a better way to move between nodes in JS then traversing up, up, over, down or something?
Just use querySelector to grab the one you want, or if you don’t know exactly, use .closest()
what does .closest(element or class) do?
It grabs the closest element to whatever it is called against.
Why is it a bad idea to traverse the dom going up up over down down and so on?
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.
What are the properties available for dealing with nodes?
.firstChild
.lastChild
.previousSibling
.nextSibling
.parentNode
.childNodes
What is maybe the one most important take away for the node and element properties?
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.
What is the built in method to remove an element or node that is available on every single method or node?
.remove()
What is the gotcha with using .remove() to remove elements/nodes?
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.
If you want to insert an HTML string into the DOM, how can you accomplish this?
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
What two arguments does .addEventListener take? (usually - could be three though)
- ) What type of event you want to listen for - ‘click’, ‘keyUp’, etc.
- ) What you want to do when that type of even is detected, in the form of a callback function.
What are the 3 steps to listening for events?
- ) Go get something
- ) Listen for something on what you got
- ) Do something when it detects what it’s listening for.
What is a good convention for how to name event listener functions?
handleWhatever (e.g. handleClick, handleDrag, handleKeyUp)
Why shouldn’t you put () after a callback function (unless it’s returning another function)?
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.
What are the advantages for defining your event handlers outside of the event listener and then passing them in instead of using an anonymous function as the second argument?
- ) 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.
- ) 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.
What is binding?
Just taking a function and listening for a specific click against an element with it. This binds the function to the element.
What is the first object always passed when the browser runs a callback function?
The event object.
What does the isTrusted attribute on an event tell you?
It returns a boolean of whether the click was actually from a mouse (or whatever you’re listening for), or was programatically made.
What does the event.pressure attribute tell you?
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.
What is the difference between event.target and event.currentTarget?
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.
Between event.target and event.currentTarget, which one do you usually want?
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.
What is propagation?
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.
What will event.stopPropagation() do?
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.
What is capture?
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.
How do you stop capture from going to the lowest element?
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.
What does event.type() tell you?
It tells you what sort of event this was - say, a click, or a drag, or whatever.
What does event.bubbles tell you?
It returns a boolean that tells you whether this element will bubble the eventListener upwards or if stopPropagation() has been called.
what is the ‘mousemove’ event?
It detects every time the mouse moves over the element that called it.
What is the ‘mouseenter’ event listener?
It detects any time the mouse moves onto the element it was called against.
If you have a callback function, what will ‘this’ refer to?
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.
If you use an arrow function in a callback function, what will the ‘this’ keyword refer to?
In that case it will be scoped to the parent, it won’t be the element it was called against.
What should you use instead of ‘this’ in event listener callback functions?
It’s probably best to always go ahead and just use e.currentTarget or e.target instead of ‘this’.
How do you stop the default action of an HTML element?
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.
What does confirm(‘some message here’) do?
“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.
“
What does prompt() give you?
Similar to alert() or confirm(), but it gives you a text box, whose entry you can assign to a variable.
How do you get the url of a link if you have an event listener on it?
event.currentTarget.href
What is the best way to grab onto a form with JS?
Give the form a name, rather than a class - then grab it with an attribute selector.
How do you grab an element by its attribute (like a name) rather than by class or element type?
“const signupForm = document.querySelector(‘[name=”“signup””]’);”
How can you keep a form from submitting unless an input is filled out?
Just add ‘required’ to the input and it will throw an error if submit happens with no input on it.
How can you access form elements?
“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.
“
How can you test whether a string includes a particular subset value?
myString.includes(‘whatiamtestingfor’) will check if it is included in a given string - but it’s also case sensitive.
What are the ‘focus’ and ‘blur’ events?
Focus is when a field gains focus, blur is when a field loses focus.
What, as far as accessibility, is the difference between buttons and links?
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.
What is the main thing to keep in mind as far as accessibility and click events?
Things that are not keyboard accessible should not have clicks registered on them, because not everyone has a mouse.
How can you solve the problem of an image that is clicked to enlarge, for example, being inaccessible without a mouse?
“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.”
What do you need to do if you have an image that is clickable but can’t be triggered without a mouse?
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!’)
}
}
When setting up a canvas, how should you set the width and height?
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.
How do you work with the canvas?
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();
How do you set a rounded edge on the canvas pen?
“ctx.lineJoin = ““round”” and ctx.lineCap = ““round”””
How do you change the width of the canvas drawing tool?
ctx.lineWidth = 10 - the default is 1px, and you don’t have to specify the px.
How do you put a drawing cursor on the page?
You call ctx.beginPath()
How do you move the drawing cursor, in an event listener responding to a click, or what have you?
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.
What do you call on the canvas after setting your moveTo and lineTo?
You need to call ctx.stroke() in order to actually commit the drawing to the canvas.
How do you listen for keyDown on your whole site?
Just add the listener on to the window.
What is the default action of an arrow key?
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.
If your functions have six or seven parameters, what should you do instead of passing them all in and why?
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.
When you pass an object into a function, what’s an easy way to have top level variables instead of having to call options.thing every time?
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);
}
What’s another way to write x = x - 10?
x -= 10
What is the convention for naming true constant variables?
name them in ALL_CAPS with underscores between words.
What is the best site for seeing HSL values?
www.mothereffinghsl.com
What is HSL?
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.
How do you set the color of a canvas pen?
ctx.strokeStyle(‘hslValueOrHexCodeOrWhatever’)
What do you need to remember if you set the arguments of ctx.strokeStyle dynamically?
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.
What listener can you fire if you need to remove a class when an animation is finished?
‘animationend’
What do you need to remember about removing event listeners?
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 }
);
}
How do you clear the canvas?
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)
What does the CSS property ‘pointer-events’ do?
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.
How could you make a hidden div (like a modal)
Just set it up in HTML how you want it, and then set the opacity to 0 and the pointer-events to none.
How does .closest() look for matches?
It will look up the DOM tree of elements, where as querySelector() looks down the DOM tree.
How can you get the source of an image in javascript?
const imgSrc = card.querySelector(‘img’).src;
How can you replace a certain part of a string?
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.
How can you simulate a slow cell network on your website?
In the developer tools, under the network tab, there are checkboxes to simulate various networks, including a slow 3G connection.
What can you use instead of a ‘scroll’ event in order to tell when an element is on the page?
An IntersectionObserver.
How do you make text scroll rather than extend the height of an element or get cut off?
You set the CSS property of overflow to ‘scroll’
How can you make your code more robust, for cases where you want to use it on multiple pages where some needed elements may not exist yet, without it breaking?
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.
What does the .scrollTop property of an element tell you?
How far the element is scrolled from the top of the element.
What property will tell you the maximum scroll of an element?
.scrollHeight
What is an IntersectionObserver used for?
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.
What is the syntax to call an IntersectionObserver?
const ob = new IntersectionObserver(obCallback, { root: terms, threshold: 1 });
ob.observe(terms.lastElementChild);
function obCallback(payload) {
if (payload[0].intersectionRatio === 1) {
button.disabled = false;
// stop observing the button
ob.unobserve(terms.lastElementChild);
}
}
When does the callback function passed to an IntersectionObserver fire?
Every time the element is on the page, as well as everytime it leaves the page.
After declaring your IntersectionObserver, what’s required to make it work?
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)
How could you tell how long something has been on the screen?
An IntersectionObserver can give you the time that something has been on this page - which could be very useful in making games.
If you have an IntersectionObserver named ob, what will ob.intersectionRatio tell you?
How far onto the page the element is - with 1 meaning ‘completely on’ and decimals telling us what percentage if not completely on.
What is the second argument passed into an IntersectionObserver declaration?
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 });
If you have an IntersectionObserver that won’t fire because the bottom element is never fully on the page, due to padding or whatever, what can you do?
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.
How do you stop an IntersectionObserver?
call observer.unobserve(theElementYouWereObserving);
Similar to the IntersectionObserver, what will a ResizeObserver do?
It will watch and tell you (or at least your callback function) when an element has been resized to whatever percent you listen for.
What is the aria-label attribute?
It tells the screen reader what this element is about.
What is the aria-selected attribute?
It just tells which element should be set to active - as with tab bars and panels.
What does ARIA stand for?
Accessible Rich Internet Applications
What is ARIA?
A set of attributes that define ways to make web content and web apps more accesible to people with disabilities.
What’s the easiest way to hide an element?
Just add the hidden attribute to it - this also makes it accessible.
What’s different about accessing aria properties?
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.
When should you use an accessibility attribute over a class for styling and JS?
Whenever you can (whenever one exists) - it saves you from having to double up and set aria attributes in addition to classes.
What is the syntax for the array.find method?
”
“
How do you convert a NodeList into an array?
Wrap it in an Array.from() method.
What is the order of operations in JS?
Same as math - BEDMAS - Brackets (Parentheses), Exponents, Division, Multiplication, Addition, Subtraction
How do you do exponents in JS?
You use the ** operator - so 2 ** 2 is 2 squared.
What does a regex statement always start and end with?
/
What does \s mean within a regex?
A space
What does g mean after the closing backslash mean within regex?
Global - To find all things that match, not just the first thing.
”
How should you do an if statement, instead of like this?
“
“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.
“
Why do we still have == in the language if we should almost always use === ?
“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.”
In terms of truthy/falsy - what’s the difference between ‘’ and ‘ ‘ ?
An empty string is falsey, while a string with any value, even a space, is true.
Is the value 1 truthy or falsey?
Truthy
Is the value -10 truthy or falsey?
Truthy
Is the value ‘hello’ truthy or falsey?
truthy
Is the value ‘ ‘ truthy or falsey?
Truthy
Is the value ‘0’ truthy or falsey?
Truthy
Is an empty array ( [] ) truthy or falsy?
Truthy.
Is an empty object ( {} ) truthy or falsy?
Truthy
Is the value 0 truthy or falsey?
Falsey
Is the value Undefined truthy or falsey?
Falsey
Is a variable set to null truthy or falsey?
Falsey
Is the value NaN truthy or falsey?
Falsey
Is an empty string truthy or falsey?
Falsey
Is [].length truthy or falsey when it is an empty array?
Falsey - because its length is 0.
Is {}.length truthy or falsey (that is, an empty object’s length)
Falsey, because it evaluates to zero.
What is coercion?
When we force something of one type to become another type - usually things are coerced into booleans.
How can you check if a string exists?
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.
How can you check if a variable is set to an empty string?
!emptyStringName will return true if it is an empty string, whereas !!emptyStringName will return false if it is an empty string.
Why are bang (!) and bang bang (!!) used with strings?
In if statements we use them to take a truth or falsey value and coerce it into a real boolean true and false value.
What is the && trick?
“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.
“
What is a blockless if statement?
“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.
“
What two arguments does setTimeout() take?
“A callback function and the number of milliseconds to run that callback after.
”
Is it true that if you use a timer, everything outside of it will stop running and wait for the timer to complete before moving on to the next line?
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.
What is the difference between setTimeout() and setInterval()
setTImeout will run once after the given number of milliseconds, setInterval will repeatedly run every few milliseconds
What is the syntax for setInterval()?
”
“
setInterval doesn’t run right away - T/F?
True - it will wait the specified amount of time before running for the first time.
How can you arrange for setInterval to run immediately?
“You could roll your own setImmediateInterval() function -
”
What’s the key thing to remember if you will need to clear an interval or timeout?
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)
What if you want an interval to stop, but only after running for a specified amount of time?
“You can set a clearInterval call within a setTimeout:
This will run the interval for 3 seconds, and then clear the interval.
“
When should you use an object over an array?
When the order doesn’t matter - there’s no guarantee object properties will appear in the order you set them in.
Object values must be what data type?
Any type - even other objects or arrays or variables set elsewhere or functions
What can you do if the object property and the value variable you want to set it to are the same?
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’
Do object keys have to be in the format of
name: ‘wes’ ?
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.
What’s the reason you hadn’t thought of before for leaving a trailing comma?
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.
const means that the value of an object cannot be changed, true/false?
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.
What if you do want a variable or object to be immutable?
Instead of using const, you’d use the ‘freeze’ keyword.
Object.freeze(newObject)
Then, none of its properties can be overwritten.
How do you call an object when you are setting which key to call programmatically?
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.
How can you access object properties with a - in them or a space?
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.
What will the eventual deep check ability in JS look like?
”
“
“Rewrite this into the new deep check syntax:
”
”
“
What do we do if we have an element where we aren’t sure if it will exist or not at any given time?
“We have to first check for its existence before we do anything with its further properties or we’ll get an error:
”
How do you remove a property from an object?
You just call delete:
delete wes.job
What will it return if you console.log the result of a delete statement (or the statement itself)
It will return a true value if the value has been deleted and a false if it has not.
What is the difference between a method and a function?
A method is just a function which lives inside of an object.
How are booleans, numbers and strings copied?
They are copied by value, so you can change the copy without changing the original.
If you set an object to a different object, and then change one of the properties, what happens?
The properties of both objects change, because the reference has changed. This is also true for arrays, maps, and sets.
How CAN you make a valuecopy of an array/object/set/map, not a copy by reference?
“Use the spread operation (…object) and assign it to a new variable.
”
What is the old way of copying an object by value instead of reference?
”
But this is very rarely used anymore - just something to know in case you see it in legacy code.
“
What is the gotcha with using spread to copy an object by value?
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.
How can you do a deep copy beyond one level of an object/array/set/map?
You can use the cloneDeep function from LoDash.
How do you use the cloneDeep option from LoDash?
“First, load LoDash from unpkg -
Then you can use _.cloneDeep:
”
What is LoDash really good for?
When you need some complicated, harder methods than is available in standard JS - especially in regards to arrays.
Give an example of using spread to merge objects into a new one, please?
”
“
How many objects can you spread into a new one?
As many as you want.
What if you spread in objects with multiple properties with the same name but a different value?
The last one spread in will win, so the order you spread them in in matters.
What happens if you pass an object into a function?
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.
What is the syntax for a Map?
”
“
What two arguments does MyMap.set() take?
“The key of the map, and the value for that key:
”
Why can’t you use dot notation to add a property to a map?
Using dot notation will make the entered value a property on the map, instead of a value within the map. You must use .set()
What method can you call on a map to see if it contains a value?
.has()
What method can you call to delete a value from a map?
.delete()
What is a big benefit of using a map, beyond properties being ordered?
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.
What is a dictionary in JS?
A way to store additional metadata about something.
What is the use of Maps in congruence with Objects?
“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:
”
Do you remember the example using a Map to set the prize for certain scores?
”
“
What is the equivalent of Array.length for Maps?
myMap.size
With a Map is the order of properties guaranteed?
Yes, unlike with an object.
What two methods let us loop over a Map?
forOf and forEach
What is the syntax of a Map forOf loop?
”
“
What’s that cool example of using destructuring in a For Of loop on a map to get variable names that make sense rather than having to do array[0], array[1] and the like?
”
“
When do you use a Map over an Object?
Mainly, if you need to maintain the order of your items. Also, they’re useful as dictionaries with meta info about an object.
How do you do a literal for maps? (e.g. like const newObject = {dummy: ‘thing’}
You can’t - with Maps you have to use the const newMap = new Map(); syntax
How are Objects and Maps different in regards to methods?
You can’t put functions inside of Maps like you can Objects - Maps are simply for storing data.
What’s the catch on Maps with JSON?
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.
What types can array items be?
Any type at all.
How do you call an Array’s keys?
“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.”
How do you check if something is an Array?
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.
What is the difference between mutable and immutable Array methods?
Mutable methods change the original array, whereas immutable methods don’t, they just return a new array.
Is Array.reverse() a mutable or immutable method?
Mutable. It will change the orginal array, even if you’re using it in order to set a new variable.
What does Array.slice() do?
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.
How can you use an Array mutable method but not mutate the original array?
“Take a copy of the original array using spread notation, prior to calling the mutable method on it:
”
How do you add an element to the beginning of an array?
“Use Array.unshift(‘thingToAdd’):
”
What is the difference between Array.slice() and Array.splice() ?
.slice is immutable and .splice is mutable - that is, .splice will actually carve the chunk you describe out of the original array.
How do the arguments given to Array.slice() and Array.splice() differ?
.slice() takes a starting index and an ending index, whereas .splice() takes a starting index and then how many indices to go forward.
How do you add to the middle of an array?
“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.
“
What happens if you don’t pass Array.slice() a second argument?
It will start from the index given as the first argument and just go until the end of the array.
How do you remove an element from an Array?
“You just slice twice - once up until the thing you want to leave out, and then continue from the next one:
”
Which indices will be sliced by the following command:
newBikes.slice(0, 3)
newBikes[0], newBikes[1], and newBikes[2]
(slice is non-inclusive of the second argument given)
What does Array.findIndex() do?
“It loops over every single item in the array, then returns the index of the element that matches the condition:
”
“Can you refactor the following code?
”
“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:
”
What does Array.flat() do?
It will flatten any nested arrays into the main one.
What is the difference between static and instance methods?
Instance methods are called against individual instances of the element, whereas static methods are called against the class itself.
How do you use Array.of()?
“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 = [] )
”
“Thinking about spread notation - what would something like ““myArray = […‘robb’] “” do?”
It would set the new array to each iterated letter - so [‘r’, ‘o’, ‘b’, ‘b’]
What does the first argument to Array.from() need to be?
Something that is iterable - that is, something with a length property. This can be an object that has been given a length property.
“What is the following code doing?
”
It’s creating a range with a dynamic number of elements,
What is the difference between Object.entries(), Object.keys() and Object.values()?
“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()
“
Let’s say you have an Object, and you want to take the entries for each key/value pair in that object and put them into variables within a method - how would you do that?
“Use destructuring to make this easier on yourself:
or this would be even more concise:
”
What does myArray.join() do?
“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.”
What does myString.split() do?
“It will split a string on whatever character we want (usually a comma) and break it up into separate elements within an array.
”
What happens if you don’t pass an argument to myString.split() ?
It will, by default, split every letter of the string, since you passed no argument of which it should separate on.
What happens if something you’re trying to split has emojis?
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.
What does myArray.pop() do?
It returns the last item in the array, and removes it from the array.
“How can you do the following without mutating the array?
”
”
“
What does myArray.push() do?
It puts a variable onto the end of the array.
What does myArray.push() return if you set it to a variable?
The new length of the array, just in case you need it.
If myArray.push() and myArray.pop() put things on and take things off the end of an array - how do you do the same for the beginning of an array?
myArray.shift() and myArray.unshift()
What three optional arguments can anArray.find() pass to whatever callback function you set?
- ) The individual element you are looping over.
- ) The index of that element.
- ) The entire array itself.
Give an example of using anArray.find() with a callback function.
”
“
What’s a solution if you have a large number of functions that you are re-using?
“It can be nice, structurally, to put them all inside a util object, and then call them with util.findBurger or whatever.
”
What are functions that return other functions called?
High Order Functions.
What can you do when you have two functions that are doing almost exactly the same thing?
“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.
“
How does array.filter() work?
“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.
”
“Refactor this:
“
”
“
“Make a function generator that can handle multiple input minimum ratings from the following:
”
”
“
What is so awesome about a function generator, as pertains to both filter or find?
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!
“Given this data - remove the 1 star review:
”
”
“
What does the array.some() method do?
It tests whether at least one element in the array passes the test you define, and then it returrns a boolean.
What does anArray.some() do?
It tests whether at least one element in the array passes the test, and returns a boolean.
What does anArray.every() do?
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.
What is the difference between anArray.some() and anArray.every()?
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.
What happens if you call anArray.sort() on an array full of numbers.
You probably get confused, because by default .sort() treats things as strings, so it would do something like 1, 100, 2 and so forth.
How do you sort numbers qua numbers with the .sort() method?
“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:
”
How does .sort() interpret what comes back from a callback function within it?
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.
“Refactor this noise:
”
”
“
“Take this and break it into a function:
”
”
“
What is the way most loops work?
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.
What is the most basic array method?
The .forEach method.
How is .forEach different from the other array methods?
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.
“Given this function, and an array called ““faces”” - map over each and add arms to each face.
”
const toys = faces.map(addArms);
“Take this array, map over each name and add the last name of ‘Schuneman’ to each name.
”
” ”
What is forEach mainly used for, that is different from other array methods?
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.
What is a Pure Function?
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
If I call .map on an array with a length of 8, what can I be guaranteed about the result, regardless of what transformations are called within .map?
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.
How do you return fewer or more items than you pass in with array.map?
No can do.
What’s one handy way to achieve multiple transformations on an array?
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.
What does the string method .repeat() do?
It repeats the string however many times you pass it as the argument.
What does Array(3) do?
It would create an array with 3 indices, all of them empty.
What does anArray.fill do?
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.)
Why is .map used so often in dealing with API returns?
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.
What should you never do from a .map?
Don’t go off and update the DOM - that’s what a .forEach is for.
What does ‘new Date’ return if you don’t pass it anything?
The current date - if you pass it a string of a date, it will convert it into a Date object.
If you need to compare two dates and figure out how much time is between them, and for some reason you don’t want to use date-fns or moment - What would you need to do?
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.
What is a shortcut to get the current TimeStamp?
You can call Date.now(), rather than creating a new Date object and calling getTime() on it.
What’s a good site to convert timestamps to human dates and vice verse?
“Epoch.now.sh”
“Convert this function into a function generator (so it can handle more than one hard-coded id)
”
” ”
Given an array of people objects named cleanPeople, each with an age attribute that is a number - filter to only include those over40.
” ”
“Ok, so you have a findById higher order function. Good job. Can you make it more flexible where you could search by whatever prop you want?
”
” ”
Explain the basic difference between Map, Filter, and Reduce
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.
”
What’s wrong with totaling everything up this way?
”
You’re having to reach outside of the function to do it, which is a side effect.
“Explain this image:
”
Map transforms each item in the array, filter edits out the parts that don’t work, while reduce puts everything together into something new.
What two arguments does reduce pass to the callback function defined within it?
An accumulator, and a currentValue - the accumulator is the running tally, while currentValue is each iteration’s individual value.
What is the second argument passed into a .reduce() function?
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.
What is the accumulator in a .reduce() loop?
“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.”
What is a gotcha when using reduce to total up attributes on an object?
“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:
”
“Take the following and code how to find the number of occurences of each type of clothing:
”
” ”
“given the following, add up the inventory price in one line.
”
” ”
How would you take all the text on a webpage and figure out which letter/number is used most often?
” ”
What three things does a for loop take?
An initial expression, an exit condition, and an increment expression.
When is the plain for loop useful?
“Running a code block N number of times.
”
What was the former trouble with the for loop and the var keyword to declare variables?
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.
What is the now much easier way to do a for loop?
We use a forEach, map, or reduce to execute similar functions.
What is one major use case where we might still use the old for loop?
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.
What’s a cool little side thing about for of as opposed to forEach?
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.
What is a major advantage of the for of loop over forEach?
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.
What’s a downside of the for of loop compared to forEach?
It doesn’t give us the index of our item, it also doesn’t allow us to filter or anything like that.
How is for in better than Object.entries?
It’s not..but it’s there - you might see it somewhere. It just also loops over keys.
What’s one advantage of using for in?
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.
How does the while loop work?
It takes a condition and runs infinitely until that exit condition is met.
What’s the difference between a while loop and a do while?
The do while loop will execute the first go round prior to checking the condition, whereas while will check prior to executing.
