BackEnd Flashcards
What is a code block? What are some examples of a code block?
- lexical structure of source code that are grouped together. Code Blocks consist of one or more declarations and statements. (lexiscope refers to setting the scope, or range of functionality, of a variable so that it may be called (referenced) from within the block of code in which it is defined.)
- In JavaScript, code blocks are denoted by curly braces { }.
- For example, if else, for, do while, while and so on.
What does block scope mean?
Block scope means the variable definition is only valid within the block of code that it was declared in.
What is the scope of a variable declared with const or let?
const and let variables are Block-Scoped.
What is the difference between let and const?
Let can be reassigned and Const cannot.
Why is it possible to .push() a new value into a const variable that points to an Array?
It is possible to .push() to a new value into a const variable, because it is adding to the array instead of reassigning the variable.
The values in the array are mutable.
How should you decide on which type of declaration to use?
If the variable does not needed to be reassigned, then use const
What is the syntax for writing a template literal?
- put it inside backticks (``)
- ${ } holds the expressions and variables
example:
let name = ‘sharon’;
let age = 26;
phrase = hi my name is ${ name } and I am ${ age } years old;
What is “string interpolation”?
String formatting: the ability to substitute part of the string for the values of variables or expressions.
What is restructuring conceptually?
Taking out part of an object and assigning it to new variables
What is the syntax for Object destructuring?
const { title, author, libraryID } = book1
What is the syntax for Array destructuring?
const [ book3, book4, book5 ] = getBooks()
How can you tell the difference between destructuring and creating Object/Array literals
the side of the assignment operator that the object or array is on.
creating object : def is right side of the equal sign
restructuring: { } and property name is on the left side of the =
What is the syntax for defining an arrow function?
functionName = parameter => {
code block
}
functionName = () => { }
() not needed with one parameter
() are needed with no parameter
{} needed for more than one line of code
When an arrow function’s body is left without curly braces, what changes in its functionality?
You don’t get a return statement.
How is the value of this determined within an arrow function?
this is defined at definition time for arrow functions. In other words, THIS is defined within the same lexiscope or parentscope.
For other functions, this is determined at call time
What is Node.js?
Node.js is a program that allows JavaScript to be run outside of a web browser.
What can Node.js be used for?
Building back ends for Web applications, command-line programs, or any kind of automation that developers wish to perform.
What is a REPL?
A read–eval–print loop (REPL), also termed an interactive top-level or language shell, is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user; a program written in a REPL environment is executed piecewise.
Chrome Dev Tools Console is one example.
This is more like a playground for testing things.
When was Node.js created?
May 27, 2009
What back end languages have you heard of?
Node, Python, PHP, Ruby
What is the process object in a Node.js program?
• The process object is a global
• that global informs about and controls the current Node.js process.
• As a global, it is always available to Node.js applications without using require().
• It can also be explicitly accessed using require():
const process = require(‘process’);
How do you access the process object in a Node.js program?
Just type process, it is always available. Treat it like any other object.
It is a global so you can access it anywhere.
What is the data type of process.argv in Node.js?
Array
What is a JavaScript module?
Module in Node.js is a functionality organized in single or multiple JavaScript files that are reused.
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.
Console, process, global
What is the purpose of module.exports in a Node.js module?
It exports a module so other modules can use it
How do you import functionality into a Node.js module from another Node.js module?
Using the require function
What is the purpose of module.exports in a Node.js module?
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?
Blocking assignment executes “in series” because a blocking assignment blocks execution of the next statement until it completes.
Non-blocking assignment executes in parallel because it describes assignments that all occur at the same time.
What is a directory?
An organizational structure and location for storing files.
What is a relative file path?
The location that is relative to where the file is.
./fileName
What is an absolute file path?
The path of the file from the root directory. (This is not a good idea to use because what is an absolute file path on my computer might not be the same for someone else’s computer).
What module does Node.js include for manipulating the file system?
the fs module
What method is available in the Node.js fs module for writing data to a file?
fs.writeFile
Are file operations using the fs module synchronous or asynchronous?
Both, since there are different sync versions, but fs.writeFile is asynchronous Asynchronous take callback arguments
What is npm?
npm is the world’s largest software registry. It can be used to share and borrow packages.
It has three components:
1. the website
2. the Command Line Interface (CLI)
3. the registry
What is a package?
a package is a package or module of code to reuse. It needs to be a directory with one or more files. It has a package.JSON file.
How can you create a package.json with npm?
Run the “npm init –yes” command on the command line
What is a dependency and how to you add one to a package?
dependencies are the modules that the project relies on to function properly.
npm install
What happens when you add a dependency to a package with npm?
The newly installed package(s) gets added to the list of dependencies in your package. json file
It downloads the packages that it depends on until it has everything.
How do you add express to your package dependencies?
run this command in the terminal while you are in the package directory:
npm install express
What Express application method starts the server and binds it to a network PORT?
listen( ) method.
app.listen([port [, host [, backlog] ] ][, callback])
What is a client?
a client is a piece of computer hardware or software that accesses a service made available by a server as part of the client–server model of computer networks.
What is a server?
a server is a piece of computer hardware or software (computer program) that provides functionality for other programs or devices, called “clients”.
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?
1.An HTTP method,
2. The request target,
3. The HTTP version
What is on the first line of an HTTP response message?
The protocol version, A status code, A status text.
What are HTTP headers?
It is meta-information about the request or describes the body included in the messages.
Is a body required for a valid HTTP message?
No. It is optional.
How do you mount a middleware with an Express application?
Middleware functions are functions that have access to the request object (req), the response object (res), They can be mounted with app.use
app.use((req, res) => { }
“the use method of the app object is being called with ONE argument with TWO PARAMETERS: req and use.”
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
the request and response objects
What is the appropriate Content-Type
application/JSON
What is the significance of an HTTP request’s method?
It tells what function your want to run in the code such as deleting and getting data in app.delete( ) and app.get( )
What does the express.json() middleware do and when would you need it?
parses incoming request bodies if payload is JSON. It is needed when content type header is application/json in the HTTP request.
In other words, it is a function or a program (or something) that is going to run between the time that the server gets the request and the time that the server sends the request out to the client. It is a function that happens between the beginning of the response and sending of the response.
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS). Other popular relational databases include MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation.
What are some advantages of learning a relational database?
they can be modeled well, data corruption is very unlikely, categorize data, and they are widely used.
What is one way to see if PostgreSQL is running?
running this command in the terminal:
sudo service postgresql status
What is SQL and how is it different from languages like JavaScript?
SQL is different! SQL is a declarative programming language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.JavaScript is imperative
How do you retrieve specific columns from a database table?
select “name”, “other names”
How do you filter rows based on some specific criteria?
where “category” = ‘cleaning’;
What are the benefits of formatting your SQL?
makes it easier to read, understand, and debug it.
What are four comparison operators that can be used in a where clause?
- Not equals
- Greater than / greater than or equal to
- lesser than / lesser than or equal to
- Inclusive of two values (BETWEEN…AND)
How do you limit the number of rows returned in a result set?
limit 1; at end of code
(the limit clause then followed by the number)
How do you retrieve all columns from a database table?
Select*
How do you control the sort order of a result set?
order by priceDESC if you want descending instead of ascending
order by clause, then DESC for descending order. The default is ascending order.
What is SQL and how is it different from languages like JavaScript?
SQL is different! SQL is a declarative programming language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.JavaScript is imperative
How do you retrieve specific columns from a database table?
select “name”
How do you filter rows based on some specific criteria?
use where class then the name of the column wrapped in double quotes, equal operator and then the value of the category wrapped in single quotes.
where “category” = ‘cleaning’
What are the benefits of formatting your SQL?
makes it easier to read, organize, and debug
What are four comparison operators that can be used in a where clause?
- greater than or greater than or equal to
- less than, less than or equal to
- not equals to !=
- equals to =
How do you limit the number of rows returned in a result set?
limit 1;
limit clause, then number of what your limit is but it is always at end of code.
How do you retrieve all columns from a database table?
select *
How do you control the sort order of a result set?
order the data by adding the keyword DESC at the end if your code if you want descending order.
The default will always be ascending order.
How do you add a row to a SQL table?
INSERT INTO “products” (“name”, “description”, “price”, “category”)
VALUES (‘Ostrich Pillow’, ‘Feel comfy and cozy!’, 99, ‘self care’);
What is a tuple?
In SQL, a list of values is referred to as a tuple.
How do you add multiple rows to a SQL table at once?
insert into “products” (“name”, “description”, “price”, “category”)values (‘Ostrich Pillow’, ‘Feel comfy and cozy!’, 99, ‘self care’), (‘Tater Mitts’, ‘Scrub some taters!’, 6, ‘cooking’)returning *;
How do you get back the row being inserted into a table without a separate select statement?
If you only want specific values back, you can use a comma-separated list of column names instead of an * asterisk for the returning statement
What is a foreign key?
The column that links two tables together since it is in both tables
How do you join two SQL tables?
select “products”.”name” as “product”, “suppliers”.”name” as “supplier” from “products” join “suppliers” using (“supplierId”);
How do you temporarily rename columns or tables in a SQL statement?
Table aliasing likeselect “p”.”name” as “product”, “p”.”category”, “s”.”name” as “supplier”, “s”.”state” from “products” as “p” join “suppliers” as “s” using (“supplierId”);
What are some examples of aggregate functions?
sum, avg, count
What is the purpose of a group by clause?
when you want to separate rows into groups and perform aggregate functions on those groups of rows. This is done with a group by clause.
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?
attach a then method handler with callback function with success message
How do you handle the rejection of a Promise?
attach a catch method handler with callback function with error message
What is Array.prototype.filter useful for?
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
What is Array.prototype.map useful for?
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?
Reduces an array of values to a smaller or one value.
What is “syntactic sugar”?
In computer science, syntactic sugar is syntax within a programming language that makes 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.
Syntactic sugar is usually a shorthand for a common operation that could also be expressed in an alternate, more verbose, form: The programmer has a choice of whether to use the shorter form or the longer form, but will usually use the shorter form since it is shorter and easier to type and read.
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class key word and curly braces:
class ExampleClass { }
const example = new ExampleClass { }
class key word, name of function, function code block, constructor inside with arguments and then function code block:
class Student {
constructor( arguments, arguments) {
this.firstName = firstName;
this.lastName = lastName;
this.subject = subject;
}
}
What is “refactoring”?
It changes the structure of the code by cleaning and reorganizing it without affecting or changing the functionality of it.
What is Webpack?
Webpack bundles multiple modules into a single JavaScript file.
It is a tool that lets you bundle your JS applications and it can support many different assets such as images, fonts, and stylesheets.
How do you add a devDependency to a package?
$ npm install <package-name> --save-dev</package-name>
What is an NPM script?
something that automates repetitive tasks in package.json file, it is a command line command under script in the package.json
How do you execute Webpack with npm run?
npm run
How are ES Modules different from CommonJS modules?
import/export for ES6 Modules.
modules.export are for CommonJS.
import uses require for Common JS
What kind of modules can Webpack support?
webpack supports the following module types natively: ECMAScript modules, CommonJS modules, and AMD modules.
What is React?
A framework that manages UI’s based off of UI components. It helps us build websites quicker.
What is a React element?
An object that describes a virtual DOM node.
How do you mount a React element to the DOM?
**You can tell React to “mount” it into a DOM container by calling the .createRoot( ) Method on the ReactDOM object.
const root = ReactDOM.createRoot(container);
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);
What is Babel?
Babel is a toolchain that translates ECMAScript 2015+ code into a backwards compatible version of JavaScript.
What is a Plug-in?
A Plug-in is a software component that adds a specific feature to an existing computer program and enables customization.
What is a Webpack loader?
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?
Add this to the webpack.config.js file:
in the use: { } :
loader: ‘babel-loader’,
options: {
plugins: [
‘@babel/plugin-transform-react-jsx’
]
What is JSX?
A syntax extension to JavaScript, it produces react elements and lets you use HTML syntax in JavaScript
Why must the React object be imported when authoring JSX in a module?
If you give some JSX to Babel, you will see that JSX is just sugar for React.createElement calls. This is why we need to import React if we use JSX.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Add this to the webpack.config.js file:
loader: ‘babel-loader’,
options: {
plugins: [
‘@babel/plugin-transform-react-jsx’
]
What is a React component?
React components lets you split the UI into independent, reusable pieces and think about each pieces in isolation.
How do you define a function component in React?
function CustomButton( [props] ) {
return <button>Click Me!</button>
};
How do you mount a component to the DOM?
mount by createRoot method of the ReactDOM object and then rendering the root object:
const root =
ReactDOM.createRoot(document.querySelector(‘#root’));
// const element = <CustomButton></CustomButton>;
// root.render(element);
root.render(<CustomButton></CustomButton>);
What are props in React?
props are objects that get passed to a React element.
How do you pass props to a component?
You pass props as attributes to the component itself. Example:
const element = (
<div>
<CustomButton></CustomButton>
<CustomButton></CustomButton>
<CustomButton></CustomButton>
</div>
);
How do you write JavaScript expressions in JSX?
use curly braces that wrap around the JSX expressions!
function CustomButton(props) {
return <button>{ props.text }</button>;
}
How do you create “class” component in React?
- class keyword.
- function name starting with a capitalized letter.
- extends keyword.
- React.Component { }
- render() in function code block.
- return React element statement.
class CustomButton extends React.Component {
render() {
return <button<{ this.props.text }</button>;
}
}
How do you access props in a class component?
{this.props.text} inside the return statement of the React element.
What is the purpose of state in React?
React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.State is like our data model for React, we use it to determine what the user should see when it renders.
How to you pass an event handler to a React element?
return <button onCLick={ this.handleClick }>Click me!</button>
you put the event handler on the react element.
What are controlled components?
In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.A react component that reacts to the changes of an element that it is wrapped around.It receives it value via state and it has a change handler that updates that state.
What two props must you pass to an input for it to be “controlled”?
value prop and an onChange prop
What Array method is commonly used to create a list of React elements?
.map()
What is the best value to use as a “key” prop when rendering lists?
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.
What does express.static() return?
it returns a function.
What is the local __dirname variable in a Node.js Module?
The directory name of the current module.
This is the same as the path.dirname() of the __filename.It starts with / so it is absolute file path since it starts at the root of the file system
What does the join() method of Node’s path module do?
The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
What does fetch() return?
Returns a promise containing the response (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?
The fetch() method can optionally accept a second parameter, an init
When does React call a component’s componentDidMount method?
After render, but before page is finished loading
Name 3 React Component lifecycle methods.
- constructor
- render
- componentDidMount
How do you pass data to a child component?
as a prop to the child component
What does the acronym LIFO mean?
Last in, first out.
What methods are available on a Stack data structure?
.push() to push onto the top of the stack
.pop() to pop the last one off.
a stack should always have a push or pop().
.peek() and print().
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
Do the pop() method to take off the top value of the stack and keep popping off the value until you react that arbitrary point.
What does the acronym FIFO mean?
First in, First out
What methods are available on a Stack data structure?
enqueue(value) - adds a value to the “back” of the queue.
dequeue() - removes the “front” value from the queue and returns it.
Together, these facilitate first-in-first-out (FIFO) operations: the first thing enqueued onto the queue is the first thing that can be dequeued out.
Often, queues include additional helper operations that make them a bit easier to use, such as peek(), which returns the “front” value of the queue without removing it.
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
Must enqueue(value) or dequeue until you reach that arbitrary point in the queue.
How are linked lists different from an array?
Linked lists are sequential access (like a queue), but not a random access (like an array).
How would you access an arbitrary node in a linked list (not just the “head”)?
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. However, unlike a queue, a linked list doesn’t need to be mutated to scan its contents.
In a basic linked list, you start at the “head” node, then jump to the next node through the .next property. The last node in a basic linked list is called the “tail” node. The “list” itself is simply a reference to the “head” node. Since each node only contains a reference to the next node in the list, there is no way to backtrack. That means each node is the “head” of its own list, and there’s no way to tell if any other nodes came before it.*
