JavaScript

Question 1

What is the purpose of variables?

Answer 1

To temporarily store bits of information a script needs to do its job

Question 2

How do you declare a variable?

Answer 2

set a variable name to a variable keyword like var

Question 3

How do you initialize (assign a value to) a variable?

Answer 3

set a value to the variable name with an assignment operator = < > …

Question 4

What characters are allowed in variable names?

Answer 4

letters, dollar sign or underscore, it cannot start with a number

Question 5

What does it mean to say that variable names are “case sensitive”?

Answer 5

capitalization matters

Question 6

What is the purpose of a string?

Answer 6

strings are data types that consist of letters and other characters, enclosed in quotes, frequently used to add new content to a page

Question 7

What is the purpose of a number?

Answer 7

for numeric data and counting, calculating sums, measurements, time, etc.

Question 8

What is the purpose of a boolean?

Answer 8

to indicate whether something is true or false

Question 9

What does the = operator mean in JavaScript?

Answer 9

the equals operator assigns a value to a variable

Question 10

How do you update the value of a variable?

Answer 10

use the variable name and equals sign to assign it a new value

Question 11

What is the difference between null and undefined?

Answer 11

without setting a variable name to a variable keyword, the name will be null, without assigning a value to a variable, it will be undefined.

null is a nonexistent or invalid object

Question 12

Why is it a good habit to include “labels” when you log values to the browser console?

Answer 12

to help you debug code, so you know which variable is being logged

Question 13

Give five examples of JavaScript primitives.

Answer 13

null, string, number, boolean, undefined, symbol, bigint

Question 14

What data type is returned by an arithmetic operation?

Answer 14

an expression?

Question 15

What is string concatenation?

Answer 15

combining two strings into one

Question 16

What purpose(s) does the + plus operator serve in JavaScript?

Answer 16

concatenation, addition, forcing a variable into a number, incrementing by one for a double plus

Question 17

What data type is returned by comparing two values (, ===, etc)?

Answer 17

boolean

Question 18

What does the += “plus-equals” operator do?

Answer 18

addition assignment, total += 1 would mean total = total + 1

Question 19

What are objects used for?

Answer 19

storing multiple properties related to a variable

Question 20

What are object properties?

Answer 20

variables that tell us about the object

Question 21

Describe object literal notation.

Answer 21

an object’s properties and methods are assigned a variable name with the equals operator

Question 22

How do you remove a property from an object?

Answer 22

delete object name . property name

Question 23

What are the two ways to get or update the value of a property?

Answer 23

dot notation or square bracket with property in quotes

Question 24

What are arrays used for?

Answer 24

a list of values that are related to each other

Question 25

Describe array literal notation.

Answer 25

name a variable and assign it values within brackets, separated by commas

Question 26

How are arrays different from “plain” objects?

Answer 26

because with arrays, the order matters. values are accessed by their numerical order

Question 27

What number represents the first index of an array?

Answer 27

0

Question 28

What is the length property of an array?

Answer 28

the length property calculated the total number of indexes in an array

Question 29

How do you calculate the last index of an array?

Answer 29

.length - 1

Question 30

What is a function in JavaScript?

Answer 30

Functions are a series of instructions to be carried out when called.

Question 31

Describe the parts of a function definition.

Answer 31

functions begin with the function keyword, an optional name, (parameters, more, more, etc…), the function code block beginning with {, an optional return statement, and a closing } for the code block

Question 32

Describe the parts of a function call.

Answer 32

a function call is initiated by the function name, parenthesis, and parameters.

Question 33

When comparing them side-by-side, what are the differences between a function call and a function definition?

Answer 33

a function definition does not include arguments, only parameters

Question 34

What is the difference between a parameter and an argument?

Answer 34

parameters are placeholders for future arguments

Question 35

Why are function parameters useful?

Answer 35

They allow you to use the function more than once

Question 36

What two effects does a return statement have on the behavior of a function?

Answer 36

1. It produces a value we can use.

2. It prevents any more code from being run.

Question 37

Why do we log things to the console?

Answer 37

to debug, to ensure our code is working properly, to test a function before pairing it with another element

Question 38

What is a method?

Answer 38

A method is a function which is a property of an object.

Question 39

How is a method different from any other function?

Answer 39

A method is specifically tied to or contained within a function, some are built in, and we can add our own methods to objects.

Question 40

How do you remove the last element from an array?

Answer 40

.pop()

Question 41

How do you round a number down to the nearest integer?

Answer 41

Math.floor()

Question 42

How do you generate a random number?

Answer 42

Math.random()

Question 43

How do you delete an element from an array?

Answer 43

with splice(), or shift()

Question 44

How do you append an element to an array?

Answer 44

with push() - which puts it at the end of the array, or unshift() which puts it at the beginning of the array

Question 45

How do you break a string up into an array?

Answer 45

with split() and an argument dictating where to split the array

Question 46

Do string methods change the original string? How would you check if you weren’t sure?

Answer 46

no, you could console.log the original array after calling a method

Question 47

Roughly how many string methods are there according to the MDN Web docs?

Answer 47

around 60

Question 48

Is the return value of a function or method useful in every situation?

Answer 48

no, like pop

Question 49

Roughly how many array methods are there according to the MDN Web docs?

Answer 49

40

Question 50

What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?

Answer 50

MDN

Question 51

Give 6 examples of comparison operators.

Answer 51

== , !=, >, =, <=, ===, !==

Question 52

What data type do comparison expressions evaluate to?

Answer 52

boolean

Question 53

What is the purpose of an if statement?

Answer 53

to check if the following code should continue running, to filter out edge cases, etc.

Question 54

Is else required in order to use an if statement?

Answer 54

no

Question 55

Describe the syntax (structure) of an if statement.

Answer 55

if keyword precedes the condition ( ) inside the condition are operands (values being compared) and an operator/s like < > ===, followed by opening curly brace for code block that will execute if condition is met ( or true )

