JavaScript Flashcards
What data type is returned by an arithmetic operation?
number
What is string concatenation?
Strings are combined using the addition operator
What purpose(s) does the + plus operator serve in JavaScript?
It either adds numbers together or concatenates strings
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
Takes the variable and either adds a number or concatenates a string to itself
What are objects used for?
They are used to store a group of variables
What are object properties?
The individual variables stored in an object
Describe object literal notation.
Declare a variable, use opening curly brace, then list each property (name: value,) then close with a curly brace
How do you remove a property from an object?
Use the delete keyword (delete object.propertyname)
What are the two ways to get or update the value of a property?
dot notation (object.newproperty) or bracket notation (object[‘newproperty’]) - dot notation is preferred
How are arrays different from “plain” objects?
- Arrays have order.
- Arrays have methods to remove items and the array will adapt/update for any changes made
- They are simply listed, they don’t have an additional value or label assigned to them and they operate differently
What number represents the first index of an array?
0
What is the length property of an array?
Tells you how many items there are in an array
How do you calculate the last index of an array?
Length - 1
Describe the parts of a function definition.
Function keyword, function name (optional), parameters separated by commas and surrounded by parentheses, code block, return statement (optional)
Describe the parts of a function call
Function name, arguments
When comparing them side-by-side, what are the differences between a function call and a function definition?
The function definition has parameters and a code block which set everything up, whereas the call simply plugs arguments into the parameters
What is the difference between a parameter and an argument?
Parameter is a placeholder, whereas an argument is what’s plugged into that placeholder
Why are function parameters useful?
- Allows for more concise code, since they only have to be written once
- Allows for different results for each function
What two effects does a return statement have on the behavior of a function?
- Ends the function
- Returns the value of the function
Why do we log things to the console?
To check that everything is working properly and to keep track of output
What is a method?
A method is a function that is a property of an object
How is a method different from any other function?
- Attached to an object, whereas functions a free-floating
- Can access data within objects
How do you remove the last element from an array?
Pop method
How do you round a number down to the nearest integer?
Math.floor method
How do you generate a random number?
Math.random method
How do you delete an element from an array?
Splice method
How do you append an element to an array?
Push method
How do you break a string up into an array?
Use the split method
Do string methods change the original string? How would you check if you weren’t sure?
Yes. You would log the string to the console or go to MDN
Is the return value of a function or method useful in every situation?
no
Give 6 examples of comparison operators.
==, ===, !=, >,
What is the purpose of an if statement?
Allows functions to execute different types of code depending on if a condition is met; makes a decision
Is else required in order to use an if statement?
No, but not including it could result in undefined variables
Describe the syntax (structure) of an if statement.
If keyword, condition, code block
What are the three logical operators?
&& (and), || (or), ! (not)
How do you compare two different expressions in the same condition?
Use the ‘and’ or the ‘or’ logical operators
What data type do comparison expressions evaluate to?
numbers
What is the purpose of a loop?
Allows code to be run multiple times automatically
What is the purpose of a condition expression in a loop?
Determines how many times the code is executed and when it stops
What does “iteration” mean in the context of loops?
Each time the code is run and the loop is repeated
When does the condition expression of a while loop get evaluated?
Before each iteration (is checked to see if code meets the condition)
When does the initialization expression of a for loop get evaluated?
The first time the loop is run
When does the condition expression of a for loop get evaluated?
Every time the loop is run, before the iteration
When does the final expression of a for loop get evaluated?
Every time the loop is run and still meets the condition expression
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?
Increases value by one and assigns it to the same variable
How do you iterate through the keys of an object?
Use a for in loop
Which “document” is being referred to in the phrase Document Object Model?
The HTML document
What is the word “object” referring to in the phrase Document Object Model?
The javascript object datatype
What is a DOM Tree?
A representation of all the objects within an HTML document and how they are related
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.
getElementsByClassName, querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
To make it easier to access and to prevent the computer from having to search thru entire html doc every time
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?
It needs to be run at the end when every HTML object has been established
What does document.querySelector() take as its argument and what does it return?
Argument: css selector, returns: the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
Argument: CSS selector, returns: a node list of every element that matches that selector
What is the purpose of events and event handling?
Allow for interactivity and for code to be triggered when an event happens
What do [] square brackets mean in function and method syntax documentation?
Used to implement optional object
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 passed into another function as an argument, which is then invoked inside the outer function to complete an action
What object is passed into an event listener callback when the event fires?
Huge object which contains all of the info of an event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The section of html code that the event is targeting. You could log the event target to the console or select it with the query selector. Go to MDN.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The second snippet runs the function first, whereas the first snippet runs it after the event
What is the className property of element objects?
holds the name of an element’s class attribute
How do you update the CSS class attribute of an element using JavaScript?
You use the className method
What is the textContent property of element objects?
Holds the text content of an element
How do you update the text within an element using JavaScript?
Use the text content method
Is the event parameter of an event listener callback always useful?
No because you don’t always need info about the event (i.e. as seen in the exercise)
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
Vastly more complicated
Why is storing information about a program in variables better than only storing it in the DOM?
Easier to access for both the programmer and the computer
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 is 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 ?
submit
What does the event.preventDefault() method do?
Prevents an event’s default action from happening
What does submitting a form without event.preventDefault() do?
Refreshes the page and adds the input data onto the URL
What property of a form element object contains all of the form’s controls.
form
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?
You won’t know which part of the code doesn’t work, causing you to take much more time to find out where things are going wrong
What is an advantage of having your console open when writing a JavaScript program?
Can easily see when an error occurs
Does the document.createElement() method insert a new element into the page?
no
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?
attibute type and attribute value
What steps do you need to take in order to insert a new element into the page?
CreateElement method and assign it to a var, find where you want to append it, and appendchild
What is the textContent property of an element object for?
Gets or sets the text content for that element
Name two ways to set the class attribute of a DOM element.
Set attribute, and classname
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
- Don’t have to write as much html
- You can make a single function that creates a complex chunk of code to be used more than once
- Can customize html content thru javascript
What is the event.target?
The target of the event or the element being interacted with
Why is it possible to listen for events on one element that actually happen its descendent elements?
The default document flow is event bubbling which starts at the most specific elements
What DOM element property tells you what type of element it is?
Tag name property
What does the element.closest() method take as its argument and what does it return?
Takes a selector as an argument and returns the closest parent element that matches that selector
How can you remove an element from the DOM?
Use the remove method
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?
Just assign the event listener to a parent element using the callback function and have the call back function target button elements
o (event delegation)
What is the event.target?
The target of the event or the element being interacted with
What does the element.matches() method take as an argument and what does it return?
A string selector, returns Boolean value
How can you retrieve the value of an element’s attribute?
getAttribute() method
At what steps of the solution would it be helpful to log things to the console?
Logging either node list at the end of the click function to make sure the element classes were changed
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 would have to put an event listener on every tab
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?
You would have to write three individual if statements checking to see if the event target matches the nodelist elements
What is JSON?
a text-based data format following JavaScript object syntax that exists as a string
What are serialization and deserialization?
- Serialization: the process of converting an object into a stream of bytes so that it can be transferred or stored
- Deserialization: converting that stream of bytes into object
Why are serialization and deserialization useful?
Allow data to be stored or transfered
How do you serialize a data structure into a JSON string using JavaScript?
Json.stringify() (stringify method of the json property)
How do you deserialize a JSON string into a data structure using JavaScript?
Use json.parse method
How to you store data in localStorage?
Localstorage.setitem
How to you retrieve data from localStorage?
Localstorage.getitem
What data type can localStorage save in the browser?
only strings
When does the ‘beforeunload’ event fire on the window object?
When the window, document, and its resources are about to be unloaded
What is a method?
A function which is a property of an object
How can you tell the difference between a method definition and a method call?
A method call looks like a property and is written in dot notation, whereas defining a method takes place within the object itself and looks similar to a function definition
Describe method definition syntax (structure).
The object variable is defined, then within that object the method’s property name is defined with the value of a function definition
Describe method call syntax (structure).
The object name followed by a dot and the name of the method with parentheses
How is a method different from any other function?
It’s specific to an object, whereas functions are defined and called outside of 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?
o Abstraction
o Encapsulation
o Inheritance
o Polymorphism
• What is this in JavaScript?
An implicit parameter of javascript functions that’s determined at the call of a function and that is recognized as either the object involved when the function is called or the global window object
What does it mean to say that this is an “implicit parameter”?
Its available in a function’s code block even though it was never declared as a variable or included as a property (automatically included)
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?
You can’t
How can you tell what the value of this is for a particular function or method call?
It updates to whatever the object is that the method is being called from and if that isn’t there, this defaults to the window value
What kind of inheritance does the JavaScript programming language use?
Prototypal inheritance
What is a prototype in JavaScript?
An object that contains a collection of properties and methods which other objects can access to perform certain tasks
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?
They exist within the inherited prototype object
If an object does not have its own property or method by a given key, where does JavaScript look for it?
The object’s prototype object
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type
What property of JavaScript functions can store shared behavior for instances created with new?
The prototype property
What does the instanceof operator do?
The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object
What is a “callback” function?
a function passed into another function as an argument
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 function
How can you set up a function to be called repeatedly without using a loop?
Use the setInterval function
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0, meaning the task is executed immediately
What do setTimeout() and setInterval() return?
They both return a positive integer value which identifies the timer created by the call
Which HTTP method does a browser issue to a web server when you visit a URL?
get
What three things are on the start-line of an HTTP request message?
Method, request target, and version
What three things are on the start-line of an HTTP response message?
Protocol version, status code, and status text
What are HTTP headers?
A string followed by a colon and a value, whose structure depends on the header all of this is on a single line
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
Is a body required for a valid HTTP request or response message?
No
What is AJAX?
A technique for loading data into part of a page without having to refresh the page
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 event
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They both use the same prototype object
What is a code block? What are some examples of a code block?
A section of code contained within a set of curly braces.
Code blocks are used in conditionals, loops, or functions.
What does block scope mean?
Block scope refers to declarations within a code block.
If you define something within the scope of a code block, it isn’t recognized globally
What is the scope of a variable declared with const or let?
Let: block-scoped
Const: block-scoped
What is the difference between let and const?
Const values cannot be reassigned, whereas let values can
Why is it possible to .push() a new value into a const variable that points to an Array?
Because you are creating a new array, not changing what the const is assigned to
How should you decide on which type of declaration to use?
Use let if you want a more dynamic variable and use const if you want that variable to remain the same
What is the syntax for writing a template literal?
Use the back tick ( ` ) instead of quotes
Using string interpolation instead of concatenation
What is “string interpolation”?
Implementing variables and expressions into a template literal using the $ and {}
What is destructuring, conceptually?
Taking the individual object properties or array items and assigning them to a variable
What is the syntax for Object destructuring?
Type of declaration (let, const), followed by curly braces, followed by property name, colon, new variable name (or just the property if you want the variable to share the same name), followed by an equal sign and the name of the variable the object is assigned to
const { property } = object
What is the syntax for Array destructuring?
Variable declaration keyword, followed by square brackets including names of new variables at the indexes of the original array separated by commas, followed by an equal sign and the name of the original array
const [item1, item2] = array
How can you tell the difference between destructuring and creating Object/Array literals?
For objects, the Name of the object is at the end, and the Key/value pairs are actually key/variable pairs, meaning the right side of each property won’t be a string or number.
For arrays, similar syntax, except each item is the name of the new variable.
What is the syntax for defining an arrow function?
pair of parentheses either blank or with parameters followed by equal sign and greater than sign followed by code block
When an arrow function’s body is left without curly braces, what changes in its functionality?
You can’t run multiple lines of code
You don’t need a return statement
How is the value of this determined within an arrow function?
Arrow functions determine this at definition time as opposed to call time with normal functions.
Use arrow functions as inline callbacks
What is the process object in a Node.js program?
a global object that provides information about and control over, the current Node.js process
How do you access the process object in a Node.js program?
It is global, so you can just type it in to access it
What is the data type of process.argv in Node.js?
Array of strings
What is a JavaScript module?
A single JavaScript file
What values are passed into a Node.js module’s local scope?
Exports, require, module, __filename, __dirname
Give two examples of truly global variables in a Node.js program.
Process object, setTimeout() function
What is the purpose of module.exports in a Node.js module?
Allows code to be stored in the module object, so it can be transferred to another module
How do you import functionality into a Node.js module from another Node.js module?
Use the require() function
What is the JavaScript Event Loop?
A process which allows for asynchronous javascript coding.
Involves interactions between the js stack, web apis, and the task queue
What module does Node.js include for manipulating the file system?
fs
What method is available in the Node.js fs module for writing data to a file?
The writefile method
Are file operations using the fs module synchronous or asynchronous?
Asynchronous (and synchronous if sync version of method is being used)
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?
The start line, which contains an http method, the request target, and the http version
What is on the first line of an HTTP response message?
The status line, which contains the protocol version, a status code, and a status text
What are HTTP headers?
A case sensitive string followed by a colon and a value all of which is on one line.
Provides different information depending on if it is a response header or a request header.
Is a body required for a valid HTTP message?
No
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
Application / json
What is the significance of an HTTP request’s method?
Determines what type of request is sent to the server, which communicates the intended action being performed
What does the express.json() middleware do and when would you need it?
- It parses json strings and creates a body object containing the parsed data and attaches it to the request object
- You need it in order to post new data to a server, by passing it through the app object using the use method
What are the three states a Promise can be in?
- pending: initial state, neither fulfilled nor rejected
- fulfilled: meaning that the operation was completed successfully
- rejected: meaning that the operation failed
How do you handle the fulfillment of a Promise?
The then method
How do you handle the rejection of a Promise?
The catch method
What is Array.prototype.filter useful for?
- Quickly creating new arrays that contain filtered items
- Instead of creating a loop, you can just write out a simple callback
What is Array.prototype.map useful for?
- Quickly manipulating an entire array with a simple function
- For example, you can create a React component for each item in an array using the map method
What is Array.prototype.reduce useful for?
- It reduces the items in an array into a single value through a callback function using an accumulator variable
- With each iteration, the accumulator value can be modified until there are no more items in the array and the accumulator value is returned
What is the typeof an ES6 class?
Describe ES6 class syntax.
What is “refactoring”?
Re-writing old code in a more concise or updated manner.
How are ES Modules different from CommonJS modules?
- More compact syntax
- Structure can be statically analyzed
- Better support for cyclic dependencies
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?
What allows JavaScript functions to “remember” values from their surroundings?
