JavaScript Flashcards
1
Q
[JS Primitives and Variables]
What is the purpose of variables?
A
store temporary bits of information such as strings or numbers for future use
2
Q
[JS Primitives and Variables]
How do youdeclarea variable?
A
keywords let, const, var and variable name
3
Q
[JS Primitives and Variables]
How do you initialize (assign a value to) a variable?
A
using the equals operator ( = )
4
Q
[JS Primitives and Variables]
What characters are allowed in variable names?
A
alphabet letters, numbers, dollar sign ($) and underscore (_)
numbers cannot be used as the first character
5
Q
[JS Primitives and Variables]
What does it mean to say that variable names are “case sensitive”?
A
variable names have to be exactly the same, even capitalized letters
6
Q
[JS Primitives and Variables]
What is the purpose of a string?
A
storing text which JS cannot read
7
Q
[JS Primitives and Variables]
What is the purpose of a number?
A
for tasks involving counting or operations
8
Q
[JS Primitives and Variables]
What is the purpose of a boolean?
A
for making decisions / choice (yes or no)
9
Q
[JS Primitives and Variables]
What does the=operator mean in JavaScript?
A
assignment operator
10
Q
[JS Primitives and Variables]
How do you update the value of a variable?
A
variableName = newValue;
11
Q
[JS Primitives and Variables]
What is the difference betweennullandundefined?
A
null is a value that intentionally is nonexistent or invalid
undefined are variables that were not defined
12
Q
[JS Primitives and Variables]
Why is it a good habit to include “labels” when you log values to the browser console?
A
to know what is being logged and when the log was called
13
Q
[JS Primitives and Variables]
Give five examples of JavaScript primitives.
A
string, number, boolean, null, undefined
14
Q
[JS Operators and Expressions]
What data type is returned by an arithmetic operation?
A
number
15
Q
[JS Operators and Expressions]
What is string concatenation?
A
Adding two strings together
16
Q
[JS Operators and Expressions] What purpose(s) does the + plus operator serve in JavaScript?
A
addition & concatenation
17
Q
[JS Operators and Expressions]
What data type is returned by comparing two values (< , >, ===, etc)?
A
true or false (boolean)
18
Q
[JS Operators and Expressions]
What does the += “plus-equals” operator do?
A
it adds to the original value and assigns the sum as the value
19
Q
What value is given when trying to multiple, divide or subtract two strings?
A
NaN (not a number)
20
Q
[JS Objects]
What are objects used for?
A
for storing variables and functions (that have similarities)
21
Q
[CSS Objects]
What are object properties?
A
bits of information as variables about an object
22
Q
[CSS Objects]
Describe object literal notation.
A
var obj = {
property: value,
property: value
}
23
Q
[CSS Objects]
How do you remove a property from an object?
A
delete object.property
delete object[‘property’]
24
Q
[CSS Objects]
What are the two ways to get or update the value of a property?
A
dot notation or bracket notation
25
[JS Arrays]
| What are arrays used for?
Storing a list or set of variables related to each other.
26
[JS Arrays]
| Describe array literal notation.
var arrayName = [value1, value2, value3, etc.];
27
[JS Arrays]
| How are arrays different from "plain" objects?
objects- have individually named properties and value pairs
arrays- have index number and values
objects don't have an order
28
[JS Arrays]
| What number represents the first index of an array?
[0]
29
[JS Arrays]
| What is the length property of an array?
shows how many pieces of data are in an array
30
[JS Arrays]
| How do you calculate the last index of an array?
array.length - 1
31
[JS Functions]
| What is a function in JavaScript?
repeatable block of code that does something when called
32
[JS Functions]
| Describe the parts of a function definition.
```
function keyword
optional function name
parenthesis
optional parameters between parentheses
curly braces {}
return keyword within curly braces
```
33
[JS Functions]
| Describe the parts of a function call.
functionName (arguments)
34
[JS Functions]
| When comparing them side-by-side, what are the differences between a function call and a function definition?
A function definition tells JS what to do (without actually doing it). Contains keyword, parameters and code block.
A function call is simply asking JS to go through the function. Contains function name, arguments and parentheses.
35
[JS Functions]
| What is the difference between a parameter and an argument?
Parameters are part of a definition.
| Arguments are part of a function call.
36
[JS Functions]
| Why are function parameters useful?
To show what information is needed for the function to work without having to rewrite a whole function for different arguments.
37
[JS Functions]
| What two effects does a return statement have on the behavior of a function?
1. It replaces the function call
| 2. Stops the function
38
[JS Methods]
| Why do we log things to the console?
To check for desired outputs and that everything is working in the expected.
39
[JS Methods]
| What is a method?
A function that is a property of an object.
40
[JS Methods]
| How is a method different from any other function?
It is called on an object, not through a function name and parenthesis.
41
[JS Methods]
| How do you remove the last element from an array?
array.pop();
42
[JS Methods]
| How do you round a number down to the nearest integer?
Math.floor();
43
[JS Methods]
| How do you generate a random number?
Math.random();
44
[JS Methods]
| How do you delete an element from an array?
array.splice(index, delAmount, item1, ...);
45
[JS Methods]
| How do you append an element to an array?
array.push();
46
[JS Methods]
| How do you break a string up into an array?
string.split();
47
[JS Methods]
| Do string methods change the original string?
No
48
[JS Methods]
| Is the return value of a function or method useful in every situation?
No, their functionalities can be used to manipulate data without the use of the value returned.
49
[JS If statements]
| Give 6 examples of comparison operators.
```
strictly equals ===
not strictly equal !==
greater than >
greater than or equals >=
less than <
less than or equals <=
```
50
[JS If statements]
| What data type do comparison expressions evaluate to?
boolean: true or false
51
[JS If statements]
| What is the purpose of an if statement?
allows the computer make a decision based on certain stated criteria
52
[JS If statements]
| Is else required in order to use an if statement?
no
53
[JS If statements]
| Describe the syntax of an if statement.
if keyword
parenthesis with condition inside
curly brackets with code to run if true
if (condition) {
code to be executed
}
54
[JS If statements]
| What are three logical operators?
or ||
and &&
not !
55
[JS If statements]
| How do you compare two different expressions in the same condition?
using the and logical operators and && or ||
| example: (a == b && c ==d )
56
[JS Loops]
| What is the purpose of a loop?
To repeat a block of code as necessary
57
[JS Loops]
| What is the purpose of a condition expression in a loop?
Tells the loop when to stop running
58
[JS Loops]
| What does iteration mean in the context of loops?
Single run of the loop's code block
59
[JS Loops]
| When does the condition expression of a while loop get evaluated?
At the beginning of each iteration.
60
[JS Loops]
| When does the initialization expression of a for loop get evaluated?
Once, before the first iteration.
61
[JS Loops]
| When does the condition expression of a for loop get evaluated?
After the initialization and before each iteration
62
[JS Loops]
| When does the final expression of a for loop get evaluated?
After each iteration.
63
[JS Loops]
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
64
[JS Loops]
| What does the ++ increment operator do?
Increments and substitutes a variable
65
[JS Loops]
| How do you iterate through the keys of an object?
for...in loop
66
[DOM Querying]
| What is a 'model'?
It's a representation of elements
67
[DOM Querying]
| Which 'document' is being referred to in the phrase Document Object Model?
the whole HTML page
68
[DOM Querying]
| What is the word 'object' referring to in the phrase Document Object Model?
refers to the elements on the HTML page that are represented as objects
69
[DOM Querying]
| What is a DOM Tree?
representative chunk of a page as objects
70
[DOM Querying]
| Give two examples of document methods that retrieve a single element from the DOM.
getElementById();
| querySelector();
71
[DOM Querying]
| Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName();
getElementsByTagName();
querySelectorAll();
72
[DOM Querying]
| Why might you want to assign the return value of a DOM query to a variable?
in order to reuse it instead of looking for it everytime you want to manipulate it
73
[DOM Querying]
| What console method allows you to inspect the properties of a DOM element object?
console.dir();
74
[DOM Querying]
| Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
So that the HTML elements are loaded first
75
[DOM Querying]
| What does document.querySelector() take as its argument and what does it return?
argument: string (css selector)
| returns the HTML element
76
[DOM Querying]
| What does document.querySelectorAll() take as its argument and what does it return?
argument: string (css selector)
| returns a node list with all the HTML elements inside
77
[DOM Events]
| What is the purpose of events and event handling?
fire actions for when users interact with a web page
78
[DOM Events]
| Are all possible parameters required to use a JavaScript method or function?
No, some parameters are optional
79
[DOM Events]
| What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener();
80
[DOM Events]
| What is a callback function?
a function passed into another function as an argument
81
[DOM events]
| What object is passed into an event listener callback when the event fires?
an object with data about the event that occurred
82
[DOM Events]
| What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
a target property of the event object storing the DOM element was where the event originated from
83
[DOM Events]
What is the difference between these two snippets of code?
-element.addEventListener('click', handleClick);
-element.addEventListener('click', handleClick( ));
if the parenthesis is there, it would indicate that the function should run when the page loads
84
[DOM Manipulation]
| What is the className property of element objects?
gets or sets the class of an element
85
```
[DOM Manipulation]
How do you update the CSS class attribute of an element using JavaScript?
```
element.className = 'newClassName';
86
[DOM Manipulation]
| What is the textContent property of element objects?
get what's there or assign a new value
87
[DOM Manipulation]
| How do you update the text within an element using JavaScript?
element.textContent = 'text you want';
88
[DOM Manipulation]
| Is the event parameter of an event listener callback always useful?
no, when we already know all the elements we want to change
89
[DOM Manipulation]
| Why is storing information about a program in variables better than only storing it in the DOM?
it's easier to find and reuse in JavaScript
90
[JS Forms]
| What event is fired when a user places their cursor in a form control?
focus
91
[JS Forms]
| What event is fired when a user's cursor leaves the form control?
blur
92
[JS Forms]
| What event is fired as a user changes the value of a form control?
input
93
[JS Forms]
| What event is fired when a user clicks the "submit" button within a form?
submit
94
[JS Forms]
| What does the event.preventDefault() method do?
it prevents the default behavior of an event
95
[JS Forms]
| What does submitting a form without event.preventDefault() do?
refreshes the page
96
[JS Forms]
| What property of a form element object contains all of the form's controls.
elements property
97
[JS Forms]
| What property of a form control object gets and sets its value?
value property
98
[DOM Creation]
| Does the document.createElement() method insert a new element into the page?
No, creates an element but doesn't insert it to the page
99
[DOM Creation]
| How do you add an element as a child to another element?
parent. appendChild(child);
| element. append(multipleChildren);
100
[DOM Creation]
| What do you pass as the arguments to the element.setAttribute() method?
2 strings
- name of the attribute
- attribute value
101
[DOM Creation]
| What steps do you need to take in order to insert a new element into the page?
createElement()
createTextNode()
querySelect() a parent
appendChild() (to an element already on the page)
102
[DOM Creation]
| What is the textContent property of an element object for?
for adding or getting text from an element
103
```
[DOM Creation]
Name two ways to set the class attribute of a DOM element.
```
.className
| .setAttribute('class', 'className)
104
[DOM Creation]
| What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
to use it repeatedly for many elements created saving time & work
105
[CSS Media Queries]
| Give two examples of media features that you can query in an @media rule.
min-width
max-width
min-height
max-height
106
[CSS Media Queries]
| Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
107
[DOM-event-delegation]
| What is the event.target?
the HTML element from which the event originated from
108
[DOM-event-delegation]
| Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
109
[DOM-event-delegation]
| What DOM element property tells you what type of element it is?
event.target.tagName;
110
[DOM-event-delegation]
| What does the element.closest() method take as its argument and what does it return?
takes a css selector and returns the nearest upward match to the selector (reverse querySelector)
111
[DOM-event-delegation]
| How can you remove an element from the DOM?
remove method
112
[DOM-event-delegation]
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?
add an event listener to the parent
| avoid by matches or finding a className, or element type through tagName
113
[JS View Swapping]
| What is the effect of setting an element to display: none?
it removes it from the page layout (as if it didn't exist)
114
[JS View Swapping]
| What does the element.matches() method take as an argument and what does it return?
it takes a selector string as an argument
returns: true if matches
false: if doesn't match
115
[JS View Swapping]
| How can you retrieve the value of an element's attribute?
element.getAttribute('attributeName');
116
[JS View Swapping]
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?
add event listeners to each individual element
117
[JS Custom Methods]
| What is a method?
A function that is a property of an object.
118
[JS Custom Methods]
| How can you tell the difference between a method definition and a method call?
a method definition contains parameters and the keyword function while a method call only contains the object that has the method and the property name of the function
119
[JS Custom Methods]
| Describe method definition syntax (structure).
inside of the object, give a property name and the value is a unnamed function.
120
[JS Custom Methods]
| Describe method call syntax (structure).
objectName.method(optional arguments);
121
[JS Custom Methods]
| How is a method different from any other function?
it can only be called with the object it's in
122
[JS Custom Methods]
| What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods).
123
[JS Custom Methods]
| What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
124
[JS Custom Methods]
| What is "abstraction"?
Working with complex things in simpler ways by breaking them down.
125
[JS Custom Methods]
| What does API stand for?
Application programing interface
126
[JS Custom Methods]
| What is the purpose of an API?
For functionalities to be used or exchange information between different software more easily
127
[JS this]
| What is 'this' in JavaScript?
Refers to the object that is calling a method. By default it's the window
128
[JS this]
| What does it mean to say that 'this' is an implicit parameter?
It's a parameter that is available even though it's never included in the parameter list or declared.
129
[JS this]
| When is the value of 'this' determined in a function; call time or definition time?
call time
130
[JS this]
| How can you tell what the value of 'this' will be for a particular function or method definition?
we can't know
131
[JS this]
| How can you tell what the value of 'this' is for a particular function or method call?
look at the object that is calling the method (left to the dot)
132
[JS Prototypes]
| What kind of inheritance does the JavaScript programming language use?
Prototypal-inheritance
133
[JS Prototypes]
| What is a prototype in JavaScript?
An object that is a prototype for other objects that can access the prototype's methods or information.
134
[JS Prototypes]
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?
through prototypal inheritance
135
[JS Prototypes]
| If an object does not have it's own property or method by a given key, where does JavaScript look for it?
in the prototype
136
[JS Constructors]
| What does the new operator do?
- creates a blank plain JS object
- points the new object's prototype to the constructors functions' prototype property
- 'this' in the object now refers to the new object
- the new object created is returned
137
[JS Constructors]
| What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
138
[JS Constructors]
| What does the 'instanceof' operator do?
checks if a variable (objects) is a instance of a constructor function
139
[JS Timers]
| What is a 'callback' function?
a function passed as another function's argument
140
[JS timers]
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?
setTimeout()
141
[JS Timers]
| How can you set up a function to be called repeatedly without using a loop?
setInterval();
142
[JS Timers]
| What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
no delay - 0ms
143
[JS Timers]
| What do setTimeout() and setInterval() return?
a numeric ID to be used as an argument in the clearInterval() function
144
[HTTP Messages]
| What is a client?
a program requesting data (service request)
145
[HTTP Messages]
| What is a server?
the one that provides service
146
[HTTP Messages]
| Which HTTP method does a browser issue to a web server when you visit a URL?
GET
147
[HTTP Messages]
| What three things are on the start-line of an HTTP request message?
an HTTP method (get, put, post, head or options)
a request target (URL or absolute path)
HTTP version
148
[HTTP Messages]
| What three things are on the start-line of an HTTP response message?
protocol version
status code
status text
149
[HTTP Messages]
| What are HTTP headers for?
meta-data for describing a document in key-value pairs
150
[HTTP Messages]
| Is a body required for a valid HTTP request or response message?
Not required
151
[JS AJAX]
| What is AJAX?
Technologies that offer asynchronous functionality to the browser, loading parts of a page without having to reload the whole page.
152
[JS AJAX]
| What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
153
[JS AJAX]
Which object is built into the browser for making HTTP requests in JavaScript? And what are the three parameters for open()?
XMLHttpRequest object
- HTTP method
- URL of page that will handle the request
- Boolean for if it should be asynchronous
154
[JS AJAX]
| What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
155
[JS AJAX]
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance
156
[const & let]
| What is a code block? What are some examples of a code block?
Code block is a part of code that does something for example the code between curly braces in functions, if statements, and loops.
157
[const & let]
| What does block scope mean?
Everything that happens inside a code block which is not accessible outside of the codeblock.
158
[const & let]
| What is the scope of a variable declared with 'const' or 'let'?
code block scope
159
[const & let]
| What is the difference between 'let' and 'const'?
const cannot be reassigned
| let can be reassign
160
[const & let]
| Why is it possible to .push() a new value into a const variable that points to an array?
The contents of the array is being updated but not the value of the const variable
161
[const & let]
| How should you decide on which type of declaration to use?
If you want to change the variable or not in the future
162
[ES6 Template Literals]
| What is the syntax for writing a template literal?
backticks for start and end
dollar sign and curly braces for expressions
`${}`
163
[ES6 Template Literals]
| What is 'string interpolation'?
the ability to substitute part of the string for the values of variables or expressions
164
[ES6 Destructuring]
| What is destructuring, conceptually?
Take objects or arrays and creates variables based on an object's properties or an array's elements.
165
[ES6 Destructuring]
| What is the syntax for 'Object' destructuring?
const {property : newVarName} = objOriginName
variable keyword, open curly brace, property to be retrieved, optional: new variable name, optional: with comma property sequence, equals sign, object from which to get data from
166
[ES6 Destructuring]
| What is the syntax for 'Array' destructuring?
const [ element : newVarName ] = originalArray
variable keyword, square brackets, element name, colon, new variable name at correct position, optional sequence for other elements or empty commas (ORDER MATTERS), equals sign, original array
167
[ES6 Destructuring]
| How can you tell the difference between destructuring and creating Object/Array literals?
square brackets for array and curly brackets for objects on the LEFT of the equals sign
168
[ES6 Arrow Functions]
| What is the syntax for defining an arrow function?
(parameters) => {statement or expression};
169
[ES6 Arrow Functions]
| When an arrow function's body is left without curly braces, what changes in its functionality?
the function returns the result of that single expression
170
[ES6 Arrow Functions]
| How is the value of this determined within an arrow function?
it doesn't bind; this is from the outer scope of the arrow function
ES6 arrow function: this is defined in function definition
ES5: this is defined when called
171
What is the difference between the web and the internet?
Web -> HTTP and URLs (navigation from page to page)
| Internet is the network -> TCPIP (transmission control protocol/internet protocol)
172
[ES6 Promises]
| What are the three states a Promise can be in?
pending
fulfilled
rejected
173
[ES6 Promises]
| How do you handle the fulfillment of a Promise?
promise.then(callback)
174
[ES6 Promises]
| How do you handle the rejection of a Promise?
promise.catch(callback)
175
[Array Filter]
| What is Array.prototype.filter useful for?
creating a new array while excluding certain elements
176
[Array Map]
| What is Array.prototype.map useful for?
manipulating and transforming elements inside an array
177
[ES6 Classes]
| What is "syntactic sugar"?
Something that doesn't add anything new but is easier to read.
178
[ES6 Classes]
| What is the typeof an ES6 class?
function
179
```
[ES6 Classes]
Describe ES6 class syntax.
```
```
class ClassName {
constructor(name) {
this.name = name;
}
method(){
return this.name;
}
}
```
180
[ES6 Classes]
| What is 'refactoring'?
restructuring existing code without changing it's behavior
181
[ES6 Modules]
| How are ES Modules different from CommonJS modules?
```
ES Modules uses import instead of require()
ES Modules uses export instead of module object
```
ES Modules are officially part of ECMAScript standard
182
[ES6 Modules]
| What kind of modules can Webpack support?
CommonJS, ECMAScript, AMD
183
[fetch]
| What does 'fetch()' return?
a promise object that resolves with a response object
184
[fetch]
| What is the default request method used by 'fetch()'?
GET
185
[fetch]
| How do you specify the request method (GET, POST, etc.) when calling 'fetch'?
fetch with a request option (object after the path) which determines the method
const response = fetch(url, { method: 'POST' })
186
[Data Structures]
| What does the acronym LIFO mean?
last-in-first-out
187
[Data Structures]
| What methods are available on a stack data-structure?
push and pop, sometimes peek
188
[Data Structures]
| What must you do to access the value at an arbitrary point in a stack (not just the top)?
remove items from the stack one by one
189
[Data Structures]
| What does the acronym FIFO mean?
first-in-first-out
190
[Data Structures]
| What methods are available on a Queue data structure?
enqueue- adds value to back of queue
| dequeue- removes value from front of queue
191
[Data Structure]
| What must you do to access the value at an arbitrary point in a queue?
dequeue until arriving at point
192
[Data Structures]
| How are linked lists different from an array?
Linked lists are sequential access (cannot grab values from the middle whenever).
193
[Data Structures]
| How would you access an arbitrary node in a linked list (not just the 'head')?
Traverse node by node
194
```
[JS Closures]
What must the return value of myFunction be if the following expression is possible?
// myFunction( )( );
```
myFunction is being called and it's return is being called
| I can assume the return of myFunction is a function
195
```
[JS Closures]
What does this code do?
// const wrap = value => () => value;
```
variable wrap is a function that takes a value and returns a function that returns value
196
[JS Closures]
| In JavaScript, when is a function's scope determined; when it is called or when it is defined?
defined
197
[JS Closures]
| What allows JavaScript functions to 'remember' values from their surroundings?
Closures
