JavaScript Flashcards
What is the purpose of a loop?
repeat code until a condition criteria is met
What is the purpose of a condition expression in a loop?
determine an end state of the loop
What does iteration mean in the context of a loop?
pass through the loop code
When does the condition expression of a while loop get evaluated?
before each iteration
When does the initialization expression of a for loop get evaluated
beginning, only run once
When does the condition expression of a for loop get evaluated?
before every iteration
When does the final expression of a for loop get evaluated?
after the loop code block
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?
adds 1 to the variable
How do you iterate through the keys of an object?
for in loop
Why do we log things to the console?
To check for bugs, double check our work.
What is a “model”?
A copy or representation of the original
Give two examples of document methods that retrieve a single element from the DOM.
getElementById()
querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
So the browser does not need to search for it every time it needs it
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?
The browser needs to load all the HTML before JS can be run on it.
What does document.querySelector() take as its argument and what does it return?
an element, id, or class returns the first element it finds with matching element, id, or class
What does document.querySelectorAll() take as its argument and what does it return?
takes element, id, or class
returns all elements with that tag, id, or class
Which document is being referred to in the phrase DOM
HTML
What is the word object referring to in DOM
refers to JS objects
What is a DOM tree
model of the html document represented as a JS object (DOM generally), tree is series of objects elaborating on a chunk of the html document.
What is the purpose of events and event handling?
add dynamic content, user interactivity, respond to an occurrence
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?
function definition passed as a value so it may be invoked later.
What object is passed into an event listener callback when the event fires?
the event object with a target object. All possible data pertinent to the event.
What is the event.target? If you werent sure, how would you check? Where could you get more information about this?
The place where the event occurred. First element most immediate to where the event occurred.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
you called one function, the other will be called later by the browser.
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event fired as a user changes the value of a form control?
input
What event is fired when a user clicks the submit button within a form?
submit
What does the event.preventDefault() method do?
prevents an elements default action
What property of a form element object contains all of the form’s controls
elements property
What property of form a control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
Don’t know where your code is broken if it is
What is an advantage of having your console open when writing a JavaScript program?
You immediately know where your error is
What is the event.target
The element the event originated from
Why is it possible to listen for event on one element that actually happen its descendent elements?
Bubbling (child to parents)
What DOM element property tells you what type of element it is
tagName
What does the element.closest() method take as its argument and what does it return?
css selector and return something the matches the selector (starts nested, queries out)
How can you remove an element from the DOM
Call remove on the element itself
At what steps of the solution would it be helpful to log things to the console?
Every step
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JS code be written instead.
Add event listener to every tab
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JS code be written instead?
lots of conditionals/conditions
What is JSON?
data exchange format
What are serialization and deserialization?
object to string, string to object
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse
How do you store data in localStorage?
setItem(‘key’, value)
How do you retrieve data from localStorage?
getItem(‘key’)
What data type can localStorage save in the browser?
string (JSON)
When does the beforeunload event fire on the window object?
before the window, current browser path closes (tab closes)
What is a method
function that is a property of an object
How can you tell the difference between a method and a method call?
method call has parenthesis
Describe method syntax
same as function
method call syntax
same as function
What are the four principles of OOP
abstraction, inhertance, polymorphism, encapsulation
What is astraction?
simplifying something complicated (lightswitch)
What does API stand for
application programming interface
purpose of API?
tools dev designs to allow others to use the tool they designed in a simpler fashion.
What is this in JavaScript?
object in which the code is running
What does it mean to say that this is an “implicit parameter”?
available even though it isnt present in the parameter list
Whenis 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?
you can’t
How can you tell what the value of this is for a particular function or method call?
object to the left of the dot
What kind of inheritance does the JavaScript programming language use?
prototypal inheritance
What is a prototype in JavaScript?
to share methods
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
prototypal inheritance
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
proto
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
What does the instanceof operator do?
returns true or false saying whether right is an instance of object on the left
What is a callback function?
function passed into another function as an argument (passed as value to be invoked later) (no parenthesis)
Besides event listener callback to an element or the document, whats one way to delay the execution of a JS 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 delay parameter from settimeout or interval?
0
What do setTimeout and setInterval return?
interval ID (integer)
What is AJAX?
async js and xml
What does the AJAX acronym stand for?
async js and xml
Which object is built into the browser for making HTTP requests in JS?
XMLHttpRequest
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
addEventListener
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
both branching off an event prototype
What is Node.js
a-sync, event driven runtime, JS environment to run JS outside of the browser
What can Node.js be used for?
back end
What is a REPL
an environment to code Node.js in terminal
When was Node.js created?
2009
What back end languages have you heard of?
Python, Ruby, Java, Rust, Go
What is the process object in a Node.js program?
It is the object that provides all the information about and control over the current Node.js process
How do you access the process object in a Node.js program?
process
What is the data type of process.argv in Node.js?
array
Whats a JS module?
a single JS file
What values passed into a node module local scope?
dirname, filename, module, exports, require()
truly global variables in a Node.js program?
console, setTimeout
What is the purpose of module.exports in a Node.js module?
Allows you to export bits of code that may be used/accessed by other files
How do you import functionality into a Node.js module from another Node.js module?
use require()
What is the JavaScript Event Loop?
Checks callback queue and call stack and moves from queue to stack if call stack is empty
What is different between “blocking” and “non-blocking” with respect to how code is executed?
Blocking is synchronous and non-blocking is async, blocking is code holding up the call stack
What is a client?
Makes a request to a server
What is a server?
Program or device that sends a response to a client request.
What is a host?
Hardware a server runs on
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
What is on the first line of an HTTP request message?
Method, Target, Version
What are HTTP headers
meta data for the request/responses
what is on the first line of an HTTP response
version, status code, status text
Is a body required for a valid HTTP message
No
What is NPM?
website, CLI, and registry
What is a package?
Code that can be shared/downloaded
How can you create a package.json with npm?
npm init –yes
What is a dependency and how to you add one to a package?
npm install (package)
What happens when you add a dependency to a package with npm?
It updates the code if changes are made
Adds node-modules dir
updates package.json
downloads package from npm registry
How do you add express to your package dependencies?
npm install express
What Express application method starts the server and binds it to a network PORT?
listen()
How do you mount a middleware with an Express application?
app.use, then pass middleware as an argument
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req and res objects
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json;
What is “syntactic sugar”?
In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language “sweeter” for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.
What is the typeof an ES6 class?
object
Describe ES6 class syntax.
class name {
constructor(constructorNames) {
this.constructorName = constructorNames;
}
method() {
}
}What is “refactoring”?
In computer programming and software design, code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior. Refactoring is intended to improve the design, structure, and/or implementation of the software (its non-functional attributes), while preserving its functionality. Potential advantages of refactoring may include improved code readability and reduced complexity; these can improve the source code’s maintainability and create a simpler, cleaner, or more expressive internal architecture or object model to improve extensibility. Another potential goal for refactoring is improved performance; software engineers face an ongoing challenge to write programs that perform faster or use less memory.
What is Webpack?
Bundles js modules into a single file
How do you add a devDependency to a package?
npm install –save-dev
What is an NPM script?
command line shortcuts you run with npm run …
How do you execute Webpack with npm run?
npm run build (or any name)
What kind of modules can Webpack support?
ecmascript file, AMD, commonJS
What must the return value of myFunction be if the following expression is possible?
myFunction()();
a function
What does this code do? const wrap = value => () => value;
returns value?
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
when its defined
What allows JavaScript functions to “remember” values from their surroundings?
the lexical environment created at the time the function was defined (the closure)
