JavaScript Flashcards
(237 cards)
1
Q
What is the purpose of variables?
A
to store values to be called upon later
2
Q
how do you declare a variable
A
using a keyterm (var, let, const)
3
Q
how do you initialize a variable?
A
using an equal sign
4
Q
what characters are allowed in variable names?
A
$, _, letters (cap and no cap), numbers (cannot start with a number), non keyword (e.g. var), - , .
5
Q
What does it mean by variables are case-sensitive?
A
var Cat and var cat are two separate variables
6
Q
what is the purpose of a string?
A
to store letters/words/phrases values
7
Q
what is the purpose of a number?
A
to store number values
8
Q
what is the purpose of a boolean
A
to store true and false values (values that can only be 1 of the 2)
9
Q
what does the = operator mean in JS?
A
a value is being assigned to something else
10
Q
how do you update the value of a variable
A
assign it a new value
11
Q
what is the difference between null and undefined?
A
null is user-defined emptiness, it is intentional and has to be assigned by the programmer (intentional emptiness)
undefined can be assigned by JS to create absence (usually not assigned by programmer)
12
Q
Why is it a good habit to include labels when you log values to the browser console?
A
so you know which value you are logging and potentially where to find it
13
Q
what are objects used for?
A
used to group similar properties together for ease of calling the values
14
Q
what are object properties?
A
Object properties are variables within an object, usually are related or similar to the other properties within an object.
15
Q
what are two ways to get or update the value of a property?
A
dot notation and bracket notation
object.property
object[‘property’]
16
Q
what data type is returned from an arithmetic operation?
A
numbers
17
Q
What is string concatenation?
A
addition for string values
18
Q
what purpose does the + operator have in JS?
A
adds two values together
19
Q
What data type is returned from using comparator operators? (greater than, less than, ===)
A
boolean (true/false)
20
Q
what does the += operator do?
A
takes the existing value of a variable, adds another value to it, then assigns the new value back to it.
21
Q
what are objects used for?
A
used for grouping up similar properties with values together for ease of access later
22
Q
What are arrays used for ?
A
creating a numbered list of values, number of items within an array can be modified
23
Q
describe array literal notation
A
[ value, value, value, value]
24
Q
how are arrays different from “plain” objects?
A
arrays have a numbered index, order, and use [ ].
25
What number represents the first index of an array?
0
26
what is the length property of an array?
counts the number of indexes inside an array.
27
how do you calculate the last index of an array?
array[array.length - 1]
28
describe object literal notation
{ prop: value, prop: value, prop: value }
29
how do you remove a property from an object
using delete operator, followed by the object.property
| delete object.property
30
what is a function?
reusable block of code that is able to receive different inputs and return different outputs based on those inputs
31
what is an expression?
a block of code or work that the computer needs to perform before it can assign it as a value.
32
what are the parts of a function definition?
keyword (function), optional function name, optional paramater list, { }, optional return
33
what are the parts of a function call
```
function name( ), argument
function(argument)
```
34
What are the differences between a function call and function definition?
function call has argument instead of parameter, does not have the function keyword, no function code block.
35
What is the difference between a parameter and argument?
parameter is a placeholder for when defining a function, argument is a value that is actually passed through the function when calling the function.
36
Why are function parameters useful?
They are a placeholder for values to be passed through a function, let the user of the function know what arguments are allowed in the function
37
What two effects does return have on the function?
ends the function and pushes results of the work done inside the function outside so that it can be accessed
38
why do we log things in the console?
to check for errors in the code/ debugging
39
what is a method?
a method is a function that exists as a key in an object
40
How is a method different from any other function?
theyre effectively the same, a method just exists inside an object
41
how do you remove the last element of an array?
pop method of the array object
| array.pop()
42
How do you round a number down to the nearest integer?
Math.floor() or Math.trunc()
43
How do you generate a random number?
Math.rand();
44
How do you delete an element from an array?
string.splice(index position to start, number of elements to remove, any elements to add starting from the splice start position)
45
How do you append an element to an array?
array.push(element)
46
how do you break a string up into an array
string. split(what is being split)
| e. g. ' ' would split it at every space, '' would split at every character
47
how do you capitalize all the letters in a string?
string.toUpperCase();
48
Do string methods change the original string? how would you check
no, console.log
49
how many string methods are there according to MDN web docs?
~30
50
Is the return value of a function or method useful in every situation?
some functions/methods do not need a return
51
how many array methods are there according to mdn docs?
~40
52
what three letter acronym should you always include in your google search about a JS method or CSS property?
mdn
53
6 examples of comparison operators
greater than, less than, greater than and equal to, less than and equal to, absolutely equal to, equal to (dont use), absolutely not equal to, equal to
54
what data type do comparison expressions evaluate to ?
boolean
55
what is the purpose of an if statement?
create conditionals
56
is else required in order to use an if statement?
no
57
Describe the syntax (structure) of an if statement
if keyword, followed by a condition, followed by the if-code block. condition is made up of two operands with an operator sandwiched between
58
What are the three logical operators?
and, or, not - &&, ||, !
59
how do you compare two different expressions in the same condition?
using $$ or || (and / or)
60
What is the purposed of a loop?
To run a designated block of code a number of times
61
what is the purpose of a condition expression in a loop?
It allows for the computer to know when to end the loop (once the condition fails)
62
What does iteration mean in the context of a loop?
each run through the loop is a single iteration
63
when does the condition of a while expression for a while loop get evaluated?
Before running the code inside the while loop code block.
64
When does the initialization expression of a for loop get evaluated?
when the loop is first read by the computer, it will initialize the initialization expression. Only done once, before the first condition expression
65
What is a falsey or truthy value?
values that JS coerces into a boolean value when placed in the context of a conditonal statement.
66
What are falsey values?
false, undefined, 'empty string', "empty string", 0, -0, NaN, 0n, null, undefined
67
What are nodelists
an object created from using querySelectorAll, not a dom element, is a list of dom elements to prevent change to them. it is an array-like object.
68
what does the $ sign mean typically in dom?
stylistic choice; if used, all dom elements should be named using a $ in order to separate it from other variables. (should be used for the dom element rather than the content - only attached to values assigned to from query selector and queryselectorall)
69
what is event handling?
code that is executed to respond when an event has happened, to "handle" that event ( most events will be user controlled, but some can be controlled by time etc)
something to do in response to an event occurring
70
difference between event listener and handler?
event listeners designed to wait for an event to occur, and then invokes a list of functionalities that then occurs when the event occurs, event listeners call the event handler when the event occurs
71
when does the condition expression of a for loop get evaluated?
after the variable is declared, but before the code inside the for loop declaration block is run.
72
when does the final expression of a for loop get evaluated?
after the for loop code block gets executed, before the condition expression kicks in again
73
besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
74
what does the ++ increment operator do?
increases the variable value by 1
75
how do you iterate through the keys of an object
for in loops
76
why do we log things to the console?
to make sure our expectations meet our results/ check for bugs in the code
77
What is a 'model'
a representation of something, a smaller version that is equally if not as detailed as the original
78
which document is referred to in the phrase Document Object Model
html
79
What is the word object referring to in the phrase Document Object Model
the document object refers to the virtual object formed by js to interact with the html/css code
80
What is a DOM Tree
a model of dom in a tree structure, allows you to find the relationships between each node/element and therefore how to access each one
81
give two examples of document methods that retrieves a single element from the DOM
document.querySelector(), getElementByID()
82
document method that retrieves multiple elements form the DOM at once
document.querySelectorAll();
83
Why might you want to assign the return value of a DOM query to a variable?
to make it easier to access for later uses instead of having to recall it again everytime
84
What console method allows you to inspect the properties of a DOM element object?
console.dir()
85
why would a script tag need to be placed at the bottom of the HTML element instead of the top?
The DOM is created at the instance the script is run, if the script is before the HTML code, nothing will be read. The DOM is loaded in after all the css and html is loaded into the page
86
What does document.querySelector take as its argument and what does it return
it takes a css. selector and returns the first child element of that selector
87
What does document.querySelectorAll() take as its argument and what does it return?
it takes a css selector as its argument and returns all elements of that type as a nodelist
88
what is the purpose of events and event handling?
to allow for user interactivity with the webpage
89
are all possible parameters required to use a javascript method or function?
no
90
what method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
91
what is a callback functoin?
a function that is passed through another function as an argument, and then invoked inside the outer function to complete action or routine
92
what object is passed into an event listener callback when the event fires?
an event object
93
What is the event.target?
a reference to the object that was targeted when the event was dispatched
94
what is the difference between
element.addEventListener('click', handleClick)
and
element.addEventListener('click',handleClick())?
the second one calls the handleClick function, causing it to execute it immediately - second one waits until the 'click' event occurs before calling the function.
95
what is the className property of element objects
it is all the values of the class attribute in an html element (the classes refer to css classes). can be set with the className property
96
How do you update the css class attribute of an element using Javascript?
using className, classList, or dom-creation setAttribute()
97
What is the textContent property of element objects?
it is the user-readable text content in an html element
98
how do you update the text within an element using JavaScript?
element.textContent = 'updated-text';
99
is the event parameter of an event listener callback always useful? (function inside an eventlistener)
no, sometimes the function can be run without any input from the event itself (aside from activating the function call)
100
would this assignment be simpler or more complicated if we didnt use a variable to keep track of the number of clicks?
its easier because we'd be able to debug it in the case that it breaks (e.g. buttons classes changes not being applied with click count, color not changing when button classes change)
101
why is storing information about a program in variables better than storing it in the dom?
They are more accessible through the console.log
102
what event is fired when a user places their cursor in a form control?
focus event
103
what event is fired when a user's cursor leaves a form control
blur event
104
what event is fired as a user changes the value of a form control
input event
105
what event is fired when a user clicks the submit button within a form?
submite event
106
what does the event.preventDefault()
prevents the event's default behavior from occurring
107
what does submitting a form without event.preventDefault() do?
does not prevent the default behavior of the form, in the case that theres no action, ends up refreshing the page
108
what property of a form element object contains all of the form's controls?
the elements property
109
what property of a form control object gets and sets its value?
setAttribute()
110
What is one trick of writing a lot of code without checking to see if it works so far?
if something goes wrong or theres a bug in the code, it's hard to pinpoint the root of the problem
111
what is one advantage of having your console open when writing a javascript program?
you can see in real time if your code is creating bugs and therefore solve them or correct them before the code gets too convoluted
112
does the document.createElement() method insert a new element into the page
no, it only creates the element in the dom, it still needs to be appended into the actual document
113
how do you add an element as a child to another element?
you append it with the appendChild() or append methods
114
WHat do you pass as the arguments to the element.setAttribute method?
the value you want to set it to (as a string) and the value (as a domstring value)
115
what steps do you need to take in order to insert a new element into the page
first you need to create the element, then you need to append it to an element that exists in the document page already
116
What is the textContent property of an object for ?
allows you to get or set the user-readable text in an element object
117
what are two ways to set the class attribute of a DOM element?
setAttribute, classList.add/remove, nameClass
118
What are two advantages of defining a function to do create something (like the work of creating a dom tree)
makes it so that it can be reusable, and helps define the purpose of that segment of code
119
give two examples of media features that you can query in an @media rule
min-width and max-width
120
Which HTML meta tag is used in mobile responsive web pages
viewport meta tag
121
what is the event.target?
it is a dom element object that points to the element that is being targeted by an action
122
why is it possible to listen for events on one element that actually happens to its descendent elements?
due to dom event delegation (bubbling)
123
What DOM element property tells you what type of element it is?
event.target.tagName - returns element type as a string in all caps
124
What does the element.closest method() take as its argument and what does it return?
it takes a css selector as its argument, returns everything from itself to the nearest ancestor element towards the root with that specified css selector
125
How can you remove an element from the DOM
using the remove method of that element (element.remove())
126
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?
attach the event listener to the parent element of the elements you want to control, that way any amount of elements added or removed can be affected through the parent element
127
What is the effect of setting an element to display:none?
it hides the element from the viewport
128
what does the element.matches() method take as an argument and what does it return?
it takes a css selector and returns a boolean
129
How can you retrieve the value of an elements attribute?
using the getAttribute() method of the element object
130
At what steps of the solution would it be helpful to log things to the console
inside/outside loops, to check event listeners are working properly, checking the conditions of loops, any variables being updated
131
If you were to add another tab and view to your HTML, but you didnt use event delegation, how would your JS code be written instead?
you'd have to create a new event Listener
132
What is JSON
JavaScript Object Notation; it is an interchange data type used to transmit and store data
133
what are serialization and deserialization?
serialization converts data into a contiguous series of bytes so it can be stored in memory or sent elsewhere whereas deserialization is turning that series of bytes into readabe data
134
Why are serialization and deserialization useful?
Serialization lets you send data out, deserialization makes reading that data easier so that you dont have to parse the serialized data every time you want to access the inner objects
135
How do you serialize data into a JSON string in JavaScript?
using the stringify method (JSON.strigify())
136
How do you deserialize a JSON string into a data structure using JavaScript?
using the parse method of the JSON object (JSON.parse())
137
How to you store data in localStorage
setItem method (localStorage.setItem()
138
How to you retrieve data from localStorage?
using the getItem method (localStorage.getItem())
139
What data type can localStorage save in the browser?
JSON string
140
When does the 'beforeunload' event fire on the window object?
before the page unloads
141
What is a method?
A method is a function that is a property of an object
142
How can you tell the difference between a method definition and a method call?
a method definition will have the function keyword, followed by the method name and any parameters. the method call will just have just the method name and any arguments
143
Describe method definition syntax
name of the method property, followed my a colon to show that you're assigning it a value. follow it with the function keyword, an optional name (if you want to call it on itself), any parameters, the code block, then a comma if there are any additonal properties after it
144
Describe method call syntax (structure)
call the object followed by the property name for that function
145
How is a method different from any other function?
you have to call as a property of its object first, it's not "freestanding" and can be called by itself like a function can
146
What is the defining characteristic of Object Oriented Programming?
You can store both properties and methods together (data and behavior)
147
What are the four prinicples of OOP
abstraction, encapsulation, inheritance, polymorphism
148
What is abstraction?
being able to work with complex things in simple ways e.g. light switch or DOM API
149
What does API stand for?
Application Programming Interface
150
What is the purpose of an API
to let two computers or programs interact with each other
151
What is "this" in JavaScript
it points to the nearest Object "this" is inside of, the window if its not inside another object
152
What does it mean to say that this is an implicit parameter?
This inherently does have a value, it is only given when a function is called
153
When is the value of this determined in a function? call time or definition time?
call time
154
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);
}
};
```
the window
155
given the above character object, what is the result of the following code snippet? why?
```
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
```
character.greet();
"it's a me Mario" b/c the this was defined when the method was called
156
```
given
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
What is the result of the following code snippet? why?
var hello = character.greet;
hello();
```
'It's a me, undefined' b/c hello is a property of the window object. This now points to the window object, so when it looks for window.firstName, it is unable to find it and returns undefined.
157
How can you tell what the value of this will be for a particular function or method definition
it'll be nothing because it has no value, it is an implicit parameter, it is only defined at function call, not function/method definition
158
How can you tell what the value of this is for a particular function or method call?
it'll be pointing to the object on the left of the . for a method.
159
What kind of inheritance does the JavaScript programming language use?
prototype
160
What is a prototype in JavaScript?
it is an object or object like structure that descendants of that prototype will inherit properties or methods from
161
How is it possible to call methods on strings, arrays, and numbers even though those methods dont actually exist on strings, arrays, and numbers?
They all have a prototype object that they inherit specific property and methods from
162
IF an object does not have its own property or method by a given key, where does JS look for it?
it looks for it in its prototype
163
What does the new operator do?
1. Creates an empty plain JavaScript object
2. adds a property to the new Object that links to the constructor function's prototype object
3. binds newly created object instance as the this context (all references to this in the constructor function now point to the object created in the new op step)
4. returns this if the function doesnt return an object
164
What property of Javascript functions can store shared behavior for instances created with new?
prototype
165
What does the instanceof operator do?
Checks if the target object has any lineage that includes the prototype property of a specified constructor
166
What is a callback function
it is a function that is used as an argument in another function
167
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() and setInterval()
168
How can you set up a function to be called repeatedly without using a loop?
using the setInterval() method
169
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
no time delay
170
What do setTimeout() and setInterval() return?
a timeout ID to identify the timer created by the method
171
what is a client?
Does not usually share resources, but does request content or services from a server
172
What is a server
runs one or more server programs that share resources with clients when requested
173
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
174
What three things are on the start-line of an HTTP request message?
HTTP method (get, post, put, delete), request target (URL, absolute path), HTTP version (usually 1.1, maybe 2)
175
What three things are on the start line of an HTTP response message?
version, status code, status message
176
What are HTTP headers?
provide additonal information about the body of the response, about the data; metadata
177
Where would you go if you wanted to learn more about a specific HTTP Header?
mdn
178
Is a body required for a valid HTTP request or response message?
no
179
What is AJAX?
programming practice of building complex dynamic webpages
180
What does the AJAX acronym stand for?
Asynchronous Javascript and XML
181
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
182
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
Load event
183
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
share the same prototype ancestor (eventtarget)
184
What is a code block? What are some examples of a code block?
A code block is a snippet of code that is grouped together within curly braces, function code block, condition code block
185
What does block scope mean?
Block scope means within the block of code where a variable can be defined
186
What is the scope of a variable declared with const or let?
block scoped for both (local)
187
What is the difference between let and const?
Const is immutable ( like a string ) and creates a read-only reference to a value, let can be mutated
188
Why is it possible to .push a new value into a const variable that points to an Array?
the variable created by const becomes read-only, but the value the property points to is still mutable (cant reassign a variable created by const, but can change things inside)
189
How should you decide on which type of declaration to use?
Const should be used if the variable will never be reassigned, let allows you to reassign that variable as much as needed
190
What is the syntax for writing a template literal?
instead of single quotes or double quotes around the content you want to encapsulate, you use back-ticks ( ` ), any javascript expression is written as ${expression/variable}
191
What is "string interpolation"?
String interpolation is where parts of the string are replaced with variable values or expressions
192
What is destructuring, conceptually?
taking apart the property/values of an object and assigning them to variables
193
what is the syntax for destructuring for objects?
const/let {variable_name: property_name/value you want to assign} = object (object you are obtaining the property's value from)
194
What is the syntax for destructuring arrays?
const/let [var 1, var2, ... varX] = array_name
var1 = element at first index
var2 = element at second index
varX = all other elements leftover (due to the spread operator [...])
195
How can you tell the difference between destructuring and creating object/array literals?
depends on which side the object/array literal notation is on; if the curly braces/ array is on the left, it is destructuring. if it's on the right side, it's constructing.
196
what is the syntax for defining an arrow function?
let/const/var function_name = paramater or (x, y, ...z) or ( ) => expression or { if code is longer than one line}
197
When an arrow function's body is left without curly braces, what changes in its functionality?
the expression denoted by the arrow function is implicitly returned
198
How is the value of this determined within an arrow function?
it is determined when the arrow function is defined
199
what is a CLI ?
command line interface
200
what is gui
graphical user interface
201
One use case for each of the following:
| man , cat, ls, pwd, echo, touch, mkdir, mv, rm, cp
man - pulls up manual, cat - concatenates the contents of two files together, ls - lists all files and directories within a level of a directory, pwd - prints current file location, touch - updates files, creates them if they are not present, mkdir - makes directory, mv - moves file location, rm - removes file or directory PERMANENTLY, cp - copies file or directory
202
What are the three virtues of a great programmer?
Laziness, impatience, and hubris
203
What is node.js
Node.js is a program that allows users to use JavaScript to be run outside a web browser
204
What can node.js be used for?
used to build back-end for web-apps, command-line programs, things you want to automate
205
What is REPL?
REPL (read-eval-print loop) is an interactive shell that takes in user inputs, executes them, and then returns the result back to the user
206
When was node.js created?
May 27, 2009
207
What back-end languages have you heard of?
python, PHP, JavaScript, Java, C#
208
what is the process object in a Node.js program?
It refers to the Node.js program itself running
209
How do you access the process object in a Node.js program?
console.log(process);
210
What is the data type of process.argv in Node.js
array of strings
211
what is a JavaScript module?
an individual JavaScript file is treated as its own separate module
212
What values are passed into a Node.js module's local scope?
exports, require, module, __dirname, __filename
213
Give two examples of truly global variables in a Node.js program.
process, console
214
What is the purpose of module.exports in a Node.js module
Allows for Node.js to access whatever value that is assigned to the exports property in another node.
215
How do you import functionality into a Node.js module from another Node.js module?
using the require() function
216
What is the JavaScript event loop
a runtime that is specific to JavaScript, allows it to execute code, run and process events, and execute sub-queue tasks ; the thing that waits for the callstack to be cleared before pushing the things in the queue into the call stack
217
What is different between "blocking" and "non-blocking" with respect to how code is executed?
since javascript is a single thread language, when a process takes time, it prevents any other code from executing. non-blocking code would allow for other code to complete in a synchronous fashion.
218
What is a directory?
a location to store files
219
What is a relative file path?
the location of the file relative to another location/directory
220
What is an absolute file path?
the location of the file relative to the root directory
221
What module does Node.js include for manipulating the file system?
fs
222
What method is available in the Node.js fs module for writing data to a file?
writeFile() method
223
Are file operations using the fs module synchronous or asynchronous?
can be either or depending on the operation
224
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
225
What is on the first line of an HTTP request message?
HTTP version, request target, http version
226
What is on the first line of an HTTP response message?
HTTP Version, status code, status message
227
What are HTTP headers?
additonal metadata about the server request or response
228
Is a body required for a valid HTTP message?
no
229
What is NPM?
Node packet manager - big software library , website-gui to browse registry, cli - command line client that talks to registry, registry (database)
230
What is a package?
file or module of js code that is reusable - a directory of files has at least one file, including a package.json file w/ metadata about the package
231
How can you create a package.json with npm?
go to the root of the directory you want to create a package.json in, and then use
'npm -init'
232
What is a dependency and how to you add one to a package?
code you want to use but you didnt create, your code depends on it but you did not create it, using 'npm install 'package_name''
prod dependencies - code that is used to help the code run
dev dependencies - code that doesn't make it to the final product, it is used striclty for development (e.g. eslinter for
233
What happens when you add a dependency to a package with npm?
updates the package.json file, creates a node-modules folder (if it doesnt already exist ) and installs the package (in the directory you put it in)
234
How do you add express to your package dependencies?
npm install express
235
What Express application method starts the server and binds it to a network PORT?
listen method
236
How do you mount a middleware with an Express application?
use method of the app object
237
Whch objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req and res