Question 56

What are the three logical operators?

Answer 56

and && or || not !

Question 57

How do you compare two different expressions in the same condition?

Answer 57

by using and && or or ||

Question 58

What is the purpose of a loop?

Answer 58

loops check a condition, if its true, the code block will run and then it’s checked again

Question 59

What is the purpose of a condition expression in a loop?

Answer 59

to determine how many iterations a code will run

Question 60

What does “iteration” mean in the context of loops?

Answer 60

how many times the code block runs

Question 61

When does the condition expression of a while loop get evaluated?

Answer 61

before each iteration

Question 62

When does the initialization expression of a for loop get evaluated?

Answer 62

the first time the code is run

Question 63

When does the condition expression of a for loop get evaluated?

Answer 63

immediately after the initialization expression and again until the condition is met

Question 64

When does the final expression of a for loop get evaluated?

Answer 64

after the loop and until the condition is met

Question 65

Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

Answer 65

break

Question 66

What does the ++ increment operator do?

Answer 66

increment the counter by 1

Question 67

How do you iterate through the keys of an object?

Answer 67

for in loop

Question 68

Why is using !important considered bad practice?

Answer 68

It makes debugging more difficult by breaking the natural cascading in your stylesheets

Question 69

Why do we log things to the console?

Answer 69

To check and debug code before continuing a function or passing values to other functions

Question 70

What is a model

Answer 70

A facsimile, something that is representative of another thing, a prototype, an ideal, a platonic form

Question 71

Which “document” is being referred to in the phrase Document Object Model?

Answer 71

The html document

Question 72

What is the word “object” referring to in the phrase Document Object Model?

Answer 72

the pages elements are objects or nodes that you can access and navigate

Question 73

What is a DOM Tree?

Answer 73

The dom tree is a js element for an html element with it’s properties, elements, children

Question 74

Give two examples of document methods that retrieve a single element from the DOM.

Answer 74

getElementById and querySelector

Question 75

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 75

getElementByClassName, getElementsByTagName, querySelectorAll

Question 76

Why might you want to assign the return value of a DOM query to a variable?

Answer 76

if you want to use the same element more than once. For instance, if you want to alter its innerHTML and setAttribute and addEventListener

Question 77

What console method allows you to inspect the properties of a DOM element object?

Answer 77

console.dir

Question 78

Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 78

1.If you have code in your JavaScript that alters HTML as soon as the JavaScript file loads, there won’t actually be any HTML elements available for it to affect yet, so it will seem as though the JavaScript code isn’t working, and you may get errors. 2.If you have a lot of JavaScript, it can visibly slow the loading of your page because it loads all of the JavaScript before it loads any of the HTML. When you place your JavaScript links at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.

Question 79

What does document.querySelector() take as its argument and what does it return?

Answer 79

a css selector, and it returns the first matching element

Question 80

What does document.querySelectorAll() take as its argument and what does it return?

Answer 80

a css selector, and it returns all that match

Question 81

Why do we log things to the console?

Answer 81

to debug and see what we’re doing

Question 82

Are all possible parameters required to use a JavaScript method or function?

Answer 82

No? Just the object

Question 83

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 83

addEventListener

Question 84

What is the purpose of events and event handling?

Answer 84

Events are fired to notify code of “interesting changes” that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events from the operating system), and other causes.

Question 85

What is a callback function?

Answer 85

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Question 86

What object is passed into an event listener callback when the event fires?

Answer 86

an event type

Question 87

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

Answer 87

The target property of the Event interface is a reference to the object onto which the event was dispatched. The element of where the event occurred.

Question 88

What is the difference between these two snippets of code?

Answer 88

the second one is pointless because there are no arguments, both will fire the handleClick, but the first is the better option because the handleClick function may take arguments?

Question 89

What is the className property of element objects?

Answer 89

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

Question 90

How do you update the CSS class attribute of an element using JavaScript?

Answer 90

with the className property

Question 91

What is the textContent property of element objects?

Answer 91

The textContent property of the Node interface represents the text content of the node and its descendants.

Question 92

How do you update the text within an element using JavaScript?

Answer 92

.textContent =

Question 93

Is the event parameter of an event listener callback always useful?

Answer 93

no, you can use an anonymous function right there and avoid it

Question 94

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

Answer 94

more difficult

Question 95

Why is storing information about a program in variables better than only storing it in the DOM?

Answer 95

by storing them in variables you can reuse them

Question 96

What event is fired when a user places their cursor in a form control?

Answer 96

focus

Question 97

What event is fired when a user’s cursor leaves a form control?

Answer 97

blur

Question 98

What event is fired as a user changes the value of a form control?

Answer 98

input

Question 99

What event is fired when a user clicks the “submit” button within a ?

Answer 99

submit

Question 100

What does the event.preventDefault() method do?

Answer 100

stop the form info from being sent

Question 101

What does submitting a form without event.preventDefault() do?

Answer 101

the page refreshes

Question 102

What property of a form element object contains all of the form’s controls.

Answer 102

elements

Question 103

What property of form a control object gets and sets its value?

Answer 103

value

Question 104

What is one risk of writing a lot of code without checking to see if it works so far?

Answer 104

you don’t know where it’s wrong

Question 105

What is an advantage of having your console open when writing a JavaScript program?

Answer 105

you can use debugger and see what’s happening

Question 106

Does the document.createElement() method insert a new element into the page?

Answer 106

No, not untill it’s appended

Question 107

How do you add an element as a child to another element?

Answer 107

appendChild

Question 108

What do you pass as the arguments to the element.setAttribute() method?

Answer 108

name, value

Question 109

What steps do you need to take in order to insert a new element into the page?

Answer 109

createElement, createTextNode(optional), appendChild

create new element
store new element
query for parent element
call appendchild on parent with the new element as an argument

Question 110

What is the textContent property of an element object for?

Answer 110

