Fullstack Open 1

Question 1

How do you prevent a website from caching content such as images and JavaScript while developing?

Answer 1

In the developer console go to the network tab and tick the checkbox for “Disable cache”

Question 2

In a response header what unit of measurement is content-length?

Answer 2

content length is the size in bytes.

content-length: 89635

The response size is 89635 bytes.

Question 3

Why is content-type an important response header?

Answer 3

It tells the browser what to do with the response.

content-type: image/png
// render this as an image

content-type: text/html; charset=utf-8
// render this as HTML

Question 4

What is the DOM?

Answer 4

Document Object Model, or DOM, is an Application Programming Interface (API) which enables programmatic modification of the element trees corresponding to web-pages.

Question 5

You send a POST request to the server and it responds with HTTP status code 302. What does this tell the browser to do?

Answer 5

Status code 302 is an URL redirect, with which the server asks the browser to do a new HTTP GET request to the address defined in the header’s Location.

Response Headers
Location: /notes

Question 6

How many HTML pages does a SPA (Single-page application) consist of?

Answer 6

SPA-style websites don’t fetch all of their pages separately from the server, but instead comprise only one HTML page fetched from the server, the contents of which are manipulated with JavaScript that executes in the browser.

Question 7

What is JSX compiled into?

Answer 7

JSX is compiled into JavaScript.

Question 8

Is it possible to write React as “pure JavaScript” without using JSX?

Answer 8

Yes, It is possible to write React as “pure JavaScript” without using JSX. Although, nobody with a sound mind would actually do so.

Question 9

A core philosophy of React is composing applications from many what ?

Answer 9

A core philosophy of React is composing applications from many specialized reusable components.

Question 10

Does using a React fragment render an element?

Answer 10

No it does render an element.

Question 11

What is the official name of the JavaScript standard?

Answer 11

The official name of the JavaScript standard is ECMAScript

Question 12

Browsers do not support all of JavaScript’s newest features, what is the solution to this? What is the most popular tool for doing this?

Answer 12

Code run in browsers has to be transpiled from a newer version of JavaScript to an older, more compatible version. Today, the most popular way to do the transpiling is by using Babel.

Question 13

How do you open the Node.js console and what can you do in it?

Answer 13

Use the command “node”
You can write JavaScript Code inside it.

Question 14

What is a cool way to exit the Node.js console?

Answer 14

type .exit

Question 15

In React code, it is preferable to use the array method concat to the push method, why?

Answer 15

concat returns a copy of the array with the new value added. concat does not mutate the original array.

Question 16

What is this an example of

const t = [1, 2, 3, 4, 5]
const [first, second, …rest] = t

what will first second and rest contain

Answer 16

Destructuring assignment

console.log(first, second) // 1, 2 is printed
console.log(rest) // [3, 4, 5] is printed

Question 17

What is an object literal?

Answer 17

An object literal is created by listing the objects properties within braces:

const object1 = {
name: ‘Arto Hellas’,
age: 35,
education: ‘PhD’,
}

Question 18

What can cause this output from a console.log()
“props value is [object Object]” and how would you avoid it?

Answer 18

using the concatenation operator
console.log(“props value is “ + props);

To avoid it log multiple arguments to console.log( )
console.log(“props value is “, props);

Question 19

What is a higher order function?

Answer 19

Functions that use other functions as arguments or return functions are named higher-order functions.

// uses a function that is passed as an argument
function iUseFunction(func) {
return func();
}

// Returns a function from a function
function iReturnFunction() {
return function() { return 42 };
}

Question 20

What are first order functions?

Answer 20

Functions that use only primitives or objects as arguments, and only return primitives or objects are named first-order functions.

Question 21

Can a function be a value and what does that even mean?

Answer 21

Yes a function can be a value (the value of a variable). This means you can store a function in a variable and do stuff with it like pass it as an argument to a higher order function.

const hiFunction = function() {
return ‘Hello!’
};

the value of hiFunction is:
function() {
return ‘Hello!’
};

Question 22

What should the function passed to Array.filter return?

Answer 22

It should return a value that coerces to true or false.
If true to keep the element, if false don’t.

Question 23

What should the function passed to Array.map return?

Answer 23

The new value for each element in the new Array.

Question 24

How can you format an object in a console.log to be easier to read?

Answer 24

JSON.stringify(myObject, null, 2)

2 is the amount of spacing.

Question 25

Why does React need the key property for JSX elements in an Array?

Answer 25

When React recurses on the children of a DOM node, it compares the current DOM nodes with the New DOM nodes and checks for changes. Providing a key allows React to efficiently tell what has changed. Especially when the order of items has changed.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

Question 26

What forms a stack of frames?

Answer 26

Function calls form a stack of frames.

Question 27

What is the Heap?

Answer 27

Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory.

Question 28

What is a Queue in a JavaScript runtime?

Answer 28

A JavaScript runtime uses a message queue, which is a list of messages to be processed. Each message has an associated function that gets called to handle the message.

Question 29

What is a Queue in a JavaScript runtime?

Answer 29

A JavaScript runtime uses a message queue, which is a list of messages to be processed. Each message has an associated function that gets called to handle the message.

Question 30

