SENIOR SIDE Flashcards
ES6-CONST-LET
What is a code block? What are some examples of a code block?
a code block is anything within curly braces.
i.e. function code block, if statements, etc.
ES6-CONST-LET
What does block scope mean?
it means that variable declared within the code block are only for that block, i.e. local vs global variables
ES6-CONST-LET
What is the scope of a variable declared with const or let?
block scope
ES6-CONST-LET
What is the difference between let and const?
VAR Yes Yes Function Scope Yes
LET Yes No Block Scope No
CONST No No Block Scope No
ES6-CONST-LET
Why is it possible to .push() a new value into a const variable that points to an Array?
When you’re adding to an array or object you’re not re-assigning or re-declaring the constant, it’s already declared and assigned, you’re just adding to the “list” that the constant points to.
ex: we are not changing the typeof in the variable
ES6-CONST-LET
How should you decide on which type of declaration to use?
whether or not you ever want that variable to be redeclared or reassigned???
ES6-TEMPLATE-LITERALS
What is the syntax for writing a template literal?
` some text and ${some variable or property}`
ES6-TEMPLATE-LITERALS
What is “string interpolation”?
string interpolation is the process of evaluating a string literal containing one or more placeholders ${someVariable}, yielding a result in which the placeholders are replaced with their corresponding values.
ES6-DESTRUCTURING
What is destructuring, conceptually?
it is breaking down an object or array and assigning key/value pairs to a variable/value pair
ES6-DESTRUCTURING
What is the syntax for Object destructuring?
name = {
firstName: ‘Andy’,
lastName: ‘Chen’
}
const { firstName, lastName } = name
- this creates a variable named firstName with value of name.firstName and variable named lastName with a value of name.lastName
const { myName: firstName } = name
- this creates a variable named myName with value of name.firstName
ES6-DESTRUCTURING
What is the syntax for Array destructuring?
const someArray = [0 , 1, 2, 3, 4]
const [number1, number2, number3] = someArray
or to get the last ones after number3 then
const [ , , , number4] = someArray
ES6-DESTRUCTURING
How can you tell the difference between destructuring and creating Object/Array literals?
braces on the right side of the equal sign are creating
braces on left-hand side and that’s destructuring
ES6-ARROW-FUNCTIONS
What is the syntax for defining an arrow function?
const functionName = parameter => expression
or const functionName = (param1, param2) => param1 + param2
or const functionName = (param1, param2) => ( {param1:param2} )
ES6-ARROW-FUNCTIONS
When an arrow function’s body is left without curly braces, what changes in its functionality?
it has an implicit return
ES6-ARROW-FUNCTIONS
How is the value of ‘this’ determined within an arrow function?
arrow functions have a lexical scope (using global variables) so the value of ‘this’ is determined by the surrounding scope.
i.e. either window if it’s a global scope or local variable if arrow function is wrapped in a regular function
tim : arrow function = ‘this’ is defined at definition time
regular function = ‘this’ is defined at call time
COMMAND-LINE-BASICS
What is a CLI?
command line interface
COMMAND-LINE-BASICS
What is a GUI?
Graphical user interface
COMMAND-LINE-BASICS
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 = ultimate guide cat = combine files ls = check file directories pwd = print current working directory echo = print to terminal, like a console.log touch = create a new file mkdir = make directories / files mv = move and renames file rm = remove a file cp = copy a file
COMMAND-LINE-BASICS
What are the three virtues of a great programmer?
laziness, impatience, and hubris???
NODE-INTRO
What is Node.js?
Node.js is a javascript runtime. A program that allows JavaScript to be run outside of a web browser.
NODE-INTRO
What can Node.js be used for?
non-blocking, event driven servers
NODE-INTRO
What is a REPL?
read-eval-print loop, interactive top level or language shell
NODE-INTRO
When was Node.js created?
2009
NODE-INTRO
What back end languages have you heard of?
Python, MySQL, Node.js
NODE-PROCESS-ARGV
What is the process object in a Node.js program?
It is an essential component in the Node.js ecosystem as it provides various information sets about the runtime of a program.
NODE-PROCESS-ARGV
How do you access the process object in a Node.js program?
const process = require('process');
or just using process since it's globalNODE-PROCESS-ARGV
What is the data type of process.argv in Node.js?
, an array of strings
NODE-MODULE-SYSTEM
What is a JavaScript module?
a JavaScript file containing related code
NODE-MODULE-SYSTEM
What values are passed into a Node.js module’s local scope?
exports, require, module, __filename, __dirname
ex:
(function (exports, require, module, \_\_filename, \_\_dirname) {
// your code is here
});
NODE-MODULE-SYSTEM
Give two examples of truly global variables in a Node.js program.
setInterval, setTimeOut
NODE-REQUIRE
What is the purpose of module.exports in a Node.js module?
to export functions to another node.js module
NODE-REQUIRE
How do you import functionality into a Node.js module from another Node.js module?
const someVariable = require(‘./someFileName’);
THE-EVENT-LOOP
What is the JavaScript Event Loop?
An event loop is something that pulls stuff out of the queue and places it onto the function execution stack whenever the function stack becomes empty.
THE-EVENT-LOOP
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking = synchronous, won’t allow the computer to do anything else until the code block is completely run through
non-blocking = asynchronous can run other things while waiting
NODE-FS-READFILE
What is a directory?
it is a path to what people call a folder
NODE-FS-READFILE
What is a relative file path?
it is the actual file path to go from one directory to another
NODE-FS-READFILE
What is an absolute file path?
a file path from the root
NODE-FS-READFILE
What module does Node.js include for manipulating the file system?
fs module
NODE-FS-WRITEFILE
What method is available in the Node.js fs module for writing data to a file?
writeFile method
NODE-FS-WRITEFILE
Are file operations using the fs module synchronous or asynchronous?
asynchronous
HTTP-MESSAGES-RECAP
What is a client?
a device that request services
HTTP-MESSAGES-RECAP
What is a server?
something that responds to client requests
HTTP-MESSAGES-RECAP
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
HTTP-MESSAGES-RECAP
What is on the first line of an HTTP request message?
start line (3 items)
- http method (GET, PUT or POST)
- URL
- HTTP version ( HTTP/1.1)
HTTP-MESSAGES-RECAP
What is on the first line of an HTTP response message?
protocol version, status code, status text
HTTP-MESSAGES-RECAP
What are HTTP headers?
meta data formatted as key:value pairs
HTTP-MESSAGES-RECAP
Is a body required for a valid HTTP message?
no
NPM-INTRO
What is NPM?
stands for Node Package Manager
- largest JS database of free code, used to share and download code
- website, CLI, and registry
NPM-INTRO
What is a package?
package.json and directory with 1 or more files in it
NPM-INTRO
How can you create a package.json with npm?
npm init –yes
NPM-INTRO
What is a dependency and how to you add one to a package?
something that the package will need to run and
to download it use npm install on command line
NPM-INTRO
What happens when you add a dependency to a package with npm?
- dependencies object will be updated
- adds the node list to the package
EXPRESS-INTRO
How do you add express to your package dependencies?
npm install express
EXPRESS-INTRO
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
EXPRESS-HELLO-WORLD
How do you mount a middleware with an Express application?
use the ‘use’ method on an express object
i.e. app.use( )
EXPRESS-HELLO-WORLD
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req for request and res for respond
EXPRESS-GET-JSON
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
EXPRESS-POST-JSON
What does the express.json() middleware do and when would you need it?
parses incoming json body and need it when parsing incoming json bodies
EXPRESS-DELETE
What is the significance of an HTTP request’s method?
tells the server if you’re getting or posting
POSTGRES-INTRO
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a relational database management system,
mysql, SQL server by Microsoft, and Oracle by Oracle Corporation
POSTGRES-INTRO
What are some advantages of learning a relational database?
RDBMS VS non relational
good at securing data and making complex queries vs non relational is better at storing more massive data
they’re everywhere, if you learn one, you basically know them all
POSTGRES-INTRO
What is one way to see if PostgreSQL is running?
sudo service postgresql status
POSTGRES-DATABASE
What is a database schema?
a collection of related tables
POSTGRES-DATABASE
What is a table?
list of rows with related attributes
POSTGRES-DATABASE
What is a row?
a set of attributes (columns)
SQL-SELECT
What is SQL and how is it different from languages like JavaScript?
SQLstands for Structured Query Language and it’s different from JavaScript because it’s a declarative langauge. SQL is like HTML and CSS where you describe the results and the programs renders the results.
SQL-SELECT
How do you retrieve specific columns from a database table?
SELECT “thisColumn”, “thatColumn”
FROM thisTable;
SQL-SELECT
How do you filter rows based on some specific criteria?
SELECT “thisColumn”, “thatColumn”
FROM thisTable
WHERE “thisColumn” > 1;
SQL-SELECT
What are the benefits of formatting your SQL?
looks cleaner and easier to read
SQL-SELECT
What are four comparison operators that can be used in a where clause?
<, >, =, !=
SQL-SELECT
How do you limit the number of rows returned in a result set?
at the very bottom LIMIT clause;
SELECT “thisColumn”, “thatColumn”
FROM thisTable
WHERE “thisColumn” > 1
LIMIT 5;
SQL-SELECT
How do you retrieve all columns from a database table?
SELECT *
FROM thisTable;
SQL-SELECT
How do you control the sort order of a result set?
order by clause
can use desc or ascending is default
SQL-INSERT
How do you add a row to a SQL table?
insert into “table” (“col1”, “col2”)
values (‘hello’, ‘world’);
SQL-INSERT
What is a tuple?
a list of values
SQL-INSERT
How do you add multiple rows to a SQL table at once?
insert into “table” (“col1”, “col2”)
values (‘hello’, ‘world’),
(‘something’, ‘else’);
SQL-INSERT
How do you get back the row being inserted into a table without a separate select statement?
insert into “table” (“col1”, “col2”)
values (‘hello’, ‘world’),
(‘something’, ‘else’)
returning *; <— the returning clause with * to return all.
SQL-UPDATE
How do you update rows in a database table?
update “thisTable”
set “name” = ‘something’
where “name” = ‘else’;
SQL-UPDATE
Why is it important to include a where clause in your update statements?
so you dont accidentally chage the entire column
SQL-DELETE
How do you delete rows from a database table?
delete from “table”
where “name” = ‘something’
returning *; <– returning clause is optional
SQL-DELETE
How do you accidentally delete all rows from a table?
delete from “table”;
SQL-JOIN
What is a foreign key?
a foreign key is a column used in another table to link them
SQL-JOIN
How do you join two SQL tables?
use the join clause
select *
from “thisTable”
join “thisOtherTable” using (“thisColumn”);
SQL-JOIN
How do you temporarily rename columns or tables in a SQL statement?
use alias, can use them for more than just select statements
select “firstName” as “first”
from “thisTable” as “table”
join “otherTable” as “other”;
SQL-AGGREGATES
What are some examples of aggregate functions?
MIN, MAX, SUM
SQL-AGGREGATES
What is the purpose of a group by clause?
to group data that has unique values
ES6-PROMISES
What are the three states a Promise can be in?
pending, fulfiled or rejected
ES6-PROMISES
How do you handle the fulfillment of a Promise?
promise.then and pass a callback function
ES6-PROMISES
How do you handle the rejection of a Promise?
promise.catch and pass a callback function
ARRAY-FILTER
What is Array.prototype.filter useful for?
Creating a new array while excluding some elements.
ARRAY-MAP
What is Array.prototype.map useful for?
Creating a new array containing the transformed elements of another.
ARRAY-REDUCE
What is Array.prototype.reduce useful for?
Combining the elements of an array into a single value.
ES6-CLASSES
What is “syntactic sugar”?
syntax that is designed to make things easier to read or to express.
ES6-CLASSES
What is the typeof an ES6 class?
functions
ES6-CLASSES
Describe ES6 class syntax.
class someName {
constructor (var1, var2, var3) {
this.var1 = var1;
this.var2 = var2;
this.var3 = var3;
}
someFunction() {
} }
ES6-CLASSES
What is “refactoring”?
restructuring code without changing the purpose of the original code
WEBPACK-INTRO
What is Webpack?
it is a module bundler for JS that transforms html, css, and images. Webpack takes modules with dependencies and generates static assets representing those modules.
WEBPACK-INTRO
How do you add a devDependency to a package?
use –save-dev in the command line
ex: npm install –save-dev webpack
WEBPACK-INTRO
What is an NPM script?
way to bundle common shell commands for your project
WEBPACK-INTRO
How do you execute Webpack with npm run?
npm run build
ES6-MODULES
How are ES Modules different from CommonJS modules?
ES Module = standard for JS
ex: import, export
CommonJS = default for Node.js
ex: require
ES6-MODULES
What kind of modules can Webpack support?
ECMAScript, CommonJS, and AMD module
REACT-ELEMENTS
What is React?
a library for building UIs. React makes it easy to create interactive UIs.
REACT-ELEMENTS
What is a React element?
a react element is what gets returned from components
a plain js object.
REACT-ELEMENTS
How do you mount a React element to the DOM?
const root = ReactDOM.createRoot(container); root.render(div);
BABEL-INTRO
What is Babel?
it is a compiler that transforms es6 JS to es5 JS to make it backwards compatible
BABEL-INTRO
What is a Plug-in?
it is a software addon that enhances the program
BABEL-INTRO
What is a Webpack loader?
allow you to pre-process files as you import or “load” them
BABEL-INTRO
How can you make Babel and Webpack work together?
use npm i –save-dev babel-loader
babel compiles the code and webpack runs the code
REACT-JSX
What is JSX?
syntax extension to JavaScript that produces react “elements”, structures UI similar to html
REACT-JSX
Why must the React object be imported when authoring JSX in a module?
because internally every JSX is creating a React Component using JSX transformer
REACT-JSX
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
npm i –save-dev webpack
npm i –save-dev babel-loader
npm i –save-dev @babel/plugin-transform-react-jsx
REACT-FUNCTION-COMPONENTS
What is a React component?
it is a function or a class whose job is to return react elements
REACT-FUNCTION-COMPONENTS
How do you define a function component in React?
just like any other function but with first letter capital, but return what looks like html
function CustomButton() {
return <.button>Click Me! <./button>; (remove dots. brainscape dont allow)
}
REACT-FUNCTION-COMPONENTS
How do you mount a component to the DOM?
const container = document.querySelector('#root');
const root = ReactDOM.createRoot(container);
root.render(<.CustomButton />);
REACT-PROPS-AND-EXPRESSIONS
What are props in React?
Props (properties) are arguments passed into React components through HTML attributes
REACT-PROPS-AND-EXPRESSIONS
How do you pass props to a component?
by typing it with the react component
ex:
function CustomButton(props) {
console.log(props.name)
return {props.text};
}
<.CustomButton text=”something” name=”andy” />
REACT-PROPS-AND-EXPRESSIONS
How do you write JavaScript expressions in JSX?
within curly braces { }
curly braces are how we escape JSX syntax into JS syntax
REACT-CLASS-COMPONENTS
How do you create “class” component in React?
class Something extends React.Component {
render(props) {
return <.button> { props.text } <./button>
}
}REACT-CLASS-COMPONENTS
How do you access props in a class component?
???
REACT-EVENTS-AND-STATE
What is the purpose of state in React?
to store information or data of react components
REACT-EVENTS-AND-STATE
How do you pass an event handler to a React element?
pass as props (camelCase)
pass the function
ex:
<.button onClick={this.function}><./button>
REACT-FORM-CONTROLS
What are controlled components?
REACT-FORM-CONTROLS
What two props must you pass to an input for it to be “controlled”?
REACT-RENDERING-LISTS
What Array method is commonly used to create a list of React elements?
map method
REACT-RENDERING-LISTS
What is the best value to use as a “key” prop when rendering lists?
EXPRESS-STATIC
What does express.static() return?
returns an object
EXPRESS-STATIC
What is the local __dirname variable in a Node.js module?
tells you the absolute path of the directory containing the currently file
EXPRESS-STATIC
What does the join() method of Node’s path module do?
join combines directories into an absolute file path
FETCH
What does fetch() return?
fetches a resource from the network and returns a promise which is fulfilled once the response is available
FETCH
What is the default request method used by fetch()?
a get request
FETCH
How do you specify the request method (GET, POST, etc.) when calling fetch?
as the second optional parameter of fetch
ex: fetch (‘someLink’, {method: post})
FETCH-IN-REACT
When does React call a component’s componentDidMount method?
immediately after a component is mounted (inserted into the dom tree)
FETCH-IN-REACT
Name three React.Component lifecycle methods.
componentsDidMount( ),
componentsDidUpdate( ),
componentWillUnmount( )
FETCH-IN-REACT
How do you pass data to a child component?
by using props to pass data