The textContent property of the Node interface represents the text content of the node and its descendants.

Question 111

Name two ways to set the class attribute of a DOM element.

Answer 111

setAttribute with name, className

Question 112

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

Answer 112

You can give that code a name, it’s easier to test, easier to reuse elsewhere

Question 113

What is the event.target?

Answer 113

the place where the event occurred

Question 114

Why is it possible to listen for events on one element that actually happen its descendent elements?

Answer 114

event bubbling

Question 115

What DOM element property tells you what type of element it is?

Answer 115

element.tagname

Question 116

What does the element.closest() method take as its argument and what does it return?

Answer 116

The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null.

Question 117

How can you remove an element from the DOM?

Answer 117

The Element.remove() method removes the element from the tree it belongs to.

Question 118

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

Answer 118

add it to the parent

Question 119

What is the event.target?

Answer 119

where the event occurred

Question 120

What does the element.matches() method take as an argument and what does it return?

Answer 120

The matches() method checks to see if the Element would be selected by the provided selectorString – in other words – checks if the element “is” the selector.

Question 121

How can you retrieve the value of an element’s attribute?

Answer 121

element.getAttribute

Question 122

At what steps of the solution would it be helpful to log things to the console?

Answer 122

after you query an element, and again after you create any new variable

Question 123

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

Answer 123

we’d have to query the tab directly with querySelector

Question 124

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

Answer 124

with a giant set of conditionals for each view

Question 125

What is a method?

Answer 125

A method is a function attached to an object

Question 126

How can you tell the difference between a method definition and a method call?

Answer 126

a method definition lives inside an object and precedes a colon, a method call precedes a dot and is followed by parenthesis

Question 127

Describe method definition syntax (structure).

Answer 127

method: function (param) { return }

Question 128

Describe method call syntax (structure).

Answer 128

object.method()

Question 129

How is a method different from any other function?

Answer 129

A method belongs to an object

Question 130

What is the defining characteristic of Object-Oriented Programming?

Answer 130

Objects containing data and code, and the this/self notation, instances, class-based

Methods are behavior for actions to be done.

Question 131

What are the four “principles” of Object-Oriented Programming?

Answer 131

Abstraction, Encapsulation, Inheritance, Polymorphism

Encapsulation: In object-oriented programming (OOP), encapsulation refers to the bundling of data with the methods that operate on that data, or the restricting of direct access to some of an object’s components.[1] Encapsulation is used to hide the values or state of a structured data object inside a class, preventing direct access to them by clients in a way that could expose hidden implementation details or violate state invariance maintained by the methods.

Publicly accessible methods are generally provided in the class to access or modify the state more abstractly. In practice sometimes methods (so-called “getters” and “setters”) are provided to access the values indirectly, but, although not necessarily a violation of abstract encapsulation, they are often considered a sign-post of potentially poor object-oriented programming (OOP) design practice [2] (an Anti-pattern).

Inheritance: In object-oriented programming, inheritance is the mechanism of basing an object or class upon another object (prototype-based inheritance) or class (class-based inheritance), retaining similar implementation. Also defined as deriving new classes (sub classes) from existing ones such as super class or base class and then forming them into a hierarchy of classes. In most class-based object-oriented languages, an object created through inheritance, a “child object”, acquires all the properties and behaviors of the “parent object” , with the exception of: constructors, destructor, overloaded operators and friend functions of the base class. Inheritance allows programmers to create classes that are built upon existing classes,[1] to specify a new implementation while maintaining the same behaviors (realizing an interface), to reuse code and to independently extend original software via public classes and interfaces. The relationships of objects or classes through inheritance give rise to a directed graph.

Polymorphism: In programming languages and type theory, polymorphism is the provision of a single interface to entities of different types[1] or the use of a single symbol to represent multiple different types.[2]The concept is borrowed from a principle in biology where an organism or species can have many different forms or stages.[3]

Question 132

What is “abstraction”?

Answer 132

Abstraction is being able to work with complex things in simple ways. The DOM is an abstraction of the html document, not the actual document.

the creation of abstract concept-objects by mirroring common features or attributes of various non-abstract objects or systems of study[3] – the result of the process of abstraction.
Abstraction, in general, is a fundamental concept in computer science and software development.[4] The process of abstraction can also be referred to as modeling and is closely related to the concepts of theory and design.[5] Models can also be considered types of abstractions per their generalization of aspects of reality.

Question 133

What does API stand for?

Answer 133

Application Programming Interface

Question 134

What is the purpose of an API?

Answer 134

To hide the internal details of how a system works, exposing only those parts a programmer will find particularly useful

Question 135

What is this in JavaScript?

Answer 135

this is an implicit parameter of all javascript objects, this is the object you’re current’y working with

Question 136

What does it mean to say that this is an “implicit parameter”?

Answer 136

it’s available in the function code-block even though it was never given as an argument

Question 137

When is the value of this determined in a function; call time or definition time?

Answer 137

call time baby

Question 138

What does this refer to in the following code snippet?

Answer 138

the character object

Question 139

Given the above character object, what is the result of the following code snippet? Why?

Answer 139

nothing because it hasn’t been called yet

Question 140

Given the above character object, what is the result of the following code snippet? Why?

Answer 140

It’s me, mario!

Because you just assigned a variable to the character method greet

Question 141

How can you tell what the value of this will be for a particular function or method definition?

Answer 141

you can’t, it’s a parameter and it doesn’t have a value until called

Question 142

How can you tell what the value of this is for a particular function or method call?

Answer 142

whatever the properties of the object it’s being called from, left of the dot

Question 143

What kind of inheritance does the JavaScript programming language use?

Answer 143

Prototype-based programming is a style of object-oriented programming in which behaviour reuse (known as inheritance) is performed via a process of reusing existing objects that serve as prototypes. This model can also be known as prototypal, prototype-oriented, classless, or instance-based programming.

Question 144

What is a prototype in JavaScript?

