JavaScript Flashcards
1
Q
What is the purpose of variables?
A
To store data
2
Q
How do you declare a variable?
A
Using the ‘var’ keyword
3
Q
How do you initialize (assign a value to) a variable?
A
Using the “=” sign
4
Q
What characters are allowed in variable names?
A
Must begin with a letter, ($), or (_)
Can’t start with numbers or use (-) or (.)
5
Q
What does it mean to say that variable names are “case sensitive”?
A
value and Value are different variable names
6
Q
What is the purpose of a string?
A
To store a string of characters
7
Q
What is the purpose of a number?
A
To store a numeric value like amount
8
Q
What is the purpose of a boolean?
A
To determine if something should be done; should code run
9
Q
What does the = operator mean in JavaScript?
A
To assign, store a value to a variable
10
Q
How do you update the value of a variable?
A
You re-assign a variable; don’t need to use the var keyword
11
Q
What is the difference between null and undefined?
A
Undefined when variable is not assigned a value, null is purposeful emptiness;
Null has to be assigned
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
Clarity for what is being logged
13
Q
What are objects used for?
A
Group together a set of variables and functions to create a model of something.
14
Q
What are object properties?
A
a variable that is part of an object
15
Q
Describe object literal notation.
A
var object = {
key: 'value',
key: 40
}
16
Q
How do you remove a property from an object?
A
Using the delete keyword;
delete object.propertyName
17
Q
What are the two ways to get or update the value of a property?
A
Dot notation: object.popertyName;
Bracket notation: object[‘propertyName’];
18
Q
Give five examples of JavaScript primitives.
A
strings, numbers, booleans, undefined, null
19
Q
What data type is returned by an arithmetic operation?
A
numbers
20
Q
What is string concatenation?
A
Combine 2 strings into a new string
21
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
Add numbers or concatenate strings
22
Q
What data type is returned by comparing two values (greater than, less than, ===, etc.)
A
Booleans
23
Q
What does the += “plus-equals” operator do?
A
Combines the variable and the value and assigns the new value to the variable
24
Q
What are arrays used for?
A
To store a list of values
25
Describe array literal notation.
var array = ['value1', 'value2', 'value3'];
26
How are arrays different from "plain" objects?
Arrays uses index numbers and objects use 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 the array
| array.length
29
How do you calculate the last index of an array?
array.length - 1
30
What is a function in JavaScript?
Functions allow you to package up code for use later in your program.
31
Describe the parts of a function definition.
Function definitions are made of:
1. the function keyword
2. an optional name
3. zero or more parameters
4. a code block
5. an optional return statement
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.
example(arg1, arg2, arg3);
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
Definition will have function keyword and { }
34
What is the difference between a parameter and an argument?
Parameter is place holder of unknown value until function is called and argument is passed. When a function is called, the parameters in its definition take on the values of the arguments that were passed.
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?
Way to give data to functions, way to provide data to get different results of the function
36
What two effects does a return statement have on the behavior of a function?
1. A return statement causes the function to produce a value.
2. A return statement also exits the function; no code after the return statement is executed.
37
Why do we log things to the console?
For code to communicate with us and see if feature is working.
So we know what is being returned from a function or method.
38
What is a method?
A method is a function which is a property of an object.
39
How is a method different from any other function?
Methods are attached to an object; Not a free floating function; potential to use data attached to object
40
How do you remove the last element from an array?
The pop( ) method removes the last element from an array and returns that element. This method changes the length of the array.
41
How do you round a number down to the nearest integer?
The Math.floor( ) function returns the largest integer less than or equal to a given number.
42
How do you generate a random number?
The Math.random( ) function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.
43
How do you delete an element from an array?
splice( ) method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
44
How do you append an element to an array?
push() method adds one or more elements to the end of an array and returns the new length of the array.
45
How do you break a string up into an array?
split( ) method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array.
46
Do string methods change the original string? How would you check if you weren't sure?
No. You can console.log or check MDN.
47
Is the return value of a function or method useful in every situation?
No, sometimes the return isn’t needed EX: push method returns the length but I didn’t need it for the exercise.
48
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
49
Give 6 examples of comparison operators.
```
=== strict equal to
!== strict not equal to
> greater than
< less than
>= greater than or equal to
<= less than or equal to
```
50
What data type do comparison expressions evaluate to?
booleans
51
What is the purpose of an 'if' statement?
the 'if' statment evaluates (or checks) a condition. if condition evaluates to 'true', any statements in the subsequent code block are executed.
52
Is 'else' required in order to use an 'if' statement?
No
53
Describe the syntax (structure) of an 'if' statement.
if (condition) {
code block
}
54
What are the three logical operators?
&& logical and
|| logical or
! logical not
55
How do you compare two different expressions in the same condition?
Use logical operator && or ||
56
What is the purpose of a loop?
To repeat an action / code.
57
What is the purpose of a condition expression in a loop?
An expression to be evaluated before each loop iteration. If this expression evaluates to true, statement is executed.
Determines when loop stops.
58
What does "iteration" mean in the context of loops?
Number of times the code loops.
59
When does the condition expression of a 'while' loop get evaluated?
Before each pass through the loop/iteration.
60
When does the initialization expression of a 'for' loop get evaluated?
Once before the loop begins / before anything else in the loop.
61
When does the condition expression of a 'for' loop get evaluated?
Before each loop iteration.
62
When does the final expression of a 'for' loop get evaluated?
End of each loop iteration / after the code block is run.
63
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
'break' statement
64
What does the ++ increment operator do?
increments (adds one to) its operand and returns a value
65
How do you iterate through the keys of an object?
for...in loop
66
What event is fired when a user places their cursor in a form control?
focus
67
What event is fired when a user's cursor leaves a form control?
blur
68
What event is fired as a user changes the value of a form control?
input
69
What event is fired when a user clicks the "submit" button within a 'form' element?
submit
70
What does the event.preventDefault() method do?
Default action should not be taken (checkbox won’t check); the action doesn’t happen; prevent default behavior that would have happened from that event
The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.
71
What does submitting a form without event.preventDefault() do?
Refreshes page and adds input data to URL
72
What property of a form element object contains all of the form's controls.
element property
73
What property of a form control object gets and sets its value?
value property
74
What is one risk of writing a lot of code without checking to see if it works so far?
Not knowing which step is failing or where the error is occurring.
75
What is an advantage of having your console open when writing a JavaScript program?
To test and check the code.
76
What is the affect of setting an element to 'display: none'?
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist; document flow). All descendant elements also have their display turned off.
77
What does the 'element.matches()' method take as an argument and what does it return?
Argument: string of 'css selector'
Return: a boolean value whether argument matches element
78
How can you retrieve the value of an element's attribute?
getAttribute() method
let attribute = element.getAttribute(attributeName);
79
At what steps of the solution would it be helpful to log things to the console?
Every step you write new code to do something.
| Every variable declaration, for loops, if statements.
80
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?
You would have to write an event listener for each tab/view element and query them.
81
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 have to write a separate conditional for each view element
82
What is JSON?
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.
Exists as a string
83
What are serialization and deserialization?
Converting a string to a native object is called deserialization, while converting a native object to a string so it can be transmitted across the network is called serialization.
84
Why are serialization and deserialization useful?
transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).
so we can store data; disc persistence
85
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify() method
86
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse() method
87
How to you store data in 'localStorage'?
.setItem() method
localStorage.setItem('key-name', 'key-value');
88
How to you retrieve data from 'localStorage'?
.getItem() method
localStorage.getItem('key-name');
89
What data type can 'localStorage' save in the browser?
string
90
When does the 'beforeunload' event fire on the 'window' object?
When the window, the document and its resources are about to be unloaded.
Before refresh or close window/tab
91
What is a method?
Function attached to a property of an object
92
How can you tell the difference between a method definition and a method call?
object.method() for called; function definition being assigned to a property in an object.
93
Describe method definition syntax (structure).
```
var object = {
propertyName: function (parameter) {
code-block;
}
};
```
94
Describe method call syntax (structure).
object.methodName( );
95
How is a method different from any other function?
Methods are attached to an object as a property.
Function attached to an object; accessing data stored in that object
96
What is the defining characteristic of Object-Oriented Programming?
Objects contain both data (as properties) and behavior (as methods).
Grouping data with behavior; pairs data with behavior, shared same space
97
What are the four "principles" of Object-Oriented Programming?
Abstraction, Encapsulation, Inheritance, Polymorphism
98
What is "abstraction"?
Being able to work with (possibly) complex things in simple ways.
Taking a complex process for simple use?
99
What does API stand for?
Application programming interface
100
What is the purpose of an API?
To give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
Taking a complex program and simplifying how to interact with it.
101
What is 'this' in JavaScript?
An implicit parameter of all JavaScript functions.
inside of ‘this’ is the current object; object left of the dot; object working inside of currently
102
What does it mean to say that 'this' is an "implicit parameter"?
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'.
103
When is the value of 'this' determined in a function; call time or definition time?
When the function is called.
104
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);
}
};"
```
Character variable/object
105
Given the above 'character' object, what is the result of the following code snippet? Why?
"character.greet();"
"It's-a-me, Mario!" Mario is the value of the firstName property of the character object.
'this' applies to left of ‘.’ which is the character object;
106
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!"
function definition is not attached to object; free floating function; there is nothing to the left of the dot of hello() because there is no dot; not attached to an object; object becomes window, but there is not firstName property of the window object.
107
How can you tell what the value of 'this' will be for a particular function or method definition?
You cannot determine until it gets called
108
How can you tell what the value of 'this' is for a particular function or method call?
Object left of dot, if no object it will be the global window
109
What kind of inheritance does the JavaScript programming language use?
prototype-based (or prototypal)
Behaviour reuse (known as inheritance) is performed via a process of reusing existing objects that serve as prototypes.
To move properties and methods that we'd like to reuse into a "prototype" object and then tell other objects to simply delegate (verb) to that "prototype" object when they aren't able to perform the required tasks themselves.
110
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.
111
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?
Methods are defined on a "prototype" object and arrays/strings/numbers simply borrow those methods when they're needed. ??
112
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
__proto__ object
113
What does the 'new' operator do?
1. Creates a blank, plain JavaScript object.
2. Adds a property to the new object (__proto__) that links to the constructor function's prototype object.
3. Binds the newly created object instance as the 'this' context (i.e. all references to 'this' in the constructor function now refer to the object created in the first step).
4. Returns 'this' if the function doesn't return an object.
114
What property of JavaScript functions can store shared behavior for instances created with 'new'?
prototype property
115
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.
116
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.
117
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() method sets a timer which executes a function or specified piece of code once the timer expires.
var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
118
How can you set up a function to be called repeatedly without using a loop?
setInterval() method repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
clearInterval() method cancels a timed, repeating action which was previously established by a call to setInterval(). (Stops repetition)
var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);
scope.clearInterval(intervalID)
119
What is the default time 'delay' if you omit the delay parameter from 'setTimeout()' or 'setInterval()'?
0 ms
120
What do 'setTimeout()' and 'setInterval()' return?
A positive numeric, non-zero value which identifies the timer created
121
What is AJAX?
A technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (or JSON).
122
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML.
123
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest (XHR)
124
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
125
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Same prototype property?? Prototype inheritance??
126
What is 'Array.prototype.filter' useful for?
Creating a new array with all elements that pass a test implemented by the provided function.
127
What is 'Array.prototype.map' useful for?
Creating a new array containing the transformed elements of another.
128
What is 'Array.prototype.reduce' useful for?
Combining the elements of an array into a single value.
129
What does 'fetch()' return?
a Promise object
A Promise that resolves to a Response object.
130
What is the default request method used by 'fetch()'?
GET
131
How do you specify the request method (GET, POST, etc.) when calling 'fetch'?
Passing the 'init' object with property 'method'
132
When does React call a component's 'componentDidMount' method?
Immediately after component is mounted (inserted into the tree).
133
Name three React.Component lifecycle methods.
Mounting: constructor(), render(), componentDidMount()
Updating: render(), componentDidUpdate()
Unmounting: componentWillUnmount()
134
How do you pass data to a child component?
As a prop
135
What must the return value of 'myFunction' be if the following expression is possible?
myFunction()();
The return of the function returned from myFunction??
136
What does this code do?
const wrap = value => () => value;
wrap function returns a function performing the code stated in the 'value' parameter of wrap??
137
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
When it is defined??
138
What allows JavaScript functions to "remember" values from their surroundings?
lexical scoping??
| lexical environment??
139
What is a closure?
A closure is the combination of a function and the lexical environment within which that function was declared.
```
function makeAdder(x) {
return function(y) {
return x + y;
};
}
```
```
var add5 = makeAdder(5);
var add10 = makeAdder(10);
```
console. log(add5(2)); // 7
console. log(add10(2)); // 12
add5 and add10 are both closures. They share the same function body definition, but store different lexical environments. In add5's lexical environment, x is 5, while in the lexical environment for add10, x is 10.
