JavaScript Flashcards
(196 cards)
1
Q
What is the purpose of variables?
A
To store data and information to be used for later
2
Q
How do you declare a variable?
A
By using the var keyword and giving it a variable name
3
Q
How do you initialize (assign a value to) a variable?
A
By using the “=” sign (assignment operator)
4
Q
What characters are allowed in variable names?
A
Letters, numbers, dollar signs ($), or an underscore (_)
5
Q
What does it mean to say that variable names are “case sensitive”?
A
Score and score are different variable names. Lowercase and Uppercase are different
6
Q
What is the purpose of a string?
A
Add new text content into a page
7
Q
What is the purpose of a number?
A
Represent numerical values. They are good for tasks that involve counting or calculating sums.
8
Q
What is the purpose of a boolean?
A
Helpful when determining which part of a script should run.
9
Q
What does the = operator mean in JavaScript?
A
Assignment operator
10
Q
How do you update the value of a variable?
A
Assign a new variable value but with a different value. Don’t use the var keyword
11
Q
What is the difference between null and undefined?
A
Null means an empty or non-existent value. Null is assigned, and explicitly means nothing.
Undefined means a variable has been declared, but the value of that variable has not yet been defined.
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
It is much clearer which variables are being logged. If you do not include “labels”, it can be very confusing instead of helpful.
13
Q
Give five examples of JavaScript primitives.
A
String, number, undefined, boolean, null
Primitives are stored data/values.
14
Q
What data type is returned by an arithmetic operation?
A
A number
15
Q
What is string concatenation?
A
The process of joining together 2 or more strings to create one new string
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
It adds numbers or concatenate strings
17
Q
What data type is returned by comparing two values (, ===, etc)?
A
A boolean
18
Q
What does the += “plus-equals” operator do?
A
adds the value of the right operand to a variable and assigns the result to the variable
19
Q
What are objects used for?
A
group together a set of variables and functions to create a model of something you would recognize from the real world.
20
Q
What are object properties?
A
A variable that is part of an object. Properties tell us about the object.
21
Q
Describe object literal notation.
A
To access a property or method of an object you use the name of the object, followed by a period, then the name of the property or method you want to access.
22
Q
How do you remove a property from an object?
A
Use the delete keyword and then use dot notation to identify the property or method you want to remove from the object
delete user.firstName
23
Q
What are the two ways to get or update the value of a property?
A
Dot notation or square brackets
hotel.name = ‘park’;
hotel[‘name’] = ‘park‘;
24
Q
What are arrays used for?
A
Store a list of values and items
25
Describe array literal notation.
Var with variable name, asmt operator (), [square bracket], values inside of it, [close with square bracket]
26
How are arrays different from "plain" objects?
Arrays use numerically indexed instead of property names.
27
What number represents the first index of an array?
[0]
28
What is the length property of an array?
The number of items in an array
29
How do you calculate the last index of an array?
Length - 1
30
What is a function in JavaScript?
An object that can allow you to package up code for use later in your program when called.
31
Describe the parts of a function definition.
1. The function keyword to begin the creation of a new function.
2. An optional name.
3. A comma-separated list of zero or more parameters, surrounded by () parentheses.
4. The start of the function's code block, as indicated by an { opening curly brace.
5. An optional return statement to stop the function
6. The end of the function's code block, as indicated by a } closing curly brace.
32
Describe the parts of a function call.
1. The function's name.
| 2. A comma-separated list of zero or more arguments surrounded by () parentheses.
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function definition requires a function keyword. Function call just needs the name.
34
What is the difference between a parameter and an argument?
When we define a function, we declare parameters and that when we call a function, we pass it arguments.
35
Why are function parameters useful?
Parameters alter function behavior. Useful because it can make modifications to how they run. They are local variables to the functions which are necessary for the function to operate correctly.
36
What two effects does a return statement have on the behavior of a function?
Causes the function to produce a value we can use in our program.
Prevents any more code in the function's code block from being run.
37
Why do we log things to the console?
To test if our code is working
38
What is a method?
Methods are functions stored as object properties
39
How is a method different from any other function?
Methods are attached to object.
40
How do you remove the last element from an array?
.pop
41
How do you round a number down to the nearest integer?
Math.floor
42
How do you generate a random number?
Math.random
43
How do you delete an element from an array?
array.splice method ( index , how many you want to delete)
44
How do you append an element to an array?
.push (Add to end)
| .unshift (Add to beginning)
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?
It does not change original string.
| Check with .console log
47
Roughly how many string methods are there according to the MDN Web docs?
36
48
Is the return value of a function or method useful in every situation?
No because the return value is not always something you want to have. Sometimes you just want the functionality.
49
Roughly how many array methods are there according to the MDN Web docs?
50
50
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
51
Give 6 examples of comparison operators.
1. Greater Than (>)
2. Less Than (=)
5. Equal To (==)
6. Not Equal To( !=)
7. Strict Not Equal To (!==)
52
What data type do comparison expressions evaluate to?
Boolean (true or false)
53
What is the purpose of an if statement?
Evaluates (or checks) a condition. IF the condition evaluates to true, any statements in the subsequent code block are executed.
54
Is else required in order to use an if statement?
No
55
Describe the syntax (structure) of an if statement.
Start with an if statement, Opening parentheses, condition operand, comparison operator, operand. Closing parentheses. Opening curly bracket. Return statement. Closing Curly Bracket.
56
What are the three logical operators?
```
Logical And (&&)
Logical Or (||)
Logical Not (!)
```
57
How do you compare two different expressions in the same condition?
Logical And (&&) or Logical Or (||)
58
What is the purpose of a loop?
Loops is to do something as fast possible a certain number of times.
59
What is the purpose of a condition expression in a loop?
To decide when the loop stop
60
What does "iteration" mean in the context of loops?
Everytime it goes through a loop
61
When does the condition expression of a while loop get evaluated?
Before each loop is run
62
When does the initialization expression of a for loop get evaluated?
At the start of the for loop. Before the loop begins.
63
When does the condition expression of a for loop get evaluated?
After the Initialization has been set. After the final expression runs
64
When does the final expression of a for loop get evaluated?
After the condition statement. After the code block.
65
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break keyword will break out of loop but not end the function.
66
What does the ++ increment operator do?
increments (adds one to) its operand and reassigns the value
67
How do you iterate through the keys of an object?
For...in loop
| for (var property in object)
68
Why do we log things to the console?
To make sure our code is working properly
69
What is a "model"?
Representation of a web page with a DOM tree
70
Which "document" is being referred to in the phrase Document Object Model?
The tree structure of word page
71
What is the word "object" referring to in the phrase Document Object Model?
All the elements within the DOM tree which are then created into objects.
72
What is a DOM Tree?
As a browser loads a web page, it creates a model of that page. The model is called a DOM tree, and it is stored in the browsers' memory. A hierarchical chart which breaks down all the pieces of a document with four main types of nodes
73
Give two examples of document methods that retrieve a single element from the DOM.
querySelector (get anything), getElementByID (Only get ID)
74
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName, getElementsByTagName, querySelectorAll
75
Why might you want to assign the return value of a DOM query to a variable?
It saves the browser from looking through the DOM tree to find the same element again.
76
What console method allows you to inspect the properties of a DOM element object?
console.dir
77
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
78
What does document.querySelector() take as its argument and what does it return?
It takes a CSS Selector as an argument and returns the first of the matching elements.
79
What does document.querySelectorAll() take as its argument and what does it return?
It takes a CSS Selector as an argument and returns all of those that match in a node list/array
80
Why do we log things to the console?
To make sure our code is working properly
81
What is the purpose of events and event handling?
Events are things that happen in DOM response to input from a user.
Even handling trigger javascript code and run code in response to events
82
Are all possible parameters required to use a JavaScript method or function?
no
83
What method of element objects lets you set up a function to be called when a specific type of event occurs?
AddEventListener() method
84
What is a callback function?
A function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
85
What object is passed into an event listener callback when the event fires?
The event object
86
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The target property of the Event interface is a reference to the object onto which the event was dispatched.
87
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
The second one has a return value so it’s calling a function, which we don’t want.
88
What is the className property of element objects?
sets or returns the class name of an element (the value of an element's class attribute).
89
How do you update the CSS class attribute of an element using JavaScript?
(Name of class).className = ('string of new class name')
90
What is the textContent property of element objects?
The textContent property represents the text content of the node and its descendants.
91
How do you update the text within an element using JavaScript?
TextContent and the asmt operator
92
Is the event parameter of an event listener callback always useful?
No
93
Why is storing information about a program in variables better than only storing it in the DOM?
Makes it easier to manipulate and keep track of things. Don’t need to rely on DOM.
94
What event is fired when a user places their cursor in a form control?
focus
95
What event is fired when a user's cursor leaves a form control?
blur
96
What event is fired as a user changes the value of a form control?
input
97
What event is fired when a user clicks the "submit" button within a ?
The Submit event is fired. It’s fired on the form element
98
What does the event.preventDefault() method do?
It prevents an event from being handled with it’s default behavior.
99
What does submitting a form without event.preventDefault() do?
The browser will automatically reload the page with the form's values in the URL.
100
What property of a form element object contains all of the form's controls?
Elements property
101
What property of form a control object gets and sets its value?
Value property
102
What is one risk of writing a lot of code without checking to see if it works so far?
You could write a lot of code and not know where the problem is
103
What is an advantage of having your console open when writing a JavaScript program?
You can make sure your code is working the whole time and catch errors early
104
Does the document.createElement() method insert a new element into the page?
It does not because it’s not specified where on the page it should go
105
How do you add an element as a child to another element?
appendChild
106
What do you pass as the arguments to the element.setAttribute() method?
.setAttribute(name, value)
107
What steps do you need to take in order to insert a new element into the page?
Create element, append it to child of something that is on the page.
108
What is the textContent property of an element object for?
To set the text content of an element
109
Name two ways to set the class attribute of a DOM element.
setAttribute, className
110
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
Defining a function allows you to reuse it to save time.
| Helps to organize html you’re creating
111
What is the event.target?
a reference to the object onto which the event was dispatched. The event interacted with by the user
112
Why is it possible to listen for events on one element that actually happen in its descendent elements?
Because event bubbling goes all the way up to the parent.
113
What DOM element property tells you what type of element it is?
event.target.tagName
114
What does the element.closest() method take as its argument and what does it return?
Takes a selector as an argument and returns the closest parent it has. It can also return itself.
115
How can you remove an element from the DOM?
Remove method
116
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?
Adding it to the parent and have it bubble up.
117
What is the event.target?
a reference to the object onto which the event was dispatched. The event interacted with by the user
118
What is the effect of setting an element to display: none?
the affected element will disappear.
119
What does the element.matches() method take as an argument and what does it return?
a string representing the selector to test. Returns boolean value. true if the element would be selected by the specified selector string; otherwise, returns false
120
How can you retrieve the value of an element's attribute?
.getAttribute()
121
At what steps of the solution would it be helpful to log things to the console?
All the time.
122
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?
Put individual event listeners on each of the tabs.
123
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?
You would write an if statement for each tab
124
What is JSON?
A standard text-based data format following JavaScript object syntax.
JavaScript Object Notation
125
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
126
Why are serialization and deserialization useful?
Serialized code can be transferred over a network or stored in a persistent storage and brought back with deserialization in the same state.
127
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
128
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
129
How to you store data in localStorage?
localStorage.setItem(key, value);
| localStorage.setItem('myCat', 'Tom');
130
How to you retrieve data from localStorage?
localStorage.getItem(key);
131
What data type can localStorage save in the browser?
JSON strings
132
When does the 'beforeunload' event fire on the window object?
when the window, the document and its resources are about to be unloaded.
133
What is a method?
A method is a function which is a property of an object
134
How can you tell the difference between a method definition and a method call?
A method definition is the function.
A method call is just the objectName.method()
```
Ex:
var calculator = {
add: function (x, y) {
var sum = x + y;
return sum;
};
In example, calculator.add(x, y) is method call.
Add is method definition.
```
135
Describe method definition syntax (structure).
Give property name, define a function with parameters, opening curly brace, closing curly brace
```
Ex: var calculator = {
add: function (x, y) {
var sum = x + y;
return sum;
};
```
136
Describe method call syntax (structure).
Start with the object variable name, dot, name of the method with parameters
objectName.method()
```
Ex: var calculator = {
add: function (x, y) {
var sum = x + y;
return sum;
};
```
method call is calculator.add(x, y)
137
How is a method different from any other function?
Method is attached to an object. Function is defined outside.
138
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods).
139
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
140
What is "abstraction"?
the process of removing physical, spatial, or temporal details or attributes in the study of objects or systems to focus attention on details of greater importance
141
What does API stand for?
Application Programming Interface
142
What is the purpose of an API?
to give programmers a way to interact with a system in a simplified, consistent fashion:
143
What is this in JavaScript?
an implicit parameter of all JavaScript functions.
| the value of this is determined by how a function is called
144
What does it mean to say that this is an "implicit parameter"?
It means that it is available in a function's code block even though it was never included in the function's parameter list or declared with var
145
When is the value of this determined in a function; call time or definition time?
When the function is called, call time.
146
```
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);
}
};
```
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
Given the above character object, what is the result of the following code snippet? Why?
```
var hello = character.greet;
hello();
```
This refers to character object.
It’s-a-me, Mario! Because this refers to character object.
It's-a-me, undefined! Because the value of this is determined when the function is called, not when it is defined.
147
How can you tell what the value of this will be for a particular function or method definition?
the value of this can be recognized as "the object to the left of the dot" when the function is called (as a method).
148
How can you tell what the value of this is for a particular function or method call?
The object before the method. If nothing is there, it will be the global window.
149
What kind of inheritance does the JavaScript programming language use?
prototype-based (or prototypal) inheritance
150
What is a prototype in JavaScript?
object that contains properties and (predominantly) methods that can be used by other objects.
151
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on objects, arrays, and numbers?
They all have a prototype object within them.
152
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
In it’s prototype chain
153
What does the new operator do?
create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
154
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
155
What does the instanceof operator do?
tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.
156
What is a "callback" function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
Passing a function into another function as an argument
157
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?
By setting a delay on the setTimeout()
158
How can you set up a function to be called repeatedly without using a loop?
By using a set interval
159
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
160
What do setTimeout() and setInterval() return?
setTimeout()
The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout().
setInterval()
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.
161
What is a client?
Clients, also known as service requesters, are pieces of computer hardware or server software that request resources and services made available by a server.
162
What is a server?
the providers of a resource or service
163
Which HTTP method does a browser issue to a web server when you visit a URL?
GET Method
164
What three things are on the start-line of an HTTP request message?
1) An Http method
2) the request target (Usually URL)
3) Http version
165
What three things are on the start-line of an HTTP response message?
Protocol version, a status code, status text
166
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value.
167
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
168
Is a body required for a valid HTTP request or response message?
No
169
What is AJAX?
is a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.
170
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
171
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
172
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
Load event
173
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Because of prototype
174
What is a code block? What are some examples of a code block?
A block of code written in between curly braces. Ex: If statement, for loop, functions
175
What does block scope mean?
A block scoped variable means that the variable defined within a block will not be accessible from outside the block
176
What is the scope of a variable declared with const or let?
Block scoped
177
What is the difference between let and const?
Let is immutable meaning you change the value. Const is not immutable.
178
Why is it possible to .push() a new value into a const variable that points to an Array?
Because the cont only holds a pointer value to where the array is stored in memory. We’re not changing the memory address at all when pushing.
Because it functions similarly to updating an object values. It's already declared and assigned, you're just adding to the "list" that the constant points to.
179
How should you decide on which type of declaration to use?
If the value never changes, use const. If the value of the variable needs to change then you use let.
Make everything const, second you find out you have to change it, change to let. Const more efficient.
180
What is the syntax for writing a template literal?
Wrap text in back ticks `. Substitute variables using ${}
181
What is "string interpolation"?
the ability to substitute part of the string for the values of variables or expressions. Substitute variables using ${} wrapped in curly braces
182
What is destructuring, conceptually?
Breaking down the contents of an object or an array into variables to be called later
183
What is the syntax for Object destructuring?
const { firstName, lastName, middleName } = person;
const { firstName: fname, lastName: lname } = person;
^ To change the name of the property ^
```
const foo = ['one', 'two', 'three'];
const [red, yellow, green] = foo;
```
console. log(red); // "one"
console. log(yellow); // "two"
console. log(green); // "three"
184
What is the syntax for Array destructuring?
const [x, y, z] = person;
185
How can you tell the difference between destructuring and creating Object/Array literals?
Arrays use brackets
Destructuring object takes place on the left hand sind on equal sign
Destructing array take place on the right hand side of equal sign
186
What is the syntax for defining an arrow function?
```
let add = (x, y) => x + y;
let add = (x, y) => {
```
187
When an arrow function's body is left without curly braces, what changes in its functionality?
Only the first line will be returned. It is an implicit return.
The parenthesis are returning a single value, the curly braces are executing multiple lines of code like a normal function.
188
How is the value of this determined within an arrow function?
Arrow functions have a lexical this and its value within the arrow function is determined by the surrounding scope.
189
What is a CLI?
Command Line Interfaces
190
What is a GUI?
Graphical User Interface
191
Give at least one use case for each of the commands listed in this exercise
Man: gives manual page for any command (manual)
cat: concatenate files and view contents of file (concatenate)
ls: list directory contents (list segment)
pwd: print name of current/working directory to check which folder you are in (print working directory)
echo: display a line of text
touch: create new files. Also change timestamps
mkdir: create new directories (make directory)
mv: move (rename) files or folders (move)
rm: delete files or directories (remove). Use -r to remove contents within
cp: copy files or directories (copy). Use -r to copy contents within
192
What are the three virtues of a great programmer?
Laziness: The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don't have to answer so many questions about it.
Impatience: Impatience: The anger you feel when the computer is being lazy. This makes you write programs that don't just react to your needs, but actually anticipate them. Or at least pretend to.
Hubris: The quality that makes you write (and maintain) programs that other people won't want to say bad things about.
193
How are ES Modules different from CommonJS modules?
Es6 uses import/export statements
| CommonJS uses require/module.export
194
What kind of modules can Webpack support?
ECMAScript modules. CommonJS modules. AMD modules.
195
Front End Uses
ES Modules
| Import/export statements
196
Back End uses
CommonJS modules
| require()/module.export