Answer 144

generalized object that can be reused, cloned, extended, etc. Array prototypes are applied to every array.

Question 145

How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?

Answer 145

Because there are string, array, and number prototypes

Question 146

If an object does not have it’s own property or method by a given key, where does JavaScript look for it?

Answer 146

the prototype

Question 147

What does the new operator do?

Answer 147

The new keyword does the following things:

Creates a blank, plain JavaScript object.

Adds a property to the new object (__proto__) that links to the constructor function’s prototype object

Note: Properties/objects added to the construction function prototype are therefore accessible to all instances created from the constructor function (using new).

Binds the newly created object instance as the this context (i.e. all references to this in the constructor function now refer to the object created in the first step).
Returns this if the function doesn’t return an object.

Question 148

What property of JavaScript functions can store shared behavior for instances created with new?

Answer 148

prototype

Question 149

What does the instanceof operator do?

Answer 149

The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.

Question 150

What is a “callback” function?

Answer 150

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Question 151

Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?

Answer 151

setInterval setTimeout

Question 152

How can you set up a function to be called repeatedly without using a loop?

Answer 152

setInterval

Question 153

What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?

Answer 153

0

Question 154

What do setTimeout() and setInterval() return?

Answer 154

the timeOutID

The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(). This value can be passed to clearTimeout() to cancel the timeout.

It is guaranteed that a timeoutID value will never be reused by a subsequent call to setTimeout() or setInterval() on the same object (a window or a worker). However, different objects use separate pools of IDs.

Question 155

What is a client?

Answer 155

Client–server model is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.[1] Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs, which share their resources with clients. A client usually does not share any of its resources, but it requests content or service from a server. Clients, therefore, initiate communication sessions with servers, which await incoming requests. Examples of computer applications that use the client–server model are email, network printing, and the World Wide Web.

https://en.wikipedia.org/wiki/Client%E2%80%93server_model

Question 156

What is a server?

Answer 156

A server host runs one or more server programs, which share their resources with clients.

The “client-server” characteristic describes the relationship of cooperating programs in an application. The server component provides a function or service to one or many clients, which initiate requests for such services. Servers are classified by the services they provide. For example, a web server serves web pages and a file server serves computer files. A shared resource may be any of the server computer’s software and electronic components, from programs and data to processors and storage devices. The sharing of resources of a server constitutes a service.

Whether a computer is a client, a server, or both, is determined by the nature of the application that requires the service functions. For example, a single computer can run web server and file server software at the same time to serve different data to clients making different kinds of requests. Client software can also communicate with server software within the same computer.[2] Communication between servers, such as to synchronize data, is sometimes called inter-server or server-to-server communication.

Question 157

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

Answer 157

GET (Post, Head Options)

to send data to the server/database, POST

Question 158

What three things are on the start-line of an HTTP request message?

Answer 158

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 optional set of HTTP headers specifying the request, or describing the body included in the message.

A blank line indicating all meta-information for the request has been sent.

An optional body containing data associated with the request (like content of an HTML form), or the document associated with a response. The presence of the body and its size is specified by the start-line and HTTP headers.

Question 159

What three things are on the start-line of an HTTP response message?

Answer 159

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.

Question 160

What are HTTP headers?

Answer 160

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.

Question 161

Where would you go if you wanted to learn more about a specific HTTP Header?

Answer 161

MDN on HTTP Headers

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

Question 162

Is a body required for a valid HTTP request or response message?

Answer 162

The last part of a response is the body. Not all responses have one: responses with a status code that sufficiently answers the request without the need for corresponding payload (like 201 Created or 204 No Content) usually don’t.

Bodies can be broadly divided into three categories:

Single-resource bodies, consisting of a single file of known length, defined by the two headers: Content-Type and Content-Length.
Single-resource bodies, consisting of a single file of unknown length, encoded by chunks with Transfer-Encoding set to chunked.
Multiple-resource bodies, consisting of a multipart body, each containing a different section of information. These are relatively rare.

Question 163

What is AJAX?

Answer 163

Ajax is a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation or JSON

Question 164

What does the AJAX acronym stand for?

Answer 164

Asynchronous JavaScript And XML

Question 165

Which object is built into the browser for making HTTP requests in JavaScript?

Answer 165

XMLHttpRequest

var requestVariable = new XMLHttpRequest()
requestVarialbe.open('GET', 'filepath.json', true)
reqeustVariable.send ('search=pepperoni')

reponse

requestVariable.onload = function() {
}

Question 166

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

Answer 166

load

Question 167

Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

Answer 167

they both share a prototype

Question 168

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

Answer 168

function code block, if block, conditional code block, object code block

Question 169

What does block scope mean?

Answer 169

the variable is contained within the block of code, it isn’t globally accessible, it’s only accessible within the code block

Question 170

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

Answer 170

They are both block scoped variables

Question 171

What is the difference between let and const?

Answer 171

the variables declared by the const keyword cannot be reassigned

Question 172

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

Answer 172

you can mutate the array, but you cannot reassign the variable to another array or something else entirely

Question 173

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

Answer 173

If you’re going to be reassigning the value of a variable each iteration, like a loop and i, you should use let, otherwise use const

Question 174

What is the syntax for writing a template literal?

Answer 174

a string with backticks instead of quotes

Question 175

What is “string interpolation”?

Answer 175

String formatting: the ability to substitute part of the string for the values of variables or expressions. This feature is also called string interpolation.

Question 176

What is destructuring, conceptually?

Answer 176

flattening the object literal structure and flipping it around so you can declare and assign properties/values before assigning the abject or array a variable name

Question 177

What is the syntax for Object destructuring?

Answer 177

let { property: value, property: value} = variable name

Question 178

What is the syntax for Array destructuring?

Answer 178

let [ variable, another variable, …] = function() that returns array

Question 179

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

Answer 179

destructuring is done in the opposite format and set equal to the object/array

Question 180

