JavaScript Flashcards

1
Q

What is the purpose of variables?

A

Lets us store values and be reusable

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

How do you declare a variable?

A

Use keyword var

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

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

A

Use variable name and assignment operator

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

What characters are allowed in variable names?

A

Letters, numbers, underscore, dollar sign (cant start with number)

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

What does it mean to say that variable names are ‘case sensitive’?

A

Two variable names that are the same letters but with different capitalization

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

What is the purpose of a string?

A

Stores text values

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

What is the purpose of a number?

A

Stores numeric values

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

What is the purpose of a boolean?

A

Stores TRUE or FALSE. Allows for logic and decisions

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

What does the = operator mean in JavaScript?

A

The assignment operator

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

How do you update the value of a variable?

A

Assign it to a value again, no keyword at the start

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

What is the difference between null and undefined?

A

Null is intentionally absent of a value, also an object

Undefined is lack of value since nothing has been done there

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

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

A

Helps with debugging and context in what we will see in the console

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

Give 5 examples of JavaScript primitives.

A
  • String
  • Boolean
  • Number
  • Undefined
  • Null
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What data type is returned by an arithmetic operation?

A

Number

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

What is string concatenation?

A

Using a + to add two or more strings together

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

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

A

It can either add numbers together or concatenate strings into one string

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

What data type is returned by comparing 2 values ( <, >, ===, etc.)?

A

Boolean

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

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

A

It concatenates the strings and returns the expression as a string

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

What are objects used for?

A

Objects group together related variables and functions into a single object

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

What are object properties?

A

Properties are like variables that are part of an object. They store values like numbers, strings, booleans, arrays, and objects

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

Describe object literal notation.

A

A way to create an object

Start with curly braces, then property/method that is paired with a value/function. Use commas to separate those key/value pairs

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

How do you remove a property from an object?

A

Use the delete operator

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

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

A

Dot notation or bracket notation

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

What are arrays used for?

A

Stores list-like info

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

Describe array literal notation.

A

Square brackets with values inside being delineated by commas

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

How are arrays different from “plain” objects?

A
  • The keys are incrementing numbers (indexes)
  • Objects can do dot notation
  • Objects don’t have order
  • Empty arrays have a method built-in already, “length”
  • Adding to objects is different from adding to arrays
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What number represents the first index of an array?

A

0

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

What is the length property of an array?

A

The number of items in the array

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

How do you calculate the last index of an array?

A

array.length - 1

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

What is a function in JavaScript?

A

Procedures. It packages code up into a reusable form.

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

Describe the parts of a function definition.

A

Function -name of function0 (parameter 1, 2, etc.) {
code block;
optional return value;
}

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

Describe the parts of a function call.

A

Name(argument 1, 2,…)

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

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

A

Calls do not have the keyword function

Definitions have a code block

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

What is the difference between a parameter and an argument?

A

Parameters are part of the function definition

Arguments are the actual values that get passed in

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

Why are function parameters useful?

A

They make the code within the function reusable for multiple variables

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

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

A

Finds output value of function

Exits the function

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

Why do we log things to the console?

A

Helps with debugging and see what are code is doing and working

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

What is a method?

A

A function with is a property of an object

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

How do you remove the last element of an array?

A

Pop method

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

How is a method different from any other function?

A

They are specific to the object that they belong to and must be called with reference to its object.

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

How do you remove the last element from an array?

A

pop method

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

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

A

Math.floor method

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

How do you generate a random number?

A

Math.random() generates a pseudo-random number between 0 and 1

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

How do you delete an element from an array?

A

Splice method uses 2 arguments (startIndex, numOfItemsToRemove)

Pop method removes from the end

Shift method deletes from the beginning

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

How do you append an element to an array?

A

Push method adds to the end

Splice method adds to a specific location

Unshift method adds to the beginning

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

How do you break a string up into an array?

A

Split method

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

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

A

No. We can check by using some string methods on a string and log the value of the string to see if it had undergone any transformations

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

Give 6 examples of comparison operators.

A
  • ===
  • !==
  • >
  • > =
  • <
  • <=
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

What data type do comparison expressions evaluate to?

A

Boolean

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

What is the purpose of an if statement?

A

Allows our programs to make decisions

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

Is else required in order to use an if statement?

A

No

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

Describe the syntax (structure) of an if statement.

A

if (expression that evaluates to boolean) { code block } else { code block }

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

What are the 3 logical operators?

A
  • && (logical and)
  • || (logical or)
  • ! (logical not)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

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

A

Wrap each expression in parentheses, then use a comparison operator between them to have the entire expression evaluate down to a single boolean

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

What is the purpose of a loop?

A

Do a block of code repeated number of times

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

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

A

To check if another loop should be executed

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

What does iteration mean in the context of loops?

A

One execution of the code block

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

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

A

At the beginning of each iteration, including the first

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

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

A

At the beginning of the loop (just once)

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

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

A

At the beginning of each iteration, including the first

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

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

A

