JavaScript Flashcards
1
Q
What data type is returned by an arithmetic operation?
A
number
2
Q
What is string concatenation?
A
Strings are combined using the addition operator
3
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
It either adds numbers together or concatenates strings
4
Q
What data type is returned by comparing two values (, ===, etc)?
A
boolean
5
Q
What does the += “plus-equals” operator do?
A
Takes the variable and either adds a number or concatenates a string to itself
6
Q
What are objects used for?
A
They are used to store a group of variables
7
Q
What are object properties?
A
The individual variables stored in an object
8
Q
Describe object literal notation.
A
Declare a variable, use opening curly brace, then list each property (name: value,) then close with a curly brace
9
Q
How do you remove a property from an object?
A
Use the delete keyword (delete object.propertyname)
10
Q
What are the two ways to get or update the value of a property?
A
dot notation (object.newproperty) or bracket notation (object[‘newproperty’]) - dot notation is preferred
11
Q
How are arrays different from “plain” objects?
A
- 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
12
Q
What number represents the first index of an array?
A
0
13
Q
What is the length property of an array?
A
Tells you how many items there are in an array
14
Q
How do you calculate the last index of an array?
A
Length - 1
15
Q
Describe the parts of a function definition.
A
Function keyword, function name (optional), parameters separated by commas and surrounded by parentheses, code block, return statement (optional)
16
Q
Describe the parts of a function call
A
Function name, arguments
17
Q
When comparing them side-by-side, what are the differences between a function call and a function definition?
A
The function definition has parameters and a code block which set everything up, whereas the call simply plugs arguments into the parameters
18
Q
What is the difference between a parameter and an argument?
A
Parameter is a placeholder, whereas an argument is what’s plugged into that placeholder
19
Q
Why are function parameters useful?
A
- Allows for more concise code, since they only have to be written once
- Allows for different results for each function
20
Q
What two effects does a return statement have on the behavior of a function?
A
- Ends the function
- Returns the value of the function
21
Q
Why do we log things to the console?
A
To check that everything is working properly and to keep track of output
22
Q
What is a method?
A
A method is a function that is a property of an object
23
Q
How is a method different from any other function?
A
- Attached to an object, whereas functions a free-floating
- Can access data within objects
24
Q
How do you remove the last element from an array?
A
Pop method
25
How do you round a number down to the nearest integer?
Math.floor method
26
How do you generate a random number?
Math.random method
27
How do you delete an element from an array?
Splice method
28
How do you append an element to an array?
Push method
29
How do you break a string up into an array?
Use the split method
30
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
31
Is the return value of a function or method useful in every situation?
no
32
Give 6 examples of comparison operators.
==, ===, !=, >,
33
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
34
Is else required in order to use an if statement?
No, but not including it could result in undefined variables
35
Describe the syntax (structure) of an if statement.
If keyword, condition, code block
36
What are the three logical operators?
&& (and), || (or), ! (not)
37
How do you compare two different expressions in the same condition?
Use the ‘and’ or the ‘or’ logical operators
38
What data type do comparison expressions evaluate to?
numbers
39
What is the purpose of a loop?
Allows code to be run multiple times automatically
40
What is the purpose of a condition expression in a loop?
Determines how many times the code is executed and when it stops
41
What does "iteration" mean in the context of loops?
Each time the code is run and the loop is repeated
42
When does the condition expression of a while loop get evaluated?
Before each iteration (is checked to see if code meets the condition)
43
When does the initialization expression of a for loop get evaluated?
The first time the loop is run
44
When does the condition expression of a for loop get evaluated?
Every time the loop is run, before the iteration
45
When does the final expression of a for loop get evaluated?
Every time the loop is run and still meets the condition expression
46
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
47
What does the ++ increment operator do?
Increases value by one and assigns it to the same variable
48
How do you iterate through the keys of an object?
Use a for in loop
49
Which "document" is being referred to in the phrase Document Object Model?
The HTML document
50
What is the word "object" referring to in the phrase Document Object Model?
The javascript object datatype
51
What is a DOM Tree?
A representation of all the objects within an HTML document and how they are related
52
Give two examples of document methods that retrieve a single element from the DOM.
getElementByID(), querySelector()
53
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName, querySelectorAll()
54
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
55
What console method allows you to inspect the properties of a DOM element object?
Console.dir
56
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
57
What does document.querySelector() take as its argument and what does it return?
Argument: css selector, returns: the first matching element
58
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
59
What is the purpose of events and event handling?
Allow for interactivity and for code to be triggered when an event happens
60
What do [] square brackets mean in function and method syntax documentation?
Used to implement optional object
61
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
62
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
63
What object is passed into an event listener callback when the event fires?
Huge object which contains all of the info of an event
64
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.
65
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
66
What is the className property of element objects?
holds the name of an element’s class attribute
67
How do you update the CSS class attribute of an element using JavaScript?
You use the className method
68
What is the textContent property of element objects?
Holds the text content of an element
69
How do you update the text within an element using JavaScript?
Use the text content method
70
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)
71
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
72
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
73
What event is fired when a user places their cursor in a form control?
focus
74
What event is fired when a user's cursor leaves a form control?
blur
75
What event is fired as a user changes the value of a form control?
input
76
What event is fired when a user clicks the "submit" button within a ?
submit
77
What does the event.preventDefault() method do?
Prevents an event’s default action from happening
78
What does submitting a form without event.preventDefault() do?
Refreshes the page and adds the input data onto the URL
79
What property of a form element object contains all of the form's controls.
form
80
What property of form a control object gets and sets its value?
Value
81
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
82
What is an advantage of having your console open when writing a JavaScript program?
Can easily see when an error occurs
83
Does the document.createElement() method insert a new element into the page?
no
84
How do you add an element as a child to another element?
appendChild method
85
What do you pass as the arguments to the element.setAttribute() method?
attibute type and attribute value
86
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
87
What is the textContent property of an element object for?
Gets or sets the text content for that element
88
Name two ways to set the class attribute of a DOM element.
Set attribute, and classname
89
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
90
What is the event.target?
The target of the event or the element being interacted with
91
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
92
What DOM element property tells you what type of element it is?
Tag name property
93
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
94
How can you remove an element from the DOM?
Use the remove method
95
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)
96
What is the event.target?
The target of the event or the element being interacted with
97
What does the element.matches() method take as an argument and what does it return?
A string selector, returns Boolean value
98
How can you retrieve the value of an element's attribute?
getAttribute() method
99
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
100
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
101
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
102
What is JSON?
a text-based data format following JavaScript object syntax that exists as a string
103
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
104
Why are serialization and deserialization useful?
Allow data to be stored or transfered
105
How do you serialize a data structure into a JSON string using JavaScript?
Json.stringify() (stringify method of the json property)
106
How do you deserialize a JSON string into a data structure using JavaScript?
Use json.parse method
107
How to you store data in localStorage?
Localstorage.setitem
108
How to you retrieve data from localStorage?
Localstorage.getitem
109
What data type can localStorage save in the browser?
only strings
110
When does the 'beforeunload' event fire on the window object?
When the window, document, and its resources are about to be unloaded
111
What is a method?
A function which is a property of an object
112
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
113
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
114
Describe method call syntax (structure).
The object name followed by a dot and the name of the method with parentheses
115
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
116
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods)
117
What are the four "principles" of Object-Oriented Programming?
o Abstraction
o Encapsulation
o Inheritance
o Polymorphism
118
• 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
119
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)
120
When is the value of this determined in a function; call time or definition time?
Call time
121
How can you tell what the value of this will be for a particular function or method definition?
You can’t
122
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
123
What kind of inheritance does the JavaScript programming language use?
Prototypal inheritance
124
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
125
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
126
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
127
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type
128
What property of JavaScript functions can store shared behavior for instances created with new?
The prototype property
129
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
130
What is a "callback" function?
a function passed into another function as an argument
131
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
132
How can you set up a function to be called repeatedly without using a loop?
Use the setInterval function
133
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0, meaning the task is executed immediately
134
What do setTimeout() and setInterval() return?
They both return a positive integer value which identifies the timer created by the call
135
Which HTTP method does a browser issue to a web server when you visit a URL?
get
136
What three things are on the start-line of an HTTP request message?
Method, request target, and version
137
What three things are on the start-line of an HTTP response message?
Protocol version, status code, and status text
138
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
139
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
140
Is a body required for a valid HTTP request or response message?
No
141
What is AJAX?
A technique for loading data into part of a page without having to refresh the page
142
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
143
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
144
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
Load event
145
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
146
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.
147
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
148
What is the scope of a variable declared with const or let?
Let: block-scoped
Const: block-scoped
149
What is the difference between let and const?
Const values cannot be reassigned, whereas let values can
150
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
151
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
152
What is the syntax for writing a template literal?
Use the back tick ( ` ) instead of quotes
| Using string interpolation instead of concatenation
153
What is "string interpolation"?
Implementing variables and expressions into a template literal using the $ and {}
154
What is destructuring, conceptually?
Taking the individual object properties or array items and assigning them to a variable
155
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
156
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
157
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.
158
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
159
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
160
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
161
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
162
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
163
What is the data type of process.argv in Node.js?
Array of strings
164
What is a JavaScript module?
A single JavaScript file
165
What values are passed into a Node.js module's local scope?
Exports, require, module, __filename, __dirname
166
Give two examples of truly global variables in a Node.js program.
Process object, setTimeout() function
167
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
168
How do you import functionality into a Node.js module from another Node.js module?
Use the require() function
169
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
170
What module does Node.js include for manipulating the file system?
fs
171
What method is available in the Node.js fs module for writing data to a file?
The writefile method
172
Are file operations using the fs module synchronous or asynchronous?
Asynchronous (and synchronous if sync version of method is being used)
173
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
174
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
175
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
176
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.
177
Is a body required for a valid HTTP message?
No
178
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
Application / json
179
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
180
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
181
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
182
How do you handle the fulfillment of a Promise?
The then method
183
How do you handle the rejection of a Promise?
The catch method
184
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
185
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
186
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
187
What is the typeof an ES6 class?
188
Describe ES6 class syntax.
189
What is "refactoring"?
Re-writing old code in a more concise or updated manner.
190
How are ES Modules different from CommonJS modules?
- More compact syntax
- Structure can be statically analyzed
- Better support for cyclic dependencies
191
What must the return value of myFunction be if the following expression is possible?
myFunction()();
192
What does this code do?
const wrap = value => () => value;
193
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
194
What allows JavaScript functions to "remember" values from their surroundings?