What is the syntax for defining an arrow function?

Answer 180

function nam = (params) => return

Question 181

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

Answer 181

nothing

Question 182

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

Answer 182

by the following surrounding scope

Question 183

What is a CLI?

Answer 183

command line interface

Question 184

What is a GUI?

Answer 184

graphical user interface

Question 185

man

Answer 185

you need to find a specific command

Question 186

cat

Answer 186

when you want to combine similar files into another directory

Question 187

ls

Answer 187

when you need to see the contents of a directory

Question 188

pwd

Answer 188

when you need the filepath

Question 189

echo

Answer 189

prints a string

Question 190

touch

Answer 190

when you want to make a new file

Question 191

mkdir

Answer 191

when you want to make a new directory/folder

Question 192

mv

Answer 192

renames or moves

Question 193

rm

Answer 193

removes

Question 194

cp

Answer 194

copies

Question 195

What is Node.js?

Answer 195

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

Node.js is similar in design to, and influenced by, systems like Ruby’s Event Machine and Python’s Twisted. Node.js takes the event model a bit further. It presents an event loop as a runtime construct instead of as a library. In other systems, there is always a blocking call to start the event-loop. Typically, behavior is defined through callbacks at the beginning of a script, and at the end a server is started through a blocking call like EventMachine::run(). In Node.js, there is no such start-the-event-loop call. Node.js simply enters the event loop after executing the input script. Node.js exits the event loop when there are no more callbacks to perform. This behavior is like browser JavaScript — the event loop is hidden from the user.

HTTP is a first-class citizen in Node.js, designed with streaming and low latency in mind. This makes Node.js well suited for the foundation of a web library or framework.

Question 196

What can Node.js be used for?

Answer 196

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser. Consequently, Node.js represents a “JavaScript everywhere” paradigm,[6] unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts.

Question 197

What is a REPL?

Answer 197