At the end of each iteration

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

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

A

Break

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

What does the ++ increment operator do?

A

Increments the value by 1 and returns the current value

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

How do you iterate through the keys of an object?

A

Use a for..in loop

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

What is a ‘model’?

A

Something that represents something

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

Which ‘document’ is being referred to in the phrase Document Object Model?

A

The web page as a whole

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

What is the word ‘object’ referring to in the phrase Document Object Model?

A

The objects of the document, more specifically, the nodes

68
Q

What is a DOM tree?

A

The representation of the HTML document using 4 node types (document, element, attribute, text)

69
Q

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

A
  • document.querySelector()

- document.getElementById()

70
Q

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

A
  • document.querySelectorAll()
71
Q

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

A

So we can work with that return value multiple times without having to re-query the tree each time

72
Q

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

A

console.dir()

73
Q

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

A

The HTML reads from top to bottom, so the script tag should be at the bottom so the HTML elements are read first

74
Q

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

A

It takes a CSS selector as a string and returns the first element node that matches the CSS selector

75
Q

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

A

IT takes a CSS selector as a string and returns a NodeList, an array-like object of the mating elements of the document

76
Q

What is the purpose of events and event handling?

A

Events and event handling allow us to run code when users interact with the web page

77
Q

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

A

No, some are optional

78
Q

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

A

.addEventListener()

79
Q

What is a callback function?

A

A function called as an argument by another function

80
Q

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

A

An event object, based on what was set in the event listener (an object with all the data about the event that just occurred)

81
Q

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

A

event.target is the DOM element that is the start point of the event

To check, we would check the console log

To get more info, check MDN

82
Q

What is the difference between these two snippets of code?

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

The first code snippet will call ‘handleClick(event)’ when the targeted element is clicked

The second code snippet will call the return value of calling the function ‘handleClick()’ which could be another function

83
Q

What is the className property of element objects?

A

It lets us retrieve a value or set a value

84
Q

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

A

Specify the element to change using ‘querySelector()’ or something similar, then set up the ‘className’ property on the returned element object of that method

85
Q

What is the textContent property of element objects?

A

The ‘textContent’ property is a property of a node, and it holds the concatenation of the text content

86
Q

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

A

Specify the element with ‘querySelector’ or similar, then set the ‘textContent’ property on the returned element

87
Q

Is the parameter of an event listener callback always useful?

A

No, but it should still always be on the function even if it isn’t used. We only need it if we are not sure what element was interacted with and what element to change

88
Q

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

A

It would be simpler to not have an additional variable to account for, but then we would have to extract the number from the text content of the HTML

89
Q

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

A

It is much easier to modify and use the variable in JavaScript rather than querying for it in the DOM

90
Q

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

A

‘Focus’ event

91
Q

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

A

‘Blur’ event

92
Q

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

A

‘Input’ event

93
Q

What event is fired when a user clicks the ‘submit’ button within a form?

A

‘Submit’ event

94
Q

What does the event.preventDefault() method do?

A

It cancels the default behavior

It prevents the event from triggering its default behavior.

95
Q

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

A

It would reload the page, as long there is no action or method attribute. The form would also be submitted into the server.

96
Q

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

A

Elements

97
Q

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

A

Value

98
Q

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

A

You can be going down the wrong path. Somewhere in your many lines of code could be a bug and without checking, you don’t known where to look to fix it

99
Q

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

A

You can be checking if your code is running as intended and fix it immediately once an error message shows up

100
Q

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

A

No, it simply returns a new element node to the JavaScript environment

101
Q

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

A

parentElement.appendChild(childElement);

102
Q

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

A

The name of the attribute and the value

103
Q

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

A
  • querySelect for the parent element
  • create the element using document.createElement()
  • modify the new element by using (element.textContent), (element.setAttribute), etc.
  • query the document for the parent element of this new element
  • appendChild the new element to the parent element
104
Q

What is the textContent property of an element object for?

A

Gets and sets text content of an element and its children via the DOM

105
Q

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

A
  • element.setAttribute() method

- element.className = ‘new-class’

106
Q

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

A
  • create consistently structured things with different data repeatedly and concisely
  • can tie the function that creates things to event listeners
107
Q

What is the event.target?

in DOM Event Delegation

A

The element that was interacted with to trigger the event to fire

108
Q

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

A

The concept of bubbling where clicking on a descendent element is technically clicking on parent elements

109
Q

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

A

element.tagName property

110
Q

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

A

It takes a string containing a CSS selector and returns the first element that matches the CSS selector, starting from the element it is called upon itself and moving up its ancestors

111
Q

How can you remove an element from the DOM?

A

element.remove()

112
Q

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

A

Add the event listener to the parent element upon which you are calling

113
Q

What is the event.target?

in JavaScript View Swapping

A

The element that was used in triggering the event

114
Q

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

A

The element and its child elements are no longer displayed and has no effect on the layout

115
Q

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

A

It takes for an argument a CSS selector as a string and it returns a boolean value based on if it would have been found using that CSS selector

