JavaScript Flashcards
1
Q
What is the purpose of variables?
A
a stored data to use it later on
2
Q
How do you declare a variable?
A
var const let
3
Q
How do you initialize (assign a value to) a variable?
A
use the assignment operator (=)
4
Q
What characters are allowed in variable names?
A
letters, $, _ (underscore); cannot start with number
5
Q
What does it mean to say that variable names are “case sensitive”?
A
case should match
6
Q
What is the purpose of a string?
A
used with any kind of text; add new content into a page
7
Q
What is the purpose of a number?
A
used in calculations and size
8
Q
What is the purpose of a boolean?
A
to make a binary decision (true/false)
9
Q
What does the = operator mean in JavaScript?
A
value being assign to
10
Q
How do you update the value of a variable?
A
name = new value (no need to put var const let, only at first)
11
Q
What is the difference between null and undefined?
A
null is intentionally exists (purpose of emptiness for a moment)
undefined exists unintentionally
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
helps to track what the value is for
13
Q
Give five examples of JavaScript primitives.
A
number, string, boolean, null, undefined
14
Q
What data type is returned by an arithmetic operation?
A
number
15
Q
What is string concatenation?
A
two or more strings used to create a single value
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
addition in numeric value or string value
17
Q
What data type is returned by comparing two values (, ===, etc)?
A
boolean (true/false)
18
Q
What does the += “plus-equals” operator do?
A
allow you to add on anything to current value of variable
19
Q
What are objects used for?
A
stores property for variable
20
Q
What are object properties?
A
makes what the variable different from other variables (unique)
21
Q
Describe object literal notation.
A
opning curly brace for object literal, property, column, value, closing brace
22
Q
How do you remove a property from an object?
A
delete operator (delete ___.____);
23
Q
What are the two ways to get or update the value of a property?
A
using dot notation or bracket notation
24
Q
What are arrays used for?
A
when you need to make a list with not knowing how many needs to be in
25
Describe array literal notation.
['__', '__']
26
How are arrays different from "plain" objects?
array has an ordered list (index #)
27
What number represents the first index of an array?
0
28
What is the length property of an array?
how many items it holds in the array (not index #)
29
How do you calculate the last index of an array?
subtract 1 from the length
30
What is a function in JavaScript?
repeatable and reusable block of code
31
Describe the parts of a function definition.
keyword, parameter, code block { } , return
32
Describe the parts of a function call.
name of function
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
```
call -> name of function
function definition -> keyword, code block, parameter
```
34
What is the difference between a parameter and an argument?
parameter -> placeholder for argument
| argument -> actual value f0r function to run
35
Why are function parameters useful?
argument placeholder
36
What two effects does a return statement have on the behavior of a function?
executes and exits the code block and gives back a value
37
Why do we log things to the console?
debugging tools
38
What is a method?
function stored in property of object
39
How is a method different from any other function?
basically same
40
How do you remove the last element from an array?
pop-method
41
How do you round a number down to the nearest integer?
Math.floor() -> round-down
Math.trunc() -> removes decimal
42
How do you generate a random number?
Math.random()
43
How do you delete an element from an array?
splice method (index#, #items)
44
How do you append an element to an array?
push method
| append => add at the end
45
How do you break a string up into an array?
split method
46
Do string methods change the original string? How would you check if you weren't sure?
no
47
Is the return value of a function or method useful in every situation?
no
48
Give 6 examples of comparison operators.
=, >, =, logical operator (&&)
49
What data type do comparison expressions evaluate to?
boolean
50
What is the purpose of an if statement?
to make your code to make decision (true/false)
51
Is else required in order to use an if statement?
no
52
Describe the syntax (structure) of an if statement.
if (condition) code block {}
53
What are the three logical operators?
&& ll !
54
How do you compare two different expressions in the same condition?
&& or ll
55
What is the purpose of a loop?
a repeated block of code happening under certain condition
56
What is the purpose of a condition expression in a loop?
stop point of the loop
57
What does "iteration" mean in the context of loops?
one repetition of code block
58
When does the condition expression of a while loop get evaluated?
before the code bock runs
59
When does the initialization expression of a for loop get evaluated?
in the beginning (first step)
| "before anything"
60
When does the condition expression of a for loop get evaluated?
after initialization and "before the code block (iteration)
61
When does the final expression of a for loop get evaluated?
after each iteration, "before the condition"
62
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
63
What does the ++ increment operator do?
add value of variable
| goes up by 1
64
How do you iterate through the keys of an object?
for in loop
65
What are the four components of "the Cascade".
source order/ inheritance/ specificity/ important rule
66
What does the term "source order" mean with respect to CSS?
order of giving a style matters
| last style strongest
67
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
68
List the three selector types in order of increasing specificity.
element < class < id
69
Why is using !important considered bad practice?
too strong!!!
70
Why do we log things to the console?
debugging tool
71
What is a "model"?
example of a HTML structure
72
Which "document" is being referred to in the phrase Document Object Model?
HTML document
73
What is the word "object" referring to in the phrase Document Object Model?
javascript
74
What is a DOM Tree?
tree of element with all of its HTML children elements
75
Give two examples of document methods that retrieve a single element from the DOM.
querySelector('.name'), getElementById('name')
76
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll('.name');
77
Why might you want to assign the return value of a DOM query to a variable?
if you want to access it to multiple times
78
What console method allows you to inspect the properties of a DOM element object?
console.dir() method - directory method
79
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
so HTML can run before javascript does
80
What does document.querySelector() take as its argument and what does it return?
css selector, first element that matches first
81
What does document.querySelectorAll() take as its argument and what does it return?
css selectors, all node list - abject with properties that are numbers (not an array)
82
Why do we log things to the console?
verifying actually something happened
83
What is the purpose of events and event handling?
event is an action that occurs as a result of the user or another source, such as a mouse click.
An event handler is a response to an event when it is triggered
84
Are all possible parameters required to use a JavaScript method or function?
no, boolean value could be used
85
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener() method
86
What is a callback function?
function definition that is being passed to an argument to other function
87
What object is passed into an event listener callback when the event fires?
event
88
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
event.target is a reference to the object onto which the event was dispatched
89
What is the className property of element objects?
get the value of class attribute
90
How do you update the CSS class attribute of an element using JavaScript?
class name property
91
What is the textContent property of element objects?
text of an element that shows on the application
92
How do you update the text within an element using JavaScript?
.textContent
93
Is the event parameter of an event listener callback always useful?
no
94
Why is storing information about a program in variables better than only storing it in the DOM?
assigning element to variable if you have to use it several times is more efficient than searching it every time.
95
What does the transform property do?
let you rotate, scale, skew, or translate
96
Give four examples of CSS transform functions.
rotate, scale, translate, matrix
97
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition
(color change. scale
98
What event is fired when a user places their cursor in a form control?
focus
99
What event is fired when a user's cursor leaves a form control?
blur
100
What event is fired as a user changes the value of a form control?
input
101
What event is fired when a user clicks the "submit" button within a ?
submit
102
What does the event.preventDefault() method do?
prevent default behavior
(when delete stored data from local storage,
this defaults the removal, so need to // code and delete and refresh)
103
What does submitting a form without event.preventDefault() do?
refresh entire page
104
What property of a form element object contains all of the form's controls.
element's property
| value of the property is the object
105
What property of a form control object gets and sets its value?
value property
106
What is one risk of writing a lot of code without checking to see if it works so far?
had to find out what went wrong
107
What is an advantage of having your console open when writing a JavaScript program?
debugging tool
108
Does the document.createElement() method insert a new element into the page?
no,
109
How do you add an element as a child to another element?
append, appendChild()
110
What do you pass as the arguments to the element.setAttribute() method?
document.setAttribute('.class or id', 'value')
111
What steps do you need to take in order to insert a new element into the page?
parent.appeneChild(new element)
112
What is the textContent property of an element object for?
text that want to be added
113
Name two ways to set the class attribute of a DOM element.
setAttribute(), className
114
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reuse
115
Give two examples of media features that you can query in an @media rule.
min-width, max-width
116
Which HTML meta tag is used in mobile-responsive web pages?
meta tag with viewport
117
What is the event.target?
dom object representing HTML element where an event originally occur
118
What DOM element property tells you what type of element it is?
tagName
119
What does the element.matches() method take as an argument and what does it return?
first ancestor that matches css selector
120
How can you remove an element from the DOM?
remove() method
121
What is the affect of setting an element to display: none?
makes it invisible
122
What does the element.matches() method take as an argument and what does it return?
1st string of css selector, boolean whether to check that element is being called on
123
How can you retrieve the value of an element's attribute?
getAttribute('string css selector')
124
At what steps of the solution would it be helpful to log things to the console?
every steps
125
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?
addEventListener
126
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?
separate conditional block
127
What is a breakpoint in responsive Web design?
point where the styles of application change
128
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?
gives an ability to have some variant
129
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?
source order
130
What is JSON?
format for storing and transporting data
131
What are serialization and deserialization?
serialization -> a process of converting an object (value in array) to a string so it can be transferred
decentralization -> opposite of serialization, string to object
132
Why are serialization and deserialization useful?
serialization: complex data in order
deserialization: makes it easy to access to the data
133
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
134
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
135
How to you store data in localStorage?
setItem()
136
How to you retrieve data from localStorage?
getItem('keyword')
137
What data type can localStorage save in the browser?
' ' string so use stringify() first
138
When does the 'beforeunload' event fire on the window object?
before the page unload
139
What is a method?
function which is a property of object
140
How can you tell the difference between a method definition and a method call?
method definition is actual function definition need to be assigned to property
141
Describe method definition syntax (structure).
object literal, properties, function definition
142
Describe method call syntax (structure).
call is just a name of function with (argument)
143
How is a method different from any other function?
a method includes a code that is called by the object's name
144
What are the four "principles" of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
145
What is "abstraction"?
complex things in simple ways so people use it without fully understanding
146
What does API stand for?
application programming interface
147
What is the purpose of an API?
allow developers to create complex functions more easily
148
What is this in JavaScript?
implicit parameter that contains an object
149
What does it mean to say that this is an "implicit parameter"?
parameter that always in present even not defined
150
When is the value of this determined in a function; call time or definition time?
call time (only happens when called)
151
What does this refer to in the following code snippet?
```
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
```
nothing
152
```
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
```
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
mario because function is being called
153
```
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
```
```
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
```
it's a me, undefined
154
How can you tell what the value of this will be for a particular function or method definition?
nothing, because not called
155
How can you tell what the value of this is for a particular function or method call?
object to the left dot notation, if no dot, window
156
What kind of inheritance does the JavaScript programming language use?
prototype-based (prototypal)
157
What is a prototype in JavaScript?
original model on which something is patterned
158
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?
inheritance
159
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
prototype
160
What does the new operator do?
blank object + prototype
161
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
162
What does the instanceof operator do?
check if on the right is present to one to left
163
What is a client?
one that sends request for data
164
What is a server?
response or provides data
165
Which HTTP method does a browser issue to a web server when you visit a URL?
GET post,put
166
What three things are on the start-line of an HTTP request message?
HTTP method, request target, HTTP version
167
What three things are on the start-line of an HTTP response message?
protocal version, status code, status text
168
What are HTTP headers?
lets the client and server pass additional info with HTTP request or response
169
Is a body required for a valid HTTP request or response message?
no
170
What is AJAX?
a technique for loading data on application without reloading it
171
What does the AJAX acronym stand for?
asynchronous javascript and xml
172
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHTTPRequest()
173
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
'load'
174
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototype
175
What is a code block? What are some examples of a code block?
code that run and return expected output
176
What does block scope mean?
variable is being declared inside of specific code block
177
What is the scope of a variable declared with const or let?
block-scope
178
What is the difference between let and const?
const -> cannot be re-declared nor updated
(if array, we can add it by pushing)
let -> can be updated but cannot be re-declared
179
Why is it possible to .push() a new value into a const variable that points to an Array?
when push, you are not re-declaring, it's mutating the contents
180
How should you decide on which type of declaration to use?
if the variable would need to be re-assigned, let
| if not const
181
What is the syntax for writing a template literal?
backtick `'string and if assigned variable ${javascript expression}'`
182
What is "string interpolation"?
ability to substitute part of the string for the values of variable or expression
183
What is destructuring, conceptually?
new positioning of properties so they could be used as variable
184
What is the syntax for Object destructuring?
const {property1, property2} = object
185
What is the syntax for Array destructuring?
const [property1, property2] = array
186
How can you tell the difference between destructuring and creating Object/Array literals?
when curly brace or square bracket is on the right side of assignment operator, it's destructuring, whereas to the right, creating.
187
What is the syntax for defining an arrow function?
```
const ___ = (if more than two) => {
return
}
```
188
When an arrow function's body is left without curly braces, what changes in its functionality?
return
189
How is the value of this determined within an arrow function?
window
(es6 -> this is being defined when definition
es5 -> this is being defined when called)
190
What are the three states a Promise can be in?
pending, fulfilled, rejected
191
How do you handle the fulfillment of a Promise?
.then(result => {
res.status(200).json(result.rows);
})
192
How do you handle the rejection of a Promise?
.catch(error => {
console. error(err);
res. status(500).json({ error: 'An unexpected error occured.' });
193
What is Array.prototype.filter useful for?
Creating a new array while excluding some elements.
does for loop and if statement
```
ex.
const overFive = numbers.filter(number => number > 5);
```
194
What is Array.prototype.map useful for?
Creating a new array containing the transformed elements of another.
```
ex.
const doubled = (numbers.map(number => number * 2));
```
195
What is Array.prototype.reduce useful for?
Combining the elements of an array into a single value.
```
ex.
const balance = account.reduce((previous, current) => {
if (current.type === 'deposit') {
return previous + current.amount;
}
return previous - current.amount;
}, 0);
```
196
What is "syntactic sugar"?
syntax within a programming language expressed more clear and easier
197
What is the typeof an ES6 class?
function
198
Describe ES6 class syntax.
```
class ____ {
constructor(__){
this.name = name
}
getName(){
return
}
}
(class name is being defined with name of ___
{} for classbody
prototype method of ___ is being defined
)
```
199
What is "refactoring"?
change the structure but no the behavior
200
How are ES Modules different from CommonJS modules?
```
commonJS -> require('file path')
ES Modules -> import & export
when default: import create-own-name from 'file name or path' -> no .js needed
if not import filename
export default function/class {} -> only one in module
if multiple export function/class name{}
import {name} from 'file'
```
201
What kind of modules can Webpack support?
js or json files
