Javascript Flashcards
1
Q
What are objects used for?
A
In JavaScript, an object is a standalone entity, with properties and type. An object is a collection of related data and/or functionality. Objects can be used for data models
2
Q
What are object properties?
A
A property of an object can be explained as a variable that is attached to the object. The properties of an object define the characteristics of the object.
3
Q
Describe object literal notation.
A
opening and closing curly brace
4
Q
How do you remove a property from an object?
A
delete operator followed by object.property
5
Q
What are the two ways to get or update the value of a property?
A
bracket or dot notation: object.property or object[property]
6
Q
What is the purpose of variables?
A
To store values to the variable so we can reuse it
7
Q
How do you declare a variable?
A
var keyword variableName
8
Q
How do you initialize (assign a value to) a variable?
A
= (assignment operator) valueOfVariable (on right of variable declaration)
9
Q
What characters are allowed in variable names?
A
numbers, letters, $, period, underscore
10
Q
What does it mean to say that variable names are “case sensitive”?
A
Variable names must be cased consistently
11
Q
What is the purpose of a string?
A
To be used with text
12
Q
What is the purpose of a number?
A
To be used with calculations, to store numerical values
13
Q
What is the purpose of a boolean?
A
On/off switch. To determine to run script or not. Useful when code has multiple paths
14
Q
What does the = operator mean in JavaScript?
A
Assigment operator, assigns value to variable
15
Q
How do you update the value of a variable?
A
variableName = newValue;
16
Q
What is the difference between null and undefined?
A
Null- intentional absence of value by user
Undefined- value does not exist according to computer
17
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
Gives value context and indicates what that value is
18
Q
Give five examples of JavaScript primitives.
A
string, number, boolean, undefined, null
19
Q
What data type is returned by an arithmetic operation?
A
number
20
Q
What is string concatenation?
A
Joining strings end to end with + operator
21
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
Addition and concatenation
22
Q
What data type is returned by comparing two values (, ===, etc)?
A
boolean
23
Q
What does the += “plus-equals” operator do?
A
The += operator adds the value on its right to the variable or property on its left, and assigns the result to the variable or property on its left
24
Q
What are arrays used for?
A
To store a collection of data
25
Describe array literal notation.
var variableName = [];
26
How are arrays different from "plain" objects?
Objects contain properties related to the object and functions (methods).
Arrays are a collection of data
27
What number represents the first index of an array?
0
28
What is the length property of an array?
The length property of an object which is an instance of type Array, sets or returns the number of elements in that array
29
How do you calculate the last index of an array?
subtract 1 for the value returned from array.length
30
What is a function in JavaScript?
A set of statements that performs a task or calculates a value. Takes some input (arguments) and returns an output
31
Describe the parts of a function definition.
function keyword, optional function name, parameters, curly braces for code block, return statement
32
Describe the parts of a function call.
functionName(arguments)
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
In a function call, the function is being executed and arguments are passed into the parameter field to return an output. In a function definition, no output is being generated and the function keyword is used to define the function and there is a code block of statements
34
What is the difference between a parameter and an argument?
Arguments are the values being passed into parameters. Parameters are like placeholders
35
Why are function parameters useful?
They let you know how many inputs are required and depending on the name, the context of the values that should be passed into the function
36
What two effects does a return statement have on the behavior of a function?
To end the function and to generate an output/result
37
Why do we log things to the console?
To check the output of our functions/methods
38
What is a method?
A method is a programmed procedure that is defined as part of a class and included in any object of that class. A function defined within an object
39
How is a method different from any other function?
A method and function are both a set of instructions. A method is associated with an object while a function is not. Example: the push method is associated with array literals but not strings.
40
How do you remove the last element from an array?
array.pop();
41
How do you round a number down to the nearest integer?
Math.floor();
42
How do you generate a random number?
Math.random()
43
How do you delete an element from an array?
array.splice(index of unwanted element, #of elements you want removed starting from that index)
44
How do you append an element to an array?
array. push()
| array. unshift()
45
How do you break a string up into an array?
string.split(delimiter/pattern you want the string split at);
ex: var str = "Crocodiles are super scary"
var array = str.split(" "); //splits at every space
array = [Crocodiles, are, super, scary]
46
Do string methods change the original string? How would you check if you weren't sure?
No they do not change the original string. Strings are immutable, cannot be added onto or deleted. We can check by console logging 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. They're useful when the situation has a need for it. Ex. In financial calculations dealing with dollars and cents, calling the math.floor() function would lead to a lot of inaccuracies
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?
boolean data type
53
What is the purpose of an if statement?
It is for decision-making for guiding the program to follow a certain path depending on whether a condition has been met or not
54
Is else required in order to use an if statement?
No, if the condition is not met, you will naturally be exited out of the if-statement
55
Describe the syntax (structure) of an if statement.
```
keyword if (condition) {
code block
}
```
56
What are the three logical operators?
&& and (returns true if all anded values are also true)
|| or (returns true if at lease one or-ed value is true)
! not
57
How do you compare two different expressions in the same condition?
put each expression in set of parenthesis
58
What is the purpose of a loop?
Loops allow you to repeat a process over and over without having to write the same (potentially long) instructions each time you want your program to perform a task
59
What is the purpose of a condition expression in a loop?
the condition of a loop marks a stopping point.
60
What does "iteration" mean in the context of loops?
One iterations is one completed loop, one run-through of the code
61
When does the condition expression of a while loop get evaluated?
In the beginning, before each iteration
62
When does the initialization expression of a for loop get evaluated?
When the loop starts, before anything else. One time
63
When does the condition expression of a for loop get evaluated?
Every time the loop runs. Before the code block inside the loop is executed. Before each time the loop iterates
64
When does the final expression of a for loop get evaluated?
Each time after the code block is executed. After each iteration of the loop, before the condition is checked
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?
It increments the value of the variable by one. Reassigns, substitutes the value in place of the original value
67
How do you iterate through the keys of an object?
For In loop.
| For (var x in object) {code block}
68
Why do we log things to the console?
To check for errors, to make sure our functions and code is returning the desired values
69
What is a "model"?
A model is called a DOM tree and it is stored in the browsers' memory. Models are made of objects and nodes
70
Which "document" is being referred to in the phrase Document Object Model?
the HTML page
71
What is the word "object" referring to in the phrase Document Object Model?
the datatype object
72
What is a DOM Tree?
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
73
Give two examples of document methods that retrieve a single element from the DOM.
getElementById()
| querySelector()
74
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName()
| querySelectorAll()
75
Why might you want to assign the return value of a DOM query to a variable?
You might need to access an element more than once. It's more efficient to store a value in a variable because the browser doesn't need to look through the DOM tree to find the same element again
76
What console method allows you to inspect the properties of a DOM element object?
console.dir();
77
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to load all the HTML and CSS before the JavaScript code can access them
78
What does document.querySelector() take as its argument and what does it return?
a css selector in between quotes. It returns only the first of the matching elements
79
What does document.querySelectorAll() take as its argument and what does it return?
a css selector in between quotes. It returns all the element that have that match.
80
What is the purpose of events and event handling?
To trigger a particular function, for greater user interactivity with the web application
81
Are all possible parameters required to use a JavaScript method or function?
no
82
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
83
What is a callback function?
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
84
What object is passed into an event listener callback when the event fires?
event object with all data about whatever occurred/describes the event
85
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The element the event happened on.
The element node that is being checked for the occurrence of an event.
console log event.target
86
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
When a function has no arguments, it does not receive any data from the calling function
87
What is the className property of element objects?
The className property of the Element interface gets and sets the value of the class attribute of the specified element
88
How do you update the CSS class attribute of an element using JavaScript?
document.querySelector('name')
| elementNodeReference.className = '.class-name';
89
What is the textContent property of element objects?
The textContent property of the Node interface represents all the text content of the node and its descendants.
90
How do you update the text within an element using JavaScript?
query for element
| elementNode.textContent = 'text';
91
Is the event parameter of an event listener callback always useful?
No. Ex: call back function argument in addEventListener method
92
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. Javascript functionality should be reliant on data stored in javascript
93
Why is storing information about a program in variables better than only storing it in the DOM?
for later reuse, to reference back to the values stored in the variables. For efficiency
94
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
95
Give four examples of CSS transform functions.
translateY, rotate, skew, scale
96
What event is fired when a user places their cursor in a form control?
focus event
97
What event is fired when a user's cursor leaves a form control?
Blur event
98
What event is fired when a user's cursor leaves a form control?
input event
99
What event is fired when a user clicks the "submit" button within a ?
submit event
100
What does the event.preventDefault() method do?
The preventDefault() prevents the default action of an event
101
What does submitting a form without event.preventDefault() do?
It makes the form values clear from the fields?
102
What property of a form element object contains all of the form's controls.
elements property
103
What property of a form control object gets and sets its value?
value property
103
What is one risk of writing a lot of code without checking to see if it works so far?
You have no idea at what point in the code things went wrong. You don't know what the values are in essential variables.
103
What is an advantage of having your console open when writing a JavaScript program?
You can see what is happening at any line of code. You can see whether your code is doing what it's supposed to be doing each step of the way.
103
Does the document.createElement() method insert a new element into the page?
No, it creates an element node in the dom tree. It creates a javascript object but it is not visible in the html page.
104
How do you add an element as a child to another element?
parentElement.appendChild(childElement);
105
What do you pass as the arguments to the element.setAttribute() method?
setAttribute('attributeName', 'attributeValue')
106
What steps do you need to take in order to insert a new element into the page?
var someEl = document.createElement('element');
var elText = document.createTextNode('text');
someEl.appendChild(elText);
find the parent (querySelector('parentEl');
parentEl. appendChild(someEl);
107
What is the textContent property of an element object for?
The textContent property of the Node interface represents the text content of the node and its descendants. It is useful when you only want to change the content of an already existing element. To get and set text content
108
Name two ways to set the class attribute of a DOM element.
className property, setAttribute() method
109
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You can test the function easily and pass values into to see the output. Reuse the code easily.
110
What is a method
a special kind of property that has a function
111
The transition property is shorthand for which four CSS properties?
transition-delay - how long to wait to start transition
transition-duration - how long the animation time is
transition-property - sets the CSS properties to which a transition effect should be applied.
transition-timing-function - sets how intermediate values are calculated for CSS properties being affected by a transition effect (ease-in steps)
112
What is the event.target?
The element the event happened on
113
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event flow- the order in which the events fire.
| Event bubbling: the event starts at the most specific node and flows outwards to the least specific one
114
What DOM element property tells you what type of element it is?
event.target.tagName
115
What does the element.closest() method take as its argument and what does it return?
It takes in the desire selector string. It finds the closest ancestor node that matches the selector string
116
How can you remove an element from the DOM?
elementNode.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?
wrap the clickable element in a parent element. Put the listener on the parent element. Whenever the child is clicked, the listener on the parent will recognize that event. Event delegation
118
What is the event.target?
The element that triggered the event
119
What is the affect of setting an element to display: none?
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist), removed from document flow. All descendant elements also have their display turned off.
120
What does the element.matches() method take as an argument and what does it return?
The matches() method checks to see if the Element would be selected by the provided selectorString -- in other words -- checks if the element "is" the selector. The argument is the selector string. The return is a boolean
121
How can you retrieve the value of an element's attribute?
element.getAttribute(attributeName)
122
At what steps of the solution would it be helpful to log things to the console?
Every step
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?
createElement(), add textContent, appendChild, className
| you would have to addEventListener to each 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?
You would set a condition for every "view". You'd get the view's index and check if it was either 'css', 'html', or 'javascript' and change the classes if it happened to meet the specified value.
125
What is JSON?
JSON is a text-based data format following JavaScript object syntax
JavaScript object notation
126
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
127
Why are serialization and deserialization useful?
Transfer things across the network and save to harddrive
128
How do you serialize a data structure into a JSON string using JavaScript?
You write your code following JSON structure (quotes). JSON.stringify()
129
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
130
How to you store data in localStorage?
localStorage.setItem('key', 'keyValue');
131
How to you retrieve data from localStorage?
localStorage.getItem('key');
132
How to you store data in localStorage?
localStorage.setItem('key', 'keyValue');
133
What data type can localStorage save in the browser?
string
134
When does the 'beforeunload' event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded. Before the window is closed?
135
What is a method?
A method is a function which is a property of an object
136
How can you tell the difference between a method definition and a method call?
A method definition has the function keyword and the function code block. A method call only has the method name and any arguments it might require
137
Describe method definition syntax (structure).
a method definition is stored in property of an object. The object is first defined, within the object definition is the method definition. The method name is the property then there's a colon, the function key word, the parameter list, then the function code block
138
Describe method call syntax (structure).
Object.method(arguments)
139
How is a method different from any other function?
Since a method is a function that is a property of an object, no other objects can call a method that belongs to another object
140
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods)
141
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
142
What is "abstraction"?
Being able to work with (possibly) complex things in simple ways.
Ex: Automatic gear shifting, turning on/off lightbulbs
143
What does API stand for?
Application programming interface
144
What is the purpose of an API?
In fact, the purpose of every software API is to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction. A way to use complex behaviors without seeing the inner workings. People can still use it without really know how it works
145
What is "this" in JavaScript?
It's an implicit parameter, meaning that it is available in a function's code block even though it was never included in the function's parameter list or declared with var
146
What does it mean to say that this is an "implicit parameter"?
it is available in a function's code block even though it was never included in the function's parameter list or declared with var. We can use it even when it is not explicitly defined
147
When is the value of this determined in a function; call time or definition time?
Call time
148
How can you tell what the value of this will be for a particular function or method definition?
You won't be able to tell until it the function or method is called
149
How can you tell what the value of this is for a particular function or method call?
look to the left of the period when the method is called. If there is nothing on the left of the period/ the function is being called by itself, 'this' refers to the global object window.
150
What kind of inheritance does the JavaScript programming language use?
JavaScript includes a specific kind of inheritance known as prototype-based (or prototypal) inheritance
151
What is a prototype in JavaScript?
JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
152
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?
Instead, those methods are defined on a "prototype" object and arrays simply borrow those methods when they're needed
153
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
prototype object
154
What does the new operator do?
The new operator 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.
155
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
156
What does the instanceof operator do?
The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.
157
What is a client?
A client is a piece of software or hardware that requests a service or resource.
158
What is a server?
A server is a provider of a service or resource. They serve the client
159
Which HTTP method does a browser issue to a web server when you visit a URL?
The GET method
160
What three things are on the start-line of an HTTP request message?
1. An HTTP method, a verb (like GET, PUT or POST) or a noun (like HEAD or OPTIONS), that describes the action to be performed.
2. The request target, usually a URL, or the absolute path of the protocol, port, and domain are usually characterized by the request context.
3. The HTTP version, which defines the structure of the remaining message, acting as an indicator of the expected version to use for the response
161
What three things are on the start-line of an HTTP response message?
1. The protocol version, usually HTTP/1.1.
2. A status code, indicating success or failure of the request.
3. A status text. A brief, purely informational, textual description of the status code to help a human understand the HTTP message.
162
What are HTTP headers?
HTTP headers for responses follow the same structure as any other header: a case-insensitive string followed by a colon (':') and a value whose structure depends upon the type of the header.
163
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN (?)
164
Is a body required for a valid HTTP request or response message?
No, responses with a status code that sufficiently answers the request without the need for corresponding payload usually don't.
165
What is AJAX?
Ajax refers to a group of technologies that offer asynchronous functionality in a browser. Ajax is being implemented when we only want to update one part of the page (without affecting the rest of the page)
166
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
167
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
168
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
169
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototype inheritance
170
What is a "callback" function?
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.
171
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?
The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.
172
How can you set up a function to be called repeatedly without using a loop?
```
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().
```
173
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
Defaults to 0 if not specified.
174
What do setTimeout() and setInterval() return?
- setTimeout() return a timeoutID which is a positive integer value which identifies the timer created by the call to setTimeout(). This value can be passed to clearTimeout() to cancel the timeout.
- setInterval() returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().
175
What is a code block? What are some examples of a code block?
A code block is the group of statements enclosed by curly bracs { }.
Examples: If-else, For loops, For In loops, While loops
176
What does block scope mean?
This scope restricts the variable that is declared inside a specific block, from access by the outside of the block.
The variable can only be accessed within the block containing it
177
What is the scope of a variable declared with const or let?
block scope
178
What is the difference between let and const?
variables declared with let can be reassigned, but those declared with const cannot be reassigned. The const keyword creates a read-only reference to a value. However, it doesn’t mean that the actual value to which the const variable reference is immutable.
179
Why is it possible to .push() a new value into a const variable that points to an Array?
Although the const keyword creates a read-only reference to a value, the actual value is not immutable. The variable is read-only but the value the variable is referencing isn't immutable. For example, for an object variable declared with the const keyword, the object can't be "re-written". However, the value of the object's property can be changed by accessing the value of the property and assigning it a new value.
180
How should you decide on which type of declaration to use?
If a variable's value will need to be reassigned change, use let.
If not, use const.
181
What is the syntax for writing a template literal?
Surround the string with backticks ` ` . Using backticks lets us use single or double quotes freely without escaping them
182
What is "string interpolation"?
Substituting the value of a variable or expression within the template literal. This can be done by placing the variable or expression inside a code block: ${ }
183
What are some features of the template literal?
- A multiline string: a string that can span multiple lines.
- String formatting: the ability to substitute part of the string for the values of variables or expressions. This feature is also called string interpolation.
- HTML escaping: the ability to transform a string so that it is safe to include in HTML.
184
What is destructuring, conceptually?
Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables.
185
What is the syntax for Object destructuring?
var, let, or const keyword followed by curly braces wtih key names (property names) followed by the assignment operator = and the object you are destructuring from
186
What is the syntax for Array destructuring?
var, let, or const keyword followed by square brackets with a comma separated list of elements you want to destructure followed by the assignment operator = followed by the array you are destructuring from
187
How can you tell the difference between destructuring and creating Object/Array literals?
Destructuring has the braces and brackets on the left side of the assignment operator and the object/array name of the right side.
Creating an object/array has the name on the left side and the braces/brackets on the right side.
188
What is the syntax for defining an arrow function?
(parameter list) => expression OR { code block };
189
When an arrow function's body is left without curly braces, what changes in its functionality?
Without the curly braces, the return is implicit. With the curly braces, the return must be explicitly stated.
190
How is the value of this determined within an arrow function?
Unlike an anonymous function, an arrow function captures the this value of the enclosing context instead of creating its own this context.
When 'this' is inside of a function, either stand alone or within another method, it will always refer to the window/global object.
It means that the arrow function uses these variables (or constructs) from the enclosing lexical scope.
The value of this is determined in function definition for arrow functions
191
What is a CLI?
A command line interface processes commands to a computer program in the form of lines of text. Provides a means to pass commands to your computer through the prompt.
192
What is a GUI?
A graphical user interface is a form of user interface that allows users to interact with electronic devices through icons, buttons, elements that are visually easy to understand. Ex. a common calculator app
193
```
Give at least one use case for each of the commands listed in this exercise.
man
cat
ls
pwd
echo
touch
mkdir
mv
rm
cp
```
man - pulls up the system references manual. To look up commands
cat - concatenates files and prints them out on the interface. Displaying the contents of multiple files
ls - list the directory contents. To view the contents of a folder
pwd - prints the name of the current working directory. To get the full path of the current directory
echo - display a line of text. To display text and write it into another destination
touch - change file timestamps.
mkdir - make a directory. Create a child or parent directory
mv - move or rename a file.
rm - remove file or directory. To delete a file or folder
cp - copy files and directory. Make a copy of a file
194
What are the three virtues of a great programmer?
Laziness, impatience, hubris
195
What is Node.js?
Node.js is a program that allows JavaScript to be run outside of a web browser.
196
What can Node.js be used for?
It is commonly used to build back ends for Web applications, command-line programs, or any kind of automation that developers wish to perform.
197
What is a REPL?
Read-eval-print-loop: An interactive programming environment that takes a single user input, executes it, and returns the result to the user. It is a loop because it waits for another input.
198
When was Node.js created?
May 27, 2009
199
What back end languages have you heard of?
PHP, C# (.net), Java, Python, ruby, perl, sql, typescript, go, haskell
200
What is the difference between scripting languages and compiled languages?
Scripting languages are interpreted in real time. Also, compilers read and analyze the code only once, and report the errors collectively that the code might have, but the interpreter will read and analyze the code statements each time it meets them and halts at that very instance if there is some error.
201
What is a computer process?
a process is the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.
201
What is a computer process?
a process is the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.
202
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
~500
203
Why should a full stack Web developer know that computer processes exist?
So your app doesn't have high cpu and slow down the user's computer
204
What is the process object in a Node.js program?
The process object is a global that provides information about, and control over, the current Node.js process. As a global, it is always available to Node.js applications without using require(). It can also be explicitly accessed using require():
A model of the current node.js program
205
How do you access the process object in a Node.js program?
Process object is global so it can be accessed by name
206
What is the data type of process.argv in Node.js?
an array string
207
What does the array.map() method do?
```
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
const array1 = [ 1, 4, 9, 16 ];
```
```
// pass a function to map
const map1 = array1.map( x => x * 2 );
```
```
console.log(map1);
// expected output: Array [ 2, 8, 18, 32 ]
```
208
What is a JavaScript module?
A JavaScript module is a single js file. It contains code to perform a specific task/function when called into a larger application.
209
What values are passed into a Node.js module's local scope?
exports, require, module, __filename, __dirname
210
Give two examples of truly global variables in a Node.js program.
process and global
| The global object is all the global variables of the object.
211
What is an anonymous function?
Anonymous Function is a function that does not have any name associated with it. Normally we use the function keyword before the function name to define a function in JavaScript, however, in anonymous functions in JavaScript, we use only the function keyword without the function name.
212
What is a module wrapper function in the context of node.js?
```
Under the hood, NodeJS does not run our code directly, it wraps the entire code inside a function before execution. This function is termed as Module Wrapper Function.
By wrapping the module in a wrapper function, the top-level variables declared with var, const, or let are scoped to the module rather than to the global object. Also global looking variables such as
the module and exports object can be used to export values from the module.
The variables like __filename and __dirname are also scoped to the module.
```
213
What is the purpose of module.exports in a Node.js module?
Module exports are the instruction that tells Node. js which bits of code (functions, objects, strings, etc.) to “export” from a given file so other files are allowed to access the exported code.
214
How do you import functionality into a Node.js module from another Node.js module?
```
With the require function
require('module path')
```
215
What is the JavaScript Event Loop?
The event loop is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
The event loop is a constantly running process that monitors both the callback queue and the call stack.
If the call stack is not empty, the event loop waits until it is empty and places the next function from the callback queue to the call stack. If the callback queue is empty, nothing will happen
on stack > API pool> on callback queu > on stack > pop off stack > next task on stack
216
What is different between "blocking" and "non-blocking" with respect to how code is executed?
Blocking: It refers to the blocking of further operation until the current operation finishes. Blocking methods are executed synchronously. Synchronously means that the program is executed line by line. The program waits until the called function or the operation returns. Code that is blocking is on the stack and no other tasks can be completed until the stack is clear.
Non-Blocking: It refers to the program that does not block the execution of further operations. Non-Blocking methods are executed asynchronously. Asynchronously means that the program may not necessarily execute line by line. The program calls the function and move to the next operation and does not wait for it to return. Code that is anywhere but the stack
217
What is a directory?
A file system that contains references to other files, and possibly other directories.
218
What is a relative file path?
A relative path is a way to specify the location of a directory relative to another directory.
219
What is an absolute file path?
An absolute path refers to the complete details needed to locate a file or folder, starting from the root element and ending with the other subdirectories.
220
What module does Node.js include for manipulating the file system?
fs
221
What method is available in the Node.js fs module for writing data to a file?
writeFile
222
Are file operations using the fs module synchronous or asynchronous?
asynchronous unless the method has 'sync' in the name
223
What is a client?
A piece of software or hardward that initiates a request for a service to a server
224
What is a server?
A piece of software of hardware that receives requests and provides a service to its client or clients
225
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
226
What is on the first line of an HTTP request message?
An http method (GET, PUT, POST), the request target (absolute url or absolute path; depends on the method used), the http version
227
What is on the first line of an HTTP response message?
The http protocol version (usually HTTP/1.1), the status code that indicates whether the request succeeded or failed, and the status text (a short description that helps humans understand the status code)
228
What are HTTP headers?
HTTP headers give more details about the request and the body included in the message. It is made up of a case sensitive string followed by a colon and value that depends on the header. There are general headers (ex: via; applies to the message as a whole), request headers (ex: Accept-Language), and representation headers (ex: Content-Type).
229
Is a body required for a valid HTTP message?
No, it depends on the method being used. Ex: Some requests need to send data to the server using POST (form related data)
230
What is a host?
A piece of hardware that runs a server and/or client program.
231
What is the internet? What is the web?
232
Give an example of a request over netcap
232
Give an example of a request over netcap
nc example.com 80
GET / HTTP/1.1
Host: example.com
233
How does HTTPie work?
1. Enter a HTTPie command on the terminal
2. The request is assembled (start-line). Internet connection is established.
3. The request is sent
4. The server receives request
5. The server send back a response
6. HTTPie prints the response to the terminal
234
What is NPM?
npm is the world's largest software registry. It is used to share and borrow packages. With npm you can share your code and other people's code, incorporate packages to your apps. website, command line interface, registry.
235
What is a package?
A package is a file or directory that is described by a package.json file.
a) A folder containing a program described by a package.json file.
b) A gzipped tarball containing (a).
c) A URL that resolves to (b).
d) A @ that is published on the registry with (c).
e) A @ that points to (d).
f) A that has a latest tag satisfying (e).
g) A git url that, when cloned, results in (a).
236
How can you create a package.json with npm?
To create a default package.json go to your root directory for your package, then use the npm init command with the --yes or -y flag.
npm init --yes
237
What is a dependency and how to you add one to a package?
Packages required by your application in production. Code that relies on other code to work properly.
npm install < package name >
238
What happens when you add a dependency to a package with npm?
Downloads the dependencies and puts it in the node-modules directory. The dependencies are updated on the package.json file
239
How do you add express to your package dependencies?
npm install express
240
What Express application method starts the server and binds it to a network PORT?
listen - Binds and listens for connections on the specified host and port. This method is identical to Node’s http.Server.listen().
241
How do you mount a middleware with an Express application?
use method
Bind application-level middleware to an instance of the app object by using the app.use() and app.METHOD() functions, where METHOD is the HTTP method of the request that the middleware function handles (such as GET, PUT, or POST) in lowercase.
242
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req and res
243
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
Content-Type: application/json; charset=utf-8
244
What does the express.json() middleware do and when would you need it?
This is a built-in middleware function in Express. It parses incoming requests with JSON payloads and is based on body-parser.
Returns middleware that only parses JSON and only looks at requests where the Content-Type header matches the type option. This parser accepts any Unicode encoding of the body and supports automatic inflation of gzip and deflate encodings.
A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body), or an empty object ({}) if there was no body to parse, the Content-Type was not matched, or an error occurred.
245
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a free, open source Relational Database Management System (RDBMS) with robust feature set, standards compliance, and reliability.
Some alternative relational databases are MySQL and SQL Server
246
What are some advantages of learning a relational database?
they support good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible. This means that developers can set up their database to reject "bad" data and not worry about data being "half written". A lot of apps use data
247
What is one way to see if PostgreSQL is running?
Open a new terminal and enter the 'top' command or the 'sudo service postgresql status'
248
What is a database schema?
A database schema is a collection of tables. A schema defines how the data in a relational database should be organized.
249
What is a table?
A table is a list of rows each having the same set of attributes
250
What is a row?
You might visualize a database table as a sort of spreadsheet where each row is a record in that spreadsheet
251
What is SQL and how is it different from languages like JavaScript?
Structured Query Language (SQL) is the primary way of interacting with relational databases. It is a powerful way of retrieving, creating, and manipulating data in a relational database. SQL is a declarative language whereas JavaScript is an imperative language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.
252
How do you retrieve specific columns from a database table?
select "columnName", "columnName2"
| from "tableName";
253
How do you filter rows based on some specific criteria?
where "columnName" = 'value'
254
What are the benefits of formatting your SQL?
It is easier to read
255
What are four comparison operators that can be used in a where clause?
, =, !=
256
How do you limit the number of rows returned in a result set?
limit < number >
257
How do you retrieve all columns from a database table?
select *
| from "tableName"
258
How do you control the sort order of a result set?
order by "columnName" asc/desc
259
How do you add a row to a SQL table?
insert into "tableName" ("columnName")
| values ('value');
260
What is a tuple?
In a relational database, a tuple is one record (one row) or a list of values that matches columns on a row
261
How do you add multiple rows to a SQL table at once?
Data rows can be batch inserted into a database table by specifying more than one tuple of values, separated by commas. Add another set of values in parantheses
262
How do you get back the row being inserted into a table without a separate select statement?
returning *
263
How do you update rows in a database table?
update from "tableName"
set "columnName" = 'value'
where 'columnName" = 'value'
264
Why is it important to include a where clause in your update statements?
The where clause is used to target specific rows. Without it, you could potentially update all the rows
265
How do you delete rows from a database table?
delete from "tableName"
| where "columnName" = 'value'
266
How do you accidentally delete all rows from a table?
By leaving out the where clause
267
What is a foreign key?
The column name that links two tables together. The tables have a common column name and values
268
How do you join two SQL tables?
join "tableName" using ('foreignKey')
269
How do you temporarily rename columns or tables in a SQL statement?
"columnName" as "tempColumnName"
270
What are some examples of aggregate functions?
max(), sum(), avg(), count()
271
What is the purpose of a group by clause?
To perform aggregate functions on groups of rows. Groups are determined by discernable values in the same column
272
What are the three states a Promise can be in?
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.
273
How do you handle the fulfillment of a Promise?
The associated handlers queued up by a promise's then method are called.
274
How do you handle the rejection of a Promise?
The catch() method returns a Promise and deals with rejected cases only. It behaves the same as calling Promise.prototype.then(undefined, onRejected) (in fact, calling obj.catch(onRejected) internally calls obj.then(undefined, onRejected)).
275
What is Array.prototype.filter useful for?
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
276
What is Array.prototype.reduce useful for?
The reduce() method is good for compiling the elements of an array into a single value
277
What is Array.prototype.map useful for?
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
278
What is "syntactic sugar"?
Syntax within a programming language that is designed to make things easier to read or to express
279
What is the typeof an ES6 class?
a function
280
Describe ES6 class syntax.
```
class keyword followed by className followed by curly braces.
Inside the curly braces there is an optional constructor method being defined where you can initialize the properties of an instance of the class.
```
281
What is "refactoring"?
Changing the structor of existing code while maintaining the same external behavior. Advantages of refactoring include creating cleaner and simpler code
282
What is Webpack?
It's a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.
Webpack is a static module bundler for JavaScript applications — it takes all the code from your application and makes it usable in a web browser.
Combines modules
283
How do you add a devDependency to a package?
npm install < package-name > --save-dev
284
What is an NPM script?
NPM Scripts are a set of built-in and custom scripts defined in the package.json file.
285
How do you execute Webpack with npm run?
add a build property to script object with a value of "webpack"
npm run build
286
How are ES Modules different from CommonJS modules?
Using exports and imports.
ES modules are part of the javascript language now
CommonJS are not part of the javascript language
Don't use require or module.exports
287
What kind of modules can Webpack support?
ES6 modules, commonJS modules, AMD modules, assets, web assembly modules
288
What is React?
React is a JavaScript library for creating user interfaces.
289
What is a React element?
An element describes what you want to see on the screen. Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
290
How do you mount a React element to the DOM?
render() of the react DOM object
291
What is Babel?
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
292
What is a Plug-in?
A software component that adds a specific feature to an existing computer program.
293
What is a Webpack loader?
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. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!
294
How can you make Babel and Webpack work together?
npm install --save-dev babel-loader
295
What is JSX?
a syntax extension to JavaScript used alongside React usually
296
Why must the React object be imported when authoring JSX in a module?
Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.
297
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
connect webpack and babel with babel loader
| install @babel/plugin-transform-react-jsx to convert JSX into valid JavaScript
298
What is a React component?
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen
299
How do you define a function component in React?
The simplest way to define a component is to write a JavaScript function:
```
function Welcome(props) {
return
Hello, {props.name}
; } ```
300
How do you mount a component to the DOM?
pass the return of the component function (react element) as an argument inside ReactDOM.render function call
301
What are props in React?
You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:
302
How do you pass props to a component?
< componentName propName = prop value / >
303
How do you write JavaScript expressions in JSX?
in between curly braces
304
How do you create "class" component in React?
```
class ClassName extends React.Component {
render() {
return (
React Element
)
}
```
305
How do you access props in a class component?
this.props
306
What is the purpose of state in React?
React uses an observable object as the state that observes what changes are made to the state and helps the component behave accordingly. To keep track of values that change over time
307
How to you pass an event handler to a React element?
```
Define the callback function within the class component definition
Bind your event handler in the constructor definition
Assign the callback function to the event prop of the React element in the render() definition block
```
308
What Array method is commonly used to create a list of React elements?
map
309
What is the best value to use as a "key" prop when rendering lists?
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
310
What does express.static() return?
express.static() serves static files (ex images, CSS files, and JavaScript file). It returns an object (?) [Function: serveStatic]
311
What does express.static() return?
express.static() serves static files (ex images, CSS files, and JavaScript file). It returns a middleware function [Function: serveStatic]
312
What is the local __dirname variable in a Node.js module?
The absolute path of the directory of the current module. This is the same as the path.dirname() of the __filename.
313
What does the join() method of Node's path module do?
The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
314
What does fetch() return?
Returns a promise which is fulfilled once the response is available.
The promise resolves to the Response object representing the response to your request.
315
What is the default request method used by fetch()?
GET
316
How do you specify the request method (GET, POST, etc.) when calling fetch?
specify the method in the method property within the second argument of the fetch method
317
When does React call a component's componentDidMount method?
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree), after a component is rendered
- Constructor first
- Then Render with initial state
- componentDidMount 1 time after the first successful render
- componentDidUpdate happens after each subsequent render
318
Name three React.Component lifecycle methods.
constructor(), render(), componentDidMount()
319
How do you pass data to a child component?
Passing it through a prop
320
What is the lifecycle
321
What must the return value of myFunction be if the following expression is possible?
myFunction()();
it returns a function
322
```
What does this code do?
const wrap = value => () => value;
```
Creates a closure with an anonymous function that returns the value of "value"
323
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
When it is defined
324
What allows JavaScript functions to "remember" values from their surroundings?
At function definition, a lexical environment is created for the closure. Within the lexical environment, there can be variables that can be accessed by the inner function because of lexical scope. In closures, the javascript function maintain a reference to its lexical environment
325
What does the acronym LIFO mean?
Last in, first out. The last thing pushed onto the stack is the first thing that can be poped out.
326
What methods are available on a Stack data structure?
push and pop
327
What must you do to access the value at an arbitrary point in a stack (not just the "top")?
you must pop() until you get to the desired point in the stack
328
What does the acronym FIFO mean?
First in first out. The first element that was added is the first element to be removed
329
What methods are available on a Queue data structure?
enqueue(), dequeue()
330
What must you do to access the value at an arbitrary point in a queue (not just the "front")?
dequeue() until you reach the arbitrary point
