ES6 Flashcards
What is a code block? What are some examples of a code block?
es6-const-let
What does block scope mean?
es6-const-let
In JavaScript, blocks are denoted by curly braces {} , for example, the if else, for, do while, while, try catch
What is the scope of a variable declared with const or let?
es6-const-let
blocked-scope
What is the difference between let and const?
es6-const-let
lets can be reassigned, const cannot.
Why is it possible to .push() a new value into a const variable that points to an Array?
es6-const-let
You can update and reassign the value, but not what is assigned to the variable
How should you decide on which type of declaration to use?
es6-const-let
everything should be const until it cannot be, then use let. Use let mainly in loops.
What is the syntax for writing a template literal?
es6-template-literals
to create a template literal, wrap your text in backticks (`). for substitution ${}
What is “string interpolation”?
es6-template-literals
The substitutions allow you to embed variables and expressions in a string. The JavaScript engine will automatically replace these variables and expressions with their values.
What is destructuring, conceptually?
es6-destructuring
provides an alternative way to assign properties of an object to variables to store and use
What is the syntax for Object destructuring?
es6-destructuring
const { property1: variable1, property2: variable2 } = object;
What is the syntax for Array destructuring?
es6-destructuring
const [x, y, z] = getScores();
How can you tell the difference between destructuring and creating Object/Array literals?
es6-destructuring
what side the curly bracelets is on. left side is destructuring, right side is creating.
What is the syntax for defining an arrow function?
es6-arrow-functions
const variable name = (…args) => expression
When an arrow function’s body is left without curly braces, what changes in its functionality?
es6-arrow-functions
the arrow function has an implicit return
How is the value of this determined within an arrow function?
es6-arrow-functions
Arrow functions have a lexical this and its value within the arrow function is determined by the surrounding scope.
What is a CLI?
command-line-basics
command line interface
What is a GUI?
command-line-basics
Graphical user interface
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
command-line-basics
man - command information
cat - print content of text of file
ls - list the files
pwd - check what directory youre on
echo - line of text
touch - Modification time or mtime changes when a file’s contents change.
mkdir - creates a new, empty directory
mv- move and rename files
rm - remove files or directories
cp - copies folder and files
What are the three virtues of a great programmer?
command-line-basics
Laziness, Impatience, and Hubris.
What is Node.js?
node-intro
program that allows js to be run outside of browser
What can Node.js be used for?
node-intro
commonly 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?
node-intro
read, eval, print loop, allows to run language in background
When was Node.js created?
node-intro
may 2009
What back end languages have you heard of?
node-intro
Java, python, c++
What is a computer process?
node-process
a process is the instance of a computer program that is being executed by one or many threads.
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
node-process
a lot
Why should a full stack Web developer know that computer processes exist?
node-process
because they generate application
What is the process object in a Node.js program?
node-process-argv
The process object in Node. js is a global object that can be accessed inside any module without requiring it.
How do you access the process object in a Node.js program?node-process-argv
console.log(process) or const process = require(‘process’);
What is the data type of process.argv in Node.js?
node-process-argv
an array
What is a JavaScript module?
node-module-system
a single .js file. it’s wrapped in functionality that’s easily imported and used.
What values are passed into a Node.js module’s local scope?
node-module-system
exports, require, module, __filename, and __dirname
Give two examples of truly global variables in a Node.js program.
node-module-system
process, exports, require, module, __filename, and __dirname
What is the purpose of module.exports in a Node.js module?
node-require
Module exports are the instructions that tell Node. js which bits of code (functions, objects, strings, etc.) to export from a given file so that other files are allowed to access the exported code.
How do you import functionality into a Node.js module from another Node.js module?
node-require
To include functions defined in another file in Node.js, we need to import the module. we will use the require function keyword at the top of the file.
What is the JavaScript Event Loop?
the-event-loop
JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
What is different between “blocking” and “non-blocking” with respect to how code is executed?
the-event-loop
Blocking refers to operations that block further execution until that operation finishes while non-blocking refers to code that doesn’t block execution.
What is a directory?
node-fs-readfile
type of file that contains collections of files
What is a relative file path?
node-fs-readfile
A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy.
What is an absolute file path?
node-fs-readfile
An absolute path is defined as the specifying the location of a file or directory from the root directory. like website
What module does Node.js include for manipulating the file system?
node-fs-readfile
fs module
What method is available in the Node.js fs module for writing data to a file?
node-fs-writefile
fs.writeFile()
Are file operations using the fs module synchronous or asynchronous?
node-fs-writefile
What is a client?
http-messages-recap
service requesters
What is a server?
http-messages-recap
workloads between the providers of a resource or service. a software program listen and respond to request
Which HTTP method does a browser issue to a web server when you visit a URL?
http-messages-recap
GET method
What is on the first line of an HTTP request message?
http-messages-recap
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. An HTTP method, The request target, The HTTP version
What is on the first line of an HTTP response message?
http-messages-recap
The start line of an HTTP response, called the status line, contains
The protocol version, usually HTTP/1.1.
A status code, indicating success or failure of the request. Common status codes are 200, 404, or 302
A status text. A brief, purely informational, textual description of the status code to help a human understand the HTTP message.
A typical status line looks like: HTTP/1.1 404 Not Found.
What are HTTP headers?
http-messages-recap
HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value. Whitespace before the value is ignored.
Is a body required for a valid HTTP message?
http-messages-recap
Not all requests have one: requests fetching resources, like GET, HEAD, DELETE, or OPTIONS, usually don’t need one.
What is NPM?
npm-intro
npm is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development
What is a package?
npm-intro
Bits of reusable code. a directory with one or more files in it
How can you create a package.json with npm?
npm-intro
Enter the root folder of your project
Run npm init
Fill out the prompts to create your package.json
What is a dependency and how to you add one to a package?npm-intro
A dependency is another package that your package needs in order to work. Dependencies are specified in your pubspec. You list only immediate dependencies—the software that your package uses directly.
. To add dependencies and devDependencies to a package.json file from the command line, you can install them in the root directory of your package using the –save-prod flag for dependencies (the default behavior of npm install) or the –save-dev flag for devDependencies.
What happens when you add a dependency to a package with npm?
npm-intro
gets stored in the package.json file and in the node module folder
How do you add express to your package dependencies?
express-intro
npm install express
What Express application method starts the server and binds it to a network PORT?
express-intro
listen method ls
How do you mount a middleware with an Express application?
express-hello-world
use method
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
express-hello-world
request and respond method
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
express-get-json
application/json
What is the significance of an HTTP request’s method?
express-delete
allows to se up individual routes depending on what method is used. setup routes and endpoints.
What is PostgreSQL and what are some alternative relational databases?
postgres-intro
relationtional database information.
What are some advantages of learning a relational database?
postgres-intro
good for storing and collecting data. and having relationship between to make it easier to access
What is one way to see if PostgreSQL is running?
postgres-intro
top command or sudo service postgresql status
What is a database schema?
postgres-database
A collection of tables is called a schema. A schema defines how the data in a relational database should be organized
What is a table?
postgres-database
Relational databases store data in relations, commonly referred to as tables
What is a row?
postgres-database
A table is a list of rows each having the same set of attributes.
What is SQL and how is it different from languages like JavaScript?
sql-select
primary way of interacting with relational databases.
How do you retrieve specific columns from a database table?
sql-select
The query starts with the select keyword.
The select keyword is followed by a comma-separated list of column names, each surrounded by “ double quotes.
The column names are followed by a from clause specifying which table to retrieve the data from.
The query must end in a ; semicolon.
How do you filter rows based on some specific criteria?
sql-select
Any rows that do not have a “category” of ‘cleaning’ have been left out.
The where clause comes after the from clause.
The where clause is checking the “category” of each row in the table.
Text values, such as ‘cleaning’ are wrapped in ‘ single quotes; not double quotes!
What are the benefits of formatting your SQL?
sql-select
readiability
What are four comparison operators that can be used in a where clause?
sql-select
The value of the “category” column is being compared using a single = equals sign. (Other comparisons like <, >, and != are available too)
How do you limit the number of rows returned in a result set?
sql-select
The limit clause comes last.
The limit clause includes a literal integer number with no quotes to specify the maximum number of rows that should be returned.
How do you retrieve all columns from a database table?
sql-select
select *
How do you control the sort order of a result set?
sql-select
The sort order of the order by clause is switched to descending order with the desc keyword. its ascending by default
How do you add a row to a SQL table?
sql-insert
The statement begins with the insert keyword.
The table to insert into is specified in “ double quotes.
The list of columns being inserted is wrapped in () parenthesis.
The values being inserted are also wrapped in () in parenthesis in the same order as the columns they belong to. In SQL, a list of values is referred to as a tuple.
Text values are wrapped in ‘ single quotes.
Numeric values are represented with literal numbers (or decimals if applicable).
In this particular statement, the “productId” was left out. This is because tables are often configured to auto-generate identifier attributes to avoid accidental duplicates
What is a tuple?
sql-insert
a list of values is referred to as a tuple.
How do you add multiple rows to a SQL table at once?
sql-insert
Data rows can be batch inserted into a database table 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?
sql-insert
returning *;
How do you update rows in a database table?
sql-update
An SQL update statement is a means of updating rows in a database table
Why is it important to include a where clause in your update statements?
sql-update
include a where clause in your update statements to only target specific rows or it would update every row in the table!
How do you delete rows from a database table?
sql-delete
An SQL delete statement is how rows get removed from tables.
How do you accidentally delete all rows from a table?
sql-delete
We can target specific rows to delete by including a where clause.
What is a foreign key?
sql-join
A foreign key is a column or columns of data in one table that refers to the unique data values – often the primary key data – in another table. Foreign keys link together two or more tables in a relational database.
How do you join two SQL tables?
sql-join
We are selecting all columns from both the “products” table and the “suppliers” table.
The join clause follows the from clause.
The join clause is instructing the database server to link the two tables by their “supplierId” column.
How do you temporarily rename columns or tables in a SQL statement?
sql-join
assign alias to them “p”.”name” as “product”,
What are some examples of aggregate functions?
sql-aggregates
max(), count(), min(), sum(), and every()
What is the purpose of a group by clause?
sql-aggregates
The GROUP BY clause divides a table into sets. This clause is most often combined with aggregate functions that produce summary values for each of those sets.
The GROUP BY clause is used to get the summary data based on one or more groups. The groups can be formed on one or more columns.
What are the three states a Promise can be in?
es6-promises
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?
es6-promises
use a then statement and do something
How do you handle the rejection of a Promise?
es6-promises
Appends a rejection handler callback to the promise, and returns a new promise resolving to the return value of the callback if it is called, or to its original fulfillment value if the promise is instead fulfilled.
What is Array.prototype.filter useful for?
array-filter
The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.
What is Array.prototype.map useful for?
array-map
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
What is Array.prototype.reduce useful for?
array-reduce
The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
What is “syntactic sugar”?
es6-classes
syntactic sugar is 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: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer
What is the typeof an ES6 class?
es6-classes
its a function
Describe ES6 class syntax.
es6-classes
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
What is “refactoring”?
es6-classes
code refactoring is 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.
What is Webpack?
webpack-intro
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
How do you add a devDependency to a package?webpack-intro
To add devDependencies to a package.json file, in a text editor, add an attribute called “devDependencies” that references the name and semantic version of each devDependency:
What is an NPM script?
webpack-intro
The “scripts” property of your package.json file supports a number of built-in scripts and their preset life cycle events as well as arbitrary scripts.
How do you execute Webpack with npm run?
webpack-intro
npm run build
How are ES Modules different from CommonJS modules?
es6-modules
With CommonJS, all of the dependencies for a project are stored in one file called node_modules/. With ES modules, each dependency is stored in its files. This allows developers to better control how their dependencies are used and makes it easier to version software. useimprt andexport
What kind of modules can Webpack support?
es6-modules
Webpack supports the following module types natively: ECMAScript modules. CommonJS modules. AMD modules.
What is React?
react-elements
React is a JavaScript library for creating user interfaces.
What is a React element?
react-elements
It is the basic building block in a react application, it is an object representation of a virtual DOM node. React Element contains both type and property.
How do you mount a React element to the DOM?
react-elements
You can tell React to “mount” it into a DOM container by calling: ReactDOM.
What is Babel?
babel-intro
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
What is a Plug-in?
babel-intro
plugins allow you to use new syntax, right now without waiting for browser support
What is a Webpack loader?
babel-intro
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!
How can you make Babel and Webpack work together?
babel-intro
What is JSX?
react-jsx
write html elements inside javascript
Why must the React object be imported when authoring JSX in a module?
react-jsx
React needs to be in scope to create components through its createElement function. it will not work if you don’t import it
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
webpack bundle everything together and babel will do the conversion
What is a React component?
react-function-components
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
How do you define a function component in React?
react-function-components
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
How do you mount a component to the DOM?
react-function-components
render method on the root
What are props in React?
react-props-and-expressions
a type of object where the value of attributes of a tag is stored.
How do you pass props to a component?
react-props-and-expressions
pass it as an attribute to the function
How do you write JavaScript expressions in JSX?
react-props-and-expressions
put it around {}
How do you create “class” component in React?
react-class-components
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
To define a React component class, you need to extend React.Component:The only method you must define in a React.Component subclass is called render(). All the other methods described on this page are optional.
How do you access props in a class component?
react-class-components
What is the purpose of state in React?
react-events-and-state
How to you pass an event handler to a React element?
react-events-and-state
What are controlled components?
react-form-controls
A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state.
What two props must you pass to an input for it to be “controlled”?
value
What Array method is commonly used to create a list of React elements?
react-rendering-lists
map method
What is the best value to use as a “key” prop when rendering lists?
react-rendering-lists
unique identifier
What does express.static() return?
express-static
middleware function
What is the local __dirname variable in a Node.js module?express-static
the name of current module
What does the join() method of Node’s path module do?
express-static
combine a number of path into one
What does fetch() return?
fetch
promise
What does fetch() return?
fetch
get method
How do you specify the request method (GET, POST, etc.) when calling fetch?
fetch
takes an object as its 2nd argument,
When does React call a component’s componentDidMount method?fetch-in-react
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here.
Name three React.Component lifecycle methods.
fetch-in-react
Mounting, Updating, and Unmounting.
How do you pass data to a child component?
fetch-in-react
What does the acronym LIFO mean?
data-structures-stacks
Last in first out
What methods are available on a Stack data structure?data-structures-stacks
peek push pop
What must you do to access the value at an arbitrary point in a stack (not just the “top”)?
data-structures-stacks
remove all value above it
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
data-structures-queues
use deque method until you remove the value before it untilyou find what you’re looking for
What methods are available on a Queue data structure?
data-structures-queues
enqueue dequeue and peek
How are linked lists different from an array?
data-structures-linked-lists
sequential access cant randomly accessed any values you want
How would you access an arbitrary node in a linked list (not just the “head”)?
data-structures-linked-lists
start with the head and go through each property
What must the return value of myFunction be if the following expression is possible?
myFunction()();
javascript-closures
a function
What does this code do?
const wrap = value => () => value;
javascript-closures
nction then the value
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
javascript-closures
defined
What allows JavaScript functions to “remember” values from their surroundings?
javascript-closures
closure
