JavaScript Flashcards
What is the purpose of variables?
to store values/information
and we are able to refer/call this variable later!
i.e to store information for the future
How do you declare a variable?
use keyword (“var”, “let”, “const”)
followed with the name of variable and end with semicolon “;”
ex) var name;
How do you initialize (assign a value to) a variable?
single equal sign (assignment operator)
start with variable name following with an equal sign (=) and the value you want to assign to variable. end with semicolon
ex) Name = “Monique”;
- but usually will declare and assign variable in one step!!
ex) var Name = “Monique”;
What characters are allowed in variable names?
numbers, letters, dollar sign ($), underscore (_)
**but variables cannot start with numbers!!!
What does it mean to say that variable names are “case sensitive”?
lowercase and uppercase letters are different (even if its same letter)
(ex) Name, name –> are two different variable names
What is the purpose of a string?
to store letters and other characters
a sequence of a set of characters
js wont care about what is in strings
What is the purpose of a number?
to store numeric values
(that we usually do calculations with, mathematical operations)
financial information a good example to use numbers but not smt like a zipcode (b/c we arent usually doing mathematical operations with zipcode values)
What is the purpose of a boolean?
purpose is to make decisions
it is able to represent if something is or isn’t (binary)
What does the = operator mean in JavaScript?
assignment operator
used to assign a value to a variable
assign: to store information to a variable (name)
How do you update the value of a variable?
don’t use keyword!! (if variable already exists)
write variable name with equal sign (assignment operator) and new variable value
What is the difference between null and undefined?
both are value types
null: value that is assigned and purposely/intentionally left blank/empty
value that can only appear b/c DEVELOPER purposely assigned it to something
ex) optional inputs on a website from user (we still need to store data about user, so can use null in the optional inputs user did not fill out)
undefined: value that is assigned by BROWSER
value that can come from anywhere; if undefined pops up, need to investigate?
Why is it a good habit to include “labels” when you log values to the browser console?
to give clarity
to know if the correct value is being assigned to correct variables (debugging or double checking when you go back to code)
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
adding two or more strings together to create one string
(addition but for strings)
*concatenation does not change the value of the individual strings”
What purpose(s) does the + plus operator serve in JavaScript?
mathematical operations (summing), string concatenation
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
What does the += “plus-equals” operator do?
shorthand operator
adds a value to an already existing variable and reassigns the resulting value to the same variable
ex) var name = “Monique”;
name += “ Chang”;
name variable's value would now be Monique Chang, and not Monique
What are objects used for?
to group together data, functions, etc that are related to each other
create multiple groups of organized data
(are able to use same property names for multiple objects)
What are object properties?
individually named data inside objects
(are variables essentially)
Describe object literal notation.
object name = { };
object name = {
property name: property value,
property name: property value,
property name: property value
};
*example of key/value pair
How do you remove a property from an object?
use delete.”object name”
delete operator
What are the two ways to get or update the value of a property?
use dot notation or bracket notation
objectname.objectpropertyname/key
objectname[“objectpropertyname.key”]
*bracket notation wont work for methods!
*bracket notation useful b/c in dot notation, js perceives anything after dot as a string
so variables, numbers etc cant work with dot notation.
. notation code reading
[ ] notation code reading
. = “of”
[ ] = “at”
What are arrays used for?
storing/grouping a set of related values
(helpful when you don’t know how many values there will be)
allows us to group together like data types and put into “lists”
so that they are organized and we can deal with them one at a time
Describe array literal notation.
array name = [ ];
array name = [
“value”,
“value”,
value
];
*value can be any data type!
How are arrays different from “plain” objects?
arrays have a order (index numbers; numerically indexed)
no property names (property names are basically the index numbers)
are able to know how many pieces of data is being stored (length property)
need to use method (push) to add data to array (not assign directly like objects)
What number represents the first index of an array?
zero
What is the length property of an array?
tells you the length of the array (how many values/items are in the array)
different from index numbers!!
arrayname.length
How do you calculate the last index of an array?
can use length property to find length of the array and subtract 1 to get last index num of the array
(b/c index numbers start at 0 so the last index number will be length of array minus one)
data models
objects in arrays
arrays in objects
organizing large chunks of data?
What is a function in JavaScript?
a block of code that contains set of instructions that gets executed when the function is called
take in values –> spit out values based on values provided
make change to something, somewhere
Describe the parts of a function definition.
function keyword, optional name, optional parameter(s), code block, optional return word (in code block)
Describe the parts of a function call.
function name with arguments(may or may not have) in parentheses
*if no arguments, still need ( )
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call: function name, arguments
function definition: function keyword, parameters, code block,
What is the difference between a parameter and an argument?
parameter: placeholder for arguments
argument: what you actually put into function to execute the code
Why are function parameters useful?
parameters give us the ability to have mutability based on data
don’t have to write multiple functions
gives us functionality
What two effects does a return statement have on the behavior of a function?
Causes the function to produce a value we can use
Prevents any more code in the function’s code block from being run entirely.
(even if theres more code after return statement in the code block)
an expression in JS
needs to be evaluated to reach a value
Why do we log things to the console?
debugging tool
double check code, but soley to check
What is a method?
a type of function
How is a method different from any other function?
methods are attached to objects
How do you remove the last element from an array?
pop( ) method
*will return that element you removed
How do you round a number down to the nearest integer?
Math.floor ( )
How do you generate a random number?
Math.random( );
0 to 1 (but 1 isn’t included)
How do you delete an element from an array?
splice method
How do you append an element to an array?
push method
*returns length of array
*append means to add at the end
How do you break a string up into an array?
split method
*returns an array
Do string methods change the original string? How would you check if you weren’t sure?
no they do not
can use console.log(“the string”) to check
Roughly how many string methods are there according to the MDN Web docs?
a lot!
Is the return value of a function or method useful in every situation?
not always
Roughly how many array methods are there according to the MDN Web docs?
a lot!
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
<, >, ===, !==, >=, <=
What data type do comparison expressions evaluate to?
booleans
What is the purpose of an if statement?
to check condition to decide whether to run a certain code block or not
Is else required in order to use an if statement?
no
*if else is included means something will always happen
we dont necessarily want something to occur always
Describe the syntax (structure) of an if statement.
if keyword, condition, code block
What are the three logical operators?
and(&&), or ( | | ), not ( ! )
How do you compare two different expressions in the same condition?
use “and” or “or”
truthy values and falsey values (for conditionals)
truthy: assumed to have values
*infinte amount of truthy values (everything that is not truthy)
falsey: emptiness
*(not that many)
false, 0, empty strings, null, undefined, NaN
What is the purpose of a loop?
a set of code can be run over and over again
gives us ability to repeat functionality
What is the purpose of a condition expression in a loop?
if condition is met: loop continues
if condition is not met: loop stops
what decides when to stop a loop
What does “iteration” mean in the context of loops?
one time a loop code block is run
When does the condition expression of a while loop get evaluated?
before code block is executed (before each itieration)
When does the initialization expression of a for loop get evaluated?
one time before everything
When does the condition expression of a for loop get evaluated?
during first iteration: after initialization
during every following iteration: right at start of loop (before code block runs) / after final expression
When does the final expression of a for loop get evaluated?
before the condition runs again
after the code block runs
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
adds one to the variable it is applied to (and saves that value in that variable)
*count++ : using count and then incrementing
*++count : incrementing count value before using
How do you iterate through the keys of an object?
use for in loop
Why do we log things to the console?
debugging, checking if certain code works properly. etc.
What is a “model”?
representation of something
Which “document” is being referred to in the phrase Document Object Model?
the html document (document that represents the entire page)
What is the word “object” referring to in the phrase Document Object Model?
JS objects (b/c DOM tree is made of objects)
Document Object Model: is a JavaScript object modeling the HTML document’s content
What is a DOM Tree?
form of organization of data
all data necessary to make a single element and all of it’s content (child elements, attributes, etc)
Give two examples of document methods that retrieve a single element from the DOM.
getElementById( ), querySelector( )
*querySelector( ) use this!!!!!!
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName( ), getElementsByTagName( ), querySelectorAll( )
Why might you want to assign the return value of a DOM query to a variable?
if you are going to use the return value of the DOM query again (multiple times)
don’t have to keep searching for it each time u use it
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
dir = directory
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
HTML document loads code from top to bottom, so need to put at bottom so body element needs to load first
the browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
argument: css selector
returns: first element with the argument css selector
What does document.querySelectorAll() take as its argument and what does it return?
argument: css selector
returns: all elements with the argument css selector (in a NodeList)
NodeList
looks like an array but is not the same
its an array-like object (but cant adjust like an array)
What is the purpose of events and event handling?
events: to be aware when certain action happens
event handling: to allow us to do smt in response to event (interactiveness)
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
a function passed as an argument in another function
What object is passed into an event listener callback when the event fires?
event object
a object js makes that holds all relevant info about that certain event (when it is fired)
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
the place event occurred from
use inspect or mdn
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
handleClick executes when event happens
handleClick( ) is being called right when page loads
code in function code block isn’t correct
and when you click button, returns undefined (so nothing happens)
What is the className property of element objects?
property that contains value of class attribute of that element
How do you update the CSS class attribute of an element using JavaScript?
use className property to change value of the class attribute of that element
get element -> assign new value (using assignment operator)
What is the textContent property of element objects?
property that contains text content of certain element
How do you update the text within an element using JavaScript?
use textContent property to change text content (using assignment operator)
Is the event parameter of an event listener callback always useful?
no
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
Why is storing information about a program in variables better than only storing it in the DOM?
easy access to elements w/o having to query/search for it everytime
data is readily accessible in the language we are writing
better to use data w/in language you are working with
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a form element?
submit
submit event is an event on FORM element, NOT submit button(submit button triggers event)
What does the event.preventDefault() method do?
prevents default action for an event from being taken as it normally would be.
What does submitting a form without event.preventDefault() do?
automatically reloads page
preventDefault will always be present when using submit events
What property of a form element object contains all of the form’s controls.
elements
What property of a form control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
missing errors and having to now go through a lot of code to fix errors
not catching errors early and not being able to see clearly where error is from
What is an advantage of having your console open when writing a JavaScript program?
can see how certain code affects webpage/browser in live time
can check code right away
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
appendChild( ) method
What do you pass as the arguments to the element.setAttribute() method?
the attribute name and value
example: (“class”, “column-full”)
What steps do you need to take in order to insert a new element into the page?
create element, append element to parent element u want to using appendChild( )
What is the textContent property of an element object for?
add/set text to element
check what text content of element is of an element
Name two ways to set the class attribute of a DOM element.
element.className( )
element.setAttribute( )
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
can reuse function:
call function again to make same structure
use function in multiple different contexts/situation
What is the event.target?
property on event object that tells the event originated from (whereever the event occured)
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
What DOM element property tells you what type of element it is?
tagName
nodeName(less specific)
What does the element.closest() method take as its argument and what does it return?
argument: css selector
return: closest ancestor that matches the argument css selector
*opposite of querySelector (b/c closest searches outward while querySelector searches within)
How can you remove an element from the DOM?
remove( )
on dom object we want to remove
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
add event listener to parent
What is the event.target?
property on the event object which stores a ref to the dom element where event originated from
What is the affect of setting an element to display: none?
element is no longer visible
removes element from document flow
What does the element.matches() method take as an argument and what does it return?
argument: css selector(s) as a string
return: boolean stating whether the argument selector(s) match the ones of the element (true)
(false) if the argument selectors do not match those of the element
How can you retrieve the value of an element’s attribute?
element.getAttribute( )
attribute name as a string goes in ( ) and the return is the value of that attribute
At what steps of the solution would it be helpful to log things to the console?
as often as possible!
anytime u need to check anything
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?
need to add individual event listeners to each tab and view
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?
long conditional block
conditional blocks for every single view
What is JSON?
JavaScript Object Notation
format for rendering data that follows norms of a JS object
*cant store objects or array long term but u can w/ strings so we utilize this
What are serialization and deserialization?
serialization: get data and turn into one piece of data to store easily (ease of analysis) (packing stuff in one suitcase for trip)
deserialization: get data that is serialized and turn back into more complicated pieces of data that is easily accessible and can grow (might not all be in once place)
(unpacking everything after trip (so that everything is more accessible than keeping in suitcase)
Why are serialization and deserialization useful?
serialization: data good for long term storage and transmission
deserialization: good for interaction with data
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( )
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( )
How do you store data in localStorage?
localStorage.setItem( )
argument: keyname , keyvalue
How do you retrieve data from localStorage?
localStorage.getItem( )
arguement: is the keyname as a string
What data type can localStorage save in the browser?
strings (thats why we learned JSON)
When does the ‘beforeunload’ event fire on the window object?
right before window document is about to be unloaded
close tab, refresh tab, close browser, browser crashes
What is a method?
function that is stored as a a property of an object
How can you tell the difference between a method definition and a method call?
method def:: has function code block, has colon, and ‘function’ keyword
method call: object name, arguments, property name
Describe method definition syntax (structure).
object name {
property name: function def(can have name or not) (parameter(s)) {
//function code block
}
};
Describe method call syntax (structure).
object.method(arguments);
How is a method different from any other function?
methods are attatched to an object
need to state object to use methods
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods).
What are the four “principles” of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
What is “abstraction”?
to being able to work with (possibly) complex things in simple ways
process of reducing complexity
What does API stand for?
application programming interface
What is the purpose of an API?
to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction
What is this in JavaScript?
implicit parameter that allows us to view object from where this method is being used
What does it mean to say that this is an “implicit parameter”?
always there, even if you don’t write it in parameter list
are able to get value
implied value that is always present
When is the value of this determined in a function; call time or definition time?
call time!!!
What does this refer to in the following code snippet?
var character = {
firstName: ‘Mario’,
greet: function () {
var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
console.log(message);
}
};
value of this: nothing!
greet function has not been called yet, ‘this’ is determined during call time, NOT definition time
var character = {
firstName: ‘Mario’,
greet: function () {
var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
console.log(message);
}
};
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
greet function is now being called, so ‘this’ is:
It’s-a-me, Mario!
var character = {
firstName: ‘Mario’,
greet: function () {
var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
console.log(message);
}
};
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
It’s-a-me, undefined!
hello() is a free floating function with no object to the left, so the object is the window.
window object does not have a property named firstName, so firstName is undefined.
How can you tell what the value of this will be for a particular function or method definition?
No, w/in definition, cant guarantee ‘this’ will be anything (this is a parameter/placeholder)
How can you tell what the value of this is for a particular function or method call?
whatever is to the left of the dot of method is value of ‘this’
*no dot, then being executed in global scope: so object is window!
What kind of inheritance does the JavaScript programming language use?
prototype-based (or prototypal) inheritance.
What is a prototype in JavaScript?
object that contains properties that can be used by other objects
a tool that can be passed to many sources to use
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
they have a prototype that has all these methods (where shared behavior is stored)
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype (if multiple prototypes (prototypal chain), will search from closest to farthest (linear))
What does the new operator do?
create a empty js object, takes (constructor) function being called’s prototype (prototype property) and adds to empty object( __proto__ or [[prototype]] ), makes empty obj the value of ‘this’ & function codeblock is run, returns object if no other return is specified
constructor functions dont have return values
allows us to invoke a function as a constructor function
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
What does the instanceof operator do?
checks to see if prototype property of a constructor appears anywhere in the prototype chain of an object
*object instanceof constructor
What is a “callback” function?
fucntion that is passed as an argument to another function
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
setTimeout( )
How can you set up a function to be called repeatedly without using a loop?
setInterval( )
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
does not mean action happens immediately, is put in queue immediately
What do setTimeout() and setInterval() return?
interval ID
What is AJAX?
programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.
Ajax allows you to update parts of the DOM of an HTML page without the need for a full page refresh. Ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading).
technique for loading data into a webpage w/o having to reload entire webpage (just reload parts of webpage)
don’t have to go to other pages
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
XMLHttpRequest is a JS object so addEventListener method can be applied
ES6 ↓
What is a code block? What are some examples of a code block?
block of code written inbetween curly braces
examples: loops, functions, conditionals
What does block scope mean?
only exists within a certain code block
so cant access variables declared in block, outside of block
What is the scope of a variable declared with const or let?
block scope
so variables only exist w/in that code block
*var is function scope, not block scope! (lives/exists past the code block)
What is the difference between let and const?
let can be reassigned (mutable)
const cannot be reassigned (read only reference; immutable)
Why is it possible to .push() a new value into a const variable that points to an Array?
the actual value to which the const variable reference is not immutable
even though the Array variable is a constant, you can change its values.
however, you cannot reassign a different value to the Array constant itself
How should you decide on which type of declaration to use?
prefer const
(use const until u cant!)
if variable is not being reassigned at anytime in code, should use const
if not, should use let
What is the syntax for writing a template literal?
same as strings but w/ backticks and not ‘ ‘ or “ “
assign w/ const variable
${expression} if u want to add JS expression into template literal
What is “string interpolation”?
to create strings by doing substitution of placeholders (syntax: ${})
embed variables and expressions in a string
The JavaScript engine will automatically replace these variables and expressions with their values.
What is destructuring, conceptually?
assigning properties of an object or array into individual variables.
extracting property values from objects and array element values into new variables
What is the syntax for Object destructuring?
var/let/const { property1: variable1, property2, etc } = object;
if u want to assign a property value to a variable thats not the same name as property key name, use colon, if not can just put the property key name (like example above)
What is the syntax for Array destructuring?
const [variable1, variable2, variable3, etc] = array;
variable names correspond to elements in array
How can you tell the difference between destructuring and creating Object/Array literals?
curly braces or square bracket will be on left side of = if its destructuring
object/array name we are destructuring from is on right side of assignment operator and not on the left
What is the syntax for defining an arrow function?
parameter(s) => code;
*if more than one parameter, need ( )
* if more than one statement in code block, need { }
(param1, param2, etc) => {
return;
};
param => expression;
( ) => expression;
When an arrow function’s body is left without curly braces, what changes in its functionality?
evaluated as an expression rather than a statement and has implicit return
How is the value of this determined within an arrow function?
lexical scope, takes “this” value from the enclosing function (“parent” function, function that encloses the arrow function)
“this” value is defined when arrow function is DEFINED, and not CALLED like es5!!
opposites!!
What is a CLI?
command line interface
text based system to interact w/ program
What is a GUI?
graphical user interface
interact w/ program w/ icons instead of text
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: look up manuals for command line commands to see how they work and what options they have
cat: concatenate files
ls: list contents of directories
pwd: prints full file name of current/working directory (where am i right now in my system?)
echo: displays line of text (console.log for terminal kinda)
touch: change/update files’ timestamps (but use mostly to create a file)
mkdir: make a directory
mv: move or rename a file or directory
rm: remove a file or directory (be careful!!)
cp: copy a file or directory
What are the three virtues of a great programmer?
laziness, impatience, hubris
What is Node.js?
a program that allows JavaScript to be run outside of a web browser
ex: you have some JS in a file, can use node.js to run that JS in file
What can Node.js be used for?
used to build back ends for Web applications, command-line programs, or any kind of automation that developers wish to perform.
What is a REPL?
read–eval–print loop
a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user
ex: browser console, bash shell
When was Node.js created?
2009
What back end languages have you heard of?
scripting languages (interpreted on-the-fly, garbage collection, dynamic, safer): python, ruby (jit), php, javascript (jit), perl, elixir, erlang
*jit: just in time compilation (interpreter is very sophisticated)
memory managed languages (compiled ahead of time, has garbage collection): java, kotlin c#, golang, haskell, julia, f#, fortan
manual memory management (compiled ahead of time, no garbage collection, low-level, hard but fast, dangerous if done wrong): c++, c, swift, rust, d, zig
sql (for databases)
What is the process object in a Node.js program?
a global obj that provides information about, and control over, the current Node.js process
How do you access the process object in a Node.js program?
‘process’
always available to Node.js applications
What is the data type of process.argv in Node.js?
array of strings
What is a JavaScript module?
a single JS file (in JS context)
What values are passed into a Node.js module’s local scope?
require, module, exports, _filename, _dirname
Give two examples of truly global variables in a Node.js program.
process, console
What is the purpose of module.exports in a Node.js module?
require () returns content in module.exports object. So need to put content we want to use in other modules into module.exports in order to access
tells node.js which code to export and use in other modules
How do you import functionality into a Node.js module from another Node.js module?
use require( ) (pass in relative path to other module we want to access)
assign to variable
return value is value that is assigned to module.exports
What is the JavaScript Event Loop?
grabs tasks from task queue and pushes onto call stack when call stack is empty
collecting and processing events that is in queue
watches task queue and call stack, when call stack is clear, pushes tasks from task queue onto call stack
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking: stops future code from executing (synchronous)
occupies call stack (nothing can run while that function is being run (is on call stack))
non-blocking: asynchronous
What is a directory?
file system object that lists other files and directories
computer “folder”
What is a relative file path?
path to a file from where you are currently
What is an absolute file path?
path from the root file system to the target file path
root starts with a /
What module does Node.js include for manipulating the file system?
fs (file system)
What method is available in the Node.js fs module for writing data to a file?
writeFile
Are file operations using the fs module synchronous or asynchronous?
both!
What is NPM?
npm is the world’s largest software registry.
npm consists of three distinct components:
the website
the Command Line Interface (CLI)
the registry
What is a package?
reusable code + package.json file
directory w/ one of more files that also includes a package.json file
How can you create a package.json with npm?
npm init (can include –yes at end if you dont want survey; want default package.json)
What is a dependency and how to you add one to a package?
a package your project relies on in order to function properly
third party code or your code in another file etc. that your application requires in order to function
npm install command
What happens when you add a dependency to a package with npm?
downloads package from npm registry and puts into node_modules directory
dependencies property of package json is added
node_modules directory is installed
How do you add express to your package dependencies?
npm install express
What Express application method starts the server and binds it to a network PORT?
listen()
How do you mount a middleware with an Express application?
app.use( )
what is used to tell express what to do when you receive request or response
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
request obj: data model of http request message (FROM the client)
response obj: data model of the http response message (TO the client)
next
What does the express.json() middleware do and when would you need it?
returns a middleware that takes in request bodies in json format and parses it and puts in on request body as an obj
What is the significance of an HTTP request’s method?
indicates desired action
a rest api
get, post, delete, updating (put, casche)
What are the three states a Promise can be in?
pending, fulfilled, rejected
How do you handle the fulfillment of a Promise?
using .then()
passing the return value of promise into then
How do you handle the rejection of a Promise?
using .catch()
passing rejection callback function into catch
What is Array.prototype.filter useful for?
filters out specific elements from one array (that fit a certain condition) into a separate array
What is Array.prototype.map useful for
when you want to change all values in an entire array
transformation of an entire array
formatting strings
What is Array.prototype.reduce useful for?
incrementally reduces a whole array of values into a single value
kinda like a js aggreagate function
can create an object w/ array of values
can get array of values and create a lookup obj
What is “syntactic sugar”?
syntax within a programming language that is designed to make things easier to read or to express. It makes the language “sweeter” for human use
Syntactic sugar is usually a shorthand for a common operation that could also be expressed in an alternate, more verbose, form
What is the typeof an ES6 class?
function! not an object
Describe ES6 class syntax.
classkeyword nameofclass {
constructor(parameters) {
code block;
this.smt = “smt”;
}
prototypemethodname (parameters) {
code block;
}
etc.
}
*constructor is optional
What is “refactoring”?
the process of restructuring existing computer code—changing the factoring—without changing its external behavior.
Refactoring is intended to improve the design, structure, and/or implementation of the software (its non-functional attributes), while preserving its functionality.
changing code structure w/o changing behavior
class {}
the {} is the class body!
class constructor method
is what runs when you use “new” to create object!!
only necessary when you want to assign properties during object initialization
when you want to use “this”?
What is Webpack?
static module bundler for modern JavaScript applications.
webpack is a module bundler:
many modules ==> one module that can be loaded in the browser(usually main.js?)
*used for frontend dev?
How do you add a devDependency to a package?
npm install –save-dev packagenames
npm i -D packagenames
*need the –save-dev or -D
dev dependencies help devs write/deliver the code but are not required to run the code (in production)
need during development time!!
What is an NPM script?
property in package.json where the property name is any name you want, and value is a command line command
a convenient way to bundle common shell commands for your project.
They are typically commands, or a string of commands, which would normally be entered at the command line in order to do something with your application.
How do you execute Webpack with npm run?
npm run propetynamewherewebpackisavalue
for webpack-intro exercise, it would be npm run build
How are ES Modules different from CommonJS modules?
es: standardized module system for JS, import/export syntax
commonJS; default for node.js, require/module.export syntax
What kind of modules can Webpack support?
ECMAScript, commonJS, AMD
“default” in ES Modules
can only be used once per module
export default ‘myValue’
dont need curly braces
named exports
many per module
grouped variables in curly braces
(like this)
export {
noop,
toArray,
createElement
}
exported declarations
like functions, variables, classes
export const foo = ‘bar’
export function myFunction() {}
export class Student {}
*imported by their exact declared name and curly braces are mandatory
node module resolution
if you put a directory as file name for export or import, node.js system will automatically look for a index file to look into
es6-modules exercise: import { createElement, noop } from ‘../lib
same as import { createElement, noop } from ‘../lib/index
inheritance extends and super in classes
need to use super() in constructor function to state parent class’s constructor
so watever was in parent class constructor function, you state in super() before adding more things to “this”
think to person and instructor example
What does express.static() return?
a function that serves static files
What is the local __dirname variable in a Node.js module?
tells us the absolute path of the current module’s directory
What does the join() method of Node’s path module do?
joins all given path segments together using the platform-specific separator(/ or ) as a delimiter, then normalizes the resulting path.
What does fetch() return?
a promise that will be fulfilled once response is avaliable
Then the promise resolves to the Response object representing the response to your request.
What is the default request method used by fetch()?
get
How do you specify the request method (GET, POST, etc.) when calling fetch?
fetch (‘url’, {method: writethemethod});
second argument for fetch() is where you specify
response.json()
the result is not JSON!!!
parses JSON into a JS object!
When does React call a component’s componentDidMount method?
after the first successful render (lifecycle diagram shows this)
Name three React.Component lifecycle methods.
componentDIdMount, componentDidUpdate, componentWillUnmount, constructor, render
How do you pass data to a child component?
through props
for asynchronous errors in express
need to catch w/ next(err)
What does the acronym LIFO mean?
(data structures stacks)
last in, first out
What methods are available on a Stack data structure?
pop(), push(value) (most important)
peek(),
print() (for debugging purposes)
What must you do to access the value at an arbitrary point in a stack (not just the “top”)?
pop() each value off of stack one by one until you reach the point you want to reach
What does the acronym FIFO mean?
data structures (queue)
first in, first out
What methods are available on a Queue data structure?
dequeue, enqueue
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
dequeue values until the pt u want to access is at the front
How are linked lists different from an array?
arrays: random access (in order to go to a specific place in the list, you DONT have to start at the beginning, then jump from node to node until you get there)
linked lists: sequential access (in order to go to a specific place in the list, you have to start at the beginning, then jump from node to node until you get there), doesn’t need to be mutated to scan its contents
How would you access an arbitrary node in a linked list (not just the “head”)?
traverse the list (start at head and use next property until to get to where you want)
linked lists
way of organizing list of data (not the most convenient)
why they exist: due to a problem low level programmers have to deal with?
What must the return value of myFunction be if the following expression is possible?
myFunction( ) ( );
a function
myFunction get called, returns a function which gets called with second parentheses
What does this code do?
const wrap = value => ( ) => value;
function wrap(value) {
return function ( ) {
return value;
}
}
this is what is happening above (arrow function that returns another arrow function)
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
when it is defined (called lexical scope; ‘where it was written’)
What allows JavaScript functions to “remember” values from their surroundings?