116
Q

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

A

getAttribute method

117
Q

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

A

At all steps, but specifically the steps where you are unsure how your objects, variables work

118
Q

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?

A

Each tab would need an event listener, and and any additional tabs would need additional event listeners

119
Q

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?

A

Each of the views would be queried individually and when a click event happens there would be an ‘if statement’ foe each one. If the view is the one to be made visible, make it visible. If not, make it invisible.

120
Q

What is JSON?

A

JavaScript Object Notation. It is away to store data in a string and can easily send info between servers

121
Q

What are serialization and deserialization?

A

Serialization- put it in a series format, encode it to be read in serial ( a series of bytes)

Deserialization- take that stream of bytes and reconstruct (parse) it back into an object

122
Q

Why are serialization and deserialization useful?

A

We can convert complex data types and break them down into bytes so it can be processed by the network

123
Q

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

A

JSON.stringify method

124
Q

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

A

JSON.parse method

125
Q

How do you store data in localStorage?

A

setItem method

126
Q

How do you retrieve data from localStorage?

A

localStorage.getItem(‘key’)

127
Q

What data type can localStorage save in the browser?

A

Only string types (specifically JSON strings)

128
Q

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

A

Before the window, document, and its resources are about to be unloaded onto the page

129
Q

What is a method?

A

A function which is a property of an object

130
Q

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

A

Method definitions- function definitions but happen in the definition of an object property

Method calls- object with a function call attached. ex- object.methodCall()

131
Q

Describe method definition syntax (structure).

A
var object = {
methodName: function (x) {
-insert code here- }
}
132
Q

Describe method call syntax (structure).

A

object.methodName(x);

133
Q

How is a method different from any other function?

A

It must be called with an object

134
Q

What is the defining characteristic of Object-Oriented Programming?

A

OOP uses objects to store the state of the program and holds the functions that will be used. Objects are the primary interface.

Objects contain both data (as properties) and behaviors (as methods)

135
Q

What are the 4 principles of Object-Oriented Programming?

A
  • Abstraction
  • Encapsulation
  • Inheritance
  • Polymorphism
136
Q

What is abstraction?

A

A simplified interface to something complex

137
Q

What does API stand for?

A

Application Programming Interface

138
Q

What is the purpose of an API?

A

Allows for a standard way to for 2 or more computer programs to communicate with each other.

139
Q

What is “this” in JavaScript?

A

An implicit parameter, determined at the call time, which refers to the object (which is attached to the left of the . )

140
Q

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

A

It is always an available parameter to the function

141
Q

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

A

Call time. “this” can refer to new objects depending on when its called

142
Q

What does “this” refer to in this code snippet?

var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
A

We dont know.

143
Q

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

character.greet();

A

“It’s-a-me, Mario!”

144
Q

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

var hello = character.greet;
hello();
A

“It’s-a-me, undefined!”

145
Q

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

A

We don’t know.

146
Q

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

A

Look for an object (something to the left of the . )

Otherwise, it will refer to window

147
Q

What kind of inheritance does the JavaScript programming language use?

A

Prototypical inheritance

148
Q

What is a prototype in JavaScript?

A

It is an object that certain objects delegate to when they aren’t able to perform the required tasks themselves

149
Q

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

A

They are prototyped onto it.

150
Q

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

A

Looks at the prototype chain.

151
Q

What does the “new” operator do?

A
  • Creates a blank JavaScript object
  • Points object we made to the prototype property of the constructor function
  • Takes those values passed in as arguments and binds to those individual objects
  • returns the object back, which is how we assign it to a variable
152
Q

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

A

Prototype property

153
Q

What does the “instanceof” operator do?

A

Checks if the object on the left of it has the prototype on the right of it in the left’s prototype chain (returns boolean)

154
Q

What is a “callback” function?

A

A function that is passed as an argument to an outside function and gets executed by that outside function

155
Q

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?

A

Adding a timeout function

156
Q

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

A

Add a setInterval function, which runs repeatedly until the interval is cleared

157
Q

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

A

0 milliseconds

158
Q

What do setTimeout() and setInterval() return?

A

An interval Id that is tied to the timeout or interval and can be used to clear the interval with

159
Q

What is AJAX?

A

It seeks out new info and gets it without reloading the web page

160
Q

What does the AJAX acronym stand for?

A

Asynchronous JavaScript and Xml

161
Q

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

A

Html/Http request object

162
Q

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

A

Load

163
Q

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

A

Prototypical inheritance

164
Q

What is the JavaScript Event Loop?

A

The event loop manages what gets run in the single-threaded JavaScript environment. It checks if the call stack is empty and if the callback queue has something in it. If so, it moves the next item from the callback queue into the call stack.

165
Q

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

A

Blocking is code that is executing in the call stack. On the other hand, non-blocking puts an event to “do something later” in the appropriate web API. Once that “later” comes, the “something” gets put into the callback queue to await the event loop, which will move it to the call stack when empty.