A read–eval–print loop (REPL), also termed an interactive toplevel or language shell, is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user; a program written in a REPL environment is executed piecewise.[1] The term is usually used to refer to programming interfaces similar to the classic Lisp machine interactive environment. Common examples include command-line shells and similar environments for programming languages, and the technique is very characteristic of scripting languages.[2

Question 198

When was Node.js created?

Answer 198

may 27 2009 by ryan dahl

Question 199

What back end languages have you heard of?

Answer 199

Python

Question 200

What is a computer process?

Answer 200

In computing, a process is the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity. Depending on the operating system (OS), a process may be made up of multiple threads of execution that execute instructions concurrently.[1][2]

Question 201

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

Answer 201

528

Question 202

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

Answer 202

Full stack Web development is based on making multiple processes work together to form one application, so having at least a cursory awareness of computer processes is necessary. This will be extremely important when learning about applications made of multiple components, such as clients, servers, and databases.

so they know how much memory their application takes up, whether all threads are running concurrently, and which part of the application is causing issues (front or back end)

Question 203

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

Answer 203

The process object is a global that provides information about, and control over, 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():

Question 204

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

Answer 204

require ‘process’

Question 205

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

Answer 205

array of strings

Question 206

what is a JavaScript module?

Answer 206

a single js file

Question 207

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

Answer 207

(exports, require, module, __filename, __dirname)

__dirname: directory name of current module, same as the path.dirname() of the __filename

\_\_filename
The file name of the current module. This is the current module file's absolute path with symlinks resolved.

For a main program this is not necessarily the same as the file name used in the command line.

exports#
Added in: v0.1.12

A reference to the module.exports that is shorter to type. See the section about the exports shortcut for details on when to use exports and when to use module.exports.

module#
Added in: v0.1.16

A reference to the current module, see the section about the module object. In particular, module.exports is used for defining what a module exports and makes available through require().

require(id)#
Added in: v0.1.13
id  module name or path
Returns:  exported module content
Used to import modules, JSON, and local files. Modules can be imported from node_modules. Local modules and JSON files can be imported using a relative path (e.g. ./, ./foo, ./bar/baz, ../foo) that will be resolved against the directory named by \_\_dirname (if defined) or the current working directory. The relative paths of POSIX style are resolved in an OS independent fashion, meaning that the examples above will work on Windows in the same way they would on Unix systems.

Question 208

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

Answer 208

Abort controller: A utility class used to signal cancelation in selected Promise-based APIs. The API is based on the Web API AbortController.

process object: The process object is a global that provides information about, and control over, 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():

Question 209

what is the JavaScript Event Loop

Answer 209

JavaScript is single-threaded, meaning it can only execute one function at a time, but the event loop an dit’s queue/stack give the illusion that it’s multithreaded and non-blocking

the event loop pulls things (generally functions) out of the queue and places them onto the execution stack whenever the stack becomes empty, giving the illusion that javascript is multithreaded even though it is single threaded

so, when the stack executes setTimeOut, setTimeOut’s callback funciton is pushed into the web API where it waits. It’s then pushed to the queue were it waits until the stack is empty, then it’s pushed into the stack for execution.

Question 210

what’s the difference between blocking and non-blocking?

Answer 210

blocking means nothing else can happen until it’s complete, non-blocking is like setTimeout or asynchronous functions that can execute in the order of the call stack, or the next time the event loop comes around and moves it out of the queue

non-blocking is synchronous execution of code, one after another regardless of time complexity

non-blocking means code can run asynchronously. With node, that means larger functions can be pushed into thread pools while smaller functions are handled by the event loop

Question 211

What is a directory?

Answer 211

A directory is a folder

Question 212

What is a relative file path?

Answer 212

A path that begins with the current directory

Question 213

What is an absolute path?

Answer 213

A path that contains the root directory and all other subdirectories

Question 214

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

Answer 214

fs (file system)

Question 215

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

Answer 215

fs.writeFile

Question 216

Are file operations using the fs module synchronous or asynchronous?

Answer 216

fs.writeFile is asynchronous, while fs.writeFileSync is synchronous aka it blocks the event loop

Question 217

What is a client?

Answer 217

a service requester / browser

Client–server model is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.[1] Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs, which share their resources with clients. A client usually does not share any of its resources, but it requests content or service from a server. Clients, therefore, initiate communication sessions with servers, which await incoming requests. Examples of computer applications that use the client–server model are email, network printing, and the World Wide Web.

Question 218

What is a server?

Answer 218

The server component provides a function or service to one or many clients, which initiate requests for such services. Servers are classified by the services they provide. For example, a web server serves web pages and a file server serves computer files. A shared resource may be any of the server computer’s software and electronic components, from programs and data to processors and storage devices. The sharing of resources of a server constitutes a service.

Generally, a service is an abstraction of computer resources and a client does not have to be concerned with how the server performs while fulfilling the request and delivering the response. The client only has to understand the response based on the well-known application protocol, i.e. the content and the formatting of the data for the requested service.

Clients and servers exchange messages in a request–response messaging pattern. The client sends a request, and the server returns a response. This exchange of messages is an example of inter-process communication. To communicate, the computers must have a common language, and they must follow rules so that both the client and the server know what to expect. The language and rules of communication are defined in a communications protocol. All protocols operate in the application layer. The application layer protocol defines the basic patterns of the dialogue. To formalize the data exchange even further, the server may implement an application programming interface (API).[3] The API is an abstraction layer for accessing a service. By restricting communication to a specific content format, it facilitates parsing. By abstracting access, it facilitates cross-platform data exchange.[4]

A server may receive requests from many distinct clients in a short period of time. A computer can only perform a limited number of tasks at any moment, and relies on a scheduling system to prioritize incoming requests from clients to accommodate them. To prevent abuse and maximize availability, the server software may limit the availability to clients. Denial of service attacks are designed to exploit a server’s obligation to process requests by overloading it with excessive request rates. Encryption should be applied if sensitive information is to be communicated between the client and the server.

Question 219

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

Answer 219

GET

Question 220

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

Answer 220

GET / HTTP/1.1

Question 221

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

Answer 221

HTTP/1.1 200 OK (if it’s okay)

Question 222

What are HTTP headers?

Answer 222

Key value pairs.

HTTP headers from a request follow the same basic structure of an HTTP header: a case-insensitive string followed by a colon (‘:’) and a value whose structure depends upon the header. The whole header, including the value, consist of one single line, which can be quite long.

Question 223

Is a body required for a valid HTTP message?

Answer 223

Not all requests have one: requests fetching resources, like GET, HEAD, DELETE, or OPTIONS, usually don’t need one. Some requests send data to the server in order to update it: as often the case with POST requests (containing HTML form data).

Question 224

What is NPM?

Answer 224

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 as well.

npm consists of three distinct components:

the website
the Command Line Interface (CLI)
the registry
Use the website to discover packages, set up profiles, and manage other aspects of your npm experience. For example, you can set up organizations to manage access to public or private packages.

The CLI runs from a terminal, and is how most developers interact with npm.

The registry is a large public database of JavaScript software and the meta-information surrounding it.

Use npm to . . .
Adapt packages of code for your apps, or incorporate packages as they are.
Download standalone tools you can use right away.
Run packages without downloading using npx.
Share code with any npm user, anywhere.
Restrict code to specific developers.
Create organizations to coordinate package maintenance, coding, and developers.
Form virtual teams by using organizations.
Manage multiple versions of code and code dependencies.
Update applications easily when underlying code is updated.
Discover multiple ways to solve the same puzzle.
Find other developers who are working on similar problems and projects.

Question 225

What is a package?

Answer 225

A package is a file or directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry. For more information on creating a package.json file, see “Creating a package.json file”.

Packages can be unscoped or scoped to a user or organization, and scoped packages can be private or public.

About package formats
A package is any of the following:

a) A folder containing a program described by a package.json file.
b) A gzipped tarball containing (a).
c) A URL that resolves to (b).
d) A @ that is published on the registry with (c).
e) A @ that points to (d).
f) A that has a latest tag satisfying (e).
g) A git url that, when cloned, results in (a).

Question 226

How can you create a package.json with npm?

Answer 226

npm init

Question 227

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

Answer 227

packages your project depends on, listed as “dependencies” in your package.json file or “devDependencies”

to add dependencies to a package.json under devDependencies, you use the command line and do:

npm install –save-dev

Question 228

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

Answer 228

npm will download that dependency when you run npm install, or whenever your package runs

Question 229

How do you add express to your package dependencies?

Answer 229

npm install express

Question 230

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

Answer 230

.listen

Question 231

How do you mount a middleware with an Express application?

Answer 231

.use method

Question 232

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

Answer 232

req res

Question 233

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

Answer 233

application/json

Question 234

what is the significance of the HTTP request method

Answer 234

it tells you what the client is asking for/doing

Question 235

what is express.json()

Answer 235

express.json() parses incoming json, .json() converts outgoing objects into json

Question 236

What is PostgreSQL and what are some alternative relational databases?

Answer 236

A relational database is a digital database based on the relational model of data, as proposed by E. F. Codd in 1970.[1] A system used to maintain relational databases is a relational database management system (RDBMS). Many relational database systems have an option of using the SQL (Structured Query Language) for querying and maintaining the database.[2]

the relational model organizes into columns and rows, with a unique key identifying each row

Oracle Database
IBM Db2
Microsoft SQL Server
Microsoft Access
SAP

As is typical of client/server applications, the client and the server can be on different hosts. In that case they communicate over a TCP/IP network connection. You should keep this in mind, because the files that can be accessed on a client machine might not be accessible (or might only be accessible using a different file name) on the database server machine.

The PostgreSQL server can handle multiple concurrent connections from clients. To achieve this it starts (“forks”) a new process for each connection. From that point on, the client and the new server process communicate without intervention by the original postgres process. Thus, the supervisor server process is always running, waiting for client connections, whereas client and associated server processes come and go. (All of this is of course invisible to the user. We only mention it here for completeness.)

