Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development > Senior Side > Flashcards

Senior Side Flashcards

1
Q

es6-const-let

What is a code block? What are some examples of a code block?

A

A code block are lines of code which are grouped together by curly braces. Some examples are for loops, if statements, and functions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

es6-const-let

What does block scope mean?

A

It means that the code/variable will not be accessible outside the code block (curly braces).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

es6-const-let

What is the scope of a variable declared with const or let?

A

Block scoped

Var = function scope

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

es6-const-let

What is the difference between let and const?

A

Let can be updated, but not redeclared. Const can’t be updated nor redeclared.

Const must be initialized when it’s defined

Similarity = both const and let are blocked scoped and they’re not initialized with undefined like var keyword.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

es6-const-let

Why is it possible to .push() a new value into a const variable that points to an Array?

A

We can change the values, in this case add, of a const variable, but we can’t reassign or redeclare it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

es6-const-let

How should you decide on which type of declaration to use?

A

Const variables are for things that don’t change values, let is for values that are meant to manipulated or changed.

good code doesn’t reassing var

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

es6-template-literals

What is the syntax for writing a template literal?

A

Replace all quotes for a string with backticks ( ` ` )

Can contain strings and any JavaScript expressions (anything that returns a value): ${firstName.toUpperCase()}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

es6-template-literals

What is “string interpolation”?

A

Having expression/variables values substituted in a string. EX: ${variable_name}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

es6-destructuring

What is destructuring, conceptually?

A

Assigning a variable to the value extracted from an object property or an array index

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

es6-destructuring

What is the syntax for Object destructuring?

A

const keyword, then curly braces { }, property key names, then equal signs = , then object name you’re destructuring from, use OR || to avoid errors after name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

es6-destructuring

What is the syntax for Array destructuring?

A

const keyword, then square brackets [ ], elements you want, then equal signs = array name that is destructured, use OR || to avoid errors after name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

es6-destructuring

How can you tell the difference between destructuring and creating Object/Array literals?

A

variable name at start(left)= creating literals

variable name at end(right) = destructuring literals

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

es6-arrow-functions

What is the syntax for defining an arrow function?

A

optional variable declaration, assignment operator, optional params (if 0 param then no parenthesis, if 1 param optional parenthesis, more than 1 then parentheses is needed), arrow, then a single expression or a code block

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

es6-arrow-functions

When an arrow function’s body is left without curly braces, what changes in its functionality?

A

it returns (implicitly) from the function

If using expression like ‘x + y’, then ‘return’ keyword/statement not needed.
Note: expression has a result value. statement doesn’t have a result, it is more of a command

If using curly braces then it needs ‘return’ keyword/statement.

Note: in react (expression-based) if put statement into where expression should be then it will error

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

es6-arrow-functions

How is the value of ‘this’ determined within an arrow function?

better to look at it as when is ‘this’ determined.

A

Arrow functions captures the ‘this’ value of the enclosing context rather than making its own ‘this’ (similar to how scope works)

arrow functions: ‘this’ is defined at function definition

traditional functions: ‘this’ is defined at function call

Note: in the example exercise, the setTimeout functions are being defined multiple times when the function runs (‘this’ is the jokester object with the arrow functions in setTimeout)

Note2: to bypass ‘this’ being window object when undefined (global ‘this’) then you assign ‘this’ to a variable. For example: ‘var realThis = this’

Note3: if you made the functions of the properties of jokester using ‘traditional ES5 functions’ then it would grab the global ‘this’ object because ‘this’ will be defined at function call

Note4: function names AND values are hoisted to the top, while var names are hoisted, but their values aren’t evaluated till JavaScript reaches their code line. Tim’s tip: Create functions and vars where you need them, then you can move the functions/variables around (like using utility functions at the bottom)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

command-line-basics

What is a CLI?

A

Stands for command-line interface.

It processes commands to a computer program in the form of lines of text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

command-line-basics

What is a GUI?

A

Stands for graphical user interface.

It is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation. Example of GUI text editor is VS Code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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
A

man: review what a command does (manual)
cat: print out contents of a file into terminal or combine contents of a file.
ls: list files in a current directory (can go to other directories if using path)
pwd: print current working directory
echo: display a line of text (string) into terminal, which can be added to a new file
touch: create a new file in current directory (if you use path then you can create the file in another directory)
mkdir: create a new directory
mv: move or rename a file (renaming something also moves it)
rm: remove/delete a file or directory (there is no undo and it doesn’t go into the trash)
cp: copy a file, which you can rename in the same line

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

