JavaScript Flashcards
1
Q
What is the purpose of variables?
Javascript-primitives-and-variables
A
To store information/data.
2
Q
How do you declare a variable?
Javascript-primitives-and-variables
A
You write var, let, or const; the name of the variable; and an assignment operator.
3
Q
How do you initialize (assign a value to) a variable
Javascript-primitives-and-variables
A
You use an equal sign
4
Q
What characters are allowed at the start of variable names?
Javascript-primitives-and-variables
A
$, underscore, and letters.
5
Q
What does it mean to say that variable names are “case sensitive”?
(Javascript-primitives-and-variables)
A
A variable with a capital is different than a variable without one.
6
Q
What is the purpose of a string?
Javascript-primitives-and-variables
A
To store text content data.
7
Q
what is the purpose of a number?
Javascript-primitives-and-variables
A
For data that needs numbers.
8
Q
What is the purpose of a boolean?
Javascript-primitives-and-variables
A
To give us a choice between true or false.
9
Q
What does the = operator mean in JavaScript
Javascript-primitives-and-variables
A
It means assignment operator.
10
Q
How do you update the value of a variable?
Javascript-primitives-and-variables
A
You assign the variable a different value.
11
Q
What is the difference between null and underfined?
Javascript-primitives-and-variables
A
Null is for values that the coder can change later.
Undefined could be on an accident
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
(Javascript-primitives-and-variables)
A
To prevent confusion
13
Q
Give five examples of JavaScript primitives.
Javascript-primitives-and-variables
A
String, array, object, integer, boolean, null, undefined.
14
Q
What data type is returned by an arithmetic operation?
Javascript-operators-and-expressions
A
Numbers.
15
Q
What is string concatenation?
Javascript-operators-and-expressions
A
The joining of two or more strings together using the plus operator.
16
Q
What purpose(s) does the + plus operator serve in JavaScript (Javascript-primitives-and-variables)
A
It adds numbers and joins strings together.
17
Q
What data type is returned by comparing two values (, ===, etc)?
(Javascript-operators-and-expressions)
A
A boolean.
18
Q
What does the += operator do?
Javascript-operators-and-expressions
A
It adds the variable and anything else and assigns the result of the expression to that variable.
19
Q
What are objects used for?
Javascript-objects
A
Store related info for easy access later
20
Q
What are object properties?
Javascript-objects
A
They are attached to objects to define their characteristics.
21
Q
Describe object literal notation.
Javascript-objects
A
Curly-braces , {}
22
Q
How do you remove a property from an object?
Javascript-objects
A
Use the delete operator on the property of the object.
23
Q
What are the two ways to get or update the value of a property?
(Javascript-objects)
A
By using the dot method and giving it a different value or changing it in the object literal.
24
Q
What are arrays used for?
Javascript-arrays
A
Storing related information in a specific order.
25
Describe array literal notation.
| Javascript-arrays
Brackets, []
26
How are arrays different from "plain" objects?
| Javascript-arrays
They store information in a specific order.
27
What number represents the first index of an array?
| Javascript-arrays
0
28
What is the length property of the array?
| Javascript-arrays
The number of elements in the array or string.
29
How do you calculate the last index of an array?
| Javascript-arrays
You do array[array.length - 1]
30
What is a function in JavaScript?
| Javascript-functions
Self contained modules of code that accomplish a specific task.
31
Describe the parts of a function definition.
| Javascript-functions
Function, optional name, parameter, code block, optional return.
32
Describe the parts of a function call.
| Javascript-functions
Sometimes a function keyword, sometimes a name, opening/closing parenthesis with a parameter sometimes in them, sometimes a arrow function operator, sometimes a curly bracket, a code block and sometimes a return statement within that code block.
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
(Javascript-functions)
Function calls have opening/closing parenthesis and their value is that of their return value. Function definitions are only being defined and don't have a value until called.
34
What is the difference between a parameter and an argument?
| Javascript-functions
parameters are temporary. Arguments are the values you're actually using.
35
Why are function parameters useful?
| Javascript-functions
To prevent confusion and so you know exactly what type of argument should go in there
36
What two effects does a return statement have on the behavior of a function?
(Javascript-functions)
It returns the value and ends the function call immediately.
37
Why do we log things to the console?
| Javascript-method
To check our values and make sure they are correct.
38
What is a method
| Javascript-method
A function that is a property of an object.
39
How is a method different from any other function?
| Javascript-method
Method's are stored on an object
40
How do you remove the last element from an array?
| Javascript-method
.pop() method
41
How do you round a number down to the nearest integer?
| Javascript-method
Math.floor
42
How do you generate a random number?
| Javascript-method
Math.random
43
How do you delete an element from an array?
| Javascript-method
Use the .splice() method
44
How do you append an element to an array?
| Javascript-method
.push() method
45
How do you break a string up in to an array?
| Javascript-method
.split() method
46
Do string methods change the original string? How would you check if you weren't sure?
(Javascript-method)
They do not. console.log
47
Roughly how many string methods are there according to the MDN Web docs?
(Javascript-method)
A LOOOOOT
48
Is the return value of a function or method useful in every situation?
(Javascript-method)
No, it's not always used
49
Roughly how many array methods are there according to the MDN Web docs?
(Javascript-method)
A LOOOOOT
50
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
(Javascript-method)
MDN
51
Give 6 examples of comparison operators.
| Javascript-if
&&, ===, !==, ||, <=, >=, %
52
What data type do comparison expressions evaluate to?
| Javascript-if
Boolean.
53
What is the purpose of an if statement?
| Javascript-if
They allow code to only execute under certain conditions.
54
Is else required in order to use an if statement?
| Javascript-if
No
55
Describe the syntax (structure) of an if statement.
| Javascript-if
if statement, conditional statement, and conditional code block
56
What are the three logical operators?
| Javascript-if
&&, ||, and !
57
How do you compare two different expressions in a conditional statement?
(Javascript-if)
&&, ||, or !
58
What is the purpose of a loop?
| Javascript-loops
To repeat a process until conditions are met.
59
What is the purpose of a condition expression in a loop?
| Javascript-loops
To repeat the loop until certain conditions are met.
60
What does "iteration" mean in the context of loops?
| Javascript-loops
Every time the code gets executed.
61
When does the condition expression of a while loop get evaluated?
(Javascript-loops)
Before each iteration.
62
When does the initialization expression of a for loop get evaluated?
(Javascript-loops)
At the start of the loop.
63
When does the condition expression of a for loop get evaluated?
(Javascript-loops)
Before each iteration block.
64
When does the final expression of a for loop get evaluated?
| Javascript-loops
After the conditional block.
65
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
(Javascript-loops)
Break statement.
66
What does the ++ increment operator do?
| Javascript-loops
It increases the variable by 1
67
How do you iterate through the keys of an object?
| Javascript-loops
For, in loop
68
Why do we log things to the console?
| dom-querying
To check our values and make sure they're correct.
69
What is a "model"?
| dom-querying
The representation of something without being it.
70
Which "document" is being referred to in the phrase Document Object Model?
(dom-querying)
HTML doc
71
What is the word "object" referring to in the phrase Document Object Model?
(dom-querying)
Data
72
What is a DOM Tree?
| dom-querying
A JavaScript object model that holds elements and their attributes, text, and children.
73
Give two examples of document methods that retrieve a single element from the DOM.
(dom-querying)
querySelector(), getById(),
74
Give one example of a document method that retrieves multiple elements from the DOM at once.
(dom-querying)
querySelectorAll()
75
Why might you want to assign the return value of a DOM query to a variable?
(dom-querying)
To easily change it's value later.
76
What console method allows you to inspect the properties of a DOM element object?
(dom-querying)
console.dir()
77
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
(dom-querying)
HTML content needs to load before the script.
78
What does document.querySelector() take as its argument and what does it return?
(dom-querying)
It takes a string css selector as it's argument and returns the first selector it finds.
79
What does document.querySelectorAll() take as its argument and what does it return?
(dom-querying)
It takes a string css selector as it's argument and returns a nodelist.
80
Why do we log things to the console?
| dom-events
To check our values and make sure they're correct.
81
What is the purpose of events and event handling?
| dom-events
So you can create a reaction to something the user does.
82
Are parameters required to use a JavaScript method or function?
(dom-events)
No, some are optional.
83
What method of element objects lets you set up a function to be called when a specific type of event occurs?
(dom-events)
addEventListener
84
What is a callback function?
| dom-events
When a function is passed into another or in general as a variable.
85
What object is passed into an event listener callback when the event fires?
(dom-events)
An object that contains all the data from the event that happened.
86
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
(dom-events)
The element the event occurred on. console.log(). MDN
87
What is the difference between these two snippets of code?
element.addEventListener('click', handleClick)
element.addEventListener('click', handleClick())
(dom-events)
First one passed the function definition (correct).
| Second one the return value is replacing the function.
88
What is the className property of element objects?
| dom-manipulation
It's their class names. That of which you can focus on and change.
89
```
How do you update the CSS class attribute of an element using JavaScript?
(dom-manipulation)
```
By using the className and classList properties. You can use them to change or assign new properties.
90
What is the textContent property of element objects?
| dom-manipulation
It's an elements string content.
91
How do you update the text within an element using JavaScript?
(dom-manipulation
)
You use textContent property and assign it a value.
92
Is the event parameter of an event listener callback always useful?
(dom-manipulation)
No.
93
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
(dom-manipulation)
It would be more complicated/confusing.
94
Why is storing information about a program in variables better than only storing it in the DOM?
(dom-manipulation)
So it can be reused and keep the languages separate.
95
What event is fired when a user places their cursor in a form's content?
(javascript-forms)
Focus
96
What event is fired when a user's cursor leaves a form control?
(javascript-forms)
Blur
97
What event is fired as a user changes the value of a form control?
(javascript-forms)
Input
98
What event is fired when a user clicks the "submit" button within a form?
(javascript-forms)
Submit
99
What does the event.preventDefault() method do?
| javascript-forms
Prevents the browsers default action when an action occurs.
100
What does submitting a form with event.preventDefault() do?
| javascript-forms
It stops HTML from trying to send the data itself.
101
What property of a form element object contains all of the form's controls.
(javascript-forms)
elements property.
102
What property of a form
controls what objects get and set its value?
(javascript-forms)
Value
103
What is one risk of writing a lot of code without checking to see if it works so far?
(javascript-forms)
It's harder to find bugs.
104
What is an advantage of having your console open when writing a JavaScript program?
(javascript-forms)
It will instantly tell you when an error occurs
105
Does the document.createElement() method insert a new element into the page?
(dom-creation)
No.
106
How do you add an element as a child to another element?
| dom-creation
appendChild, append.
107
What do you pass as the arguments to the element.setAttribute() method?
(dom-creation)
An attribute and it's value, both as a string (DOM string).
108
What steps do you need to take in order to insert a new element into the page?
(dom-creation)
queryselector() the parent element, document.createElement(), & appendChild.
109
What is the textContent property of an element object for?
| dom-creation
It stores textContent of an HTML element.
110
```
Name two ways to set the class attribute of a DOM element.
(dom-creation)
```
.className, .classList, and .setAttribute.
111
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
(dom-creation)
Adds reusability, easier testing, and to give code a name.
112
What is the event.target?
| dom-event-delegation
The element the event happened on
113
Why is it possible to listen for events on one element that actually happen its descendent elements?
(dom-event-delegation)
Due to event bubbling.
114
What DOM element property tells you what type of element it is?
(dom-event-delegation)
element.tagName
115
What does the element.closest() method take as its argument and what does it return?
(dom-event-delegation)
A css-selector as a string & returns its closest ancestor.
116
How can you remove an element from the DOM?
| dom-event-delegation
.remove()
117
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?
(dom-event-delegation)
You'd put the listener on an ancestor element and use event.target/bubbling to select the new elements
118
What is the event.target?
| javascript-view-swapping
The element the event happens on.
119
What is the affect of setting an element to display: none?
| javascript-view-swapping
The element is invisible from viewport and removed from document flow.
120
What does the element.matches() method take as an argument and what does it return?
(javascript-view-swapping)
It takes elements and returns a Boolean.
121
How can you retrieve the value of an element's attribute?
| javascript-view-swapping
Using the .getAttribute() method.
122
At what steps of the solution would it be helpful to log things to the console?
(javascript-view-swapping)
Every step of the solution.
123
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?
(javascript-view-swapping)
You would have to addEventListener's to every element.
124
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?
(javascript-view-swapping
)
You would have a massive conditional block
125
What is JSON?
(javascript-and-json
)
String data interchangeable between computers.
126
What are serialization and deserialization?
| javascript-and-json
Serialization: Turn data into a set JSON order, so it can be sent out.
Deserialization: Take JSON and organize it for computers.
127
Why are serialization and deserialization useful?
| javascript-and-json
Allows you to pass data in a form that all computers can interpret.
128
How do you serialize a data structure into a JSON string using JavaScript?
(javascript-and-json
)
.stringify()
129
How do you deserialize a JSON string into a data structure using JavaScript?
(javascript-and-json)
.parsify()
130
How do you store data in localStorage?
| javascript-local-storage
set.Item() method
131
How to you retrieve data from localStorage?
| javascript-local-storage
get.Item() method
132
What data type can localStorage save in the browser?
| javascript-local-storage
String values.
133
When does the 'beforeunload' event fire on the window object?
(javascript-local-storage)
Immediately before any action that closes or refreshes the browser.
134
What is the difference between prototype and __proto__?
| javascript-contructors
prototype is on the constructor itself. __proto__ is an object on the new constructor object.
135
What does the new operator do?
| javascript-contructors
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.
136
What property of JavaScript functions can store shared behavior for instances created with new?
(javascript-contructors)
prototype property.
137
What does the instanceof operator do?
| javascript-contructors
Tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.
138
What is a callback function?
| javascript-timers
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
139
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?
(javascript-timers)
setTimeout() method.
140
How can you set up a function to be called repeatedly without using a loop?
(javascript-timers)
setInterval() method.
141
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
(javascript-timers)
0, or instant
142
What do setTimeout() and setInterval() return?
| javascript-timers
They return an id that can be used to stop them.
143
What is a client?
| http-messages
A program or device that initiates communication sessions with servers, which await incoming requests from clients.
144
What is a server?
| http-messages
A piece of computer hardware or software that provides extra functionality to clients.
145
Which HTTP method does a browser issue to a web server when you visit a URL?
(http-messages)
GET.
146
What three things are on the start-line of an HTTP request message?
(http-messages)
The HTTP method, request target, and the HTTP version.
147
What three things are on the start-line of an HTTP response message?
(http-messages)
HTTP version, status code, status text.
148
What are HTTP headers?
| http-messages
A case-insensitive string followed by a colon (':') and a value whose structure depends upon the type of the header. They let the client and the server pass additional information with an HTTP request or response.
149
Where would you go if you wanted to learn more about a specific HTTP Header?
(http-messages)
mdn.
150
Is a body required for a valid HTTP request or response message?
(http-messages)
Nope.
151
What is AJAX?
| javascript-ajax
It allows the developer to make updates to elements on the page using servers without having to reload the page.
152
What does the AJAX acronym stand for?
| javascript-ajax
Asynchronous JavaScript and XML.
153
Which object is built into the browser for making HTTP requests in JavaScript?
(javascript-ajax)
XMLHttpRequest().
154
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
(javascript-ajax)
The 'load' event.
155
What is a code block? What are some examples of a code block?
(es6-const-let)
Code that occurs between two curly braces. Loops, conditionals, etc.
156
What does block scope mean?
| es6-const-let
All the variables that are available inside that block.
157
What is the scope of a variable declared with const or let?
| es6-const-let
block scope.
158
What is the scope of a variable declared with var
| es6-const-let
function scope.
159
What is the difference between let and const?
| es6-const-let
let variables can be reassigned a value. Attempting to reassign const with throw an error.
160
Why is it possible to .push() a new value into a const variable that points to an Array?
(es6-const-let)
Because you are not reassigning it's value.
161
How should you decide on which type of declaration to use?
| es6-const-let
If you aren't going to reassign the value, then use const.
162
What is the syntax for writing a template literal?
| es6-template-literals
A backtick, followed by strings and/or ${ }.
163
What is "string interpolation"?
| es6-template-literals
When values are substituted into the string for placeholders.
164
What is destructuring, conceptually?
| es6-destructuring
Extracting the information from a variable and assigning it's values to other variables
165
What is the syntax for Object destructuring?
| es6-destructuring
You often, but not always, start with a declaration followed by an object literal that contains 0 or more properties that sometimes have a colon followed by a variable name. Then there's an assignment operator followed by the variable being destructured.
166
What is the syntax for Array destructuring?
| es6-destructuring
Often, but not always, starts with a declaration followed by an array literal. Within that is a non-zero amount of comma separated variables followed by the end of the array literal. Then there's an assignment operator and the variable being destructured.
167
How can you tell the difference between destructuring and creating Object/Array literals?
(es6-destructuring)
If you're destructuring, the brackets go on the left side. Creating, the brackets go on the right side.
168
What is the syntax for defining an arrow function?
| es6-arrow-functions
Parenthesis with 0 or more parameters inside followed by an arrow keyword after that. Sometimes has curly braces following that.
169
When an arrow function's body is left without curly braces, what changes in its functionality?
(es6-arrow-functions)
As long as it's a single expression, the return statement is implied and not needed.
170
When is the value of this determined within an arrow function?
(es6-arrow-functions)
Arrow functions capture the value of the this object when it was defined.
171
When is the value of this determined within a normal function?
(es6-arrow-functions)
The value of this is determined at call time.
172
What is "syntactic sugar"?
| es6-classes
syntax within a programming language that is designed to make things easier to read or to express.
173
What is the typeof an ES6 class?
| es6-classes
A function.
174
What is "refactoring"?
| es6-classes
The act of changing your code overtime for any reason, while maintaining it's previous function.
175
```
Describe ES6 class syntax.
(es6-classes)
```
The class keyword definition, class name, open curly-brace for the class body, the class body, end of class body.
176
What does AMD modules stand for?
Asynchronous Module Definition
177
How are ES Modules different from CommonJS modules?
| es6-classes
They don't use require, they use import/export keyword, and they are officially part of the JavaScript language.
178
What kind of modules can Webpack support?
| webpack-intro
Synchronous and Asynchronous modules.
| Es, CommonJs, AMD, and asset, and Web assembly modules.
179
What is Webpack?
| webpack-intro
A webpack is a module bundler
180
How do you add a devDependency to a package?
| webpack-intro
npm install (--save-dev) (webpack/webpack-cli)
181
What is an NPM script?
| webpack-intro
commands you can make npm run
182
How do you execute Webpack with npm run?
| webpack-intro
npm run (the property of script that you want to run)
183
What does webpack-cli do?
It looks at arguments that your webpack commands do allowing you to modify your command line
184
When importing or exporting what are curly braces for?
They are for named export/import values, instead of default values.
185
What are the three states a Promise can be in?
| es6-promises
Pending, fulfilled, or reject.
186
How do you handle the fulfillment of a Promise?
| es6-promises
With the then method, await keyword, Promise.resolve(), etc
187
How do you handle the rejection of a Promise?
| es6-promises
With the catch method
188
What is Array.prototype.filter useful for?
| array-filter
It filters your array and returns another array, but only with the values you want from the main array.
189
What is Array.prototype.map useful for?
| array-map
It takes an array and returns another array with code in the code block executed on each element in the array.
190
What is Array.prototype.reduce useful for?
| array-reduce
It goes through the array element-by-element, adding the current elements value to the result from the previous one until there are no more elements to add. (The result is the running sum of all the previous steps)
191
How do you mount a React element to the DOM?
| react-element
The render method (Only called once.
192
What is React?
| react-element
React is a JavaScript `library` for creating user interfaces.
193
What is a React element?
| react-element
Plain objects
194
What does react do to any other elements within it's container?
It deletes everything and takes ownership of the container.
195
What do libraries do?
You call their code.
196
What do frameworks do?
They call your code.
197
What is a Plug-in?
| babel-intro
A software component that adds a specific feature to an already existing computer program. (ex. VSCode extensions)
198
What is Babel?
| babel-intro
A JavaScript compliler. (Toolkit primarily for JavaScript that converts modern, future, or alternative JavaScript to older versions for older browsers).
199
What is a Webpack loader?
| babel-intro
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. (Bridges between source codes).
200
How can you make Babel and Webpack work together?
| babel-intro
You use babel-loader, which allows babel to preprocess webpack code.
201
In a build step what is an Author and what is an Artifact?
Author is what we want to use. Often incompatible with browsers, so it needs a bundler (webpack)
Artifact with what the client/browser gets. Fewer files has an older syntax, and requires a bundler for new files
202
What does Babel do by itself?
Nearly nothing; requires plugins for extra functionality.
203
What is JSX?
| react-jsx
A syntax extension that supports JavaScript + more.
204
Why must the React object be imported when authoring JSX in a module?
(react-jsx)
Because the actual code uses the React create element method.
205
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
(react-jsx)
You connect them to the babel-loader and then add the react plugin.
206
What is a React component?
| react-function-components
A component allows you to split the UI into independent, reusable pieces, and think about each piece in isolation.
207
How do you define a function component in React?
| react-props-and-expressions
You define with the function keyword or with arrow function syntax, brackets, return statement in the code block, and end brackets.
208
How do you mount a component to the DOM?
| react-props-and-expressions
You use the render method of ReactDOM.
209
What are props in React?
| react-props-and-expressions
They are objects
210
How do you pass props to a component?
| react-props-and-expressions
you would create a react element with a prop name with an assignment operator and a value.
211
How do you write JavaScript expressions in JSX?
| react-props-and-expressions
Surround the code in a parenthesis.
212
How do you create "class" component in React?
| react-class-components
Use the class keyword, the name of the class, the extends keyword, and the Component property of the React object, Must have a render method in it that returns a react element.
213
```
How do you access props in a class component?
(react-class-components)
```
Using the `this` object.
214
```
What does render() within a class do?
(react-class-components)
```
the render method within a class object returns a picture of what the DOM looks like.
215
What is the purpose of state?
| react-events-and-state
The purpose of state in react is to keep track of values that change over time.
216
How to you pass an event handler to a React element?
| react-events-and-state
As a prop.
217
What Array method is commonly used to create a list of React elements?
(react-rendering-lists)
The map method.
218
What is the best value to use as a "key" prop when rendering lists?
(react-rendering-lists)
The id of the list item.
219
What does tree (directory name) do?
It shows a tree of that directory and it's children.
220
What are controlled components?
Components that maintain their own state and update it based on user input.
221
What two props must you pass to an input for it to be "controlled"?
the onChange and value properties.
