JavaScript Flashcards
(330 cards)
1
Q
What is the purpose of variables?
A
to represent/store numbers and other kinds of data
2
Q
How do you declare a variable?
A
first you declare a keyword (const, let, var) then you give the variable a name
3
Q
How do you initialize (assign a value to) a variable?
A
you assign a variable a value by declaring it, then using an “=” (assignment operator) followed by the value you want to store
4
Q
What characters are allowed in variable names?
A
letters
numbers
$
_ (underscore)
5
Q
What does it mean to say that variable names are “case sensitive”?
A
if two words are spelled the same, but the cases are different, they will represent different variables
ex var Hello and var hello would be different variables
6
Q
What is the purpose of a string?
A
to represent text content (letters and other characters). Must be inside quotations
7
Q
What is the purpose of a number?
A
to represent quantities and other calculations involving numeric data
represent numeric data
8
Q
What is the purpose of a boolean?
A
to represent “true” or “false” (ie on and off).
9
Q
What does the = operator mean in JavaScript?
A
it is the assignment operator
10
Q
How do you update the value of a variable?
A
declaring the variable name and using the assignment operator to assign it a new value
ex hello = “hello” reassigns the variable hello to “hello”
11
Q
What is the difference between null and undefined?
A
null is an intentional assignment, you must assign a variable to “null” to display no value
undefined is when a variable is assigned no value, i.e. no assignment operator was used.
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
to keep track of what variable is being logged and when.
13
Q
Give five examples of JavaScript primitives.
A
string number boolean undefined null
14
Q
What data type is returned by an arithmetic operation?
A
number
15
Q
What is string concatenation?
A
combining strings together to create a new string
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
serves as addition and/or concatenation
17
Q
What data type is returned by comparing two values (, ===, etc)?
A
boolean
18
Q
What does the += “plus-equals” operator do?
A
adds the variable (called on the left of the operator) to the value on the right of the operator and then assigns the called variable to the result of that expression.
19
Q
What are objects used for?
A
serves as a grouping mechanism for other data types
20
Q
What are object properties?
A
variables inside of an object
21
Q
Describe object literal notation.
A
assigning an object to a variable name
declaring an object with curly braces
ex
var object = {
property: value
};
22
Q
How do you remove a property from an object?
A
delete operator followed by the object name and property name you want to delete (can use dot or bracket notation).
23
Q
What are the two ways to get or update the value of a property?
A
use dot or bracket notation to find the object and property you want and then assign it to a new value.
24
Q
What are arrays used for?
A
storing a list of values that are related to each other in an ordered fashion
25
Describe array literal notation.
```
brackets assigned to a new variable declaration
var arr = [];
```
26
How are arrays different from "plain" objects?
arrays are objects, but they have “order”. their index number dictates their property order
27
What number represents the first index of an array?
0
28
What is the length property of an array?
tells you how many items are in an array
29
How do you calculate the last index of an array?
array.length - 1
30
What is a function in JavaScript?
objects that can carry out tasks that can also be reused.
31
Describe the parts of a function definition.
“function” keyword
name of function (optional)
function parameter list with optional parameters
opening curly brace
function code block
return statement (optional)
closing curly brace
ex function func(param) {
code
return statement
}
32
Describe the parts of a function call.
name of function followed by the parameter list (parentheses)
insert parameters inside parenthesis if function needs parameters
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
function definition has the keyword “function” before the name, and has parameters that act as placeholders within the parenthesis. Then it has the code block that will be executed when the function is called.
function call is just the name followed by parenthesis and arguments.
34
What is the difference between a parameter and an argument?
a parameter is a placeholder for values to be input into the function
an argument is the actual value that will be placed
35
Why are function parameters useful?
it allows us to get different results from a function when provided with different values.
36
What two effects does a return statement have on the behavior of a function?
produces a value for the function
prevents any more code in the functions code block from being run.
37
Why do we log things to the console?
it allows us to debug our code.
allows us to see the output of our code so we know if something is working as intended.
38
What is a method?
it is a function that is a property of an object
39
How is a method different from any other function?
you cannot call the method on its own, it needs to be called by an object
40
How do you remove the last element from an array?
call the “.pop()” method by the object.
41
How do you round a number down to the nearest integer?
use the .floor() property on the Math object
ex Math.floor() and pass the number you want rounded down as an argument.
42
How do you generate a random number?
call the .random() property on the Math object
43
How do you delete an element from an array?
use the .splice() method on the array.
first argument is the position you want to target
second argument is the number of elements you want to delete
Any argument after is the data you want to insert into that position.
44
How do you append an element to an array?
.push() method to add to the end of an array
.unshift() method to add to the front of the array
.splice() method to add in the middle of an array.
45
How do you break a string up into an array?
use the .split() method
first parameter is the “pattern” you want to split the string up by
second parameter is the max number if substrings you want returned
46
Do string methods change the original string? How would you check if you weren't sure?
They do not, you need to store the return into a new variable
you can console log the variable that held the original string
47
Roughly how many string methods are there according to the MDN Web docs?
~50
48
Is the return value of a function or method useful in every situation?
no
49
Roughly how many array methods are there according to the MDN Web docs?
~40
50
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
51
Give 6 examples of comparison operators.
```
==
===
!==
!===
<
>
```
52
What data type do comparison expressions evaluate to?
booleans (true or false)
53
What is the purpose of an if statement?
to check if a condition runs true before executing a code
54
Is else required in order to use an if statement?
no
55
Describe the syntax (structure) of an if statement.
```
if keyword
condition within parentheses
opening curly brace
code to be executed
closing curly brace
```
56
What are the three logical operators?
&& (and)
|| (or)
! (not)
57
How do you compare two different expressions in the same condition?
you can either use the && or || operators
58
What is the purpose of a loop?
being able to repeat a block of code under certain conditions
59
What is the purpose of a condition expression in a loop?
acts as a counter to let the loop know when to stop
60
What does "iteration" mean in the context of loops?
it is the number of times that a function has repeated
61
When does the condition expression of a while loop get evaluated?
condition is evaluated BEFORE executing the statement
| before iteration
62
When does the initialization expression of a for loop get evaluated?
initialization expression is evaluated once BEFORE the loop begins
63
When does the condition expression of a for loop get evaluated?
before the code statement is ran
64
When does the final expression of a for loop get evaluated?
at the end of the loop iteration and before the condition expression
65
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
66
What does the ++ increment operator do?
increase the operand by one
67
How do you iterate through the keys of an object?
for (let x in object)
| x represents the keys in the object
68
What is a "model"?
the structure of the webpage that it was given.
| like a replica of the original thing
69
Which "document" is being referred to in the phrase Document Object Model?
the html page
70
What is the word "object" referring to in the phrase Document Object Model?
it refers to the “object’ data type in javascript that makes up the DOM tree
objects are what make up the model
71
What is a DOM Tree?
a parent element and its “branches” of children and their children
72
Give two examples of document methods that retrieve a single element from the DOM.
document.querySelector()
| getElementById()
73
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll()
74
Why might you want to assign the return value of a DOM query to a variable?
so you can reuse the selector
75
What console method allows you to inspect the properties of a DOM element object?
console.dir()
76
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
so the page can load first before the script is run. if the script is run before the page, it will select nothing.
77
What does document.querySelector() take as its argument and what does it return?
it takes a selector (in quotes ie a string) and returns the first element that matches the selector
78
What does document.querySelectorAll() take as its argument and what does it return?
it takes a selector (in quotes) and returns a node list of the document’s elements that match the selector
79
What is the purpose of events and event handling?
to make the browser respond to user interactions. it makes the the page feel more interactive
events are what the user does and the event handling is what the page does in response to the user events
80
Are all possible parameters required to use a JavaScript method or function?
no
81
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventLIstener()
82
What is a callback function?
a function passed into another function as an argument
83
What object is passed into an event listener callback when the event fires?
the ‘event’ object
| it is an object that returns all the relevant information that happened on that event in a object format
84
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
a property of the Event object. It returns the element where the event occurred.
you can check MDN. search up event.target mdn.
85
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
no parenthesis is you are calling the method
parenthesis means you are calling the result of the method. It would tell the page that the function will run once the page is loaded, instead of when it is called.
86
What is the className property of element objects?
it is a property that allows us to get the class names of an element and set the values
87
How do you update the CSS class attribute of an element using JavaScript?
document.querySelector(‘select element).className = ‘class name’
88
What is the textContent property of element objects?
property that represents the text content of the selected node and its descendents.
89
How do you update the text within an element using JavaScript?
document.querySelector(‘select element’).textContent = ‘desired text’
90
Is the event parameter of an event listener callback always useful?
no
91
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
more complicated
92
Why is storing information about a program in variables better than only storing it in the DOM?
it makes it easier to access with JavaScript
93
What event is fired when a user places their cursor IN a form control?
(ie their cursor is blinking)
‘focus’ is fired when a user clicks on a form
94
What event is fired when a user's cursor leaves a form control?
‘blur’ is fired when a user clicks outside an input area
95
What event is fired as a user changes the value of a form control?
‘input’ is fired when a user starts typing
96
What event is fired when a user clicks the "submit" button within a form ?
the ‘submit’ event is fired
97
What does the event.preventDefault() method do?
it prevents the default action of something from occurring.
ie submit wont refresh the page
checking a checkbox won’t fill in a check
98
What does submitting a form without event.preventDefault() do?
it refreshes the page
99
What property of a form element object contains all of the form's controls.
the ‘.element’ property
100
What property of a form control object gets and sets its value?
the ‘.value’ property
101
What is one risk of writing a lot of code without checking to see if it works so far?
having to rewrite your entire code if something early on was non-functional
102
What is an advantage of having your console open when writing a JavaScript program?
being able to see what is happening in real time so you can debug easier.
103
Does the document.createElement() method insert a new element into the page?
no, it stores it into a variable to be added later with .appendChild()
104
How do you add an element as a child to another element?
use .appendChild()
attach .appendChild() to the element you want to add to, and insert the actual child into the parenthesis of .appendChild().
105
What do you pass as the arguments to the element.setAttribute() method?
the name of the attribute you want to set, then the value you want to assign the attribute.
106
What steps do you need to take in order to insert a new element into the page?
```
select the parent element you want to target via querySelector()
-create the actual element you want to add (ex li, div, ul etc) and store into variable
-var newElement = document query + .createNewElement()
append some text content to previously mentioned variable (optional)
-var newText = document query + .createTextNode(‘string’)
newElement.appendChild(newText)
append the final variable to the element you want to add to
-Parent.appendChild(newElement)
```
107
What is the textContent property of an element object for?
it is used for getting all text content within a node and its descendants or to set the value for a node and its descendants
108
Name two ways to set the class attribute of a DOM element.
.setAttribute(‘class’, ‘classname’)
| query.className = ‘classname’
109
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
functions are easier to test, you only need to output one thing in a function vs 20 in a for loop
makes repeating an action easier
110
What is the event.target?
the element that triggered the event. the most “specific” element that was triggered
111
Why is it possible to listen for events on one element that actually happen its descendent elements?
because of event flow
| default is “bubbling” it selects the most specific (deepest child) element that is within the targeted event
112
What DOM element property tells you what type of element it is?
event.tagName gets the element in all caps
113
What does the element.closest() method take as its argument and what does it return?
it takes a string of selectors.
it returns the closest ancestor of the selected element that matched the selector argument that was passed
returns the actual element
114
How can you remove an element from the DOM?
use .remove() after the selected element you queried for
115
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 an event listener to the parent element
that parent is then able to listen to any events that happen within it
you can then use methods like tagname or matches() to target more specific events within that parent
116
What does the element.matches() method take as an argument and what does it return?
takes a string of a css selector
returns a boolean (true or false the element has the selector)
Ex document.querySelector("li").matches("endangered"). If an element of li has a class of "endangered", the method will return true
117
How can you retrieve the value of an element's attribute?
.getAttribute() attached to the targeted element
The argument will be a string value of the name of the attribute value you want
Ie "data-view" will return the value of "data-view"
118
At what steps of the solution would it be helpful to log things to the console?
after every step
119
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 add another event listener for each specific tab
120
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?
several if else statements
if event target matched one condition, you set that one to a certain class name
then you set the other two targets to different class names
create as many if statements as there are targets
121
What is a breakpoint in responsive Web design?
the point at which a media query is introduced when a style is being deployed.
122
What is JSON?
JavaScript Object Notation
a string that has a format that resembles javascript objects.’
it contains only properties, no methods
it is a way to serialize data into a string and be able to transfer data more efficiently.
123
What are serialization and deserialization?
serialization
a way of turning an object into basic memory (eg bytes) so you can transfer the data easier
deserialization
reverse of serialization. Turns a stream of bytes into an object in memory
124
Why are serialization and deserialization useful?
they allow us convert something and store it in a certain way so we can transfer/store it
deserialization allows us to take stored thing and ‘unpack’ it to its original form
125
How do you serialize a data structure into a JSON string using JavaScript?
you can use JSON.stringify to turn it into a JSON string
126
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse to unpack the string.
127
How do you store data in localStorage?
use the .setItem() method and pass in the key and value pair you want to store
128
How do you retrieve data from localStorage?
you can use the .getItem() method and pass the key you want as a string.
129
What data type can localStorage save in the browser?
strings
130
When does the 'beforeunload' event fire on the window object?
when the document is about to be ‘unloaded’ meaning before all data is cleared
ie before the data is ‘cleared’
before user leaves the page.
131
What is a method?
a function that is a property of an object
132
How can you tell the difference between a method definition and a method call?
definition: the name of the method is a key and the actual function is the value inside an object, and that object is being assigned to a variable
call: the method is attached to an object via dot property
133
Describe method definition syntax (structure).
create an object with curly braces
name of the method (ie name of function) is the key
the value is a function keyword, followed by the opening curly brace for code block, then the code block itself.
the object you created is then assigned to a variable name.
134
Describe method call syntax (structure).
name of object, followed by dot name of method ()
| object.method();
135
How is a method different from any other function?
methods can only be used by certain objects and must be attached to objects.
functions can be called whenever
136
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (variables, properties) and behavior (methods)
137
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
138
What is "abstraction"?
working with complex things in a simple way
ie generalizing something so that you know what it does, without having to know how its done
139
What does API stand for?
application programming interface
140
What is the purpose of an API?
to give programmers a way to interact with a system in a simplified manner (ie abstraction)
ie APIs hide the internal details of how a system works, and instead only lets the programmer know what it does.
a connection between programs and programmers.
141
What is this in JavaScript?
an implicit parameter of all JavaScript functions
it is a variable that holds the object that the behavior is currently being executed within.
'this' is a parameter that takes the object to the left of the method call as its argument.
142
When is the value of this determined in a function; call time or definition time?
call time
143
```
What does this refer to in the following code snippet?
" var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};"
```
nothing. the method isn't being invoked, so 'this' isn't assigned any value
144
```
"var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};"
```
Given the above character object, what is the result of the following code snippet? Why?
"character.greet()"
It’s-a-me, Mario!
the ‘owner’ of the greet function is ‘character’. so when this.firstName is being called, it is saying the firstName property of the owner of ‘this’ function
145
```
"var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};"
```
Given the above character object, what is the result of the following code snippet? Why?
```
"var hello = character.greet;
hello();"
```
It’s-a-me, undefined
the greet method is not being invoked, so ‘this’ doesn’t get a value. hello is just being assigned the value of greet, which is the function inside of it, not the actual value it would return because it is not being invoked.
when hello is being called, it is being called by the window object, so ‘this’ would be the window object if ‘this’ was called.
146
How can you tell what the value of this will be for a particular function or method definition?
‘this’ is nothing until the function or method is being called.
147
How can you tell what the value of this is for a particular function or method call?
the object to the left of the dot. Whatever is calling the method/function is ‘this’
else it is the window object
148
What kind of inheritance does the JavaScript programming language use?
prototype-based (prototypal)
149
What is a prototype in JavaScript?
a kind of mechanism that allows other javascript objects to inherit features (ie methods, properties) from one another
an object that contains properties and methods that can be used by other objects
150
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?
These methods are defined on a ‘prototype’ object which are then borrowed from the prototype and used when called.
151
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
in the prototype object
152
What does the new operator do?
lets users create a user-defined object type or a built in object type that has a constructor function.
ie using new creates a brand new object that has a template of key-values. The new object is then assigned to a variable name.
153
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
154
What does the instanceof operator do?
checks to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. returns boolean
checks to see if an object was made by a constructor
155
What is a "callback" function?
a function passed into another function as an argument.
156
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
157
How can you set up a function to be called repeatedly without using a loop?
setInterval() function
158
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
159
What do setTimeout() and setInterval() return?
timeoutId and intervalId respectively. They are non-zero value identifiers created by the call functions that allow you to target specifically those timeouts/intervals so you can stop them.
160
What is a client?
a piece of computer hardware or software that accesses a service made available by a server
161
What is a server?
a piece of computer hardware or software that provides functionality to clients.
162
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
163
What three things are on the start-line of an HTTP request message?
```
HTTP method (a word that describes the action to be performed)
request target (URL)
HTTP version (defines structure of the remaining message)
```
164
What three things are on the start-line of an HTTP response message?
protocol version
status code
status text
165
What are HTTP headers?
additional information passed between clients and servers within an HTTP request or response. (a case sensitive string followed by a colon)
166
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
167
Is a body required for a valid HTTP request or response message?
no
168
What is AJAX?
a way of building complex and dynamic webpages using XMLHttpRequests.
users can do things in a web browser while waiting for data to load
169
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
170
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
171
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
the ‘onload’ event
172
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance.
173
What is a code block? What are some examples of a code block?
a series of statements to be performed. functions, conditionals, loop
174
What does block scope mean?
code within curly braces {}
175
What is the scope of a variable declared with const or let?
both are block scope
176
What is the difference between let and const?Why is it possible to .push() a new value into a const variable that points to an Array?
const is a ready-only reference. You can update the value of the reference, but not the reference itself.
let allows you to reassign/update its value
177
Why is it possible to .push() a new value into a const variable that points to an Array?
const creates a read-only reference value. the reference cannot be changed, but the value of the reference can. You can create a reference, but once it is created, you cannot change that reference.
178
How should you decide on which type of declaration to use?
whether you will have to reassign the variable.
179
What is the syntax for writing a template literal?
using backticks `` with placeholders (${})
placeholders will be JS expressions or values that can be inserted into the template literal
180
What is "string interpolation"?
being able to substitute part of a string with values or expressions (ie variables)
181
What is destructuring, conceptually?
assigning a value into a variable
182
What is the syntax for Object destructuring?
const {objectProperty: newPropertyName (only need new name if there is going to be clashing variable names)} = objectName
183
What is the syntax for Array destructuring?
const [ arrayElementName, arrayElementName, …] = arrayName
184
How can you tell the difference between destructuring and creating Object/Array literals?
object destructuring uses {}, array destructuring uses []. destructuring, the braces/brackets go on the left of the assignment operator, creating goes on the right.
185
What is the syntax for defining an arrow function?
let funcName = (param1, param2) => {return statement}
186
When an arrow function's body is left without curly braces, what changes in its functionality?
arrow functions become unable to evaluate statements without curly braces. Can only evaluate expressions
with curly braces, you need return key because it is a statement, without curly braces you don’t need a return key because it is then an expression only.
187
How is the value of this determined within an arrow function?
because arrow functions don’t have a ‘this’ value, it looks for the first definition of ‘this’ it encounters.
no ‘this’ value in a function it defaults to the window object.
this is determined during function definition, not call
188
What is a CLI?
Command Line Interface
allows user to interact with computer to processes commands in the command line
189
What is a GUI?
form of user interface that allows users to interact with electronic devices through graphical icons and audio indicators.
aimed towards consumers of technology and not producers
190
give an example of the command 'man'
man - when you want to see the manual(man man to see the manual for the manual) man cat shows you the manual for the ‘cat’ command
191
give an example of the command 'cat'
cat - when you want to see the manual for the ‘cat’ command (concatenate files and print on the standard output) man cat to see manual on ‘cat’. prints out the text content of a file, can be used to combine files
192
give an example of the command 'ls'
list directory contents. ls -a displays all the contents in a directory, even those starting with a dot (.)
193
give an example of the command 'pwd'
prints the current directory. pwd > new-filename.txt creates a new file with the current directory
194
give an example of the command 'echo'
displays a line of text. echo “hello world” prints out hello world into the console. typing a string and then using an arrow (>) followed by a filename will write that string into that new file.
195
give an example of the command 'touch'
changes file timestamps. Creates a new file if the file does not exist (unless specifically told not to). touch filename.txt creates a new file within the current directory
196
give an example of the command 'mkdir'
makes directories. you can make nested directories by using ‘/’ between directory names (each directory name is a nested forward slash)
197
give an example of the command 'mv'
move/rename files (move source to destination OR move source to directory) mv SOURCENAME DESTINATIONNAME
198
give an example of the command 'rm'
removes files/directories. rm -r DIRECTORYNAME will remove directories and all of its contents. rm FILENAME will remove the file from the current directory
199
give an example of the command 'cp'
copy files and directories from a source to a destination. cp SOURCE DESTINATION. cp -r copies directories recursively. this means that it will copy subdirectories and their contents. without -r it skips the directories.
200
What are the three virtues of a great programmer?
Laziness
Impatience
Hubris
201
What is Node.js?
a program that allows JavaScript to be run outside of a web browser.
202
What can Node.js be used for?
build back ends for web applications, command line programs, any kind of automation that developers wish to perform
203
What is a REPL?
Read-eval-print loop
| a computer programming environment that takes user inputs and executes them and returns a result.
204
When was Node.js created?
2009
205
What back end languages have you heard of?
```
javascript
python
ruby
java
typescript
```
206
What is a computer process?
the instance of a computer program that is being executed by one or many threads. Contains the program code and its activity. The execution of instructions stored in a file on a disk
207
Why should a full stack Web developer know that computer processes exist?
full stack works by making multiple processes work together, so understanding how things interact is necessary so you know when things need to be running.
208
What is the process object in a Node.js program?
a global that provides information about, and control over, the current Node.js process
209
How do you access the process object in a Node.js program?
```
because ‘process’ is a global object, it can be accessed by simply calling ‘process’
const process = require(‘process’)
```
210
What is the data type of process.argv in Node.js?
an array of strings
first element is the process.execPath
second element is the path of the JS file
each following element is any additional arguments passed into the command line
211
What is a JavaScript module?
a chunk of JavaScript code that has functionality that is in its one file.
212
What values are passed into a Node.js module's local scope?
```
module
require
exports
__filename
__dirname
```
213
Give two examples of truly global variables in a Node.js program.
```
clearImmediate(immediateObject)
clearInterval(intervalObject)
clearTimeout(timeoutObject)
console
global
process
```
214
What is the purpose of module.exports in a Node.js module?
to export a value/function from one file to another
| allow other files to use the module’s functionality.
215
How do you import functionality into a Node.js module from another Node.js module?
by using the require function and passing the relative url to the file you want to import as an argument.
216
What is the JavaScript Event Loop?
brings async functions back into the flow of the stack
responsible for the stack and queue
controls when asynchronous events come back into the stack. Event loop will wait until the stack is cleared, and then execute whatever is in the queue.
217
What is the difference between "blocking" and "non-blocking" with respect to how code is executed?
blocking is synchronous ie each event waits for the previous one to finish before getting executed
non-blocking is asynchronous ie functions are called in order and do not have to wait for the previous function to finish executing
218
What is a directory?
a folder(container) that holds other files (references to other files)
219
What is a relative file path?
a file path that is ‘relative’ to the path of the current location. ie the program assumes the path of the current location plus whatever the relative path is.
220
What is an absolute file path?
the entire file path to get into the file that is desired
221
What module does Node.js include for manipulating the file system?
fs module
222
What method is available in the Node.js fs module for writing data to a file?
.writeFile
223
Are file operations using the fs module synchronous or asynchronous?
asynchronous, but there are synchronous options.
224
What is a client?
a service requester
225
What is a server?
providers of service
226
Which HTTP method does a browser issue to a web server when you visit a URL?
GET requests
227
What is on the first line of an HTTP request message?
the ‘Start line’ which contains
an HTTP method (GET, PUT, POST)
the request target (the url)
http version
228
What is on the first line of an HTTP response message?
the start line (status line)
protocol version
status code (indicates success or failure)
status text (explanation of the status code so humans can understand it)
229
What are HTTP headers?
a case sensitive string followed by a request. Specifies the request or describes the body included in the message.
ie modifies the requests, ie formatting, language, encoding.
additional information passed with an HTTP request or response.
230
Is a body required for a valid HTTP message?
no, not all requests have them.
231
What is NPM?
a library of a bunch of packages/modules that users can use or share with other users
library that holds packages(modules) from other users
232
What is a package?
bits of reusable code (packages or modules)
| a directory with one or more files of reusable code
233
How can you create a package.json with npm?
navigate to your package location
npm init --yes
package.json is a json file that holds all the packages that were used in your program.
234
What is a dependency and how do you add one to a package?
a piece of code/package from a library that is needed/used by your code to run
run ‘npm install name-of-package’ in a package directory
235
What happens when you add a dependency to a package with npm?
it gets added to the package.json dependencies object as a property. added to node_modules folder
package is downloaded from the registry
it is now usable in your code.
236
How do you add express to your package dependencies?
npm install express --save
237
What Express application method starts the server and binds it to a network PORT?
.listen() method
238
How do you mount a middleware with an Express application?
with the .use() method
239
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
request object and response object
240
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json; charset=utf-8
241
What does the express.json() middleware do and when would you need it?
takes incoming requests and parses them into a JSON string. Returns middleware that only parses JSON.
When you want to take an input from the command line and convert it into JSON format
242
What is the significance of an HTTP request's method?
it lets the server know what action to perform based on the request method. describes intent of client. communication tool between server and client.
243
What is PostgreSQL and what are some alternative relational databases?
relational database system. (data organized into tables of columns and rows with unique keys identifying each row)
Other databases: MySQL, SQL Server, Oracle
244
What are some advantages of learning a relational database?
storing data that relates to other pieces of data in an organized way.
stores data in a way that makes it harder to corrupt and easier to keep the integrity of the data.
most apps use relational databases
245
What is one way to see if PostgreSQL is running?
sudo service postgresql status
| top command
246
What is a database schema?
a collection of tables. It defines how the data in a relational database should be organized
247
What is a table?
a list of rows with the same set of attributes
248
What is a row?
a set of attributes. a list that holds columns(attributes) with the same kind of values. attributes being descriptions of the kind of data that is being held,
249
What is SQL and how is it different from languages like JavaScript?
a way of interaction with relational databases
sql is a declarative programming language, meaning you give the program a set of rules that describe what you want it to do, then the program will try its best to interpret what you want. database engine figures out how to deal with instructions you give
js is an imperative language. you explicitly tell the program what you want
250
How do you retrieve specific columns from a database table?
the select statement followed by the name of the column(s) you want in double quotes.
the you use the from statement to state which table you want to pull the data from
251
How do you filter rows based on some specific criteria?
use the where statement to define conditions.
252
What are the benefits of formatting your SQL?
get specific results and only the results you want. Databases can be huge, and getting all that information can be useless if you can’t read it
its easier to read
253
What are four comparison operators that can be used in a where clause?
=, ">" ,"< ", !=
254
How do you limit the number of rows returned in a result set?
limit statement followed by the number of lines you want
255
How do you retrieve all columns from a database table?
select *
256
How do you control the sort order of a result set?
order by “column-name” desc or asc order (default is ascending so it can be omitted if thats what you want)
257
How do you add a row to a SQL table?
insert into “table name” (“column name”, “column name”, …)
values (‘value for column one’, ‘value for column 2’)
make note of single and double quotes
258
What is a tuple?
a list of values in a specified order
259
How do you add multiple rows to a SQL table at once?
after values, include as many tuples with the correct number of values within the tuple
ie values (‘data’, ‘data’, ‘data’)
(‘data2’, ‘data2’, ‘data2’)
260
How do you get back the row being inserted into a table without a separate select statement?
returning clause
261
How do you update rows in a database table?
update statement followed by the name of the table
then the set clause followed by the name of the column and then the value
then a where clause to specify which one to update.
update “products”
set “price” = 100.
262
Why is it important to include a where clause in your update statements?
it will update every row that has the targeted column name, unless you specify what row to update.
263
How do you delete rows from a database table?
delete from statement followed by name of table
then a where clause to specify which thing to delete
WARNING if a where statement is omitted, then the whole table will be deleted. this action cannot be undone.
264
How do you accidentally delete all rows from a table?
omit a “where” statement
265
What is a foreign key?
an identifier that allows you to refer to specific rows in another table.
266
How do you join two SQL tables?
select “name of data you want”
from “table name”
join “second table name” using (“name of foreign key column”);
267
How do you temporarily rename columns or tables in a SQL statement?
use the keyword ‘as”
select “products”.”name” as “product”
this takes the name column of the products table and renames the ‘name’ column to ‘product’ when you join two tables.
268
What are some examples of aggregate functions?
max()
avg()
array_agg()
count()
269
What is the purpose of a group by clause?
to return a value based off of an entire group.
270
What are the three states a Promise can be in?
Pending: initial state, neither fulfilled or rejected
Fulfilled: operation was successful
Rejected: operation failed
271
How do you handle the fulfillment of a Promise?
use the “then()” method and pass a callback as the first argument for what to do when the promise is fulfilled
272
How do you handle the rejection of a Promise?
use the “then()” method and pass a callback as the second argument for what to do when the promise is rejected.
you can also use a catch() method which ‘catches’ any failures and performs whatever callback function is called when a promise fails
use console.error (error.message) to console log a custom error message when a promises is rejected.
273
What is Array.prototype.filter useful for?
creating a new array by picking out elements from another array that pass the function requirements.
274
What is Array.prototype.map useful for?
performing a function on each array element and adding the return to a new array.
275
What is Array.prototype.reduce useful for?
combining elements of an array into a single value.
276
What is "syntactic sugar"?
language that is designed to look nicer and easier to read
277
What is the typeof an ES6 class?
function.
278
Describe ES6 class syntax.
```
class keyword followed by name of class in with capital letter
class Person {}
call the constructor function with an argument of what you want
constructor(name) {}
within constructor function assign argument to this.argumentName (eg this.height =height)
close the constructor function
define the method you want to assign to the class
getName() {}
within the method, return the this statement.
```
```
Ex class Rectangle (
constructor(height, width) {
this.height =height
this.width = width
}
)
```
279
What is "refactoring"?
restructuring code without changing the behavior. Intended to improve design (similar to syntactic sugar)
280
What is Webpack?
a tool that lets you bundle your JavaScript modules. Handles modules and resources and assets at the same time.
it is a module bundler.
allows you to handle modules within node and npm.
a way that makes sure your modules work with whatever stack you are using.
281
How do you add a devDependency to a package?
after install you add --save-dev
282
What is an NPM script?
a script of code that npm will run when npm run is initiated
| commands you can make npm do
283
How do you execute Webpack with npm run?
npm run followed by the name of the property whose value is assigned as “webpack”
284
How are ES Modules different from CommonJS modules?
instead of require() and module.export, ES modules use declarative syntax (eg import, export)
ES6 modules are a part of the JavaScript language, CommonJS is not.
They are both ways to package js modules
285
What kind of modules can Webpack support?
```
ECMAScript
CommonJS
AMD
Assets
WebAssembly
```
286
What is React?
a declarative JavaScript library for building UI
287
What is a React element?
a lightweight description of what to render. An object.
| a plain object describing a component instance or DOM node and its desired properties
288
How do you mount a React element to the DOM?
ReactDOM.render()
289
What is Babel?
a toolchain that converts ES 2015+ into backwards compatible versions of JS in older browsers
a JS compiler
290
What is a Plug-in?
software component that adds a specific feature to an existing program
291
What is a Webpack loader?
loaders transform a modules source code and turn them into JavaScript.
292
How can you make Babel and Webpack work together?
install babel-loader as a devdependency
293
What is JSX?
a syntax extension of JavaScript. Lets you describe what a UI should look like. Allows you to combine logic and markup into one file
294
Why must the React object be imported when authoring JSX in a module?
JSX makes calls to the react object. JSX translates the input into react language and then calls the react object.
295
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
connecting them with babel loader, then adding the jsx transform into bable
install the @babel/plugin-transform-react-jsx as a devdependency
296
What is a React component?
similar to JS functions, they take in input and return a React element.
297
How do you define a function component in React?
```
similar to JS function definition
function keyword, name of function with a capital letter, parameters
inside code block return the JSX element you want React to display.
ex function Welcome(props) {
return
Hello, {props.name}
} ```
298
How do you mount a component to the DOM?
angle brackets, with the name of the component along with any props
ie const element =
the Welcome component is called with the prop.name set to Sara
props is an object that holds all the key value pairs that are inserted after the component.
299
What are props in React?
props are object key value pairs that can be passed as arguments in JSX components.
300
How do you pass props to a component?
you create an object and store the values inside that object.
301
How do you write JavaScript expressions in JSX?
surround the expression within curly braces {}
302
How do you create "class" component in React?’
class keyword followed by the name of the class and then you extend the React.Component. Followed by opening code block with a render method definition and then a return statement with the React element you want to display.
303
How do you access props in a class component?
this.props.name
304
What is the purpose of state in React?
to let React know when a component has changed and therefore needs to re-rendered.
to keep track of values that change over time
305
How to you pass an event handler to a React element?
you pass the event attribute and assign it a JavaScript expression (within curly braces) that holds the name of the event handler (method without the parenthesis)
eventName = {eventFunction}
306
What Array method is commonly used to create a list of React elements?
map method
307
What is the best value to use as a "key" prop when rendering lists?
a string that uniquely identifies that object.
308
What are controlled components?
components that maintain their own state and update it based on user input
eg input, textarea, select
309
What two props must you pass to an input for it to be "controlled"?
onChange and value
310
What does express.static() return?
returns a middleware function
| all the files that are within the specified folder/filepath that was given as an argument
311
What is the local __dirname variable in a Node.js module?
gives you the directory of the current module
| absolute path of the directory to current module
312
What does the join() method of Node's path module do?
joins all path segments into one
| ie every argument passed will become a path segment that it creates
313
What does fetch() return?
a promise that resolves with a Response object which represents the entire HTTP response (which has a JSON body content)
314
What is the default request method used by fetch()?
GET
315
How do you specify the request method (GET, POST, etc.) when calling fetch?
within the second argument as an object
| eg {method: ‘GET’}
316
When does React call a component's componentDidMount method?
immediately after a component is mounted (ie inserted into the tree)
after the render method
only happens one time after the first successful render
317
Name three React.Component lifecycle methods.
constructor
render
componentDidMount
componentDidUpdate
318
How do you pass data to a child component?
via constructor props.
319
What must the return value of myFunction be if the following expression is possible? myFunction()();
another function
320
What does this code do? const wrap = value => () => value;
returns the anonymous function which then returns the value variable
When pass an argument into wrap and assign the return to a variable, then call that new variable with the new
321
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
definition (every function)
322
What allows JavaScript functions to "remember" values from their surroundings?
closures (the combination of a function and the lexical environment within that functions declaration)
the environment is any local variables that were ‘in-scope’ when the closure was created
when the function runs, it creates a reference to that lexical environment within the variable that it is stored in.
323
What does the acronym LIFO mean?
Last In First Out
324
What methods are available on a Stack data structure?
push, pop, peek, print
325
What must you do to access the value at an arbitrary point in a stack (not just the "top")?
keep popping the top of a stack off
326
What does the acronym FIFO mean?
first in first out
327
What methods are available on a Queue data structure?
enqueue, peek, dequeue, print
328
What must you do to access the value at an arbitrary point in a queue (not just the "front")?
dequeue from the front until you reach the arbitrary point
329
How are linked lists different from an array?
linked lists are sequential access and not random (arrays are random) meaning that you always need to start from the beginning and go through each node to get to a specific node.
330
How would you access an arbitrary node in a linked list (not just the "head")?
jump through each node using ‘next’ until you are at the node you want.
