JavaScript Flashcards
(241 cards)
1
Q
What is the purpose of variables?
A
To store data for use
2
Q
How do you initialize (assign a value to) a variable?
A
variable name = (assignment operator) variable value;
3
Q
What characters are allowed in variable names?
A
letters, dollar sign, underscore, numbers (cannot start with a number)
4
Q
What does it mean to say that variable names are “case sensitive”?
A
variable with that same name but different casing is a different variable
5
Q
What is the purpose of a string?
A
store and use text data
6
Q
What is the purpose of a number?
A
store and use numeric data
7
Q
What is the purpose of a boolean?
A
boolean is a data type with two values true/false can be used to for decision making
8
Q
What does the = operator mean in JavaScript?
A
assignment operator, assigns value to a variable
9
Q
How do you update the value of a variable?
A
variable name = (assignment operator) new value
10
Q
What is the difference between null and undefined?
A
o undefined: computationally empty value and type are undefined o null: means nothing value is null type is object
11
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
to see what is being logged and in what order
12
Q
Give five examples of JavaScript primitives.
A
o string o number o boolean o undefined o null
13
Q
What data type is returned by an arithmetic operation?
A
number
14
Q
What is string concatenation?
A
Join two or more strings together
15
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
o Addition
o Concatenation
16
Q
What data type is returned by comparing two values (, ===, etc)?
A
boolean
17
Q
What does the += “plus-equals” operator do?
A
adds the value of the variable to the right operand and assigns the result to the variable i.e.:
x += y means: x = x + y
18
Q
What are objects used for?
A
grouping related data variables (properties) and functionality functions(methods) together
19
Q
What are object properties?
A
key: value pairs
data attached to a name, data may change, name will stay the same
a variable attached to a object
20
Q
Describe object literal notation.
A
const/let objName = { }
can include properties and methods
21
Q
How do you remove a property from an object?
A
delete (keyword) object.(member operator)property
22
Q
What are the two ways to get or update the value of a property?
A
o Dot notation object.(member operator)property/method = (assignment operator) value
o Bracket notation object[“property”] = (assignment operator) value
23
Q
What are arrays used for?
A
storing a list of values
24
Q
Describe array literal notation.
A
var keyword arrayName = (assignment operator) [value, value, value];
25
How are arrays different from "plain" objects?
arrays are ordered and use numbered indices instead of property names
26
What number represents the first index of an array?
0
27
What is the length property of an array?
holds the number of items in the array
28
How do you calculate the last index of an array?
arrayName.length -1
29
What is a function in JavaScript?
a block of code that performs a task
30
Describe the parts of a function definition.
o Function keyword
o Function name (optional)
o Opening and closing parenthesis which may include a comma separated list of parameters
o A code block surrounded by curly braces
o Return statement (optional)
31
Describe the parts of a function call.
o Function name
| o Opening and closing parenthesis which may include a comma separated list of arguments
32
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function call does not have the function keyword or the code block surrounded by curly braces and the parameters are now arguments
33
What is the difference between a parameter and an argument?
o A parameter is declared when defining a function to hold the place for a value
o Arguments are the values that are passed to the function when it is called
34
Why are function parameters useful?
o Provide data to the function
| o Can provide different data for different results without having to repeat code
35
What two effects does a return statement have on the behavior of a function?
o Causes the function to produce a value for use
| o Exits the function and prevents any more of the function’s code block from being run
36
Why do we log things to the console?
For debugging and to check output
37
What is a method?
A function that is a property of an object
38
How is a method different from any other function?
Attached to object so able to access the information on that object so has greater functionality.
39
How do you remove the last element from an array?
.pop(); method
40
How do you round a number down to the nearest integer?
Math.floor(number);
41
How do you generate a random number?
Math.random();
| 0 to .9repeating
42
How do you delete an element from an array?
.splice(index, number); method
43
How do you append an element to an array?
.push(); method
44
How do you break a string up into an array?
.split(pattern ie ‘ ‘); method
45
Do string methods change the original string?
No, strings are immutable the only way to save a string with changes is to create a new variable to hold new string
46
Is the return value of a function or method useful in every situation?
Not if you don’t need to see or use the return value at the moment.
47
Give 6 examples of comparison operators.
```
o === strictly equal to (value and type)
o !== not strictly equal to (value and type)
o > greater than
o > less than
o >= greater than or equal to
o <= less than or equal to
```
48
What data type do comparison expressions evaluate to?
boolean
49
What is the purpose of an if statement?
To make a decision. Evaluates a condition and if true executes the code block.
50
Is else required in order to use an if statement?
no
51
Describe the syntax (structure) of an if statement.
o if keyword
o condition surrounded by parentheses
o code block surrounded by curly braces
52
What are the three logical operators?
o && logical and
o || logical or
o ! logical not
53
How do you compare two different expressions in the same condition?
(expression1 > comparison operator expression2)
54
What is the purpose of a loop?
To run a block of code multiple times.
55
What is the purpose of a condition expression in a loop?
Defines the condition required to run the code block, once false loop ends
56
What does "iteration" mean in the context of loops?
Loop repetition
57
When does the condition expression of a while loop get evaluated?
Before each loop iteration
58
When does the initialization expression of a for loop get evaluated?
One time before the first time the condition is evaluated.
59
When does the condition expression of a for loop get evaluated?
Before each loop iteration.
60
When does the final expression of a for loop get evaluated?
At the end of each loop iteration before the next evaluation of condition
61
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
62
What does the ++ increment operator do?
Adds one to its operand and returns a value
63
How do you iterate through the keys of an object?
for in loop
64
Why do we log things to the console?
To check output and for debugging
65
What is a "model"?
A representation/recreation of something
66
Which "document" is being referred to in the phrase Document Object Model?
The HTML document
67
What is the word "object" referring to in the phrase Document Object Model?
The JavaScript objects that are modelling the HTML document
68
What is a DOM Tree?
A model of an element and all of it’s children
69
Give two examples of document methods that retrieve a single element from the DOM.
```
o getElementById() uses the value of an element’s id attribute
o querySelector() uses a CSS selector, and returns the first matching element
```
70
Give one example of a document method that retrieves multiple elements from the DOM at once.
```
o querySelectorAll() uses a CSS selector to select all matching elements
o getElementsByClassName() selects all elements that have a specific value for their class attribute
o getElementsByTagName() selects all elements that have the specified tag name
```
71
Why might you want to assign the return value of a DOM query to a variable?
To store the reference for it for future use, don’t have to search the whole DOM tree again.
72
What console method allows you to inspect the properties of a DOM element object?
.dir()
73
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to analyze all of the elements in the HTML page first.
74
What does document.querySelector() take as its argument and what does it return?
A string holding a CSS selector, the first matching element
75
What does document.querySelectorAll() take as its argument and what does it return?
A string holding a CSS selector, a node list of all matching elements
76
What is the purpose of events and event handling?
o To respond to the actions of our users.
o Events are what happens
o Event listeners to trigger functions when an event occurs
77
What do [] square brackets mean in function and method syntax documentation?
optional
78
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener()
79
What is a callback function?
A function passed into another function as an argument
80
What object is passed into an event listener callback when the event fires?
The event object which contains all the information about that event.
81
What is the event.target?
The target property of the event object the value of which is the element that the event originated from
82
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
1. the function is passed as an argument (callback function)
| 2. the function is called and will be replaced by the return of the function call
83
What is the className property of element objects?
get and set the value of a class attribute
84
How do you update the CSS class attribute of an element using JavaScript?
element.className = ‘newValue’
85
What is the textContent property of element objects?
get and set the value of text content of an element and it’s descendants
86
How do you update the text within an element using JavaScript?
element.textContent = ‘new value’
87
Is the event parameter of an event listener callback always useful?
No, don’t always need the info stored in event.
88
Why is storing information about a program in variables better than only storing it in the DOM?
Easy to see and use values multiple times, faster than searching the DOM tree every time
89
What event is fired when a user places their cursor in a form control?
focus
90
What event is fired when a user's cursor leaves a form control?
blur
91
What event is fired as a user changes the value of a form control?
input
92
What event is fired when a user clicks the "submit" button within a form?
submit
93
What does the event.preventDefault() method do?
prevents the default behavior of the event
94
What does submitting a form without event.preventDefault() do?
refreshes the page and adds the form's values to the URL
95
What property of a form element object contains all of the form's controls.
elements
96
What property of form a control object gets and sets its value?
value
97
What is one risk of writing a lot of code without checking to see if it works so far?
difficult to debug
98
What is an advantage of having your console open when writing a JavaScript program?
verify code as you go
99
Does the document.createElement() method insert a new element into the page?
no
100
How do you add an element as a child to another element?
o element.appendChild(childelement);
| o element.append(childelement);
101
What do you pass as the arguments to the element.setAttribute() method?
(attribute name, value)
102
What steps do you need to take in order to insert a new element into the page?
o Create element node
o Get element to append the new element to.
o Add element to DOM tree (append to parent element)
103
What is the textContent property of an element object for?
Get(read) or set(write) text content of an element and it’s children
104
Name two ways to set the class attribute of a DOM element.
o element.setAttribute(name, value);
| o element.className = ‘attribute’;
105
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
o Define once, repeat as many times needed
o Dynamic
o Name the purpose of the code block
106
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling & event capturing
107
What DOM element property tells you what type of element it is?
tagName
108
What does the element.closest() method take as its argument and what does it return?
```
o selectors (a string containing a selector or selector list)
o returns itself or the first matching ancestor, null if no matches
```
109
How can you remove an element from the DOM?
ChildNode.remove() method
110
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
add event listener to an ancestor element
111
What is the event.target?
the most specific element the event happened on
112
What is the affect of setting an element to display: none?
Turns off the display of an element and it’s children so it has no effect on the layout, the document is rendered as though they doesn’t exist, taken out of document flow
113
What does the element.matches() method take as an argument and what does it return?
o A string representing the selector to test
| o A boolean
114
How can you retrieve the value of an element's attribute?
element.getAttribute(‘attribute name’) method
115
What is JSON?
JavaScript Object Notation
116
What are serialization and deserialization?
Serialization is the processes of translating an object into a format that can be stored or transmitted (JSON is string) and deserialization is the reverse of that process, reconstructing the object
117
Why are serialization and deserialization useful?
```
o To transmit an object across a network
o Persistence (storage)
```
118
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify();
119
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse();
120
How to you store data in localStorage?
localStorage.setItem(keyName, keyValue);
121
How to you retrieve data from localStorage?
localStorage.getItem(KeyName);
122
What data type can localStorage save in the browser?
string
123
When does the 'beforeunload' event fire on the window object?
When the window, document and its resources are about to be unloaded (refresh, close, etc)
124
How can you tell the difference between a method definition and a method call?
a function definition being assigned to an object.
| object.method();
125
Describe method definition syntax (structure).
```
const/let objectName = {
propertyName: function(parameters) {
code block};
}[comma here if multiple methods]
};
```
126
Describe method call syntax (structure).
objectName.methodName();
127
How is a method different from any other function?
Attached to an object so it access and sometimes modify that object’s data.
128
What is the defining characteristic of Object-Oriented Programming?
Objects pair both data (as properties) and behavior (as methods)
129
What are the four "principles" of Object-Oriented Programming?
o Abstraction
o Encapsulation
o Inheritance
o Polymorphism
130
What is "abstraction"?
The ability to interact with something complex in a simple way
131
What does API stand for?
Application Programming Interface
132
What is the purpose of an API?
To be able to interact with a system in a simplified way (abstraction)
133
What is this in JavaScript?
the object to the left of the dot
134
What does it mean to say that this is an "implicit parameter"?
It is available in a function code block even though it was never included in the function parameter list or declared with var.
135
When is the value of this determined in a function; call time or definition time?
call
136
How can you tell what the value of this will be for a particular function or method definition?
You can’t
137
How can you tell what the value of this is for a particular function or method call?
The value to the left of the dot when the method is called, if there is none, will default to window object.
138
What kind of inheritance does the JavaScript programming language use?
Prototype-based/prototypal inheritance
139
What is a prototype in JavaScript?
An object that contains properties and methods that can be used as a template for other objects to use.
140
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 are defined on a prototype object that they utilize.
141
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
Prototype objects
142
What does the new operator do?
o Creates a blank object.
o Adds a property to the new object __proto__ that links to the constructor function’s prototype object.
o Binds the newly created object instance as the this context
o Returns this if the function doesn’t return an object
143
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype
144
What does the instanceof operator do?
Tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
145
What is a "callback" function?
A function passed to another function as an argument
146
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()
147
How can you set up a function to be called repeatedly without using a loop?
setInterval()
148
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0ms
149
What do setTimeout() and setInterval() return?
timeoutID / intervalID a positive number that identifies the timer created by the call
150
What is a client?
programs that request data from a server
151
What is a server?
computer program that stores and transmits data to other computers on the network when asked to
152
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
153
What three things are on the start-line of an HTTP request message?
o HTTP method
o Request target
o HTTP version
154
What three things are on the start-line of an HTTP response message?
o The protocol version
o A status code
o A status text
155
What are HTTP headers?
The meta data for the request/response
156
Is a body required for a valid HTTP request or response message?
no
157
What is AJAX?
A technique for requesting and loading data onto a part of the page without having to refresh the entire page using XMLHTTPRequest
158
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
159
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
160
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
161
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Prototype chain (EventTarget)
162
What are some examples of a code block?
Loops
| Conditionals
163
What does block scope mean?
Variables can only be accessed within the code block curly braces
164
What is the difference between let and const?
Const variable is immutate; it cannot be reassigned
| Const must be assigned value on declaration
165
Why is it possible to .push() a new value into a const variable that points to an Array?
Because an array is an object so it is pass by reference and is mutable
166
How should you decide on which type of declaration to use?
Use const unless you can't, then use let
167
What is the syntax for writing a template literal?
Surrounded by backticks
| expressions ${}
168
What is "string interpolation"?
Substituting expression values in a string
169
What is destructuring, conceptually?
Assigning property values of an object to variables
170
What is the syntax for Object destructuring?
Const/let {
| propertyKey: variableName,
171
What is the syntax for Array destructuring?
Const/let [variableName, variableName] = arrayName;
172
How can you tell the difference between destructuring and creating Object/Array literals?
{} or [] on left or right of the assignment operation
173
What is the syntax for defining an arrow function?
() => expression; expression; expression {multiple expressions or statements}
174
When an arrow function's body is left without curly braces, what changes in its functionality?
Don’t need a return statement
175
How is the value of this determined within an arrow function?
Determined at definition time by the value of this in the enclosing code block, window if none
176
What is a CLI?
Command Line Interface
177
What is a GUI?
Graphical User Interface
178
```
o man
o cat
o ls
o pwd
o echo
o touch
o mkdir
o mv
o rm
o cp
```
```
o man
look at the manual for a program
o cat
concatenate files, create new files, see contents of a file > create new file
o ls
list directory contents
o pwd
print name of working directory
o echo
print a line of text > create new file
o touch
create a file without content (ie: .gitkeep)
o mkdir
make directories (parent directories with -p option)
o mv
rename or move files
o rm
remove files (directories with -r option)
o cp
copy files (directories with -r option)
```
179
What is Node.js?
a runtime environment that allows JavaScript to be executed outside of a web browser
180
What can Node.js be used for?
build back ends for Web applications, command-line programs, or any kind of automation that developers wish to perform
181
What is a REPL?
read-eval-print loop: an interactive shell that reads user inputs, executes them, and returns the result
182
What is a computer process?
The instance of a program that is being executed
183
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
184
How do you access the process object in a Node.js program?
globally available by referring to the name
185
What is the data type of process.argv in Node.js?
An array of strings
186
Why should a full stack Web developer know that computer processes exist?
To program applications where client, server and database work together
187
What is a JavaScript module?
a .js file
188
What values are passed into a Node.js module's local scope?
```
o exports
o require
o module
o __filename
o __dirname
```
189
Give two examples of truly global variables in a Node.js program
o process
o global
o console
190
What is the purpose of module.exports in a Node.js module?
To make data and functions available to other modules
191
How do you import functionality into a Node.js module from another Node.js module?
require() method
192
What is a directory?
a file container
193
What is a relative file path?
The location of a file or directory relative to the current directory
194
What is an absolute file path?
The complete location of a file or directory starting from root
195
What module does Node.js include for manipulating the file system?
fs
196
What is the JavaScript Event Loop?
It moves asynchronous functions in the task queue to the call stack when it is empty
197
What is different between "blocking" and "non-blocking" with respect to how code is executed?
Blocking code stays on the stack until complete, non-blocking code pushed to the task queue
198
What method is available in the Node.js fs module for writing data to a file?
writeFile() method
199
Are file operations using the fs module synchronous or asynchronous?
They have asynchronous and synchronous methods
200
What is NPM?
npm website, command line client, package registry
201
What is a package?
a directory with one or more files and has a package.json
202
How can you create a package.json with npm?
npm init -y
203
What is a dependency and how to you add one to a package?
files required by a package, npm install
204
What happens when you add a dependency to a package with npm?
package.json gets updated to include the new dependency and the dependency files get downloaded
205
How do you add express to your package dependencies?
npm install express
206
What Express application method starts the server and binds it to a network PORT?
listen method
207
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
208
What are the three states a Promise can be in?
o pending: initial state, neither fulfilled nor rejected.
o fulfilled: meaning that the operation was completed successfully.
o rejected: meaning that the operation failed.
209
How do you handle the fulfillment of a Promise?
then method
210
How do you handle the rejection of a Promise?
catch method
211
What is Array.prototype.filter useful for?
Filtering an array to show only the values that meet your criteria
212
What is Array.prototype.map useful for?
Creating a new array with the return of a function being called on each element of an array
213
What is Array.prototype.reduce useful for?
Combining the elements in an array into a single value
214
What is "syntactic sugar"?
syntax within a programming language that is designed to make things easier for humans to read or to write
215
What is "syntactic sugar"?
syntax within a programming language that is designed to make things easier for humans to read or to write
216
What is the typeof an ES6 class?
function
217
Describe ES6 class syntax.
```
class Name {
constructor(property(ies)) {
this.property = property;
}
method() {
return this.property;
}
}
```
218
What is "refactoring"?
restructuring existing code without changing its external behavior (usually to improve readability, reduce complexity, or improve performance)
219
What is Webpack?
A module bundler for JavaScript applications
220
How do you add a devDependency to a package?
npm install --save-dev
221
How do you execute Webpack with npm run?
npm run key
222
How are ES Modules different from CommonJS modules?
Use import or {} from ‘./filepath’ and export instead of const variable = require(‘file’) & module.exports = ;
223
What kind of modules can Webpack support?
```
o ECMA Script modules
o CommonJS modules
o AMD modules
o Assets
o WebAssembly modules
```
224
What is React?
a JavaScript library/framework for creating user interfaces
225
What is a React element?
An object modeling a DOM node
226
How do you mount a React element to the DOM?
ReactDOM.render(element, container)
227
What is Babel?
A JavaScript compiler* mainly used to translate JavaScript to an older version of JavaScript (*program that translates from one language to another)
228
What is a Plug-in?
A software component that adds a feature to an existing program
229
What is a Webpack loader?
A plug in that can transform a source module’s code as it is imported
230
How can you make Babel and Webpack work together?
install babel-loader as a devDependency
231
What is JSX?
A syntax extension for JavaScript that produces React elements
232
Why must the React object be imported when authoring JSX in a module?
Because when you make elements it compiles to React.createElement()
233
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Install plug-in: npm install @babel/plugin-transform-react-jsx
234
What is a React component?
A function that takes an input and returns a React element
235
How do you define a function component in React?
function Name(props) { return
Hello, {props.user}
;}
236
How do you mount a component to the DOM?
ReactDOM.render(element, container)
237
What are props in React?
Properties used for passing data from one component to another
238
How do you pass props to a component?
Use a key=”value” pair when creating element
239
How do you write JavaScript expressions in JSX?
{expression}
240
How do you create "class" component in React?
```
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
; } } ```
241
How do you access props in a class component?
Property of the this object