Question 237

What are some advantages of learning a relational database?

Answer 237

They can make it easy to access, organize, and protect data

Question 238

What is one way to see if PostgreSQL is running?

Answer 238

sudo service postgresql status

Question 239

What is a table?

Answer 239

A table is a list of rows each having the same set of attributes

Question 240

What is a row?

Answer 240

The values for each row correspond to the attribute names

Question 241

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

Answer 241

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.

Question 242

How do you retrieve specific columns from a database table?

Answer 242

with a select statement

Question 243

How do you filter rows based on some specific criteria?

Answer 243

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.
SQL keywords such as select and from are not case-sensitive.
SQL does not have to be indented, but you should do it anyway for consistent style and therefore readability.

Question 244

How do you filter rows based on some specific criteria?

Answer 244

where “category” = ‘somecategory’;

Question 245

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

Answer 245

< > != =

Question 246

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

Answer 246

limit #;

Question 247

How do you retrieve all columns from a database table?

Answer 247

select *

Question 248

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

Answer 248

order by ____ desc; or asc;

Question 249

How do you add a row to a SQL table?

Answer 249

an insert statement

Question 250

What is a tuple?

Answer 250

a turple is a set/batch of values

Question 251

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

Answer 251

by using multiple turples, parenthetical sets of values

Question 252

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

Answer 252

with returning *;

Question 253

How do you update rows in a database table?

Answer 253

with the update clause

Question 254

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

Answer 254

so you can be specific about what you’re updating and not update everything

Question 255

How do you delete rows from a database table?

Answer 255

with a delete clause

Question 256

How do you accidentally delete all rows from a table?

Answer 256

you don’t specify rows or columns

Question 257

What is a foreign key?

Answer 257

a column that’s shared between two tables

Question 258

How do you join two SQL tables?

Answer 258

with a join clause

select *
from “products”
join “suppliers” using (“supplierId”);

Question 259

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

Answer 259

alias column names

Question 260

What are some examples of aggregate functions?

Answer 260

max(), avg(), min(), sum(), every(),

select max(“price”) as “highestPrice” from “products”

select avg(“price”) as “averagePrice” from “products”

select count(*) as “totalProducts” from “products”

Question 261

What is the purpose of a group by clause?

Answer 261

so you can specify certain rows, not the entire table

Question 262

What are the three states a Promise can be in?

Answer 262

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

Question 263

How do you handle the fulfillment of a Promise?

Answer 263

with resolve

Question 264

How do you handle the rejection of a Promise?

Answer 264

with reject

Question 265

What is map useful for

Answer 265

for creating a new array from specific elements

Question 266

What is Array.prototype.reduce useful for?

Answer 266

Combining the elements of an array into a single value.

Question 267

What is “syntactic sugar”?

Answer 267

In computer science, 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.

For example, many programming languages provide special syntax for referencing and updating array elements. Abstractly, an array reference is a procedure of two arguments: an array and a subscript vector, which could be expressed as get_array(Array, vector(i,j)). Instead, many languages provide syntax such as Array[i,j]. Similarly an array element update is a procedure consisting of three arguments, for example set_array(Array, vector(i,j), value), but many languages provide syntax such as Array[i,j] = value.

A construct in a language is syntactic sugar if it can be removed from the language without any effect on what the language can do: functionality and expressive power will remain the same.

Language processors, including compilers and static analyzers, often expand sugared constructs into more fundamental constructs before processing, a process sometimes called “desugaring”.

Question 268

What is the typeof an ES6 class?

Answer 268

a function

Question 269

Describe ES6 class syntax.

Answer 269