command-line-basics

What are the three virtues of a great programmer?

A
  1. Laziness: The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don’t have to answer so many questions about it.
  2. Impatience: The anger you feel when the computer is being lazy. This makes you write programs that don’t just react to your needs, but actually anticipate them. Or at least pretend to.
  3. Hubris: The quality that makes you write (and maintain) programs that other people won’t want to say bad things about.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

node-intro

What is Node.js?

A

A back-end JavaScript runtime environment (program) that operates on the Chrome V8 engine and executes JavaScript code outside of a browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

node-intro

What can Node.js be used for?

A

Node.js can be used to execute JavaScript outside of the web browser. Develop command-line applications, server applications, and other back-ends.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

node-intro

What is a REPL?

A

Stands for read, evaluate, print, and loop (loop because it waits for next input). It’s a computer environment where you can write code and execute code.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

node-intro

When was Node.js created?

A

Node.js was created on May 27, 2009

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

node-intro

What back end languages have you heard of?

A

JavaScript (node.js), ruby, python, php, c# (.NET), perl, typescript, assembly, go, sql (for programming databases), haskell (only has functions (has to return something) and data, Tim said it changed the way he wrote JavaScript in a good way)

Scripting Languages (often interpreted): ruby, python, php, javascript, perl

Compiled Languages (analyzes source code then makes new set of code): c, c++, go, haskell, c# (.NET), f#, java, assembly (maybe compiled??), typescript

sql on it’s own

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

node-process

What is a computer process?

A

The instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.

short version: instance of running program

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

node-process

Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?

A

500+ processes, but only 3 were listed as running

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

node-process

Why should a full stack Web developer know that computer processes exist?

A

Full stack web development is based on making multiple processes work together to form one application, so knowing about computer processes will help with making applications with clients, servers, and databases

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

node-process-argv

What is the ‘process’ object in a Node.js program?

A

It’s a global object that provides information about, and control over, the current Node.js process.

Another way: a model of the current instance of Node.js process

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

node-process-argv

How do you access the ‘process’ object in a Node.js program?

A 
The 'process' object is always available (global) to Node.js applications, so you can just type 'process.' To explicitly access it then you use:
const process = require('process');
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

node-process-argv

What is the data type of ‘process.argv’ in Node.js?

A

An array of strings which contains the command line arguments passed when the Node.js process was launched.

Note: means array of strings.

Note: the first element will be ‘process.execPath’ (the absolute path to where the Node.js process launched), the second element will be the name of the JavaScript file being executed, the remaining elements are any additional command line arguments.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

node-module-system

What is a JavaScript module?

A

A JavaScript file…. which uses code from a separate file to execute its code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

node-module-system

What values are passed into a Node.js module’s local scope?

A

‘export’ = a reference to module.exports (you can add a single thing by making it exports = ‘some string’, but its default value is an object, so an example is exports.foo = ‘bar’, which will add them as a property of the exports object)
‘require’ = used to import modules, JSON, and local files.
‘module’ = a reference to the current module
‘__filename’ = file name of the current module
‘__dirname’ = directory name of the current module

These 5 values (all local variables or parameters which are passed into a module wrapper function to know where your code is from) are passed into your module, which can then be accessed by your code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

node-module-system

Give two examples of truly global variables in a Node.js program.

A

The ‘process’ object and the ‘global’ namespace object. ‘console’ is also another one.

In JavaScript the window object controls both variables and their process
In Node.js, the ‘process’ object controls processes and the ‘global’ object controls variables

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

node-require

What is the purpose of module.exports in a Node.js module?

A

To export the code in one JavasScript file and give access to that code to other JavaScript files

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

node-require

How do you import functionality into a Node.js module from another Node.js module?

A

const variableName = require FUNCTION followed by parenthesis, which contains a string to the relative path of the file you want to import

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

the-event-loop

What is the JavaScript Event Loop?

A

It’s responsible for handling callbacks. Looks at the stack, if it’s clear, then look at the task/callback queue, and then push the callback onto the stack

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

the-event-loop

What is different between “blocking” and “non-blocking” with respect to how code is executed?

A