The event loop got its name because of how it’s usually implemented, which usually resembles what?

Answer 30

while (queue.waitForMessage()) {
queue.processNextMessage();
}

In this example it waits synchronously for queue.waitForMessage() until there is a message.

Question 31

What does the term “Run-to-completion” mean?

Answer 31

Each message is processed completely before any other message is processed.

This offers some nice properties when reasoning about your program, including the fact that whenever a function runs, it cannot be preempted and will run entirely before any other code runs (and can modify data the function manipulates).

Question 32

What is a downside to the “Run-to-completion” model?

Answer 32

A downside of this model is that if a message takes too long to complete, the web application is unable to process user interactions like click or scroll. The browser mitigates this with the “a script is taking too long to run” dialog. A good practice to follow is to make message processing short and if possible cut down one message into several messages.

Question 33

When are messages added to the message queue in a web browser?

Answer 33

In web browsers, messages are added anytime an event occurs and there is an event listener attached to it. So a click on an element with a click event handler will add a message — likewise with any other event.

Question 34

(() => {

console.log(‘this is the start’);

setTimeout(() => {
console.log(‘Callback 1: this is a msg from call back’);
}); // has a default time value of 0

console.log(‘this is just a message’);

setTimeout(() => {
console.log(‘Callback 2: this is a msg from call back’);
}, 0);

console.log(‘this is the end’);

})();

What would the output be for this code?

Answer 34

// “this is the start”
// “this is just a message”
// “this is the end”
// “Callback 1: this is a msg from call back”
// “Callback 2: this is a msg from call back”

Question 35

What does the term “never blocking” mean in regards to the event loop model?

Answer 35

A very interesting property of the event loop model is that JavaScript, unlike a lot of other languages, never blocks. Handling I/O is typically performed via events and callbacks, so when the application is waiting for an IndexedDB query to return or an XHR request to return, it can still process other things like user input.

Legacy exceptions exist like alert or synchronous XHR, but it is considered good practice to avoid them. Beware: exceptions to the exception do exist (but are usually implementation bugs, rather than anything else).

Question 36

What are I/O operations?

Answer 36

In computing, input/output (I/O, or informally io or IO) is the communication between an information processing system, such as a computer, and the outside world, possibly a human or another information processing system.
Inputs are the signals or data received by the system and outputs are the signals or data sent from it. The term can also be used as part of an action; to “perform I/O” is to perform an input or output operation.

Question 37

VM705:1 Uncaught Error: oops!
at myFunc (:1:28)
at myOtherFunc (:1:28)
at < anonymous >:1:1

If you see this in the console what does it mean?

Answer 37

It is showing that an error has been thrown and it is showing the callstack.

The error occurred in myFunc.
Which is a function called inside MyOtherFunc
MyOtherFunc was called inside an anonymous function.

Question 38

For the nth time what does npm stand for?

Answer 38

Node Package Manager

Question 39

Where should npm commands always be ran?

Answer 39

npm-commands should always be run in the project root directory where package.json lives.

Question 40

How would you install a json-server as a dev dependency?

Answer 40

npm install json-server –save-dev

Question 41

The documentation on MDN describes promises as what?

Answer 41

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

Question 42

How many states can a promise have and what are they?

Answer 42

3, pending, fulfilled and rejected.

Question 43

What does this highlight?
const hook = () => {
console.log(‘effect’)
axios
.get(‘http://localhost:3001/notes’)
.then(response => {
console.log(‘promise fulfilled’)
setNotes(response.data)
})
}

useEffect(hook, [])

Answer 43

That the function useEffect actually takes two parameters. The first is a function, the effect itself. The second is a dependency array.

Question 44

What is this type of import?
import http from ‘http’

Answer 44

An ES6 module import

Question 45

What is this type of import?
const http = require(‘http’)

Answer 45

A CommonJS module import.

Question 46

How different are CommonJS modules and ES6 modules?

Answer 46

CommonJS modules function almost exactly like ES6 modules.

Question 47

How do you update the dependencies of a project?

Answer 47

run the “npm update” command.

Question 48

What is node’s REPL and how do you access it?

Answer 48

Read-Eval-Print-Loop (REPL)
By typing the “node” command.

Question 49

What does nodemon do?

Answer 49

nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application.

Question 50

What does REST stand for and what is its purpose?

Answer 50

Representational State Transfer, aka REST, was introduced in 2000 in Roy Fielding’s dissertation. REST is an architectural style meant for building scalable web applications.

Question 51

What is the functionality of the following URL paths and verbs? First answer is given.

URL verb functionality
notes/10 GET fetches a single resource
notes GET
notes POST
notes/10 DELETE
notes/10 PUT
notes/10 PATCH

Answer 51

URL verb functionality
notes/10 GET fetches a single resource
notes GET fetches all resources in the collection
notes POST creates a new resource based on the request data
notes/10 DELETE removes the identified resource
notes/10 PUT replaces the entire identified resource with the request data
notes/10 PATCH replaces a part of the identified resource with the request data

Question 52

What is express built upon?

Answer 52

node and its built-in web server module
It is imported like this: const http = require(‘http’)

Question 53

How do you see the headers from a request to express?

Answer 53

The headers property on the request object.

request.headers