JavaScript Flashcards
What is the purpose of variables?
a place to store data for the future
How do you declare a variable?
var “variable name” = value
How do you initialize (assign a value to) a variable?
with an equal sign
What characters are allowed in variable names?
letters, numbers(not first character), $, _
What does it mean to say that variable names are “case sensitive”?
letter casing creates unique variables
What is the purpose of a string?
basically text content
What is the purpose of a number?
to count and do math
What is the purpose of a boolean?
to show true/false, on/off
What does the = operator mean in JavaScript?
it means to assign value
it’s an assignment operator
How do you update the value of a variable?
“variable name” = new value
What is the difference between null and undefined?
null is null, undefined means no assigned value
Why is it a good habit to include “labels” when you log values to the browser console?
for ease of use later on
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
number operator
What is string concatenation?
combining strings together
What purpose(s) does the + plus operator serve in JavaScript?
addition or concatination
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adds left operand to right operand then assigns result to left operand
What are objects used for?
grouping data to represent an actual thing
What are object properties?
variables inside of an object
Describe object literal notation.
{ property: property name,
property name};
How do you remove a property from an object?
delete “object.property”
What are the two ways to get or update the value of a property?
dot notation or bracket notation
What are arrays used for?
making lists of data
Describe array literal notation.
var ‘name’ = [value, value, value]
How are arrays different from “plain” objects?
arrays store in an ordered list with solely a data-type, no property name required
What number represents the first index of an array?
[0]
What is the length property of an array?
How ever many items are currently inside of it -1
How do you calculate the last index of an array?
items in an array -1
What is a function in JavaScript?
a set of statements that perform a repeatable task
Describe the parts of a function definition.
keyword, name, (parameters), {function block}, return keyword
Describe the parts of a function call.
function name(list of arguments)
When comparing them side-by-side, what are the differences between a function call and a function definition?
parameters/arguments
code block in def, not in call
call will always have ( )
function keyword in def not call
What is the difference between a parameter and an argument?
parameters are placeholders in a definition
arguments become the value of that placeholder
Why are function parameters useful?
they can help describe what kind of data will be used later as the argument
What two effects does a return statement have on the behavior of a function?
a return replaces a function call
Why do we log things to the console?
to confirm the result of an action
What is a method?
a function which is the property of an object
How is a method different from any other function?
JS functions are not objects so a method is a reference to a function
How do you remove the last element from an array?
array.pop( )
How do you round a number down to the nearest integer?
Math.floor( )
How do you generate a random number?
Math.random
How do you delete an element from an array?
array.splice(start, delete)
How do you append an element to an array?
array.push( )
How do you break a string up into an array?
string.split( )
Do string methods change the original string? How would you check if you weren’t sure?
they don’t, check by just doing it and console.logging the original string
Is the return value of a function or method useful in every situation?
no
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
> , >=,
What data type do comparison expressions evaluate to?
Booleans
What is the purpose of an if statement?
make a decision
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if (condition) { what happens}
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
with a && or || operator
What is the purpose of a condition expression in a loop?
when to stop the loop
What is the purpose of a loop?
run a block multiple times
What does “iteration” mean in the context of loops?
single run of the code-block
When does the condition expression of a while loop get evaluated?
before each code block runs
When does the initialization expression of a for loop get evaluated?
before the loop begins, only once
When does the condition expression of a for loop get evaluated?
after the initialization, before each iteration
When does the final expression of a for loop get evaluated?
after each iteration
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
increments the value of a var by one and substitutes that value to the var
How do you iterate through the keys of an object?
for in loop
Why do we log things to the console?
to make sure funcitons/methods call correctly and verifying input to outputs
What is a “model”?
a representation of something
Which “document” is being referred to in the phrase Document Object Model?
the html document thats been linked to the JS document
What is the word “object” referring to in the phrase Document Object Model?
a datatype used to represent and recreate the document it’s referencing to make changes on
What is a DOM Tree?
a representative chunk of a page built as JS objects
Give two examples of document methods that retrieve a single element from the DOM.
querySelector, getElementbyId
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll, getElementByClass
Why might you want to assign the return value of a DOM query to a variable?
to access the data late without searching for it again
What console method allows you to inspect the properties of a DOM element object?
console.dir
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
so the HTML will load first
What does document.querySelector() take as its argument and what does it return?
takes a string as argument with a CSS selector and returns the first instance of the contents of that string
What does document.querySelectorAll() take as its argument and what does it return?
takes a string with a CSS selector as argument, returns node-list of all instances of that content.
What is the purpose of events and event handling?
so that when the user or browser does something, there is a response from the code.
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
a function being passed as an argument in another function
What object is passed into an event listener callback when the event fires?
an object with all the data about the event that just occurred
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
the HTML element where the event originated from. If you wanted to learn more you could console log the event.target
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the first one is being used as a callback, the second one is an immediate function call
What is the className property of element objects?
allows to get and set the properties of an object
How do you update the CSS class attribute of an element using JavaScript?
element.classname = ‘newclassname’
What is the textContent property of element objects?
allows to get and set the classname value
How do you update the text within an element using JavaScript?
element.textContent = ‘new content’
Is the event parameter of an event listener callback always useful?
no?
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
no
Why is storing information about a program in variables better than only storing it in the DOM?
cut out the middle man. Keeping data in one place makes it easy to track
What does the event.preventDefault() method do?
prevent the action of whatever event you’re using
Does the document.createElement() method insert a new element into the page?
no, it creates a new element node that WILL be inserted
How do you add an element as a child to another element?
appendChild method
What do you pass as the arguments to the element.setAttribute() method?
(attribute name, value)
What steps do you need to take in order to insert a new element into the page?
assign createElement to a new variable, append that variable to another existing element
What is the textContent property of an element object for?
adding text nodes to elements
Name two ways to set the class attribute of a DOM element.
setAttribute method, element.className =
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
makes it reusable. saves a lot of time
What is the event.target?
the origin point of an event listener
Why is it possible to listen for events on one element that actually happen in its descendent elements?
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
takes a CSS selector and returns the nearest ancestor element with that selector
How can you remove an element from the DOM?
element.remove()
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
add event listener to the parent and identify it by its tagName
What is the event.target?
the origin element of an assigned event
What is the affect of setting an element to display: none?
hides the element from the viewable page
What does the element.matches() method take as an argument and what does it return?
How can you retrieve the value of an element’s attribute?
with a css selector in the form of a string
At what steps of the solution would it be helpful to log things to the console?
at every step
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
you’d have to write a condition for every possible view
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
What is a method?
a method is a function that is part of an object
How can you tell the difference between a method definition and a method call?
definition includes code block and full syntax, call just has arguments.
Describe method definition syntax (structure).
method name: function (parameters) {code block}
Describe method call syntax (structure).
objName.method()
How is a method different from any other function?
its stored in an object
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods).
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “abstraction”?
being able to work with (possibly) complex things in simple ways
What does API stand for?
application programming interface
What is the purpose of an API?
a set of tools to allow access to functionality easily
What is this in JavaScript?
refers to the object ‘this’ is being worked with
What does it mean to say that this is an “implicit parameter”?
it has value without having one assigned by a function
When is the value of this determined in a function; call time or definition time?
call time
How can you tell what the value of this will be for a particular function or method definition?
we can’t know
How can you tell what the value of this is for a particular function or method call?
whats on the left of the dot in the method/function call
What kind of inheritance does the JavaScript programming language use?
prototypal inheritance
What is a prototype in JavaScript?
an object that contains properties and (predominantly) methods that can be used by other objects.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
through prototypal inheritance
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
in the prototype
What does the new operator do?
lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
What does the instanceof operator do?
tests to see if something if a prototype constructor of a given object
What is a “callback” function?
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
setTimeout()
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 milliseconds
What do setTimeout() and setInterval() return?
a numeric ID for the created timer that can be passed to clearInterval/clearTimeout
What is AJAX?
an asynchronous processing model that requests data without reloading the whole webpage
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
because of prototypal inheritance
What does block scope mean?
anything inside of the code block, not outside
What is the scope of a variable declared with const or let?
the block it’s in
What is the difference between let and const?
let can be reassigned, const can not
Why is it possible to .push() a new value into a const variable that points to an Array?
because the const is pointing to a mutable data location, you aren’t changing the pointer location
How should you decide on which type of declaration to use?
do you want to change it or not
What is the syntax for writing a template literal?
backticks, variables use ${}
text ${variable}
What is “string interpolation”?
the ability to substitute part of the string for the values of variables or expressions.
What is destructuring, conceptually?
taking pieces of an obj or array and turning it into multiple variables
What is the syntax for Object destructuring?
const {name, name} = source
What is the syntax for Array destructuring?
const [name, name , , name] = source
How can you tell the difference between destructuring and creating Object/Array literals?
what’s on the left of the assignment operator
What is the syntax for defining an arrow function?
variable = (perameters) => {code}
When an arrow function’s body is left without curly braces, what changes in its functionality?
it just returns the result of whatever code is there
How is the value of this determined within an arrow function?
in a normal function, this is defined at call time, in an arrow function it’s defined at the time of definition
What is the JavaScript Event Loop?
monitors the callstack and waits until the callstack is empty then pushes the top item from the task-que into the callstack
What is different between “blocking” and “non-blocking” with respect to how code is executed?
What are the three states a Promise can be in?
pending
fulfilled
rejected
How do you handle the fulfillment of a Promise?
.then
How do you handle the rejection of a Promise?
.catch
What is Array.prototype.filter useful for?
creating a new array while excluding some things
What is Array.prototype.map useful for?
transforming arrays into new arrays based on a callback function
What is Array.prototype.reduce useful for?
combining an array of values into a single output
What is “syntactic sugar”?
syntactic restructuring of code to make it easier to write
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class ClassName {}
What is “refactoring”?
restructuring existing code without changing it’s behavior
How are ES Modules different from CommonJS modules?
es6 use an import and export keywords vs module.export and require
browsers support es6 modules
What kind of modules can Webpack support?
CommonJs, ES6, and AMD
What must the return value of myFunction be if the following expression is possible?
myFunction()();
What does this code do? const wrap = value => () => value;
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
defined
What allows JavaScript functions to “remember” values from their surroundings?
closure