blocking = operations that run synchronously (and are slow, which block further execution of JavaScript code (ex; AJAX requests)

blocking operations are happening on the stack and nothing can be executed until it is off the stack - JavaScript causes

non-blocking = operations that run asynchronously and therefore don’t block execution of JavaScript code (gets put into the callback queue)

non-blocking operations happen anywhere that’s not on stack

Note: a callback queue exists which means callbacks will not execute all at once

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

node-fs-readfile

What is a directory?

A

a file folder

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

node-fs-readfile

What is a relative file path?

A

The file path relative from the current/or some location

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

node-fs-readfile

What is an absolute file path?

A

The full path, starting from the root (in mac OS it is a slash), of a file

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

node-fs-readfile

What module does Node.js include for manipulating the file system?

A

the ‘fs’ module

stands for file system

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

node-fs-writefile

What method is available in the Node.js fs module for writing data to a file?

A

fs.writeFile() method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

node-fs-writefile

Are file operations using the fs module synchronous or asynchronous?

A

The ones we used are asynchronous, but there are synchronous versions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

http-messages-recap

What is a client?

A

Service requesters - software/hardware that request info from servers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

http-messages-recap

What is a server?

A

service providers: software/hardware that provides resource or service

note: nowadays it’s software talking to each other isntead of hardware/computer devices

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

http-messages-recap

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET method - which requests representation of data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

http-messages-recap

What is on the first line of an HTTP request message?

A

The request header, HTTP method which describes action to be performed (GET) and then the request target (URL), protocol version

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

http-messages-recap

What is on the first line of an HTTP response message?

A

status line, with the protocol/http version and then the status code, then status text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

http-messages-recap

What are HTTP headers?

A

Information relating to the HTTP request/response which can be modified by the client or server

short version: meta data about response/request

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

http-messages-recap

Is a body required for a valid HTTP message?

A

No, usually the status code is enough

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

npm-intro

What is NPM?

A

A package manager for the Node JavaScript platform. Puts modules so that node can find them and manage dependency conflicts

It’s actually 3 things:

  • website
  • cli
  • registry
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

npm-intro

What is a package?

A

A package is a file or directory with package.json file in it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

npm-intro

How can you create a package.json with npm?

A

npm init for options or npm init –yes for default package

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

npm-intro

What is a dependency and how to you add one to a package?

A

files necessary to run our code

npm install packageName

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

npm-intro

What happens when you add a dependency to a package with npm?

A

It’s added to the node_modules directory (makes one if none are found) and adds/updates dependencies property on the package.json file to have that dependency

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

expresss-intro

How do you add express to your package dependencies?

A

npm install express,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

express-intro

What Express application method starts the server and binds it to a network PORT?

A

the listen() method.

first you require(‘express’) then do app = express() ‘function’, then app.listen(‘portName’)

Note: require(‘express’) returns a function unlike require(‘fs’) which returns an object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

express-hello-world

How do you mount a middleware with an Express application?

A

the use method of app object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

express-hello-world

Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?

A

req (stands for ‘request’) and res (stands for ‘response’) object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

express-get-json

What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?

A

Content-Type: application/json; charset=utf-8

Note: worth noting that the headers to be arbitrary, for example it is possible for it to say application/json, but actually be an html file. So headers are just a HINT of what is in the body

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

express-post-json

What does the express.json() middleware do and when would you need it?

A

It parses incoming JSON requests and places the data in the req.body (request body).

You’d need it when you’re posting an object

ex: app.use(express.json());

Note: by default node and express don’t show you/take in the body

Notes: command line args are always a string, unless there is a space

62
Q

express-delete

What is the significance of an HTTP request’s method?

A

It tells the server what the client is trying to do, but it is up to the programmer to actually decide.

Significance is a communication tool to tell what the client wants to do, but is actually arbitrary
methods are: GET, POST, PUT, DELETE

63
Q

postgres-intro

What is PostgreSQL and what are some alternative relational databases?

A

Free, open source Relational Database Management System (RDBMS). Often cited as most advanced open source database of its kind because of its robust feature set, standards compliance, and reliability.

Alternatives: MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation

Usually toss up between PostgreSQL or MySQL when first learning ‘full stack’

64
Q

postgres-intro

What are some advantages of learning a relational database?

A

Once you learn one relational database, then you can learn other relational databases easily because they all use SQL language. Good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible. (devs can make database to reject ‘bad’ data and not worry about ‘half-written’ data- ACID- computer science). Multiple users can access the data and most apps use a database.

Note: relational databases are commonly called ‘SQL databases’ because you usually use SQL language to some degree despite not being PostgreSQL.

65
Q

postgres-intro

What is one way to see if PostgreSQL is running?

A

‘sudo service postgresql status’ command in terminal, using ‘top’ command in second terminal, or doing something with it like this command: “ psql -c ‘\l’ “
and if it errors then you know it’s not on

‘pgweb’ is an admin tool/GUI which lets you look at and/or manipulate your database

66
Q

postgres-database

What is a database schema?

A

A collection of tables. It defines how the data in a relational database should be organized.

Note: in relational databases, you typically define your schema up front and the database server will make sure that any data being written to the database conforms to that schema

67
Q

postgres-database

What is a table?

A

A table (called relations) is a list of rows which have the same set of attributes.

Ex: table could be called ‘students’ which have ‘firstName’, ‘lastName’, and ‘class’ attributes (attributes are referred to as columns).

My interpretation: the table holds the TYPE of data.

68
Q

postgres-database

What is a row?

A

A row is a record of something in a table, which has all the same attributes as outlined by the table.

EX: ‘students’ table has ‘name’, ‘class’, ‘dob’ attributes (or columns). This means that each row identifies a specific student.

69
Q

sql-select

What is SQL and how is it different from languages like JavaScript?

A

SQL is our primary way for communicating with the database.

SQL is a declarative programming language (like HTML or CSS), meaning you describe the results you want and the programming environment comes up with its own plan for getting those results.

JavaScript is an imperative programming language, meaning you tell JS runtime what to do and how to do it.

70
Q

sql-select

How do you retrieve specific columns from a database table?

A

By using the ‘select’ statement followed by the column name in double quotes, followed by a comma if adding more than one, then put ‘from’ statement followed by table name.

Ex:
select “firstName”,
“gradeLevel”
from “students”;

Note: the last clause in an SQL statement has a semicolon at the end

71
Q

sql-select

How do you filter rows based on some specific criteria?

A

By using the ‘where’ clause, followed by column name, followed by comparison operators, then if it’s a number just type number or if it’s a string then use single quotes.

Note: it comes after the ‘from’ clause

72
Q

sql-select

What are the benefits of formatting your SQL?

A

You should indent SQL code to have a consistent style and therefore better readability.

Note: Reasoning is that it is much easier to read text that is narrower. For example MDN becomes a three column layout when the browser gets big enough and it keeps the text smaller width. (It doesn’t span the whole width of the page).

the select statement and all the clauses like ‘where’ should align to each other, where the ‘e’ in ‘where’ is right below the ‘t’ in ‘select’. Exception is order by where by is lined up with the first quote of column names.

73
Q

sql-select

What are four comparison operators that can be used in a where clause?

A

Greater than (>), less than (>), equal (=), and not equal (!=).

Note: you can also use <=, >=, and <>

74
Q

sql-select

How do you limit the number of rows returned in a result set?

A

Using the ‘limit’ clause, followed by a number of the max rows you want.

Note: it is the last thing in the code if it is included, unless there is an offset, fetch, or for.

75
Q

sql-select

How do you retrieve all columns from a database table?

A

Using an asterisk (*), usually called ‘star’ by devs

76
Q

sql-select

How do you control the sort order of a result set?

A

Using the ‘order by’ clause, followed by a column name in double quotes.

BUT it doesn’t actually have to be a column name, it could be order by a value of ‘replacementCost’ for example

Note: default sort order is ascending, but if you put ‘desc’ keyword after the column name then it changes it to descending order.
Note: orders are not predictable, unless ‘order by’ clause is used

77
Q

sql-insert

How do you add a row to a SQL table?

A

Using the ‘insert into’ statement, followed by the table name in double quotes, followed by the columns you want to insert in parentheses, followed by the values clause with corresponding to the column names in parenthesis, then lastly an optional returning clause to see what you added.

Ex: insert into "languages" ("name")
values ('HTML'),
       ('CSS'),
       ('JavaScript')
returning *;
78
Q

sql-insert

What is a tuple?

A

A list of values

79
Q

sql-insert

How do you add multiple rows to a SQL table at once?

A

values clause, then the column attributes in parentheses, then just add a comma at the end.

80
Q

sql-insert

How do you get back the row being inserted into a table without a separate select statement?

A

using the ‘returning’ clause followed by the column names you want or just the asterisk

returning * or returning ‘columnName’, ‘columnName’

81
Q

sql-update

How do you update rows in a database table?

A

Using the ‘update’ statement followed by the table name in double quotes, Then in the next line use the ‘set’ clause followed by column names in double quotes then an equal sign to what value you want to change it to (commas to separate multiple changes). Lastly include a ‘where’ clause to specify a column name of what you are updating.

Note: can include ‘returning’ clause too

Ex: 
update "films"
      set "rating" = 'R',
            "name" = 'SCARY'
 where "rating" = 'T'
returning *;
82
Q

sql-update

Why is it important to include a where clause in your update statements?

A

If you don’t include ‘where’ clause then it’ll update EVERY row in the table

83
Q

sql-delete

How do you delete rows from a database table?

A

Using the ‘delete’ statement followed by ‘from’ clause with table name, then using ‘set’ clause followed by assignment operator to value you want, then specifying ‘where’ clause you want to delete (where you can use ‘and’ clause for higher specificity, no comma needed).

Note: can include ‘returning’ clause too

Ex: 
delete from "films"
 where "rating" = 'T'
     and "name" = 'SCARY'
returning *;
84
Q

sql-delete

How do you accidentally delete all rows from a table?

A

Not specifying with a ‘where’ clause

85
Q

sql-join

What is a foreign key?

A

A column that links two tables together based on the column value.

Ex: is ‘filmId’ being in a ‘films’ table AND in an ‘inventory’ table

86
Q

sql-join

How do you join two SQL tables?

A

select statement syntax, then using ‘from’ clause for one table, then using ‘join’ clause with second table’s name

Ex:
select "firstName",
       "lastName"
  from "rentals"
  join "customers" using ("customerId")
  join "inventory" using ("inventoryId")
  join "films" using ("filmId")
  where "title" = 'Magic Mallrats'

Note: rentals needs to have a ‘customerId’, ‘inventoryId’ needs to be in either rentals or customers table, etc. Basically the previous tables needs to have what you stated in your ‘using’ clause (the foreign key). Putting all joins in one line negates this ordering since going forward/backward doesn’t matter

87
Q

sql-join

How do you temporarily rename columns or tables in a SQL statement?

A

By giving them an alias with the ‘as’ keyword. Note this can be done for table names too and that aliases with ‘as’ are temporary (only show in result set, but not actually changed in the database).

Ex:

select "line1",
       "c"."name" as "cityName",
       "district",
       "countries"."name" as "countryName"
 from "addresses"
 join "cities" as "c" using ("cityId")
 join "countries" using ("countryId");
88
Q

sql-aggregates

What are some examples of aggregate functions?

A

max(“”), avg(“”), sum(“”), count(“”), min(“”), every(“”), and many more.

Can store JSON in column value (Ex: json_agg() then join actors and castMember table)

89
Q

sql-aggregates

What is the purpose of a group by clause?

A

Groups what you’re selecting for into their own rows then applying the aggregate to that, so if you group by “genre” then each row is gonna be like ‘horror’, ‘comedy’, etc.

90
Q

es6-promises

What are the three states a Promise can be in?

A

pending (initial state…… then transition to a fulfilled (success), OR rejected (fail)

91
Q

es6-promises

How do you handle the fulfillment of a Promise?

A

using then() method of the promise object. It takes two arguments: on fulfilled function and onrejected function. Best to use catch() method for failures.

92
Q

es6-promises

How do you handle the rejection of a Promise?

A

Either with the second argument of the then() method or just the catch method which takes an error function as an argument. Best to use catch()

93
Q

array-filter

What is Array.prototype.filter useful for?

A

If you wanted to condense an array to certain values. Very useful to filter an array based on a test outlined by a function.
Note: It CREATES a new array of elements that passed the test

Ex:
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i == 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

94
Q

array-map

What is Array.prototype.map useful for?

A

If you want to create a new array containing transformed elements of another array

difference from filter is that it returns same # from original array since it applies change to every single index

for each method is different because it doesn’t return an array (it is undefined by default)

95
Q

array-reduce

What is Array.prototype.reduce useful for?

A

Combining the elements of an array into a single value based on the reducer (slash predicate) function

96
Q

es6-classes

What is “syntactic sugar”?

A

syntax in a programming language that is designed to make things easier to read or to express

Ex: constructor functions vs classes (same function for the most part, but classes easier syntax)

97
Q

es6-classes

What is the typeof an ES6 class?

A

A function (constructor function specifically)

Note: JavaScript classes aren’t real classes (just same as constructor functions for the most part, syntactic sugar)

98
Q

es6-classes

Describe ES6 class syntax.

A
  • class keyword followed by a class name with a capital first letter
  • opening curly braces
  • constructor method with some parameters, then assign ‘this’ object to the parameters
  • under constructor method make other class methods
    Note: ‘this’ will refer to the ‘class’ variable
- To add new object to class then do `let john = new Person("John Doe");`
Note: new objects of the class automatically call the constructor() method

NOTE: arrow functions behave differently with classes/constructor since ‘this’ is defined at definition time (double check if it’s call time or definition time)

Use classes/constructors when you want an obj to have behavior (OOP typically for ppl that make frameworks or libraries, so not typical for apps development)

99
Q

es6-classes

What is “refactoring”?

A

Restructuring existing code (changing the factoring) without changing it’s output/external behavior

100
Q

webpack-intro

What is Webpack?

A

A module bundler (a module is just a file) - Webpack bundles JavaScript files into one. (it rewrites the code and makes it smaller for ‘production’ mode)

Note: difference from commonJS (aka exports/import modules) is that WebPack combines all these files into one JavaScript file (main.js by default) to run in a web browser

Webpack automatically finds your ‘src’ folder then your ‘index.js’ exports then creates a ‘dist’ (short for distribution or end product) dir if it doesn’t exist to make a main.js

101
Q

webpack-intro

How do you add a devDependency to a package?

A

npm install --save-dev packageName

devDependencies are for packages not included in the production build/app

102
Q

webpack-intro

What is an NPM script?

A

An npm scripts are a convenient way to bundle common shell commands for your project.

Basically a command you type in your CLI to do something with your application (can be given any name in your package.json scripts section). - can use all cli commands and commands in the bin

103
Q

webpack-intro

How do you execute Webpack with npm run?

A

full command: npm run build

Have to:
check if package.json file exists, if not npm init -y
Then install jquery with npm install jquery

  1. npm install –save-dev webpack
  2. npm install –save-dev webpack-cli
  3. Add "build": "webpack" into scripts property of package.json file
    - build can be named anything“build”: “webpack”,
    “watch”: “webpack –watch –mode=development –devtool=source-map”,

devtool gives better errors
mode makes it load faster with dev mode

104
Q

es6-modules

How are ES Modules different from CommonJS modules?

A
  • Main difference is that they are officially supported by the browser, but commonJS modules aren’t
  • Static module structure which means you can determine what to import and export without having to execute the whole file.
  • don’t use require() and module.exports statements
  • More compact syntax

Note: with import { } we are importing ‘named’ exports, but if we do import someName from ‘./something’ then it’s by default. (default is just a name, so when importing it then you can say import ‘namedWhatever’ rather than import ‘default’)

105
Q

es6-modules

What kind of modules can Webpack support?

A 
ECMAScript modules
CommonJS modules
AMD modules
Assets (just any file you want to import)
WebAssembly modules

Note: It can look at absolute, relative, and module paths

Note: In the exercise, when ‘../lib’ is used then it means it looks for an index.js in the lib directory and the index.js has all the imports instead of doing individual imports in each file like noop.js and to-array.js)

Note: Tim has made dom creation function which can be used to refactor AJAX code. It basically calls the function and makes the DOM

106
Q

react-elements

What is React?

A

A front-end JavaScript library (all frameworks are libraries though for conversation) for creating user interfaces

Note:
- libraries (you call their code)
- frameworks (they call your code)
If there is an inversion of control then it’s a framework
- Sample statement = My understanding is that there is an inversion of control, so all frameworks are libraries, but not all libraries are frameworks

107
Q

react-elements

What is a React element?

A

They are plain objects that describe what the DOM element should look like.

NOT an HTML or DOM element

108
Q

react-elements

How do you mount a React element to the DOM?

A

You import the ReactDOM from the react-dom package, then use ReactDOM.render(elementName, containerName) to mount an element to the page

Note: we dont use dots or slashes to import because it’s a package, not at a path on our computer
Note2: we usually only run ReactDOM.render once, unlike other render functions. It also completely changes the child elements of the specified container (makes React own it). Never touch DOM/ do DOM manipulation if you use React

109
Q

babel-intro

What is Babel?

A

Babel is a JavaScript compiler (short answer). It’s a toolchain that is mainly used to convert ES 2015+ (aka ES6) code into backwards compatible version of JavaScript in current/older browsers/environments.

compiler means it translates programming language to another language, in this case new JS to old JS

Note: lets it works on older browsers

110
Q

babel-intro

What is a Plug-in?

A

A software component that adds a specific feature to an existing computer program. It’s customization or addons.

111
Q

babel-intro

What is a Webpack loader?

A

Loaders are transformations that are applied to the source code of a module. They allow you to processing files as you import or load them into another language.

They are used to customize the features of webpack, in this case we are using babel to make JavaScript code backwards compatible.

Note: don’t need loaders to use webpack

112
Q

babel-intro

How can you make Babel and Webpack work together?

A

npm install –save-dev babel-loader

also need to module.exports loader: babel-loader in webpack.config.js file

113
Q

react-jsx

What is JSX?

A

Syntax extension to JavaScript. It is commonly used with React, and it produces React ‘elements’ but with using the syntax of a template language like HTML.

Note: don’t read it like HTML even if it looks like it (can use babel to see what it actually looks like)

Should name files .jsx to get syntax help in VS Code

114
Q

react-jsx

Why must the React object be imported when authoring JSX in a module?

A

Have to be sure that React is available because JSX will call for React eventually (it’s actually calling React.createElement even though it looks like HTML

115
Q

react-jsx

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

A

Babel Loader with the plugin transform-react-jsx

116
Q

react-function-components

What is a React component?

A

Reusable and independent bits of code, which serve the same purpose as JavaScript functions. They return React elements. Alternatively called ‘function components.’

117
Q

react-function-components

How do you define a function component in React?

A

function keyword, variable name, 1 parameter props, then opening curly braces, then return React element

118
Q

react-function-components

How do you mount a component to the DOM?

A

create an element variable which calls the component with the desired values. Then use ReactDOM.render(element, container)

first arg of ReactDOM.render NEEDS to be a React element

119
Q

react-props-and-expressions

What are props in React?

A

Props are arbitrary inputs, basically parameters for React components

Worth noting they ARE objects (that’s why it is called props)

120
Q

reacts-props-and-expressions

How do you pass props to a component?

A

React Component then prop name = some value

  1. create react component
  2. key name/prop name
  3. equal sign then value in a string

Note: can have multiple props, kinda like HTML attributes

121
Q

react-props-and-expressions

How do you write JavaScript expressions in JSX?

A

You put it in curly braces

122
Q

react-class-components

How do you create “class” component in React?

A

class keyword, followed by variable name starting with capital letter, that extends to the component property of the react method (React.Component), opening curly braces, then a mandatory render() prototype method in the class body which has a return statement for a React element

Ex:

class CustomButton extends React.Component {
  render() {
    return {this.props.text};
  }
}
123
Q

react-class-components

How do you access props in a class component?

A

using ‘this’ object

Ex: this.props.propName

124
Q

react-events-and-state

What is the purpose of state in React?

A

The purpose of state is to keep track of values that change over time

In this exercise, the state is whether the button was clicked, not the change of text. Think of state as data model, render is where you put styling aka CSS

125
Q

react-events-and-state

How to you pass an event handler to a React element?

A

Pass it as a property

126
Q

react-rendering-lists

What Array method is commonly used to create a list of React elements?

A

the map() method which applies a change to every single item in the array.

127
Q

react-rendering-lists

What is the best value to use as a “key” prop when rendering lists?

A

The best value for a key is the props’ id, if it doesn’t have one then you can use the index, but that isn’t encouraged.

128
Q

react-form-controls

What are controlled components?

A

An input form element whose value is controlled by React
- Components that have an internal state which is managed by React, usually refers to native HTML elements.

Note: Totally okay to make multiple 3 different handler functions for 3 inputs like email, name, comment, etc.

Purpose is for when user needs to update a form then it comes prepopulated.

129
Q

react-form-controls

What two props must you pass to an input for it to be “controlled”?

A

props: control, value, and listen for, onChange,

130
Q

express-static

What does express.static() return?

A

A middleware function (think of it as a barebones server and all you need is a ‘public’ directory for your frontend files/code)

static = serves same thing to every user without modifications
dynamic = serves something to a user based on logic of the request

NEED to use path.join to guarantee that node uses the ‘public’ directory next to your index.js (server code)

kinda serves as security too since it gives users access to only the ‘public’ directory

131
Q

express-static

What is the local __dirname variable in a Node.js module?

A

the absolute path to the directory of the current module (same as path.dirname() of the __filename)

132
Q

express-static

What does the join() method of Node’s path module do?

A

Joins all given path segments together (paths should be strings unless and relative unless __dirname)

Basically concatenates all files together (relatively pathed), but it follows the order of the path, so if you do ‘..’ at the end then it just exits out (see example on node.js)

133
Q

fetch

What does fetch() return?

A

A Promise that resolves to a Response object (which is a representation of entire HTTP response)

Note: The first then method() is the only one that’s a PROMISE, javascript will wait until that promise is fulfilled to pass in the parameter into the next then method

Differences from xml http:
Benefit of fetch: then() chaining
Cons: no progress event (so hard to implement loading bar)

134
Q

fetch

What is the default request method used by fetch()?

A

GET method

NOTE: res.json() doesn’t return the data, it returns a Promise. of the data

There’s instances where you don’t use res.json(), but it’s rare

135
Q

fetch

How do you specify the request method (GET, POST, etc.) when calling fetch?

A

Add a method property in second argument of fetch method.

Ex: method: ‘POST’ // or PUT, DELETE, GET, etc.

136
Q

fetch-in-react

When does React call a component’s componentDidMount method?

A

Invoked immediately after a component is mounted (inserted into the tree)

order: constructor called first ONE time, then render method, then after that componentDidMount called ONLY ONE time after first successful render()

137
Q

fetch-in-react

Name three React.Component lifecycle methods.

A

componentDidMount(), componentDidUpdate(), and componentWillUnmount()

*all invoked immediately based on their names

render() is also one

138
Q

fetch-in-react

How do you pass data to a child component?

A

using props (do this any time you want to share data b/w components)

139
Q

javascript-closures

What must the return value of ‘myFunction’ be if the follow expression is possible?

myFunction( )( );

A

myFunction is being called and then it’s being called again on the return of the first call

Note: functions can call other functions, and a function knows when it was defined

140
Q

javascript-closures

What does this code do?

const wrap = value => ( ) => value;

A 
function wrap (value) {
   function ( ) {
      value
   }
}

It defines a function named ‘wrap’ with one parameter, value, which calls an anonymous function with the return value of ‘value’

If you call wrap, you get back a function. The point is to store a variable and then retrieve that value

141
Q

javascript-closures

In JavaScript, when is a function’s scope determined; when it is called or when it is defined?

A

When the function is defined (aka lexical), or more accurately when it’s compiled

EVERY function’s scope is at function definition

Note: Good example is clickCounter with an event listener.
Event listener callback has a closure on the ‘counter’ variable outside of the event listener

142
Q

javascript-closures

What allows JavaScript functions to “remember” values from their surroundings?

A

Closures

Which is a combination of a function and the lexical environment within which that function was declared.

Note: All JS has access to variables outside of it, but they cant look into functions and access variables

143
Q

What does the acronym LIFO mean?

A

last-in-first-out

Refers to stacks where last thing that is ‘pushed’ onto the stack is the first thing that can be popped out.

144
Q

What methods are available on a Stack data structure?

A

push(), pop(), peek()

145
Q

What must you do to access the value at an arbitrary point in a stack (not just the “top”)?

A

Pop from the stack repeatedly until we see the value we want.

linear time complexity - O(n)

146
Q

What does the acronym FIFO mean?

A

First-in-first-out

Relates to queues: the first thing enqueued onto the queue is the first thing that can be dequeued out

147
Q

What methods are available on a Queue data structure?

A

Enqueue() - adds value to the ‘back’ of the queue

Dequeue() - removes the ‘front’ value from the queue and returns it

Peek() - returns the ‘front’ value of the queue without removing it

shift and pop for arrays

Not optimal to use arrays because shift() makes JS have to reassign every value.
But if you run into a question where you need to use queues/dequeues then just say that I will be using arrays as a queue. I know it’s not as optimal as a queue though.

148
Q

What must you do to access the value at an arbitrary point in a queue (not just the “front”)?

A

Dequeue() repeatedly (n times) until you reach arbitrary point you want

Linear time complexity - O(n)

149
Q

How are linked lists different from an array?

A

Linked lists are sequential access (like a queue), not random access (like an array). That means that, 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.

random access is ‘constant time’ O(1) no matter how big the array is

Linked lists are not typically used for anything practical for web development

150
Q

How would you access an arbitrary node in a linked list (not just the “head”)?

A

you have to start at the beginning, then jump from node to node until you get there.

linear time O(n)

Problems solved with stack, don’t define your own class just use the predefined methods

Web Development (5 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions