JavaScript

Question 1

what is the purpose of a variable?

Answer 1

to store information to be referenced to

Question 2

How do you declare a variable?

Answer 2

variable keyword and variable name

Question 3

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

Answer 3

with an = sign (assignment operator) and a variable value after it

var nameOfVar = value (string, number, boolean data type)

Question 4

What characters are allowed in variable names?

Answer 4

letters, numbers, dollar sign, or underscore

but a number cannot be the first character

Question 5

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

Answer 5

when you call the variable name, you have to call it by its exact value or the computer won’t recognize it

Question 6

What is the purpose of a string?

Answer 6

to store a collection of characters (could be a letter, number, or a backslash)

Question 7

What is the purpose of a number?

Answer 7

to store numbers

Question 8

What is the purpose of a boolean?

Answer 8

to determine which code should run?

to store true/false value

Question 9

What does the = operator mean in JavaScript?

Answer 9

variable assignment

provide variable value to a variable

Question 10

How do you update the value of a variable?

Answer 10

call the variable name, assignment operator, and the new variable value

Question 11

What is the difference between null and undefined?

Answer 11

null is an assigned value– it means there is nothing in the variable

undefined means a variable has been declared but not defined with values yet

as a developer, you never want to assign a variable as undefined

Question 12

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

Answer 12

so you can tell which variables are being logged and in what order– this is especially helpful when you need to debug

Question 13

Give five examples of JavaScript primitives.

Answer 13

Number, String, Boolean, Null, Undefined

Question 14

What data type is returned by an arithmetic operation?

Answer 14

number

Question 15

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

Answer 15

to concatenate strings or add numbers

Question 16

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

Answer 16

boolean

Question 17

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

Answer 17

adds/concatnates value from the right to the left variable

the current value of that variable, bring in some value, add that on to the current value, and the result of that is the new value

Question 18

What is string concatenation?

Answer 18

the process of joining multiple strings together

Question 19

What are objects used for?

Answer 19

used to group together a set of variables and functions to create a model

Question 20

What are object properties?

Answer 20

a variable– properties tell us about the object

Question 21

Describe object literal notation.

Answer 21

its an array of key-value pairs with a colon separating the keys and values and a comma after every key-value pair (except for the last)

Question 22

How do you remove a property from an object?

Answer 22

you use the delete keyword followed by the object name and the property name

Question 23

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

Answer 23

dot notation or bracket notation

Question 24

What are object methods?

Answer 24

a function– methods represent tasks that are associated with the object

Question 25

What are arrays used for?

Answer 25

arrays are used to store a list of values that are related to each other

Question 26

Describe array literal notation.

Answer 26

values are assigned to the array inside a pair of square brackets and each value is separated by a comma

Question 27

How are arrays different from “plain” objects?

Answer 27

like objects, arrays hold a key value pairs, but with arrays, the key for each value is its index number

array is a list of items and objects are collections of individual items?

objects are a collection of data with individual name of properties with no set order and arrays are in a set order and are a list of items arrays hold data that are similar

Question 28

What number represents the first index of an array?

Answer 28

0

Question 29

What is the length property of an array?

Answer 29

the amount of items in the array

Question 30

How do you calculate the last index of an array?

Answer 30

array length minus 1

Question 31

What is a function in JavaScript?

Answer 31

it’s essentially a block of code or statement you write that performs a task or calculates a value and it can be used multiple times

Question 32

Describe the parts of a function definition.

Answer 32

• function keyword
• function name
• parentheses with parameters inside
• curly braces
• inside curly braces, you have the function code block

Question 33

Describe the parts of a function call.

Answer 33

• name of the function
• open and close parentheses
• inside the parentheses, you have arguments

Question 34

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

Answer 34

a function definition is a lot longer than a function call with all the tasks it needs to perform, however, a function definition alone is not going to perform any action unless the function call calls the function

Question 35

What is the difference between a parameter and an argument?

Answer 35

parameter is essentially a placeholder for when we call the function and pass in an argument

Question 36

Why are function parameters useful?

Answer 36

parameters allow us to pass instructions into a function

Question 37

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

Answer 37

1) causes the function to produce a value we can use

2) prevents any more code in the function code block from being run

Question 38

Why do we log things to the console?

Answer 38

it informs what the code is doing and alerts you if there’s an issue– so logging things to the console is great for debugging or when you don’t understand code block

to see what the code we’re writing is doing

Question 39

What is a method?

Answer 39

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

a function stored in a property of an object

Question 40

How is a method different from any other function?

Answer 40

a method is attached to an object

in order to call a method, you have to attach the function name to their object using dot notation, and to call a regular function, you use its name

Question 41

How do you remove the last element from an array?

Answer 41

pop() method

Question 42

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

Answer 42

floor() method

Question 43

How do you generate a random number?

Answer 43

Math.random() (from 0 - .9999)

what’s the purpose?
treat it as a percentage, that will get multiplied with your range value
random acts as a decimal

Question 44

How do you delete an element from an array?

Answer 44

splice() method

arguments: (index, how many elements to remove)

Question 45

How do you append an element to an array?

Answer 45

push()

Question 46

How do you break a string up into an array?

Answer 46

split()

Question 47

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

Answer 47

string methods do not change your original string

you can check by logging your value to the console

strings are immutable, you cannot change the original string

Question 48

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

Answer 48

a lot

Question 49

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

Answer 49

no

like the push method, you dont need to know the length of it

Question 50

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

Answer 50

a lot

Question 51

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

Answer 51

MDN, official docs, it has all the documents you need

Question 52

Give 6 examples of comparison operators.

Answer 52

less than, greater than, less than or equal to, greater than or equal to, strictly equal, strictly not equal

Question 53

What is the purpose of an if statement?

Answer 53

to test conditions, if the condition is true, the subsequent code statement runs

to make decicions

Question 54

Is else required in order to use an if statement?

Answer 54

no

only use else if you need to

Question 55

Describe the syntax (structure) of an if statement.

Answer 55

if keyword 
open and close parenthesis
a condition inside the parentheses
open and curly braces
code to be executed inside the curly braces if condition is true

Question 56

What are the three logical operators?

Answer 56

logical and operator
logical or operator
logical not operator

Question 57

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

Answer 57

expression one on one side expression two on the other side and a logical operator in between follow by another pair of parenthesis to wrap the two expressions

by using logical operaters

Question 58

What data type do comparison expressions evaluate to?

Answer 58

boolean

Question 59

What is the purpose of a loop?

Answer 59

to repeat similar code a number of times

to repeat code and when to stop repreating code

Question 60

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

Answer 60

it lets the loop statement know whether it should be executed

we can think of condition as a break, if its truthy we continue if its falsy we stop

Question 61

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

Answer 61

repeat?

Question 62

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

Answer 62

first

Question 63

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

Answer 63

first, before anything, and only once

Question 64

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

Answer 64

second, your condition run betore each iteration

Question 65

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

Answer 65

last, after the code block has ran? it is run after the code block

Question 66

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

Answer 66

break

Question 67

What does the ++ increment operator do?

Answer 67

adds one to its operand, increments the variable by one

Question 68

How do you iterate through the keys of an object?

Answer 68

for in loop

Question 69

Why do we log things to the console?

Answer 69

to see what the code is doing and to understand what is going on

Question 70

What is a “model”?

Answer 70

a set of rules that define what type of content each element is allowed to have??

a dom tree?

a representation of something else

Question 71

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

Answer 71

HTML

Question 72

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

Answer 72

object is referring to the data type?

Question 73

What is a DOM Tree?

Answer 73

the dom tree is an element plus all of its containing elements including the child elements, etc

the dom tree is an element holding all other elements

a DOM tree is a tree of elements with the document node at the top (root) which points to the element node which in turn points to its child element nodes (head and body) and so on

from each of those elements, you can navigate the DOM structure and more to different nodes

Question 74

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

Answer 74

querySelector() and getElementById()

Question 75

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

Answer 75

querySelectorAll()

Question 76

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

Answer 76

to make it easier to access the value later on

Question 77

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

Answer 77

console.dir() – displays an interactive list of the properties of the specified JavaScript object

the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects

use it when you want to see the data of the dom elements?

Question 78

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

Answer 78

it gives the HTML time to load before any of the JS 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

takes in a selector that describes the element your querying for and returns the HTML element object representing the first element of the specified selectors

Question 80

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

Answer 80

takes in a selector and return a node list (an object of a collection of nodes) of the document’s elements that match the specified group of selectors

Question 81

Why do we log things to the console?

Answer 81

to see what the code is doing

Question 82

What is the purpose of events and event handling?

Answer 82

events and event handling trigger the code when specific events occur from the user (such as when the user clicks on a button)

without events and event handle, your website is static (not changing)

Question 83

What do [] square brackets mean in function and method syntax documentation?

Answer 83

it means that that piece is OPTIONAL

Question 84

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

Answer 84

addEventListener()

Question 85

What is a callback function?

Answer 85

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

event object (such as event.target, event.pageX, event.pageY..)

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

you can check on MDN for answer

it returns the node/element that was targeted by the function

get the element that triggered a specific event

the target event property returns the element that triggered the event

the html element that triggered the event

Question 88

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

Answer 88

the parentheses are omitted where the function is called because they would indicate that the function should run as the page loads (rather than when the event fires)

the first code– handleClick function will run when ‘click’ occur vs the second code–handleClick() will run right away

Question 89

What is the className property of element objects?

Answer 89

a string value that contain a list of all the classes that applied to that element

Question 90

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

Answer 90

assignment operator?

you’d need the dom element of that class?

when you are updating a className, you are updating the className attribute?

Question 91

What is the className property of the element objects?

Answer 91

it gets and sets the value of the class attribute of the specified element

Question 92

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

Answer 92

no, not always usefull

Question 93

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

Answer 93

no, not always useful

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 complicated, we’d have to dgo back to the dom to retrieve the counter number and reassignn it to the textContent

Question 95

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

Answer 95

focus event

Question 96

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

Answer 96

blur event

Question 97

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

Answer 97

input event

change event is similar, but stick to input event for now

Question 98

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

Answer 98

submit event

Question 99

What does the event.preventDefault() method do?

Answer 99

tells the browser that if the event does not get explicitly handled, its default action should not be taken as it normally would be

prevent default method allows you to prevent the default behavior from occurring on an event

ex: when a link (anchor tag) is involved, the behavior default is to navigate to that new URL, but using the method, we’re able to stop the browser from redirecting the page

Question 100

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

Answer 100

the browser would reload the page and submit the data for you and refreshes the page (this is if the form does not have an action attribute (as if action=”insert-link”), it’ll just reload the page)

(with the method, if there’s an action attribute within our form element, it will prevent the browser to send the data over to that link)

Question 101

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

Answer 101

elements property

HTMLFormElement.elements returns an HTMLFormControlsCollection listing all the form controls contained in the form element

you can obtain just the number of form controls using the length property

you can access a particular form control in the returned collection by using either an index or the element’s name or id
(you should just use the name attribute!!)

Question 102

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

Answer 102

value property

Question 103

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

Answer 103

it’ll be hard to find your error(s) throughout the code

Question 104

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

Answer 104

the console will let you know if there’s an error

Question 105

What does HTMLFormElement.reset() method do?

Answer 105

this method restores a form element’s default values

it does the same thing as clicking the form’s reset button

Question 106

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

Answer 106

this is due to event bubbling– when you hover over a link, for example, javascript can trigger events on the a (anchor tag) element and also any elements the a (anchor tag) element sits inside

Question 107

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

Answer 107

event.target.tagName or event.target.nodeName

Question 108

How can you remove an element from the DOM?

Answer 108

using the remove() method

syntax: node.remove()

Question 110

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

Answer 110

takes a selector as an argument and returns itself or the cloest matching ancestor

this 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

Question 110

What is the event.target?

Answer 110

it returns the node/element that was targeted by the function

MDN: target property of the Event interface is a reference to the object onto which the event was dispatched

MDN: Event interface represents an event which takes place in the DOM. An event can be triggered by te user’s action e.g. clicking the mouse button

Question 111

What is the affect of setting an element to display: none?

Answer 111

it turns off the display of an element so that it has no effect on the layout as if the element did not exist

Question 112

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

Answer 112

it takes a selector string and returns a boolean

Question 113

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 113

you add the event listener to its parent element

so using event delegation

Question 114

What is the event.target?

Answer 114

traget property of the event object holds the dom element that the user interact with to trigger that element
element that interacted with (most directly) that trigger that event
it doesn’t matter where you put the event.target you put on, event target will only trigger the element that get interacted with

Question 115

What is the affect of setting an element to display: none?

Answer 115

display: none, position: absolute and fixed – the document act like these dont exist except for display nis being removed from the documne tlfow

Question 116

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

Answer 116

takes a selector and returns a boolean

Question 117

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

Answer 117

getAttribute() method

Question 118

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

Answer 118

afterafter every step

Question 119

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 119

you would have add an event listener to every tab

Question 120

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 120

you would have to write an if statement for each tab

Question 121

What is JSON?

Answer 121

a text-based data format following on JS object syntax

it’s useful when you want to transmit data across a network

Question 122

What are serialization and deserialization?

Answer 122

serialization is the process of turning an object in memory into a stream of bytes (turning object, array, value to json string?)

vs

deserialization is the reverse of serialization by turning a stream of bytes into an object in memory (turning json string back into object, value?)

Question 123

Why are serialization and deserialization useful?

Answer 123

serialization is useful for sending data over the network

deserialization is useful for recreating/retrieving the object in the same state as when you serialized it

people often serialize objects in order to save them to storage, or to send as part of communications. Deserialization is the reverse of that process, taking data structured from some format, and rebuilding it into an object

today, the most popular data format for serializing data is JSON.

Question 124

How do you serialize a data structure into a JSON string using JavaScript?

Answer 124

JSON.stringify()

Question 125

How do you deserialize a JSON string into a data structure using JavaScript?

Answer 125

JSON.parse()

Question 126

How do you store data in the localStorage property?

Answer 126

setItem() method

localStorage.setItem()

Question 127

How do you retrieve data from the localStorage property?

Answer 127

getItem() method

localStore.getItem()

Question 128

What data type can localStorage save in the browser?

Answer 128

string

Question 129

When does the ‘beforeunload’ event fire on the window object?

Answer 129

when the window, the document and its resources are about to be unloaded

refreshing your page, closing browser, navigating to another link would trigger beforeunload

Question 130

What is a method?

Answer 130

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

2 kinds of methods:

1) Instance Methods – built in tasks performed by an object instance
2) Static Methods – tasks that are called directly on an object constructor

Question 131

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

Answer 131

a method definition is an function that is being defined in an object with the function code block vs a method call is an object function that is being called with ()

Question 132

Describe method definition syntax (structure).

Answer 132

property name describing the following function follow by a colon then the function keyword with open and close parentheses (), with optional parameters inside of the (), follow by an open curly brace, and the function code block, then a closing curly brace

Question 133

Describe method call syntax (structure).

Answer 133

object name follow by the object’s property and a ()

Question 134

How is a method different from any other function?

Answer 134

a method has to be declared inside of an object

methods are just normal function

a function in a property

method can referenced the object they’re inside of

Question 135

What is the defining characteristic of Object-Oriented Programming?

Answer 135

OOP can contain both data (properties) and behaviors (methods)

instead of having to pass each data that you would need as arguments, you would have all of this data inside the function and the function can access all of these data (where you behaviors is stored)

Question 136

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

Answer 136

abstraction, encapsulation, inheritance, polymorphism

Question 137

What is “abstraction”?

Answer 137

according to MDN, abstraction is a way to reduce complexity and allow efficient design and implementation in complex software systems

it hides the technical complexity of systems behind simpler APIs

Question 138

What does API stand for?

Answer 138

Application Programming Interface

allows programs to interact with each other in an abstract way

Question 139

What is the purpose of an API?

Answer 139

give programmers a way to interact with a system in a simplified, consistent fashion (which is abstraction)

Question 140

What is “this” in JavaScript?

Answer 140

“this” is an implicit parameter of all JS functions

by default, “this” will be the global “window” object

syntax: the value of “this” can be recognized as “the object to the left of the dot” when the function is called (as a method)

the value of “this” is determined at call time

Question 141

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

Answer 141

it means that it is available in a function’s code block even though it was never included in the function’s parameter list or declared as a variable

implicit parameter is a value within each function without having to declare it yourself

Question 142

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

Answer 142

the value of “this” is determined at call time

Question 143

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

Answer 143

you can’t

Question 144

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

Answer 144

the value of this can be recognized as “the object to the left of the dot” when the function is called (as a method)

Question 145

What kind of inheritance does the JavaScript programming language use?

Answer 145

prototype-based inheritance

Question 146

What is a prototype in JavaScript?

Answer 146

a JS prototype is simply an object that contains properties and methods that can be used by other objects

Question 147

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 147

we use the method that are defined on the prototype object

it’s the __proto__ property attached to each object (object, array..) and the proto property has a list of methods

if it doesn’t find the method, it returns an error

Question 148

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

Answer 148

look at its prototype

Question 149

What does the new operator do?

Answer 149

let us create a version/ an instance to use of one type of thing

IMPT: your constuctor function should never return a statement, “This” is already returned implicitly because we used a new operator

Question 150

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

Answer 150

prototype property

prototype property should only be used on constructor functions

Question 151

What does the instanceof operator do?

Answer 151

it will check if the object on the right of the operator is a prototype of the object on the left of the operator

Question 152

What is a “callback” function?

Answer 152

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

ex:
function greeting(name) {
alert(‘Hello ‘ + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

this is an example of a synchronous callback, as it is executed immediately.

Question 153

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 153

by using setTimeOut function

it allows us to call another function and a time determined by us

Question 154

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

Answer 154

setInternal function

Question 155

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

Answer 155

0s

Question 156

What do setTimeout() and setInterval() return?

Answer 156

a timer id

they both pull from the same timer id (so they wont overlap?)

Question 157

What is AJAX?

Answer 157

(USE DEFINITION IN BOOK)

a technique for loading data into part of a page without having to refresh the entire page

allows you to request data from a server and load it without having to refresh the entire page

the data is often sent in JSON format

Question 158

What does the AJAX acronym stand for?

Answer 158

Asynchronous JavaScript And XML

Question 159

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

Answer 159

XMLHttpRequest object

Question 160

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

Answer 160

load event?

Question 161

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

Answer 161

because XMLHttpRequest is an object, therefore, it has access to the AddEventListener() method?

due to inheritance, they both have EventTarget.prototype in their prototype chains

Question 162

Why do we use the XMLHttpRequest object?

Answer 162

we use this it to issue http requests in order to exchange data between the web site and a server

Question 163

What is Array.prototype.filter useful for?

Answer 163

useful for filtering out the values you don’t want in an array and store it in a new array

Question 164

What is Array.prototype.map useful for?

Answer 164

useful for looping over every element in an array and returning a new array

Question 165

What is Array.prototype.reduce useful for?

Answer 165

when you want an accumulation of/combined an array resulting in a single output value (and the return doesn’t have to be an array)

to take a list of things and collapse it down

Question 166

What is “syntactic sugar”?

Answer 166

syntax that is designed to make things easier to read and write

Question 167

What is the typeof an ES6 class?

Answer 167

function

Question 168

Describe ES6 class syntax.

Answer 168

• class keyword
• name of class in with the first letter being capitalized
• a pair of curly braces (this is call the body of the class)
• within it, a constructor function
• some methods definition
  (constructor function is where you can initialize the properties of an instance)

Question 169

What is “refactoring”?

Answer 169

the process of restructuring computer code without changing or adding to its external behavior and functionality

key thing: behavior of the system doesn’t change

Question 170

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

Answer 170

when it is defined

Question 171

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

Answer 171

closures

Question 172

✧ what is a closure?

Answer 172

combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)

closure gives you access to an outer function’s scope from an inner function

in js, closures are created every time a function is created, at function creation time