Module 3

Question 1

What is Array.prototype.filter useful for?

Answer 1

for finding values in an array

Question 2

What is Array.prototype.map useful for?

Answer 2

for applying a function to every value of an array

Question 3

What is Array.prototype.reduce useful for?

Answer 3

applying a function to and compile all values in an array into a single value

Question 4

What is “syntactic sugar”?

Answer 4

a way to increase code readability, but does not increase functionality

Question 5

What is the typeof an ES6 class?

Answer 5

function

Question 6

Describe ES6 class syntax.

Answer 6

class \_\_className\_\_ {
    constructor (\_\_para1\_\_, \_\_para2\_\_) {
 this.\_\_prop1\_\_ = \_\_\_\_;
this.\_\_prop2\_\_ = \_\_\_\_;
}
\_\_method1\_\_() {}
}

Question 7

What is “refactoring”?

Answer 7

refactoring is the reorganization of code to increase efficiency without changing the functionality

Question 8

What is Webpack?

Answer 8

a program that compiles JS files and uses immediately invoked function expressions (IIFE) to run the JS modules

Question 9

How do you add a devDependency to a package?

Answer 9

npm install –save-dev

Question 10

What is an NPM script?

Answer 10

a package of pre-written code that you can import and use in your code

Question 11

How do you execute Webpack with npm run?

Answer 11

use npm install –save-dev webpack

Question 12

How are ES Modules different from CommonJS modules?

Answer 12

they use ‘import’ and ‘export’ statements to reference other modules vs ‘require’ and ‘module.exports’ statements; standardized module import/export syntax for use with bundlers

Question 13

What kind of modules can Webpack support?

Answer 13

ECMAScript, CommonJS, AMD

Question 14

What is React?

Answer 14

a framework that allows components to update w/out reloading the page

Question 15

What is a React element?

Answer 15

an object that describes a component instance or DOM node and its desired properties; not an HTML element, just contains info about a component

Question 16

How do you mount a React element to the DOM?

Answer 16

ReactDOM.render()

Question 17

What is Babel?

Answer 17

a toolkit that converts source code into a backward compatible version

Question 18

What is a Plug-in?

Answer 18

a downloadable add-in that adds a feature to an existing piece of software

Question 19

What is a Webpack loader?

Answer 19

an add-in that pre-processes code as modules are compiled

Question 20

How can you make Babel and Webpack work together?

Answer 20

using the babel-loader

Question 21

What is JSX?

Answer 21

an html-like syntax that gets converted to react elements

Question 22

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

Answer 22

because JSX compiles calls into React.createElement()

Question 23

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

Answer 23

using the Babel plugin transform-react-jsx

Question 24

What is a React component?

Answer 24

JS functions that return React elements

Question 25

How do you define a function component in React?

Answer 25

like a normal JS function; use capital letter for funct name

Question 26

How do you mount a component to the DOM?

Answer 26

ReactDOM.render(element, htmlComponent)

Question 27

What are props in React?

Answer 27

obj that passes info to React components; a way to get outside info into component; key:value pair in JSX gets added to props

Question 28

How do you pass props to a component?

Answer 28

add it as an attribute (key:value pair) to the component call

Question 29

How do you write JavaScript expressions in JSX?

Answer 29

within {}

Question 30

How do you create “class” component in React?

Answer 30

by using "class \_\_className\_\_ extends React.Component{
render() {}
}"

Question 31

How do you access props in a class component?

Answer 31

this.props

Question 32

What is the purpose of state in React?

Answer 32

allows us to control what is displayed by updating based on changes to state

Question 33

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

Answer 33

as an attribute; < __JSX elm__ __eventHandler__ = __callback__ >

Question 34

What are controlled components?

Answer 34

whose value and route of submittal is controlled by this.state

Question 35

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

Answer 35

value={this.state.__value__} and onChange event handler

Question 36

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

Answer 36

–

Question 37

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

Answer 37

–

Question 38

What does express.static() return?

Answer 38

function

Question 39

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

Answer 39

the directory that the node module is running in; folder that the file __dirname is in

Question 40

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

Answer 40

concatenates path names

Question 41

What does fetch() return?

Answer 41

a Promise

Question 42

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

Answer 42

GET

Question 43

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

Answer 43

in the init obj; using ‘method’ prop

Question 44

When does React call a component’s componentDidMount method?

Answer 44

runs after the component mounts on the DOM; ONLY called after the first render

Question 45

Name three React.Component lifecycle methods.

Answer 45

componentDidMount, componentWillUnMount, componentDidUpdate

Question 46

How do you pass data to a child component?

Answer 46

props

Question 47

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

Answer 47

-

Question 48

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

Answer 48

-

Question 49

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

Answer 49

-

Question 50

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

Answer 50

–