javascript Flashcards
1
Q
What is a variable?
A
A keyword that’s used to store data.
2
Q
Why are variables useful?
A
They can be ‘referenced’/re-used Any time and be used over and over again, thus saving time. If you don’t store data in a value (the return), then the computer does the calculations but that’s it. You won’t be able to retrieve that final result when you need it.
3
Q
What two special characters can a variable begin with?
A
‘$’ and ‘_’ dollar and underscore. No dashes or periods in a variable name.
4
Q
How do you declare a variable?
A
The ‘var’ keyword, then an identifier/variable name. One word written in camelCase.
5
Q
How do you assign a value to a variable?
A
Var myVar = value. Equal sign then the value you want to assign.
6
Q
Are variables case sensitive?
A
Yes
7
Q
Which words cannot be used as variable names?
A
Other JS keywords or reserved words. ‘var’, ‘function’, ‘let’, etc. Numbers and symbols (besides $).
8
Q
What is a string?
A
A primitive data type. A grouping of characters.
9
Q
What is the string concatenation operator?
A
+ sign
10
Q
What is the difference when it comes to using single quotes or double quotes (‘ ‘or” “)?
A
There is no difference in javascript, however if you want to use quotes inside of a string, you will have to escape them, or use the opposite (single or double quote) type of quote to surround the string.
11
Q
How do youescapequotation characters?
A
Back slash before the character that needs escaping.
12
Q
What is type coercion?
A
When two different data types are combined and both end up being one data type.
12+’hello’ turns into a string of ‘12hello’
13
Q
What is a number in JavaScript?
A
Primitive data type that is any numeric value.
14
Q
What is an arithmetic operator?
A
Something to perform mathematic equations.
15
Q
Name four of the arithmetic operators?
A
+ - / % * ++ –
16
Q
What is the order of execution?
A
Follows basic math, where multiplication and division happen before addition/subtration. Right hand side of equal sign, then left hand side. Use parenthesis to change order of operations. PEMDAS
17
Q
What is a function?
A
Code that executes a code block. Collection of code that runs as one.
18
Q
Why are functions useful?
A
They are -re-usable blocks of code. Saves time writing the same thing over and over. A way to store steps to be used later, for when functions don’t immediately run on page load.
19
Q
How do you call a function?
A
Write out the function name with parenthesis and any arguments if you need them.
20
Q
What are the parts of a function definition?
A
‘function keyword’, ‘function name’, parenthesis with parameters inside, and curly braces for the code block.
21
Q
What is the difference between a parameter and an argument?
A
The are the same, however, it is a parameter when you are defining a function, and is an argument when when you are calling it.
22
Q
Why is it important to understand truthy and falsy values?
A
So we can properly do comparisons without unintended results.
23
Q
Why is the typeof an objectnull?
A
It’s a bug that is just accepted now because changing it would be the end of the internet.
24
Q
What is the difference between null and undefined?
A
Null is purposefully set by the developer and denotes meaningful space. Undefined is generally an accident and is just straight up nothingness. Does not take up space in the memory.
25
Why do you always use === for comparisons?
Because loose equality == can cause type coercion and give weird results like when comparing 3 == ‘3’.
26
Why do you want to avoid using == for comparison?
Type coercion and unintended results due to it. Like 3 == “3”.
27
Do all if statements require an else statement?
No
28
What is the proper syntax for using the or operator?
Operand 1 || operand 2
29
What is the primary use case for switches?
Comparing an individual value against a range of other individual values. 1 to 1 comparisons.
30
Does the default case have to be at the bottom of the switch statement?
No it does not. It is ‘else’ of switch statements, but doesn’t need to be at the bottom. But for good practice, you should put it at the bottom.
31
What happens if there is no break statement between cases?
It falls through to all subsequent cases and runs the code for each of them until it reaches a break or there are no more cases.
32
What is an object in JavaScript?
A group of variables and functions that create a model.
A collection of properties and methods grouped together.
It points to a memory address that points to where the data is actually stored,. Contrasted to primitive datatypes where the value is stored right at the variable.
33
How do you create an object literal?
```
Literal notation: Var newObject = { };
Object constructor notation: var newObject = new Object();
```
34
What is a property in relation to JavaScript objects?
It tells us about the object, like traits or attributes. A place where we can store data inside of the object.
35
When should you use bracket notation over dot notation with objects?
When the property name is a variable or when the property name is an illegal character, like a space, or if its a number.
36
How do you remove a property from an object?
Delete myObj.myProp or myObj.myProp = “”;
37
What is an array in JavaScript?
An object that stores a list of values that are related to each other. Useful for when you don’t need to specify how many values it will hold. (shopping lists, ingredient lists).
38
How do you create an array literal?
Var myArray = [ ];
39
What are the keys for the values inside an array?
Numbers. Index positions, that start counting from ‘0’. [0].
40
Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?
Objects.
41
What are some good use cases for using objects inside arrays?
School directory, medical patient data base, any database where each index have similar properties. Shopping cart.
42
What is the primary advantage to storing your selected elements in a variable?
You don’t have to type out long dom queries over and over again when modifying them
43
Why might you need JavaScript to modify the DOM after the page loads?
It gives us interactivity with the user. We can update visuals after certain behaviors/actions
For maybe a ‘dark mode’ button on the page that converts all styling from light to dark.
For things like forms: clearing the form after submitting/resetting.
44
How can you better prepare when writing HTML for DOM manipulation in your JavaScript code?
Setting classes and ID’s appropriately? Structure your html (parents and children) in an organized way?
45
How to see all the info about the html document? The DOM, document object model.
Console.dir(document); This is our pathway from JS to the html and how it see’s the html and how will interact with it.
46
What are the differences between innertext and textContent?
similar to textContent but you should avoid it due to some browsers dont support it, it will not show any content that’s hidden by css. It also takes into account layout rules that specify whether the element is visible or not, so it can be slower than .textContent to retrieve content.
InnerText generally shows what you would visually SEE on the html. It doesn’t show hidden stuff. InnerText has to interpret the html AND any CSS that affects it. So it takes longer.
47
What datatype are the values you remove from a text input?
strings
48
Why is it so important to be able to dynamically update text?
So you don’t have waste time and bandwidth to reload the entire page to see changes. So the user can interact with the website. Making changes to the page after a user triggers an input.
49
What are some of the drawbacks of HTML Event Handler Attributes?
They are harder to make edits to later, especially if there are lots of elements with the same function? Makes code harder to read and hard to understand what the event is doing.
50
Why is the Window.event property useful for finding an element which was interacted with?
It shows x and y coordinates of the screen of where the event took place. And also the element that was clicked.
51
Why is the Window.event property to be avoided in new code?
Window.event changes with every single event. The value gets overwritten when a new event occurs. If you wanted to work with values of the event after it occurred, if another event happened in between that time, then you would be working off that new event. You would never know.
52
What is the difference between the getElementById() method and the querySelector() method?
GetElementById() returns the exact element with that ID. QuerySelector() targets the first element (using css selectors) within the document that matches the specified selector or group of selectors.
53
Who passes in the event object into the handleClick callback function?
Javascript automatically does it.
54
Does a callback function require a name?
No. You can have an anonymous function, but you should name them. Not reason not to.
55
What is the purpose of a loop?
To iterate through data quickly and automatically, saving time.
56
Why might there be different kinds of loops?
There may be different situations and conditions for what you need. If you know the exact amount of items you need to loop over, use a for loop. If you don’t know how many items there are, but you know when you need to end use a while loop.
57
What is the purpose of a conditional expression as it relates to loops?
It’s similar to a conditional statement in that, if the conditional statement is true, the code will run.
58
Could a loop potentially go on forever?
Yeah if a condition remains true (sometimes due to user-error syntax), and it will crash your browser.
59
Could a loop never start?
Yes, if the condition doesn’t result to true on the very first run, it will not run the first loop. Exception to this is a ‘do while’ loop, which will run one time.
60
How does a for loop differ from a while loop?
How does a for loop differ from a while loop?
A for loop is for when you know exactly how many items you need to loop over. A while loop is when you don’t know how many items, but you know when it should end. If an array keeps changing, like things getting deleted or added, that’s a good chance to use while loop.
While loops only need a condition. And for loops need a initilization and final expression ( to actually do something )? Watch vod.
61
What potential use cases are there for for loops?
Logging out a recipe/ingredient list. Student list. Todo list?
62
Which pieces of information provided in the parentheses for a for loop are mandatory?
None of them. The semi colons are required though. For (;;) { };
63
What is a for in loop?
A way to iterate through properties of an object.
64
How do you target the value of a property in an object.
Bracket notation. object[variable]
65
When should you use a for in loop?
When you want to loop over an object and do the same action on each property.
Good for debugging purposes, easy way to check the properties of an object (by outputting to console or otherwise). Though arrays are more practical for storing data, there are situations where a key-value pair is preferred (with properties acting as the ‘key’, and there may be instances where you want to check if any of those keys hold a particular value.
66
What is the difference between the parentNode and parentElement properties?
ParentElement will return null if the parent element is not an element. ParentNode will return things like white spaces as parents if a white space is present.
67
Why is it important to be able to traverse the DOM?
Flexibility in being able to target the exact elements you want to.
68
What kind of information is useful to store in custom attributes?
Useful information that describes the element? Easy ways for JS to access the element? Can use those custom attributes in JS to augment the page based on user interaction?
Clicking a fruit might trigger a pop up that shows info stored in a custom attribute like nutritional facts or something
-![]()
69
What are two ways to target elements on the DOM?
.querySelector(), .querySelectorAll(), getElementById(), getElementByTagName(), getElementByName(), getElementByClassName()
70
What is another way to add a text node to an element other than using textContent.
document.createTextNote(‘’) then appending it. InnerText takes out all whitespace. InnerHTML only shows whats visible.
71
How do you create a HTML element using vanilla Javascript?
Document.createElement(‘elementName’);
72
Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?
It saves a lot of time. Not having to repeat yourself. And maybe loads a millisecond faster, no clue?
73
Why are arrays preferred over objects for the functionality referenced in question 1?
Because arrays have order? Arrays are indexed, so you can guarantee order. Objects might not get iterated in order.
74
Why is it important to be able to retrieve and use data from inputs?
It's our communication path with our user. It allows them to interact with the site, and for our site to interact with their actions.
Good for to-do lists or creating notes or something. We can use that data to perform other events and modifications to the dom.
75
Why is it dangerous to assume you have the correct data when creating elements?
Just have to be careful to not mess up your webpage or something, especially if working off of data inputted by the user. If user inputs some sort of malicious code, and you use that code and create an element with it, it could be bad.
76
What is jQuery?
It is a library. It's a JS file that you include in your web pages. It allows you to find elements using CSS-style selectors then do something with the elements using jQuery methods.
77
What is the jQuery selector function?
$() or jQuery().
78
What does the jQuery selector function return?
All elements that match? an Object?
79
Why would someone use jQuery over vanilla JavaScript?
Convenience of faster DOM traversal, and for property chaining. Core JS has everything that jQuery has.
80
What are some downsides from using jQuery over vanilla JavaScript?
It's gonna die out eventually. It kind of departs from the actual original JS language. If you only get good at jQuery and always use it, then once jQuery dies out, you will be screwed.
Load time is also slower because it has to load it's own JS page.
81
Why do we use the tag at the bottom of the body, instead of putting it inside the tag?
Because there are changes to the DOM with JS, it will try to do them before the HTML has even loaded yet and not work.
82
How do you get the text out of an HTML element?
html() or text()
83
How do you get the value out of an HTML input field?
.val()
84
What's the difference between .text() and .html()?
html grabs only from the first element matched, and also includeds all the markup. text grabs text from all matches and includes spaces, but no markup. Also does not include linebreak spaces.
85
What does .on() do?
it is like the eventlistener of jquery.
86
What is event bubbling?
When an event occurs on a target, and then goes up through through all of its ancestors.
87
What is the difference between event.target and event.currentTarget.
event.target is the exact element clicked on, and currentTarget is where the bubbling ends. Example, if clicked a child of a div, it also means that that click happens on the parent div, and every ancestor element it's in.
currentTarget is what you put your eventListener on, but the target is the most immediate thing that you interacted with.
88
What is the first argument the function setTimeout takes?
A function.
89
If the second argument is not passed into the setTimeout function, what is the default value?
1second
90
What are some scenarios where setTimeout can be useful?
Annoying paywall pop ups. Maybe to have something change or pop up when user scrolls down.
91
What does the setInterval function return?
the timer interval that is set as an argument in the setInterval() method.
92
What argument does the clearInterval function take?
the intervalID, which is the name of the variable used to store the setInterval() method
93
What are some scenarios where setInterval can be useful?
A timed quiz? A game? -Watch Vod
94
What is the event loop?
It's the loop in which JS code is called and resolved in a certain order. It consists of the call stack, the webAPI's and the callback queue.
95
What does the term blocking mean?
Code that is slow. When a thread is taking a long time to execute a callback (event loop) or a task (worker), then it is blocked. While a thread is
96
What is the call stack?
The queue and order in which code runs and resolves in JS. Functions get to the top of the stack when called, then popped off the top when there is a return.
97
Which elements in a website are useful to create dynamically?
Elements that are created due to user interaction. Google search, instagram posts, any sort of live feed, shopping carts.
98
Why should you not create all elements dynamically?
It can get very confusing trying to modify and make changes to html skeletons when they are all made with JS. You'd have to inspect your page in a browser and see what attributes it has and the structure, instead of being able to just easily see it in your html file.
99
What is a modal?
A sub window that can pop up and require interaction before returning to the main window. A scripted effect that allows you to overlay a small element over a website. A modal is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. Users are forced to interact with the modal window before returning to parent application.
100
What are some use cases for modals?
- Ads, subscription requests, paywalls, errors, emergency states, amber alerts.
- errors, warnings, data collection, confirm or prompt (remind to do something before moving on), helper (inform users of important information).
101
Why does a modal usually need to occupy the entire height and width of the viewport?
Or else users can interact to the main window behind it?
102
Give two examples of media features that you can query in an @media rule.
max width, min width, min height, max height, color, grid, hover, aspect-ratio, monochrome, orientation, pointer, scan, update.
- Nav list going from horizontal list to a hamburger button. Grid layouts. Changing a flex items' flex-basis based on screen width. Basically any CSS Styling, like fonts, background-colors, background-images...
103
Which HTML meta tag is used in mobile-responsive web pages?
104
Why do we need a single source of truth?
- It is easier to keep track of what is being displayed and what data we store in one place, rather than having to cross reference a bunch of different files.
- It makes changing this data and the DOM easier, when it's all stored in one spot.
- Consistency issues: DOM might be accurately reflecting the more up to date data in the JS data model.
105
Why would I create a function to generate my DOM Element instead of just writing my code in the global scope?
It's easier to change something.
If you wanted to add another property to the data model, or a new object. It's easy, since we have a reusable function that we use to just add it to the DOM.
Easier to modify the data model. Just add a new object then append the code.
106
What is a method?
A function that is a property of an object. They contain a set of instructions that together, represent one task.
107
What does a method do?
Runs a set of instructions on an object.
108
What is this?
- a keyword whose value changes based on where/when a function is called (at runtime). Generally it refers to the object to the left of the '.'. So like myObject.method, where method: function(){console.log(this)} would return myOjbect.
- 'this' refers to the context where the function is being called, not where the function was defined. Is it always an object?
109
What does bind do?
- Set's the 'this' keyword to the provided value. Basically makes its so the 'this' keyword doesn't have a dynamic nature in which it changes based on how the function is called and in which scope.
- Kind of wraps a function up, so that 'this' will refer to the object argument we set, that the function/method appears in.
110
What is the difference between a function and an object literal?
- Functions are objects.
- for a function, the value of 'this' will change based on where its called? No clue. Are they the same thing?
- An object literal can hold many functions inside of it and they all can be referenced and targeted easily like you would with any properties of an object.
111
What is Prototypal Inheritance?
When creating an object, it inherits some usable methods from an object constructor (or prototype?), and that one has access to the methods from the the chained Object.prototype
112
What is the Prototypal Chain?
starts with your object that you made using a constructor, then it checks the constructor object, then the Object.prototype.
113
In the custom objects we created, I noticed that our prototype object has another __proto__ property, where did that come from?
the Object.prototype?
114
Why does JavaScript have Prototypal Inheritance?
So we don't have to define commonly used methods on every single object we make?
115
What does the new keyword do?
- Creates a new instance of an object, based off an object constructor, that inherits all properties/methods from it.
1. Creates a blank, plain JavaScript object;
2. Links (sets the constructor of) this object to another object;
3. Passes the newly created object from *Step 1* as the `this` context;
4. Returns `this` if the function doesn't return an object.
116
I could've added a method to the constructor function by assigning a method to a property on the this object. Why do we have to add it to the prototype property?
- So all future instances of the object constructor also have access to the method?? For inheritance.
- Memory efficiency: so the method doesn't have to live on every single new object created by a constructor. Those objects might not even use it. So by putting it to the prototype, we can just access it if we need it, and then doesn't take up any more additional space by putting it on each new object instance.
- Put tools on one higher level and the instanced objects can access the same one tool.
117
What is the first thing that happens in a class when it is instantiated with the new keyword?
uzair answer: It calls the constructor function first, then sets all the properties for us with all the arguments we gave it, then finally returns the object to us as 'this'
118
Since classes are technically functions as well. Can you name a difference between classes and functions?
- Classes are NOT hoisted. Functions ARE hoisted. So you can't instantiate a new object BEFORE the class has been declared.
- the body of a class is executed in strict mode. Aka code written here is subject to stricter syntax for increased performance. Otherwise silent errors will be thrown, and certain keywords are reserved for future version of ECMAScript.
119
What is a static method?
- a method that is available only on the instanced class/object??
- Static methods have no access to data stored in specific objects.
- A method that won't be inherited by future instances of it (extends).
- If a static method is on a constructor, then any extends or instances of the constructor won't inherit that static method. You would have to user `super` to access it.
120
What is the benefit of instantiating Classes within other classes?
- It creates a connection between the Parent and all the children classes.
- So it can access the methods on either.
- It's easy to see all the instantiated objects of a parent in one place??
121
Why are parent - child relationships important in OOP?
- By having a class inside another class, we have a connection between all the related things.
- Everything is encapsulated under the hood of one object. And now all the classes inside of the parent can communicate to one another.
- They reduce necessity to write identical code in each instantiated objected?
122
What is the basic idea of OOP?
- Main answer: Pairing data with functionality. Putting them in the same space.
- Keeps all code organized and separated.
- OOP is good for scaling. Not very effective for small applications.
- Creating a template with useful methods and properties that can be used to create new objects without re-writing all of those methods and properties?
123
Why did you have to bind this for the feedChild method in the Parent class?
Because when feedChild gets run in the child object, it wouldn't have access to the data in the parent object, namely the food.
124
Why is it important to assign callback methods to properties in the constructor?
- So that instantiated objects can access the methods? So parent's can house all the utility methods and tools and children objects can just use them when needed.
- So we can save the callback function for later use. Because after a function is run, it would just disappear. So we're storing it in a property so if we want to use it again later, we have it.
125
Why did the Maker class require all of the Parent class info?
The instantiated parent wouldn't have been able to access any of the data?
126
Why did you have to bind this for the replenishFood method.
- If we didn't, then when replenishFood runs in the Parent object, 'this' would be the wrong object, and would not have access to the instantiated parent's data like name, food, etc.
127
What decides the order in which JS files must be loaded?
- The files that depend on other files' code in order to run, need to go later.
- Files with code that have no dependency on any other file's code, should go first.
128
What is JSON?
- A text-based data format following Javascript object syntax - MDN.
- JSON's exist as a string. Useful when you want to transmit data across a network. Though It needs to be converted to a native JS object when you want to access the data.
129
What are serialization and deserialization and why are they useful?
- the process of turning an object in memory in a stream of bytes so you can transfer them over a network or store them in a persistent storage. Deserialization is the opposite. Receiving a stream of bytes and turn them back into an object in the same state as it was before serialization.
- It's useful... because sending and receiving stuff takes less data?
- It's useful because we can send javascript objects over the network and have them come out the other end in the same format as before it is sent.
- Because objects and their data are located all over, and we access them using memory address. If we just sent the memory address to another computer, the memory address would not be pointing to the right spot on their computer.
130
How to you serialize data into a JSON string using JavaScript?
JSON.stringify()
131
How do you deserialize a JSON string using JavaScript?
JSON.parse()
132
What is a client?
A machine that makes a requests to a server for a service or resource.
- A browser and terminal are things that can make requests.
- Games, netflix, google maps, everything uses HTTP to make requests.
133
What is a server?
A computer or something that provides a service or resource.
134
Which HTTP method does a browser issue to a web server when you visit a URL?
GET or Connect?
135
What are the formats of HTTP Requests and Responses?
1. A *start-line* describing the requests to be implemented, or its status of whether successful or a failure. This start-line is always a single line.
2. An optional set of *HTTP headers* specifying the request, or describing the body included in the message.
3. A blank line indicating all meta-information for the request has been sent.
4. An optional *body* containing data associated with the request (like content of an HTML form), or the document associated with a response. The presence of the body and its size is specified by the start-line and HTTP headers.
136
How does ajax work?
- performs an asynchronous HTTP (Ajax) request.
| - It makes a request to a certain location, can get data from it, then does something on success or on error.
137
Why did we need the jQuery CDN?
So we could use the $ sign, aka use jQuery methods, namely ajax()
138
How do you specify the request method (GET, POST, etc.) when calling ajax?
in the method property , in quotes.
139
Why might you need to build elements dynamically with data from an AJAX request?
So you don't have to store the data locally?
140
Should you use named functions or anonymous functions for success and error handlers?
Named for the most part. It helps code readability and organization. Anonymous if its like 1 line of code or really simple I guess.
141
Variables defined with the var keyword are function scoped. const and let are _____ scoped.
block - their scopes are always the innermost surrounding blocks
142
Name some characteristics of a variable declared using const.
the binding (association between variable name and variable value) is immutable. However, the value itself may be unmutable. Like if you had const obj = {name: 'hi'}, you could change the value of name property.
143
Name some characteristics of a variable declared using let.
Variables declared with let are mutable. Kind of similar mechanics as var.
144
What does block scope mean?
The area within a set of curly braces. Things outside can't see inside, but things inside can see out.
145
In the file we can push a new value to an array defined using the const variable. How does that work?
Not completely sure... Since it's an object, the value of the const is a reference to that object. So you can make modifications to the object. The value of the const is just like a sign that points to the object in the memory space. If it's a primitive data type, then nope, no way you can reassign that.
146
Name some things that var can do that const and let can't.
var is function scoped. so if a for loop is nested in a function, and you declare vars in the for loop, those vars are accessible outside of the for loop, within the function. Vars are hoisted. So they are undefined when access before they are declared. Let and const will throw a reference error you do that.
147
If var can be used virtually anywhere, why would we switch?
- Could cause more confusion when changing the value of a variable a lot and in different scopes??
- using const and let signify meaning and intent in a clearer way? When you or someone else see's const, then they know the variable wont be changing. So that means when you see let, then you know that it will be changing in the future.
- **Because hoisting was for noobs, and now were good enough to know when we need to use const and let.**
148
What is the syntax in writing a template literal?
`${ }` - note the backticks.
149
What is string interpolation?
if you put a dynamically computed value inside a ${ }, it is converted to a string and inserted into the string returned by the literal.
150
When was destructuring introduced?
- ES6
- Because we needed a way to extract multiple values at once. We have a way to construct multiple properties or data at once, but we didn't have a corresponding way to extract them.
151
Why could the running commas technique of destructuring an array be a bad idea?
It's ugly AF and in a long array, it will be very easy to miscount the commas and introduce some bugs.
152
How can you easily tell the difference between destructuring and creating array/object literals.
In destructuring, you have the destructuring target on the left, and the destructuring source on the right of the equal sign. The syntax looks reversed.
153
How does an ES6 arrow function differ from an ES5 function?
- With arrow functions the this keyword always represents the object that defined the arrow function.
- arguments, super, this, and new.target are lexical in arrow functions, thus binding is not necessary. Arrow Functions can't be used as a constructor, because normal functions support `new` via the internal method [[construct]] and the property `prototype`. Arrow functions have neither which is why `new (() => {})` throws an error.
154
When an arrow function's code block is left without curly braces, what (if anything) changes in its functionality?
The right side of the arrow function is implicitly returned.
155
In what situations would you possibly use an arrow function?
OOP. Don't have to keep binding it?
156
In what situations would you not want to use an arrow function?
- Don't use them when just declaring a stand alone function. Or something with methods?
- As callback functions. For when an object's properties are methods/callbacks. When you want `this` to be binded. ???
157
What is Array.prototype.filter useful for?
Having fine control over extracting specific data from an array.
158
What is Array.prototype.map useful for?
Being able to modify an entire array and return the newly modified one.
159
What is Array.prototype.reduce useful for?
It opens up like a whole new world in terms of doing work on an object/array and each of its elements. It's like a for loop for objects?
160
What is a CLI?
command line interface - use text to give commands
161
What is a GUI?
graphical user interface - use graphics / pointers to give commands.
162
Give at least one use case for each of the commands listed in this exercise.
- `man`
- `man ls` // displays manual page for the item (program) ls.
- `cat`
- concatenate files and print on the standard output.
- `cat laziness.txt` // prints out the contents of the txt file in the command line.
- in AWS we have command-line access to a computer, but not GUI. So this is important.
- `ls`
- Shows files of a directory (can be current or other folders if specified)
- `ls -aF lfz-staff` // display ALL of the files in the lfz-staff folder (not the current folder) and show file indicators.
- `pwd`
- show the file path of the working directory.
- `echo`
- Print out a line of text.
- `echo 'Hello, World' > hello.txt`
- It's like the console.log of the terminal.
- `touch`
- create an empty file. Can create files inside of directories other than working directory:
- `touch snoot/boop.txt`
-
- `mkdir`
- make directories if they do not already exist.
- `mv`
- move (rename) files.
- `mv pokiemans pokemon`
- `rm`
- remove a file. Cannot be undone without git.
- `rm lol.txt` or `rm -r my-folder/`
- `cp`
- to copy a file into a new file
- cp index.html index2.html
163
What are the three virtues of a great programmer?
1. Laziness: The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don't have to answer so many questions about it.
2. Impatience: The anger you feel when the computer is being lazy. This makes you write programs that don't just react to your needs, but actually anticipate them. Or at least pretend to.
3. Hubris: The quality that makes you write (and maintain) programs that other people won't want to say bad things about.
164
What is Node.js?
- As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications
- Node.js is a program that allows JavaScript to be run outside of a web browser. Node.js is powered by V8; the same JavaScript engine in the Google Chrome browser. It is free, open-source software and its source code is available on GitHub.
- A back end language. It's built with javascript and c++, and additional programs mixed into it to package it all up and stuff.
165
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.
166
What is a REPL?
read - eval - print loop. An interactive toplevel or language shell, is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user.
167
When was Node.js created?
2009 by Ryan Dahl
168
What back end languages have you heard of?
- php, java, python, ruby, c#, Pascal, Pearl, Typescript (Deno), Visual Basic, C++, Rust
- New cool hipster stuff: Go, Elixir, Elm
169
What is a computer process?
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. Depending on the operating system (OS), a process may be made up of multiple threads of execution that execute instructions concurrently
170
Why should a full stack Web developer know that computer processes exist?
Full stack Web development is based on making multiple processes work together to form one application, so having at least a cursory awareness of computer processes is necessary. This will be extremely important when learning about applications made of multiple components, such as clients, servers, and databases.
171
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().
172
How do you access the process object in a Node.js program?
process
| console.log(process)
173
What is the data type of process.argv in Node.js?
An array
174
What is a JavaScript module?
A single .js file.
175
What values are passed into a Node.js module's local scope?
exports, require, module, __filename, and __dirname ???
176
Give two examples of truly global variables in a Node.js program.
```
setTimeout
setInterval
Class: Buffer
clearImmediate(immediateObject)
clearInterval(intervalObject)
claerTimeout(timeoutObject)
console
global
process
setImmediate(callback[, ...args])
setInterval(callback, delay[, ...args])
setTimeout(callback, delay[, ...args])
URL
URLSearchParams
WebAssembly
```
177
What is the JavaScript Event Loop?
What is the JavaScript Event Loop?
178
What is different between "blocking" and "non-blocking" with respect to how code is executed?
Blocking prevents any other code to run until that line of code finishes executing. Non-blocking code is added to the call stack and when run/parsed, will then move to the browser API's column until the code finishes executing, then moves to the event queue, where it waits in line to be fully executed, once the call stack is done.
179
What is a directory?
- A folder in a storage medium.
| - A file, whose job to point to other files.
180
What is a relative file path?
a chain of local directories that lead to a file or another directory, in reference to your current directory location.
181
What is an absolute file path?
the complete path to a file or directory, starting from the root folder.
182
What module does Node.js include for manipulating the file system?
fs module.
183
What is process.exit() ?
- instructs node.js to terminate the process synchronously with an exit status of `code`. By default, exit code is 0. Diff exit codes have diff meanings. It's basically like closing the node program with ctrl + c like i've been doing when I have infinite running counter.
- `if (err) throw err` also does process.exit
184
What method is available in the Node.js fs module for writing data to a file?
writeFile(file, data, options, callback)
185
Are file operations using the fs module synchronous or asynchronous?
There are both synchronous and asynchronous methods of us the fs module, but we will always be using the asynchronous way.
186
How do you add a line break between your node command and the result??
'\n' like so:
fs.writeFile('note.txt', note+ '\n', err ⇒{})
So the + '\n' just inserts a line break. Because when we do cat note.txt in node.js, it appears on the same line as the command we run, and it looks weird. So it just adds a line break.
187
What is JSON?
Javascript Object Notation. A lightweight format for storing and transporting data. Used when data is sent from a server to a web page.
188
What are serialization and deserialization?
Serialization is converting an object into a string format. When transmitting data or storing them into a file, data is required to be byte strings, but objects are usually not in this format. Serialization converts complex objects into byte strings. Deserialization is when after the data is transmitted, the data is convert from those byte strings back into the original object.
189
Why are serialization and deserialization useful?
Because objects and their data are located all over, and we access them using memory address. If we just sent the memory address to another computer, the memory address would not be pointing to the right spot on their computer.
It's useful because we can send javascript objects over the network and have them come out the other end in the same format as before it is sent.
190
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
191
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
192
What is a client?
A machine that makes a requests to a server for a service or resource.
- A browser and terminal are things that can make requests.
- Games, netflix, google maps, everything uses HTTP to make requests.
193
What is a server?
A computer or something that provides a service or resource.
194
Which HTTP method does a browser issue to a web server when you visit a URL?
GET Request
195
What is on the first line of an HTTP request message?
A start-line describing the requests to be implemented or its status of whether successful or a failure.
composed of: method, request target, and protocol
196
What is on the first line of an HTTP response message?
Status-line: the protocol version, a status code, and a status text that is purely informational to help humans understand the http message.
197
What are HTTP headers?
- A part of a request that alters the request to include certain parameters to tailor the response to what you need?
- They define the operating parameters of an HTTP transaction.
198
Is a body required for a valid HTTP message?
Body is optional.
199
What is NPM?
- The world's largest software registry. You can use it to share and borrow packages, and many organizations use npm to mange private development as well.
- It consists of 3 distinct components:
- the website // used to discover packages, set up profiles and manage aspects of your npm experience.
- the Command Line Interface (CLI) // runs from the terminal, and how most devs interact with NPM.
- the registry // large public database of javascript software and the meta-info surrounding it.
200
What is a package?
- Bits of reusable code, often called modules.
- It is a directory with files in it, and a file called package.json with meta data about this package.
- General idea is that it is a small piece of that that solves one problem very well.
- They are building blocks that you can use with many other packages.
201
How can you create a package.json with npm?
npm init —y or npm init -y for short.
202
What is a dependency and how to you add one to a package?
- A dependency is a package that is required to run a project.
- You can add a dependency by just installing a package. like npm i jquery
- You can add one by specificying it in package.json or through the command line
- To add an entry to the **`"dependencies"`** attribute of a **`package.json`** file, on the command line, run the following command: `npm install [--save-prod]`
203
What happens when you add a dependency to a package with npm?
When installing the package, it will also install that dependency.
204
How do you add express to your package dependencies?
npm i express
205
What Express application method starts the server and binds it to a network PORT?
listen(myPort) // app.listen(3000)
206
How do you mount a middleware with an Express application?
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.
207
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
request, response, and next (next middleware function in the stack / request-response cycle
208
What is the purpose of the Content-Type header in HTTP request and response messages?
To tell the recipient (client or server) what the media type of the body is.
209
What does express.static() return?
A function named serveStatic (req, res, next) {}
210
What is the local __dirname variable in a Node.js module?
An absolute path: the full system filepath leading up to the current directory where __dirname was run.
211
What does the join() method of Node's path module do?
- concatenates the arguments to form a file path.
| - Adds path segments together. c:/keenan/lfz/ + index.js
212
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json; charset=utf-8
213
BODY is the same as DATA (the return of the ajax call) when you make an ajax call. So in an ajax call, when we do success: function (data) { console.log(data)},
That data is akin to the BODY, but BODY refers more specifically to post requests, and not get requests?
214
What does the express.json() middleware do and when would you need it?
It parses incoming json body. Returns middleware that only parses JSON and only looks at requests where the content-type heacher matches the type option. Use it to turn a JSON into a normal JS object? So if someone does a post, it can turn it into an object we can manipulate in the back end?
215
What is the significance of an HTTP request's method?
- It dictates what action our application will take, and therefore its response and what code to run.
- indicate what you would like to have happen, but its up to the code that determines what happens.
216
What is Webpack?
A module bundler used to bundle JS files for usage in a browser.
217
How do you add a devDependency to a package?
- npm install [webpack-cli] --save-dev
- To add an entry to the **`"dependencies"`** attribute of a **`package.json`** file, on the command line, run the following command:
- `npm install [--save-prod]`
- To add an entry to the **`"devDependencies"`** attribute of a **`package.json`** file, on the command line, run the following command:
- `npm install --save-dev`
218
What is an NPM script?
- a way to bundle shell commands for a project. Instructions you would normally do in your command line in order to do something with your application.
- They help automate repetitive tasks.
- Makes sure everyone is using the same command with the same flags.
219
How do you execute Webpack with npm run?
npm run build
220
How are ES Modules different from CommonJS modules?
- Es Modules use the import and export keywords.
- CommonJS uses require().
- Es Module functionality is built into core JS
221
What kind of modules can Webpack support?
commonJS, es6 modules, typescript, AMD, css file modules,
222
What is React?
- A JavaScript library for building user interfaces.
- React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
- Declarative views make your code more predictable and easier to debug.
223
What is a React element?
a plain object describing a component instance or DOM node and its desired properties. It contains the type (tag like h1 or div), a property (like color), and any child elements inside of it (like text).
A react element is NOT a DOM element. It is an element that we can use to DESCRIBE a DOM element we want to create.
224
How do you mount a React element to the DOM?
ReactDOM.render(myReactElement, myDomTargetElement)
225
Diff between a framework and a library
- It's a difference of control. We are in control of a library, but a framework is in control of us.
- Library is like jQuery. We are giving the '$' and we use it in all sorts of ways we want to.
- But a framework does all of the function calling. We apparently never call the functions we use from a framework. We just pass things to it.
226
What is Babel?
A javascript compiler. It's a toolchain that is used to convert ECMAScript 2015+ code into backwards compatible versions of JS in current and older browsers or environments.
227
What is a Plug-in?
A software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization.
228
What is a Webpack loader?
- Transformations that are applied to the source code of a module. They allow yo uto pre-process files as you `import` or 'load' them.
- They 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!
229
How can you make Babel and Webpack work together?
- When you run npm run build (aka when you compile your JS with webpack, it will also take Babel's plugins into account and run their specific code as well? Pre-processing?
- Install babel plugins and set them as devDependencies in package.json
230
What is JSX?
- A syntax extension that allows us to describe what the UI should look like, and allows us to write/read it in a familiar HTML format.
- It it JS plus some stuff.
231
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.
232
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
- By adding the babel plugins, webpack will compile all your modules and plugins so that when you write and run code, it will convert JSX into valid JS for you.
- in the webpack.config.js we are telling it that if you see extensions of .js and .jsx, then run the babel plugin (@babel/plugin-transform-react-jsx).
233
What is a React component?
Independent, reusable pieces of the UI. Conceptually, they are like JS functions. They accept arbitrary inputs (called 'props') and return React elements describing what should appear on the screen.
It's a function. Can be a JS function or class. And it must return a react element. (clickme )
234
How do you define a function component in React?
- the function name MUST be capitalized. If it is not capitalized, react jsx plugin thinks it is an html element (tag).
- Simplest way: create a javascript function.
- ES6 Class way: create a class with a method on it that returns the react element.
235
How do you mount a component to the DOM?
ReactDOM.render(, document.getElementById('root'));
236
Why wrap a return in parenthesis?
- return (
click me!
)
- It's purely for readability beacuse it would look weird.
- the tags wouldn't line up like in html.
237
What are props in React?
- It's an object containing key value pairs that are made from the attributes of a JSX component(?)/element(?).
- In const element = ; // 'name' is a JSX attribute. 'Sara' is its value. This key value pair is stored within the props argument when passing it into a function component.
- used for passing data from one component to another.
238
How do you pass props to a component?
- // these are not attributes, but key value pairs. Because this isn't HTML.
- You create a prop with an key and value on the react element.
239
How do you write JavaScript expressions in JSX?
You write them like normal, just within curly braces.
240
What Array method is commonly used to create a list of React elements?
map()
241
What is the best value to use as a "key" prop when rendering lists?
A string that uniquely identifies a list item. Generally ID's from your data.
242
How do you create "class" component in React?
extends React.Component // class Welcome extends React.Component {}
243
How do you access props in a class component?
this.props
244
What is the purpose of state in React?
- To store data that could be prone to change, and if it does change, trigger the render() method to update the DOM.
- We just have one place that a component keeps track of one thing, one piece of data.
- And if something happens to that piece of data, then render gets called again to change it based on the change.
- Previously, we were triggering things with event listeners,
245
How to you pass an event handler to a React element?
as a react element's prop, onClick = {this.eventHandlerFunction}
246
Why do we assign this.state an object?
In react, we always set the state as an object, because we can store more than one pieces of data on it.
247
To know what a value of 'this' is, you CANNOT tell by the definition. You must be looking at the function call.
If there is no object to the left of the dot, it will be window. If there is an object left of the dot, it is that object.
248
What is super()?
It is a javascript thing. It is effectively the constructor method of the thing we are extending from, so in this exercise, it is the .Component from React.Component.
249
Why did we have to even use super()?
Because in handleClick(), setState() is a method that we did not even define, it is being inherited from the parent , React.Components (specifically Components).
250
Why are there parenthesis around what looks like a code block? like in the pic?
- It's because anonymous arrow functions automatically return whatever is to the right of the arrow. And if there are brackets, that means that is just a code block for the arrow function (in which you have to manually use a return statement).
- If you actually wanted to return an object, you have to put parenthesis around it to show that it is a javascript expression.
251
What are controlled components?
- Components in which React both renders the element, but also controls the state for that element and what happens in that element.
- A react element in which the value of it is controlled by react, not the actual element ( like a form ).
- Even if the user is typing into a input element on the DOM, the source of truth is the state of the component.
- When the component is first mounted to the DOM, it has an initial state, set by the constructor.
- In the exercise, we initially set email: ''.
- Then the render() method runs, and the value is set to this.state.email, which is an empty string that we set.
- So when that input renders, it renders as empty.
- and the state gets changed by the method calls due to onChange, when we start typing or deleting.
- When we type a letter, it updates the state, with setState, and it is very important to know that setState triggers the render() to happen again. Any time setState is called, render() occurs after.
- So now the value get's updated to the character you typed.
- It's kind of like, we're re-rendering the element over and over each time there is a change in the input.
252
What two props must you pass to an input for it to be "controlled"?
onChange and value
253
What is PostgreSQL and what are some alternative relational databases?
- Powerful, free, open source Relational Database Management System. The most advanced open source database of its kind, due to its robust feature set, standards compliance, and reliability.
- Alternatives: MySql and SQL Server by Microsoft, and Oracle by Oracle Corporation.
254
What are some advantages of learning a relational database?
- They support good guarantees about data integrity. They store and modify data in a way that makes data corruption as unlikely as possible.
- Developers ca nset up their database to reject "bad" data nd not worry about data being "half written".
- It is the most widely used type of database, so it is a very portable skill.
255
What is one way to see if PostgreSQL is running?
running 'top' in another terminal and seeing if the process is active.
256
What is a database schema?
A collection of tables is called a schema. A schema defines how the data in a relational database should be organized. In relational databases, you typically have to define your schema up front and the database server will make sure that any data being written to the database conforms to that schema.
257
What is a table?
Relational databases store data in relations, commonly referred to as tables.
258
What is a row?
- A data entry that contains columns or attributes. A table is made up of multiple rows that all contain the same columns/attributes.
- For example. a row for a student might contain 'firstName', 'lastName', 'dateOfBirth' columns/attributes. And each subsequent row would have the same columns.
259
What is SQL and how is it different from languages like JavaScript?
- Structured Query Language
- SQL is declarative like HTML and CSS in which you write what you would like to happen, and the browser interprets it and executes it in its own way.
- Javascript is imperative, in which you tell JavaScript runtime what to do AND how to do it.
260
How do you retrieve specific columns from a database table?
- select keyword, then "nameOfColumn"
| - select "firstName" from "someTable"
261
How do you filter rows based on some specific criteria?
- where "category" = 'carbs'
| - note that 'carbs' is in single quotes.
262
What are the benefits of formatting your SQL?
It makes data retrieval and usage much easier to understand and read.
263
What are four comparison operators that can be used in a where clause?
< > = ≠
264
How do you limit the number of rows returned in a result set?
- limit #;
| - Generally you put limit last.
265
How do you retrieve all columns from a database table?
select *
266
How do you control the sort order of a result set?
- order by "category" desc
| - By default, it orders by ascending order. So you don't need to say it, but if you want descending order, use desc.
267
How do you add a row to a SQL table?
- insert into "tableName" ("column1", "column2")
values ('column1value', 'column2value')
- notice there are only single quotes on the values.
268
What is a tuple?
A list of values ( kind of like an argument list)
269
How do you add multiple rows to a SQL table at once?
insert into "tableName" ("column1", "column2")
values ('column1value', 'column2value'),
('column1value2', 'column2value2');
270
How to you get back the row being inserted into a table without a separate select statement?
- returning *;
| - for specific columns: returning "productId", "name", "description";
271
How do you update rows in a database table?
- update "tableName"
set "column1" = 'column1newValue'
- where "productId" = 12;
272
Why is it important to include a where clause in your update statements?
Or else it will update for all rows.
273
How do you delete rows from a database table?
delete from "myTable"
| where "product" = 'ShamWow'
274
How do you accidentally delete all rows from a table?
when you don't specify a 'where' clause
275
What is a foreign key?
- When a value of a column from one table is linked to a value of a column on another table.
- This is done so we don't have to put ALL the data from one table into another if we want to combine then. We can just link specifc parts with a foreign key.
276
How do you join two SQL tables?
- select * (or choose which columns - but I think * chooses all columns from BOTH tables)
from "productsTable"
join "suppliersTable" using ("suppliersTableColumn1") // This links the two tables by their suppliersTableColumn1
277
How do you temporarily rename columns or tables in a SQL statement?
- column and table aliasing:
column aliasing:
```jsx
select "products"."name" as "product",
"suppliers"."name" as "supplier"
from "products"
join "suppliers" using ("supplierId");
```
- You can set aliases for the columns in the 'select' clause. This is to give better context or information about a column. Can also be used to resolve issues if two tables have the same name for a column.
- table aliasing:
```jsx
select "p"."name" as "product",
"p"."category",
"s"."name" as "supplier",
"s"."state"
from "products" as "p"
join "suppliers" as "s" using ("supplierId")
where "p"."category" = 'cleaning'
and "p"."price" < 20;
```
- in the 'from' and 'join' clause, you can set an alias for the tables, so you can use those aliases in the select and save yourself from repetitive typing.
278
What are some examples of aggregate functions?
count(), sum(), min(), every()
279
What is the purpose of a group by clause?
To get data and run aggregate functions on specific groups of rows instead of everything.
280
Does order of the select and joins matter?
Order of the select from and the joins does NOT matter. As long as as the joins can make a link with the previous 'join' or 'from'
281
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.
282
How do you handle the fulfillment of a Promise?
value ⇒ { fulfillment code block}
283
How do you handle the rejection of a Promise?
reason ⇒ { console.error(reason.message) //reason code block}
284
What does fetch() return?
a promise object
285
What is the default request method used by fetch()?
GET
286
How do you specify the request method (GET, POST, etc.) when calling fetch?
Pass in a second argument in the fetch method, which includes an object with request options, such as:
method, mode, cache, credentials, headers.
287
When does React call a component's componentDidMount method?
At the end of of render() and after React updates the DOM and refs
288
Name three React.Component lifecycle methods.
render(), constructor(props), componentDidMount(), componentWillUnmount(), componenDidUpdate()
289
How do you pass data to a child component?
- through this.state.users. In a then method call, I called this.setState to change the state to the parsed response from the fetch call.
- You assign the state containing the data to a prop on a react element that is being created.