class VariableName {
constructor(variable) {
this.variable = variable
}
methods() {
return this.whatever
}

This Person class behaves like the Person type in the previous example. However, instead of using a constructor/prototype pattern, it uses the class keyword.

In the Person class, the constructor() is where you can initialize the properties of an instance. JavaScript automatically calls the constructor() method when you instantiate an object of the class.

Question 270

What is “refactoring”?

Answer 270

In computer programming and software design, 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. Potential advantages of refactoring may include improved code readability and reduced complexity; these can improve the source code’s maintainability and create a simpler, cleaner, or more expressive internal architecture or object model to improve extensibility. Another potential goal for refactoring is improved performance; software engineers face an ongoing challenge to write programs that perform faster or use less memory.

Typically, refactoring applies a series of standardised basic micro-refactorings, each of which is (usually) a tiny change in a computer program’s source code that either preserves the behaviour of the software, or at least does not modify its conformance to functional requirements. Many development environments provide automated support for performing the mechanical aspects of these basic refactorings. If done well, code refactoring may help software developers discover and fix hidden or dormant bugs or vulnerabilities in the system by simplifying the underlying logic and eliminating unnecessary levels of complexity. If done poorly, it may fail the requirement that external functionality not be changed, and may thus introduce new bugs.

By continuously improving the design of code, we make it easier and easier to work with. This is in sharp contrast to what typically happens: little refactoring and a great deal of attention paid to expediently adding new features. If you get into the hygienic habit of refactoring continuously, you’ll find that it is easier to extend and maintain code.

— Joshua Kerievsky, Refactoring to Patterns[1]

Question 271

What is Webpack?

Answer 271

Wouldn't it be nice…
...to have something that will not only let us write modules but also support any module format (at least until we get to ESM) and handle resources and assets at the same time?

This is why webpack exists. It’s a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.

Webpack cares about performance and load times; it’s always improving or adding new features, such as async chunk loading and prefetching, to deliver the best possible experience for your project and your users.

Question 272

How do you add a devDependency to a package?

Answer 272

npm install package name –save-dev

Question 273

What is an NPM script?

Answer 273

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. These all can be executed by running npm run-script or npm run for short. Pre and post commands with matching names will be run for those as well (e.g. premyscript, myscript, postmyscript). Scripts from dependencies can be run with npm explore – npm run .

Question 274

How are ES Modules different from CommonJS modules?

Answer 274

Being built into the language allows ES6 modules to go beyond CommonJS and AMD (details are explained later):

Their syntax is even more compact than CommonJS’s.
Their structure can be statically analyzed (for static checking, optimization, etc.).
Their support for cyclic dependencies is better than CommonJS’s.
The ES6 module standard has two parts:

Declarative syntax (for importing and exporting)
Programmatic loader API: to configure how modules are loaded and to conditionally load modules

If you require a library in CommonJS, you get back an object:

var lib = require('lib');
lib.someFunc(); // property lookup
Thus, accessing a named export via lib.someFunc means you have to do a property lookup, which is slow, because it is dynamic.

In contrast, if you import a library in ES6, you statically know its contents and can optimize accesses:

import * as lib from ‘lib’;
lib.someFunc(); // statically resolved

With a static module structure, you always statically know which variables are visible at any location inside the module:

Global variables: increasingly, the only completely global variables will come from the language proper. Everything else will come from modules (including functionality from the standard library and the browser). That is, you statically know all global variables.
Module imports: You statically know those, too.
Module-local variables: can be determined by statically examining the module.

Question 275

What kind of modules can Webpack support?

Answer 275

ECMAScript modules
CommonJS modules
AMD modules
Assets
WebAssembly modules

Question 276

What is React?

Answer 276

React is a Javascript Framework/library that makes it easy to make reusable components that encapsulate html and logic into a class or function

Makes it easy to build modular applications

We can finally stop making giant DOM trees

Question 277

What is a React element?

Answer 277

Elements are the smallest building blocks of react apps. A react element describes what you want to see on the screen. Unlike browser dom elements, react elements are plain object and are cheap to create. React dom takes care of updating the dom to match the react elements. Elements are what components are made of.

Question 278

How do you mount a React element to the DOM?

Answer 278

By using ReactDOM.render, which is only called when the element changes

React DOM compares the element and its children to the previous one and only applies DOM updates necessary to bring the hhhhhhhhhhDOM to the desired state

Question 279

What is Babel?

Answer 279

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. Here are the main things Babel can do for you:

Transform syntax
Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
Source code transformations (codemods)
And more! (check out these videos for inspiration)

Question 280

What is a Plug-in?

Answer 280

A software component that adds a specific feature to an existing program, often supporting customization. Like a theme or skin preset package that can change the GUI.

Question 281

What is a Webpack loader?

Answer 281

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!

Question 282

How can you make Babel and Webpack work together?

Answer 282

npm install -D babel-loader @babel/core @babel/preset-env webpack

Question 283

What is JSX?

Answer 283

A syntax extension of javascript

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, …children) function.

Question 284

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

Answer 284

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.

Question 285

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

Answer 285

‘@babel/plugin-transform-react-jsx’

Question 286

What is a React component?

Answer 286

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Question 287

How do you define a function component in React?

Answer 287

the same way you do for a javascript function with props as a parameter and returning jsx

Question 288

How do you mount a component to the DOM?

Answer 288

you create an element out of your function, then use reactdom.render and pass in the element along with document.querySelector(“#root”)

Question 289

What are controlled components?

Answer 289

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”.

Question 290

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

Answer 290

onChange/Value

Question 291

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

Answer 291

map

Question 292

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

Answer 292

id

Question 293

what does express.static() do?

Answer 293

This is a built-in middleware function in Express. It serves static files and is based on serve-static.

The root argument specifies the root directory from which to serve static assets. The function determines the file to serve by combining req.url with the provided root directory. When a file is not found, instead of sending a 404 response, it instead calls next() to move on to the next middleware, allowing for stacking and fall-backs.

Question 294

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

Answer 294

The directory name of the current module. This is the same as the path.dirname() of the __filename.

Question 295

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

Answer 295

…paths A sequence of path segments
Returns:
The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.

Zero-length path segments are ignored. If the joined path string is a zero-length string then ‘.’ will be returned, representing the current working directory.

path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// Returns: '/foo/bar/baz/asdf'

path.join('foo', {}, 'bar');
// Throws 'TypeError: Path must be a string. Received {}'

Question 296

What does fetch() return?

Answer 296

a promise

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

This kind of functionality was previously achieved using XMLHttpRequest. Fetch provides a better alternative that can be easily used by other technologies such as Service Workers. Fetch also provides a single logical place to define other HTTP-related concepts such as CORS and extensions to HTTP.

The fetch specification differs from jQuery.ajax() in the following significant ways:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, as soon as the server responds with headers, the Promise will resolve normally (with the ok property of the response set to false if the response isn’t in the range 200–299), and it will only reject on network failure or if anything prevented the request from completing.
fetch() won’t send cross-origin cookies unless you set the credentials init option. (Since April 2018. The spec changed the default credentials policy to same-origin. Firefox changed since 61.0b13.)

Question 297

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

Answer 297

GET?

Question 298

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

Answer 298

const fetchResponsePromise = fetch(resource [, init])

Question 299

When does React call a component’s componentDidMount method?

Answer 299

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

Question 300

Name three React.Component lifecycle methods.

Answer 300

ComponentWillUnmount, ComponentDidMount, Render, ComponentDidUpdate

Question 301

How do you pass data to a child component?

Answer 301

via props

Question 302

What are closures?

Answer 302

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Question 303

What must the return value of myFunction be if the following expression is possible?
myFunction()();

Answer 303

the return value must be a function

Question 304

What does this code do?
const wrap = value => () => value;

Answer 304

the function wrap is being defined with one argument, value, which return an anonymous function. The anonymous function returns the argument value

Question 305

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

Answer 305

defined

Question 306

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

Answer 306

the lexical scope - the location where the variable is declared. nested functions have access to outer functions variables, but not the other way around