Senior Side Flashcards
What is a code block? What are some examples of a code block?
a chunk of code that will do a specific task when appropriate (when the function is called or a conditional is met/true)
Examples: if statement, for loop, while loop, etc
What does block scope mean?
the variables exist only within the corresponding block; variables are not visible outside the block
as opposed to function scoped
What is the scope of a variable declared with const or let?
block-scoped
What is the difference between let and const?
let: you can reassign them to different values, but you can’t redeclare; you don’t need to initialize it with a value
const: immutable so you can’t reassign them to different values, nor can you redeclare; requires an initializer, const key-words are read-only variables
Why is it possible to .push() a new value into a const variable that points to an Array?
the reference to the variable is immutable but the value of the variable is not so you can manipulate it
How should you decide on which type of declaration to use?
determine whether or not you will need to reassign said variable; if you will need to reassign it at some point, use let. If not, you can use const
What is the syntax for writing a template literal?
wrap the string in backticks
any expressions or variables go inside curly braces with a dollar sign before
What is “string interpolation”?
the ability to substitute part of the string for the values of variables or expressions
What is destructuring, conceptually?
taking properties and values from an object and assigning their values to independent variable
What is the syntax for Object destructuring?
const {names you want to assign to your variables} = object
What is the syntax for Array destructuring?
const [names you want to assign to your variables] = array
How can you tell the difference between destructuring and creating Object/Array literals?
where the brackets/curly braces are
What is the syntax for defining an arrow function?
param => expression
( ) => expression
(param1, param2, … ) => expression
When an arrow function’s body is left without curly braces, what changes in its functionality?
without curly braces, implicit return will happen
if no curly braces, the expression must be a single expression
can’t have statements (eg. return, if, for loops etc)
How is the value of this determined within an arrow function?
an arrow function captures the this value of the enclosing context instead of creating its own this context
doesn’t have its own this value
lexical scope: where you wrote it
this is defined at the call time of its outer function (lexical scope)
What is a CLI?
Command-line interface processes commands to a computer program in the form of lines of text
What is a GUI?
Graphical user interface is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, instead of text-based user interfaces, typed command labels or text navigation
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- interface to online reference manuals (use when there’s a command you don’t know much about)
cat- concatenate files and print on the standard output (use when you want to see contents of file or even combine files together in a new file)
ls- list directory contents (when you want to see what is inside the current directory)
(-a do not ignore entries that start with .
- F append indicator to entries)
pwd- print name of current/working directory ( when you want to know which directory you are in currently)
echo- display a line of text (when you want to display text and possibly put that text into a file)
touch- create new files
mkdir- make directories
(-p makes parent directories as needed)
mv- rename files/directories
rm- delete files
(-r removes directories and all their contents
-f ignore nonexistent files and arguments, never prompt)
cp- copy files and directories
(-r copy directories recursively)
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
an asynchronous event-driven JavaScript runtime
Node.js is a set of libraries for JavaScript which allows it to be used outside of the browser
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
It is primarily focused on creating simple, easy-to-build network clients and servers
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
An example of a repl is the inspect tools
When was Node.js created?
2009
What back-end languages have you heard of?
Python, Ruby, php, Java, C#, Perl, coldfusion, Scala, JavaScript, Go, Rust, C, C++, cobol, kotlin, clojure, crystal, elixir, erlang
.net (framework in C#)
SQL (database)
frameworks are libraries written within a language
What is a computer process?
a program or task running on your computer
program: like the code you want to run
process: like the code actually running
the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
665
Why should a full-stack Web developer know that computer processes exist?
front-end and back-end are two different processes
if we’re trying to send a request to the back-end and it’s not working, we need to make sure the back-end process is actually running
for a full-stack app to work we need a front-end process (Chrome), a back-end process (Node.js), and a database process (PostSQL?)
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
How do you access the process object in a Node.js program?
you can just console.log process to access the process object; since its global, it’s 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
What values are passed into a Node.js module’s local scope?
exports, require, module, _filename, _dirname
Give two examples of truly global variables in a Node.js program.
process, global, console, URL, clearImmediate(immediateObject), clearInterval(intervalObject), clearTimeout(timeoutObject)
What is the purpose of module.exports in a Node.js module?
allows for variables in one module to be used in another file
module exports is an empty object that allows you to put modules inside that you want to be exported and used in other files when using the require function
it gives you access to what modules are being exported
How do you import functionality into a Node.js module from another Node.js module?
using the require function when you pass in a string of the ID or the path of the module you want to import
What is the JavaScript Event Loop?
orchestrates asynchronous functions (so our callback functions)
the event loop checks the call stack and the task queue, if the call stack is empty it looks to the task queue, takes the first thing on the queue, and places it on the stack
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking is when there is code that is slow on the call stack. this becomes an issue because blocking that stack means the browser can’t do anything while it waits for everything to run
blocking methods execute synchronously
non-blocking methods execute asynchronously
if there’s a code running, no other code can be running
blocking is anything that just sits on the call stack until it is complete
non-blocking is something that is deferred to the task queue that waits to be executed
What is a directory?
a directory is a file system cataloging structure which contains references to other computer files, and possibly other directories
we call them folders on computers but folders are just icons lol
What is a relative file path?
location relative to the current directory
What is an absolute file path?
contains the root which you can see started by a forward slash, and a directory list to get where you need to be
where is this thing in the entire system
What module does Node.js include for manipulating the file system?
fs module
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?
asynchronous by default
if it says Sync at the end of the method then it’s synchronous
What is NPM?
the world’s largest software registry where developers can share and borrow packages
made of the website, CLI, and a registry
CLI is a way to add or get stuff from the website and the registry
What is a package?
modules, bits of reusable code, if it has a package.json, then it is considered a package
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
What is on the first line of an HTTP request message?
- HTTP method (GET, POST, etc)
- The request target (usually a URL)
- HTTP version
What is on the first line of an HTTP response message?
- Protocol version
- Status code
- Status text
What are HTTP headers?
they allow the client and server to pass additional information with an HTTP request or response
Is a body required for a valid HTTP message?
no it’s optional
What is a package?
modules, bits of reusable code, if it has a package.json, then it is considered a package
directory with one or more files in it PLUS a package.json
How do you add express to your package dependencies?
npm install express
The difference between these two, is that devDependencies are modules which are only required during development, while dependencies are modules which are also required at runtime
What Express application method starts the server and binds it to a network PORT?
listen method
Binds and listens for connections on the specified host and port
How do you mount a middleware with an Express application?
use the use method of the app object
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
request object, response object
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
What is the significance of an HTTP request’s method?
it’s just semantics, it’s a way for the developer to express intent; the callback function is what determines what happens
but the request method and the request target has to match the path, then the callback will run
What does the express.json() middleware do and when would you need it?
it returns a middleware that gives your app the ability to parse json, we need it when you expect client requests that have json bodies
What is PostgreSQL and what are some alternative relational databases?
powerful, free, open-source Relational Database Management System (RDBMS)
MySQL, SQLserver and Oracle
Postgres is an object-relational database, while MySQL is a purely relational database. This means that Postgres includes features like table inheritance and function overloading, which can be important to certain applications. Postgres also adheres more closely to SQL standards
What are some advantages of learning a relational database?
security, organized, relational model is commonly used so it’s easier to pick up on other databases, lets you store data related to each other
What is one way to see if PostgreSQL is running?
sudo service postgresql status command, top command, check with pgweb
What is a database schema?
a collection of tables
A schema defines how the data in a relational database should be organized
What is a table?
“relations”
a list of rows each having the same set of attributes
What is a row?
a data record within a table, representing a record of a specific item
What is SQL and how is it different from languages like JavaScript?
SQL (structured query language) is the primary way of interacting with relational databases. It’s a powerful way of retrieving, creating, and manipulating data in a relational database
SQL is a declarative programming language whereas JS is an imperative programming language.
you describe the results and the programming environment comes up with its own plan to do it
How do you retrieve specific columns from a database table?
select statement
select keyword followed by a comma-separated list of column names surrounded by double quotes; column names are followed by the from clause specifying which table to get data from
How do you filter rows based on some specific criteria?
using the where clause followed by an expression
the comparison will come out as true or false
What are the benefits of formatting your SQL?
having a consistent style and helps with readability
What are four comparison operators that can be used in a where clause?
=, less than, greater than, !=
How do you limit the number of rows returned in a result set?
limit clause
limit keyword and maximum results you want
How do you retrieve all columns from a database table?
select *
probably better practice, however, to list everything out even if you want them all
How do you control the sort order of a result set?
order by clause
you can also use the desc keyword for descending order
by default, the order is not predictable
How do you add a row to a SQL table?
using an insert statement
INSERT INTO table_name(column1, column2, …)
VALUES (value1, value2, …);
What is a tuple?
a list of values, similar to arrays in JS, can be a mix of datatypes
How do you add multiple rows to a SQL table at once?
by specifying more than one tuple of values, separated by commas
How do you get back the row being inserted into a table without a separate select statement?
returning clause
How do you update rows in a database table?
update statement with a set clause
Why is it important to include a where clause in your update statements?
if you don’t include a where clause, it will update every row in the database
is there a way to undo that change or is it permanent
How do you delete rows from a database table?
delete statement
How do you accidentally delete all rows from a table?
if you don’t include a where clause you can delete everything by accident
What is a foreign key?
a key that’s used to link two tables together
How do you join two SQL tables?
use a “from” clause listing the table you want to select from followed by a “join” clause indicating which table you want to join and a “using” keyword to instruct the database server what to join them by
How do you temporarily rename columns or tables in a SQL statement?
column/table aliasing by using the “as” keyword
you would put the original name on the left of the “as” keyword and the alias name on the right of the “as” keyword
What are some examples of aggregate functions?
sum( ), max( ), min( ), every( ), avg( ), count( ), json aggregates
What is the purpose of a group by clause?
instead of having to ask a question to every row, you can group rows together and then do the aggregate functions on the groups of rows, more efficient
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.
How do you handle the fulfillment of a Promise?
then method on the promise object
when the promise transitions from pending to fulfilled, then the callback
How do you handle the rejection of a Promise?
catch method on the promise object
What is Array.prototype.filter useful for?
for when you need values from an array with a specific condition
What is Array.prototype.map useful for?
for performing a specific task on all elements of a given array
What is Array.prototype.reduce useful for?
when you want to accumulate values in a given array and return their combined value
What is “syntactic sugar”?
syntax in a programming language that makes it easier to read/write
syntactic sugar if it can be removed from the language without any effect on what the language can do: functionality and expressive power will remain the same
example:
get_array(Array, vector( i , j ))
can be expressed as
Array[ i ][ j ]
What is the typeof an ES6 class?
function
classes are syntactic sugar over prototypal inheritance
Describe ES6 class syntax.
class keyword, optional class name, body
constructor function within the body
0 or more method definitions within the body
What is “refactoring”?
improving the design, structure, and/or implementation of the software while preserving its functionality
the behavior of the system does not change
What is Webpack?
a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts, and stylesheets
an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules
How do you add a devDependency to a package?
npm install –save-dev
to add dependencies you’d use :
npm install [–save-prod]
** –save-prod is default of npm install so its optional to include
What is an NPM script?
npm scripts are simply terminal commands that when run will do a specific task, we find them in the scripts object of our package.json
How do you execute Webpack with npm run?
npm run command
most common to use npm run build
How are ES Modules different from CommonJS modules?
ES syntax is more compact
ES has support for asynchronous loading and configurable module loading.
What is React?
React.js is a JavaScript library that can be used to build user interfaces
What is a React element?
return value of the createElement method
what shows up on the page
What is a React element?
return value of the createElement method, object
what shows up on the page
What is Babel?
a JavaScript compiler
mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments
What is Babel?
a JavaScript compiler
mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments
What is a Webpack loader?
an npm module that helps webpack to collect code from all the files in your application written in a certain language and converts them to
How can you make Babel and Webpack work together?
install them as a devdependencies
How can you make Babel and Webpack work together?
install babel as a dev dependency
What is JSX?
a syntax extension to JavaScript
Why must the React object be imported when authoring JSX in a module?
Babel compiles JSX down to React.createElement( ) calls
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
using babel-loader and adding the plugin @babel/plugin-transform-react-jsx
What is a React component?
they are like JS functions that return React elements that describe what you should see on the screen
How do you define a function component in React?
function keyword, function identifier, followed by parameter props and curly braces for the code block
How do you mount a component to the DOM?
render method
What are props in React?
props are objects React Props (short for properties) are like function arguments in JavaScript and attributes in HTML... pass props as an argument to function component
How do you pass props to a component?
How do you write JavaScript expressions in JSX?
you put them inside curly braces
How do you create a “class” component in React?
class [ComponentName] extends React.Component {
render( ) {
return reactElement
}
}How do you access props in a class component?
this keyword
What Array method is commonly used to create a list of React elements?
array.map( )
What is the best value to use as a “key” prop when rendering lists?
a string that uniquely identifies a list item amongst its siblings; good to use IDs from your data if data has one
What are controlled components?
An input form element whose value is controlled or driven by the React state
What two props must you pass to an input for it to be “controlled”?
onChange
value
What does fetch() return?
It returns a promise containing the response (Response object)
A Promise that resolves to a Response object
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
add the method type by making the second argument an object, the key “method” and the value a string of the method you want to use
pass in an object of options, one of those being method
When does React call a component’s componentDidMount method?
invoked immediately after a component is mounted (inserted into the tree)
React runs it ONCE after the first successful render
Name three React.Component lifecycle methods.
constructor(),
render(),
componentDidMount(),
(these three run in this order)
componentDidUpdate(), componentWillUnmount()
How do you pass data to a child component?
you pass the data as a prop
What does express.static() return?
middleware function in Express. It serves static files
What must the return value of myFunction be if the following expression is possible?
myFunction()();
the return value of myFunction’s return value
in other words the return value of the inner function
What does this code do? const wrap = value => () => value;
value if a function that returns an arrow function
the return of the inner function is being assigned to the variable wrap?
What must the return value of myFunction be if the following expression is possible?
myFunction()();
a function
What does this code do? const wrap = value => () => value;
it returns the second function
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
its determined when and WHERE it is defined
lexical scope means the function scope is determined when defined; it means you can tell its scope by just looking at it/where its defined
