JavaScript Flashcards
1
Q
What is the purpose of variables?
A
Variables are used to store information for the computer to be able to reference back to. It brings permanence to data.
2
Q
How do you declare a variable?
A
You declare a variable with the var keyword followed by the variable name. A variable can start with a letter, $, or _
var fullName
3
Q
How do you initialize (assign a value to) a variable?
A
If a variable has not been declared yet, you use the variable keyword, the variable name, and then initialize the variable with the assignment operator =
var fullName = ‘Brandon Moy’;
4
Q
What characters are allowed in variable names?
A
Lowercase letters, uppercase letters (camel case), numbers, $, and _
Variables cannot start with numbers
5
Q
What does it mean to say that variable names are “case sensitive”?
A
It means that the capitalization must be consistent across the entire variable
var Score is different from var score
6
Q
What is the purpose of a string?
A
A string it used to record a data type that lets us store any types of characters
e.g. ‘Hello World!’
7
Q
What is the purpose of a number?
A
A data type number is recorded to recall a number value (can be used for calculations or incrementation)
var width = 10; var height = 10;
8
Q
What is the purpose of a boolean?
A
A boolean is used to define a value as true or false. It is used for decision making.
9
Q
What does the = operator mean in JavaScript?
A
The = operator assigns the value on the right side to the variable on the left side
10
Q
How do you update the value of a variable?
A
You can update a value of a variable by assigning it a new value further down the script
early: var fullName = ‘Brandon’;
later: fullName = ‘Brandon Moy’;
11
Q
What is the difference between null and undefined?
A
Both are empty values but for different purposes. Null is a nonexistent or invalid object (cannot be used by JavaScript [can be used as a placeholder as null can ONLY be assigned]) whereas undefined is returned by JavaScript when there is no value assigned
Null - used by programmers to show empty
Undefined - JavaScript’s way to show empty
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
Labels print information on the values being logged to the console for more ease of readability
13
Q
Give five examples of JavaScript primitives.
A
String, Numbers, Boolean, Null, Undefined
14
Q
What data type is returned by an arithmetic operation?
A
A number data type is returned by an arithmetic operation. If a string is put through an arithmetic operation JavaScript will print back NaN (not a number)
15
Q
What is string concatenation?
A
String concatenation is when two or more strings are combined together to create a new string.
‘Hello’ + ‘ ‘ + ‘World!’ will return as ‘Hello World!’
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
The + operator can be used as arithmetic operator or string concatenator
17
Q
What data type is returned by comparing two values (<, >, ===, etc)?
A
When comparing two values a boolean is returned for the value of the comparison
18
Q
What does the += “plus-equals” operator do?
A
The += operator adds the new value to the starting variable and then assigns this new combined value back to the variable.
19
Q
What are objects used for?
A
Objects are used to store multiple pieces of information into location without affecting other data and multiple pieces of information into one location to call back to.
20
Q
What are object properties?
A
Object properties are just variables assigned to one object
var objectName = {
property: propertyValue
};
21
Q
Describe object literal notation.
A
You use the variable keyword, the variable name, and you assign a grouping of properties to it inside of { }. Each property is notated property: value and a comma is used to separate the properties.
var objectName = {
property: value,
property2: value
};
22
Q
How do you remove a property from an object?
A
delete operator is used to remove a property
delete object.property;
23
Q
What are the two ways to get or update the value of a property?
A
Dot notation - object.property = newValue;
Square bracket - object[‘property’] = newValue;
24
Q
What are arrays used for?
A
Arrays are used for storing a list of data. e.g. List of students, colors, hotels, cars
25
Describe array literal notation.
Square bracket with value separated by a comma
26
How are arrays different from "plain" objects?
Objects will assign a value to a property for the key value pair while an array assigns the value to an index number for the key value pair. Arrays have set orders and length properties.
27
What number represents the first index of an array?
The number for the first index of an array is 0 since computers start counting from 0
28
What is the length property of an array?
The length property of an array is a count of how many values are stored in the array.
29
How do you calculate the last index of an array?
You can subtract 1 from the length of the array.
30
What is a function in JavaScript?
A list of steps that can be reused multiple times in the code.
31
Describe the parts of a function definition.
The function keyword, the (optional) name of the function, the parameter list separated by commas and surrounded by parenthesis, the open curly brace for the function block, code within the code block, probably a return
32
Describe the parts of a function call.
The function name, 0 or more arguments surrounded by parenthesis
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
The definition has { } for code block, function keyword
34
What is the difference between a parameter and an argument?
Parameter - used in definition, placeholder for a future value
Argument - used in function call, actually value provided
35
Why are function parameters useful?
Parameters allow us to create variance. They allow us to create ONE function for MULTIPLE uses
36
What two effects does a return statement have on the behavior of a function?
1) It allows the results to be used outside of the function
| 2) It stops the function
37
Why do we log things to the console?
We log things to the console so that developers can check and see the output and the state of variables and functions. The console is the developers way of communicating with JavaScript
38
What is a method?
A method is a reference to a function that is used as a property of an object. E.g. Math.max() is the max method OF the math object
39
How is a method different from any other function?
A method is called as a property of the object it is pulling the information off of.
40
How do you remove the last element from an array?
You use the .pop() method of the array object to remove the last element
41
How do you round a number down to the nearest integer?
You can use the .floor() method of the array object to round down to the nearest integer
42
How do you generate a random number?
The .random() method of the max object will generate a random number between 0 and 1 which can then be multiplied by the length of the array you want to generate randomly from
43
How do you delete an element from an array?
The .splice(start, quantity) can delete elements from an array
44
How do you append an element to an array?
You use the .push() method to append an element to an array
45
How do you break a string up into an array?
Use the .split() method with the argument string value ‘ ‘ to separate the string at the argument locations
46
Do string methods change the original string? How would you check if you weren't sure
They do not change the original string. We can console.log() the original variable housing the string we change. Instead of changing the original string, string methods create a new string.
47
Roughly how many string methods are there according to the MDN Web docs?
50
48
Is the return value of a function or method useful in every situation?
It might not be useful in every situation so we as developers need to create situations where the functions or methods we create/use are useful
49
Roughly how many array methods are there according to the MDN Web docs?
A lot. . .
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.
>, <, >=, <=, ==, ===, !=. !==.
52
What data type do comparison expressions evaluate to?
Booleans
53
What is the purpose of an if statement?
If statements are used to create branching actions or decision making
54
Is else required in order to use an if statement?
Else is not required to use an if statement, but if the statement is false then the if statement will return undefined
55
Describe the syntax (structure) of an if statement.
If keyword, condition to check surrounded by parenthesis, curly brace to start code block for what to run if parameter is true, what to run if the parameter is true in the code block, closing curly brace
if (condition) {
statement
}
56
What are the three logical operators?
&& (and)
|| (or)
!(not)
57
How do you compare two different expressions in the same condition?
You can use || for or, or && for and between the two expressions but keep both of them within the same ( ) parameter
58
What is the purpose of a loop?
The purpose of a loop is to repeat an action
59
What is the purpose of a condition expression in a loop?
The condition expression in a loop allows JavaScript to know when the loop should be stopped
60
What does "iteration" mean in the context of loops?
An iteration is each time a loop is run. The first iteration would be the first time the loop is run and the last iteration is the final time a loop is run.
61
When does the condition expression of a while loop get evaluated?
The condition expression is evaluated before executing the statement in each iteration
62
When does the initialization expression of a for loop get evaluated?
The initialization expression of a for loop is evaluated once before the loop is begun
63
When does the condition expression of a for loop get evaluated?
The condition expression of a for loop gets evaluated before every iteration
64
When does the final expression of a for loop get evaluated?
The final expression of a for loops gets evaluated at the end of each iteration
65
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
The break keyword can exit a loop before the condition expression evaluates to false
66
What does the ++ increment operator do?
The ++ increment operator increases the value of the variable by 1
67
How do you iterate through the keys of an object?
You use a for … in loop and set a variable for the keys
68
What event is fired when a user places their cursor in a form control?
The focus event
69
What event is fired when a user's cursor leaves a form control?
The blur event
70
What event is fired as a user changes the value of a form control?
The input event
71
What event is fired when a user clicks the "submit" button within a ?
The submit event
72
What does the event.preventDefault() method do?
It stops the form elements from returning to their default setting (either blank or placeholders)
73
What does submitting a form without event.preventDefault() do?
It refreshes the page
74
What property of a form element object contains all of the form's controls.
The elements property
75
What property of a form control object gets and sets its value?
The value property
76
What is one risk of writing a lot of code without checking to see if it works so far?
You run the risk of running into a bug and not knowing where in the code it happened
77
What is an advantage of having your console open when writing a JavaScript program?
You can check your progress and make sure everything is working the way you want it to
78
What is the event.target?
The event.target is the property of the event object that holds the location of where the event occurred
79
What is the affect of setting an element to display: none?
Display: none will hide all content inside of the element. The element is present but not showing any of its content
80
What does the element.matches() method take as an argument and what does it return?
Element.matches () takes a css selector in a string as its argument and returns a boolean
81
How can you retrieve the value of an element's attribute?
You can use the element.getAttribute(‘attribute’)
82
At what steps of the solution would it be helpful to log things to the console?
At every step ☺
83
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?
We would need to put an event listener on each tab instead of on the container with the tabs inside of it
84
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?
It would be written with a conditional for each tab we would need to check
85
What is the event.target?
The event.target is the property of the event object that holds the location of where the event occurred
86
What is the affect of setting an element to display: none?
Display: none will hide all content inside of the element. The element is present but not showing any of its content
87
What does the element.matches() method take as an argument and what does it return?
Element.matches () takes a css selector in a string as its argument and returns a boolean
88
How can you retrieve the value of an element's attribute?
You can use the element.getAttribute(‘attribute’)
89
At what steps of the solution would it be helpful to log things to the console?
At every step ☺
90
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?
We would need to put an event listener on each tab instead of on the container with the tabs inside of it
91
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?
It would be written with a conditional for each tab we would need to check
92
What is a breakpoint in responsive Web design?
A breakpoint is a spot where the web page should change its styling. Often this is used for styling for different sized screens (mobile, tablet, or desktop)
93
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?
Using a % allows the content to scale with the size of the page
94
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?
Because of CSS cascade (source order) the “newest” ruleset (closest to the bottom) will be applied over previous rules
95
What is JSON?
JSON (JavaScript Object Notation) is a way to store the contents of an object in a string most commonly used to transmit data to a web page
96
What are serialization and deserialization?
Serialization is turning an object into date (stream of bytes)
Deserialization is turning that data (stream of bytes) back into the object
97
Why are serialization and deserialization useful?
It turns complex data into data that is understood everywhere
98
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify(‘object’)
99
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse(‘JSON string’);
100
How do you store data in localStorage?
Use the setItem method on the localStorage object
localStorage.setItem(‘key’, ‘key value’)
101
How do you retrieve data from localStorage?
Use the getItem method on the localStorage object
localStorage.getItem(‘key’)
102
What data type can localStorage save in the browser?
Strings
103
When does the 'beforeunload' event fire on the window object?
Right before the tab is about to unload (closing tab, closing window, refreshing tab. . . )
104
What is a method?
A method is a function that is a property of an object
105
How can you tell the difference between a method definition and a method call?
A method definition will have the function keyword and variable(s) for the parameter(s) whereas a method call will be called on an object with a . between the object and method and would have a variable for the argument (if an argument is needed)
Definition: methodName: function (parameter) {
}
Call: object.method(argument)
106
Describe method definition syntax (structure).
Method definition will have the property the method is stored in (method name), colon, function keyword, parameter(s) in parenthesis, open curly brace for the function code block, code for the function to run, closing curly brace for the function code block
property: function (parameter) {
}
107
Describe method call syntax (structure).
You use the object you want to call the method on, then a . followed by the method name and then the argument in parenthesis
object.method(argument)
108
How is a method different from any other function?
Methods are functions that are properties of an object whereas functions can also exist outside of an object. These functions are called differently than methods
Method call - object.methodName(argument)
Function call - functionName(argument)
109
What is the defining characteristic of Object-Oriented Programming?
Pairing data with behavior
110
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
111
What is "abstraction"?
Abstraction is the idea of using something complex but being thought of in a simple way
E.g. Turning on the light - to us is flipping a switch, to electricity it is opening a circuit connected to a break to move electricity to the lightbulb
112
What does API stand for?
Application Programming Interface
113
What is the purpose of an API?
Its purpose is to give programmers a way to interact with a system in a simplified, consistent fashion (using abstraction)
114
What is this in JavaScript?
this is an implicit parameter that is checked/available at the time of a function call. It is used in methods when there is information in the same object that this wants to reference
115
What does it mean to say that this is an "implicit parameter"?
It means that this is available in a function even thought it was not declared or set as its own variable
116
When is the value of this determined in a function; call time or definition time?
The value of this is determined when a function is called
117
```
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);
}
};
```
this refers to nothing because nothing is being called and the value is determined at call time
118
```
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();
```
The result of character.greet(); should be ‘It’s-a-me, Mario!
It pulls the value of this (which is the character object) at the firstName property which is Mario
119
```
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
```
this would be undefined because this would be called on the window object which does not have a firstName property
120
How can you tell what the value of this will be for a particular function or method definition?
You cannot tell the value before it is called
121
How can you tell what the value of this is for a particular function or method call?
Look for the object named to the left of the method call and look inside of the object, otherwise it is the window
122
What kind of inheritance does the JavaScript programming language use?
Prototype-based inheritance (prototypal inheritance)
123
What is a prototype in JavaScript?
A JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
124
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?
You can set an object as a prototype of another object allowing you to call the methods on those objects without them existing inside of the objects
There also prototypes already set on the objects (strings, arrays, and numbers)
Object.setPrototypeOf(object, prototype object);
125
If an object does not have its own property or method by a given key, where does JavaScript look for it?
Inside of its prototypes
126
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
Creates a blank object
Points the newInstance’s prototype ot the constructor function’s prototype property
Executes constructor function with given arguments and stores as this
95%+ constructor function will not have a return statement which means that the newInstance gets returned instead
127
What property of JavaScript functions can store shared behavior for instances created with new?
The [[Prototype]] property
128
What does the instanceof operator do?
The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
The return is a boolean value
129
What is a "callback" function?
A callback function is a function that is passed as an argument to another function
130
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?
You can use the setTimeout() window method
131
How can you set up a function to be called repeatedly without using a loop?
By using the setInterval() window method
132
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
| This causes JavaScript to run the function as quickly as it can
133
What do setTimeout() and setInterval() return?
They return a unique interval ID number that is needed to clear the recurring function
134
What is AJAX?
Asynchronous JavaScript and XML is a way for users to send and update responses without having to update the page. The user can continue to do other things in the browser while waiting for the data to load.
135
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
136
Which object is built into the browser for making HTTP requests in JavaScript?
The new XMLHttpRequest(); object
137
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
The load event
138
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share a the same prototype
139
What is a code block? What are some examples of a code block?
- A code block is the code within curly brackets { } that should run
- Function code block, loop code block, condition code block
140
What does block scope mean?
- A variable when declared inside the if or switch conditions or inside for or while loops, are accessible within that particular condition or loop.
- Tl;dr - variables declared inside of code blocks are only accessible inside those code blocks
141
What is the scope of a variable declared with const or let?
Blocked-scope
142
What is the difference between let and const?
- let is a block scope variable that can be updated but the updated value is only accessible inside of code block
- const is a block scope constant variable and it’s value cannot be reassigned
143
Why is it possible to .push() a new value into a const variable that points to an Array?
For the same reason we can update object property values, we can update the object’s property values but we cannot update the entire object (in this case, array)
144
How should you decide on which type of declaration to use?
Can the value be updated and reused? - let
| Should the value be constant? - const
145
What is the syntax for writing a template literal?
You would surround the template literal with backticks `
146
What is "string interpolation"?
String interpolation is the ability to substitute part of the string for the values of variables or expressions.
147
What is destructuring, conceptually?
Object destructing is taking an object, and then turning that object’s properties into variables
148
What is the syntax for Object destructuring?
const { object properties separated by a comma(use : and an alias to rename variables different from property name} = objectName
149
What is the syntax for Array destructuring?
const [array indices separated by a comma] = arrayName
150
How can you tell the difference between destructuring and creating Object/Array literals?
The location of the assignment operator
- An object destructured object will be the variable keyword, the object literal or properties being turned into variables, the assignment operator then the objects name
- A normal object would be the variable keyword, object name, assignment operator, then the object literal
151
What is the syntax for defining an arrow function?
Parameter (in parenthesis if more than one parameter or less than one parameter) => code to run
- If it is one expression you do not need a code block or a return statement
- But if a code block is used then a return statement is necessary
152
When an arrow function's body is left without curly braces, what changes in its functionality?
It automatically returns the result of the expression
153
How is the value of this determined within an arrow function?
It takes the value of the enclosing context to be the value of this
154
What is the JavaScript Event Loop?
It is responsible for taking callbacks from the past view and then pushing them to the stack when the stack is clear
155
What is different between "blocking" and "non-blocking" with respect to how code is executed?
- Blocking code is currently running on the call stack
| - Non-blocking code is an operation that is off of the call stack
156
What are the three states a Promise can be in?
Pending - initial state - neither fulfilled or rejected
Fulfilled - operation was completed successfully
Rejected - operation has failed
157
How do you handle the fulfillment of a Promise?
You can use the .then method on a promise to handle the fulfillment
158
How do you handle the rejection of a Promise?
You can use the .catch method on a promise to handle the rejection
159
What is Array.prototype.filter useful for?
It is useful for getting specific data out of arrays that you would want to use elsewhere
160
What is Array.prototype.map useful for?
Map is useful for apply changes to all items in an array
