JavaScript Flashcards
1
Q
What is the purpose of variables?
A
to store data that can later be used when called upon.
create permanence in data
2
Q
How do you declare a variable?
A
var variableName
3
Q
How do you initialize (assign a value to) a variable?
A
variableName = value;
4
Q
What characters are allowed in variable names?
A
letters
numbers (can’t start the variable name)
underscore
dollar sign
5
Q
What does it mean to say that variable names are “case sensitive”?
A
fullName and FullName are two different variables
6
Q
What is the purpose of a string?
A
used when working with any kind of text
a set of characters in a row that javascript won’t care about
7
Q
What is the purpose of a number?
A
mathematical operations
8
Q
What is the purpose of a boolean?
A
hold true/false data types
helpful when determining which part of a script should run
9
Q
What does the = operator mean in JavaScript?
A
assignment operator
stores value to a variable
10
Q
How do you update the value of a variable?
A
variableName = new value;
11
Q
What is the difference between null and undefined?
A
undefined is a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments. (automatic assignment from the browser)
null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. (null only exists because its been ASSIGNED–> purposeful)
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
So you know what data you’re looking at.
Sometimes, it’s helpful to put more than one console.log() in your code to help you debug.
13
Q
Give five examples of JavaScript primitives.
A
string
number
boolean
undefined
null
14
Q
What data type is returned by an arithmetic operation?
A
numbers
15
Q
What is string concatenation?
A
adding two strings together
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
addition
string concatenation
17
Q
What data type is returned by comparing two values (<, >, ===, etc)?
A
boolean
18
Q
What does the += “plus-equals” operator do?
A
The addition assignment operator (+=) 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
objects group together a set of variables and functions that are related to each other
20
Q
What are object properties?
A
variables that are part of objects. They tell us about the object
21
Q
Describe object literal notation.
A
you create an object by declaring the variable and assigning its properties and their corresponding values inside of curly brackets or instead use empty curly brackets and add properties later
ex)
var hotel = {
name: ‘Quay’,
rooms: 40,
booked: 25,
}
22
Q
How do you remove a property from an object?
A
delete object.property;
23
Q
What are the two ways to get or update the value of a property?
A
dot notation
object.propertyName = propertyValue;
square bracket notation
object[‘propertyName’] = propertyValue;
24
Q
What are arrays used for?
A
group similar data types together by storing values in a list
25
Describe array literal notation.
var arrayName = ['item 1', item2, 'item 3', 'item 4', item5];
26
How are arrays different from "plain" objects?
The key for each value is its index number (starting at 0)
Don't have individually named pieces of data, but rather are numerically indexed.
You can determine the number of items in an array (length) but not in a plain object.
Use a method (push) to add stuff to an array, use dot notation or bracket notation with assignment operator to add stuff to a plain object.
Arrays have an order, objects do not
27
What number represents the first index of an array?
0
28
What is the length property of an array?
arrayName.length
returns the number of items stored in the array
29
How do you calculate the last index of an array?
subtract the length of the array by 1
lastIndex = arrayName.length - 1;
30
What is a function in JavaScript?
a block of code that gives step by step instructions to accomplish a specific task
31
Describe the parts of a function definition.
// [1] [2] [3]
function example(parameter1, parameter2, parameter3, ...) { // [4]
// ...more JavaScript code...
// [5]
return;
} // [6]
1. The function keyword to begin the creation of a new function.
2. An optional name. (Our function's name is sayHello.)
3. A comma-separated list of zero or more parameters, surrounded by () parentheses. (Our sayHello function doesn't have any parameters.)
4. The start of the function's code block, as indicated by an { opening curly brace.
5. An optional return statement. (Our sayHello function doesn't have a return statement.)
The end of the function's code block, as indicated by a } closing curly brace.
32
Describe the parts of a function call.
// [1] [2]
example(arg1, arg2, arg3);
1. The function's name. Again, our function's name is sayHello.
2. A comma-separated list of zero or more arguments surrounded by () parentheses.
Our sayHello function does not take any arguments.
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
a function definition contains the steps on what to do with the data (function code block) (parameter)
the function call invokes the function and passes through the data that's to be worked on (argument)
34
What is the difference between a parameter and an argument?
parameter --> placeholder (function definition)
argument --> actual data (function call)
35
Why are function parameters useful?
give us the ability to have mutability in what occurs when we call a function (diff parameters allow for the return of different values)
36
What two effects does a return statement have on the behavior of a function?
1. Causes the function to produce a value we can use in our program.
2. Prevents any more code in the function's code block from being run.
37
What is a method?
A function that's assigned to the property of an object
38
Why do we log things to the console?
So we can check our code along the way to make sure it's doing what it's supposed to do. helps with debugging
39
What is a method?
A method is a function stored in the property of an object.
40
How is a method different from any other function?
located within an object
called with the object
41
How do you remove the last element from an array?
pop() method
array.pop()
42
How do you round a number down to the nearest integer?
math.floor()
43
How do you generate a random number?
math.random()
44
How do you delete an element from an array?
array.pop() removes last element from the array
array.shift() removes first element of the array
array.splice() removes indicated item(s) from the array
45
How do you append an element to an array?
array.push() appends an element to the end of the array
46
How do you break a string up into an array?
element.split()
47
Do string methods change the original string? How would you check if you weren't sure?
No, strings are immutable
Use console.log on the original variable
48
Roughly how many string methods are there according to the MDN Web docs?
50
49
Is the return value of a function or method useful in every situation?
no
50
Roughly how many array methods are there according to the MDN Web docs?
40
51
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
52
Give 6 examples of comparison operators.
=== strictly equals to
!== strictly is not equal to
> greater than
< less than
>= greater than or equal to
<= less than or equal to
53
What data type do comparison expressions evaluate to?
boolean (true / false)
54
What is the purpose of an if statement?
to set up a condition to compare to. If the condition evaluates to true, any statements in the subsequent code block are executed
55
Is else required in order to use an if statement?
nope
56
Describe the syntax (structure) of an if statement.
keyword + condition + opening curly brace + code to execute if value is true + closing curly brace
if (score >=50) { congratulate(); }
57
What are the three logical operators?
&& and
|| or
! not (inverts boolean value)
58
How do you compare two different expressions in the same condition?
Use the logical and operator (&&)
59
What is the purpose of a loop?
offer the ability to repeat functionality
60
What is the purpose of a condition expression in a loop?
Evaluate a condition to determine whether or not the loop should run
61
What does "iteration" mean in the context of loops?
one time that the loop code block gets run
62
When does the condition expression of a while loop get evaluated?
before each iteration of the code block executes
63
When does the initialization expression of a for loop get evaluated?
Before anything runs (just once)
64
When does the condition expression of a for loop get evaluated?
After initialization on the first iteration
before the loops code block and after the final expression
65
When does the final expression of a for loop get evaluated?
after the code block runs, before the next iteration
66
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
67
What does the ++ increment operator do?
adds one to the counter variable and saves it to that variable
68
What is a "model"?
A representation of something
a copy of the webpage loaded in the browser
69
Which "document" is being referred to in the phrase Document Object Model?
The HTML code / the webpage that's loaded in the browser
70
What is the word "object" referring to in the phrase Document Object Model?
The node objects within the HTML code/ webpage
71
What is a DOM Tree?
Is a kind of tree whose nodes represent an HTML document's contents.
All the necessary info to give the characteristics of a single element
72
Give two examples of document methods that retrieve a single element from the DOM.
document.querySelector()
document.getElementById()
73
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll()
74
Why might you want to assign the return value of a DOM query to a variable?
If your script needs to use the same element(s) more than once
75
What console method allows you to inspect the properties of a DOM element object?
console.dir()
76
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.
77
What does document.querySelector() take as its argument and what does it return?
Argument: A CSS selector as a string
Returns: the first matching element
78
What does document.querySelectorAll() take as its argument and what does it return?
Argument: a CSS Selector as a string
Returns: All matching elements in a node list
79
What are the different nodes of the DOM tree?
Document node
Element nodes (ex: h1, p, h2, li, etc)
Attribute nodes (part of the attribute node that carries them, not a child)
Text nodes (cannot have children)
80
What is the DOM?
A javascript object that's modeling the HTML documents objects
81
What is a node list
an array-like object that can't be changed/messed with
82
What is the purpose of events and event handling?
Events -- be aware when a certain action happens
event handling-- allows us as the developer to do something when the event happens.
interactivity
83
Are all possible parameters required to use a JavaScript method or function?
no
84
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener()
85
What is a callback function?
A function passed as an argument to another function
86
What object is passed into an event listener callback when the event fires?
the event object -
87
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The place where the event originated from.
console.log(object.event) + check the MDN.
88
What is the difference between these two snippets of code?
1. element.addEventListener('click', handleClick)
2. element.addEventListener('click', handleClick())
1. Calls the function when the click event happens
2. The function will be called when the code is run (probably when the page loads)
89
Do event handler functions return a value?
No
90
What is the className property of element objects?
Contains the current value of the class attribute on that element
91
How do you update the CSS class attribute of an element using JavaScript?
Use the className property to assign a new class to the element object you want to change
elementObject.className = newClass
92
What is the textContent property of element objects?
A property that contains the text content of a DOM element
93
Is the event parameter of an event listener callback always useful?
No
94
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
more difficult
95
Why is storing information about a program in variables better than only storing it in the DOM?
You want the data readily accessible in the language you're writing
96
How do you update the text within an element using JavaScript?
Use the textContent property to assign a new class to the element object you want to change
elementObject.textContent = newText
97
What event is fired when a user places their cursor in a form control?
focus function
focus ()
98
What event is fired when a user's cursor leaves a form control?
Blur function
blur()
99
What event is fired as a user changes the value of a form control?
input
100
What event is fired when a user clicks the "submit" button within a ?
submit
101
What does the event.preventDefault() method do?
Prevents the default for any event that would've been take
(Default event = what the browser is preconfigured to do)
102
What property of a form element object contains all of the form's controls.
elements
document.forms.elements
103
What property of a form control object gets and sets its value?
value
document.forms.elements.value
104
What is one risk of writing a lot of code without checking to see if it works so far?
If you run into an error, it's hard to identify where that error originated
105
What does submitting a form without event.preventDefault() do?
It reloads the page and sends the information back to the page, which is useless (because we don't specify an action in the HTML code).
So, we always use event.preventDefault() with submitting forms
106
Does the document.createElement() method insert a new element into the page?
Nope.
107
How do you add an element as a child to another element?
appendChild method
parent.appendChild(child)
108
What do you pass as the arguments to the element.setAttribute() method?
the attribute type and value as strings or variables
ex) setAttribute(name, value)
109
What steps do you need to take in order to insert a new element into the page?
1. Create the element
2. Configure the element
3. Append the element to the page at the parent node (the parent node needs to be queried first)
110
What is the textContent property of an element object for?
To add text content to the element that you're creating
111
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
1. You can reuse it in multiple places
2. You can use it with different sets of data
112
Name two ways to set the class attribute of a DOM element.
1. setAttribute ('class', value)
2. setClassName()
113
What is the event.target?
A property on the event object that stores a reference to the DOM element that the event fired on
114
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
115
What DOM element property tells you what type of element it is?
tagName
For example, if the element is an ![]()
, its tagName property is "IMG"
For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form. For example, tagName called on a
element returns "DIV".
116
What does the element.closest() method take as its argument and what does it return?
The argument is the CSS selector
The closest ancestor element
(opposite of query selector)
117
How can you remove an element from the DOM?
Call the remove method on the object of the Dom element that you want to remove
element.remove()
118
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?
Add it to the parent
119
What is the affect of setting an element to display: none?
It's hidden from view / removed from the document flow
120
What does the element.matches() method take as an argument and what does it return?
argument: A css selector as a string
returns: boolean
121
How can you retrieve the value of an element's attribute?
getAttribute() method
argument is a string of the type of attribute we want to retrieve
122
At what steps of the solution would it be helpful to log things to the console?
Every step where your code is doing something/making a change
123
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?
Use individual event listeners for each tab
124
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?
A lot of if statements
125
What is JSON?
Javascript Object notation
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.
JSON is an extremely common data interchange format used to send and store information in computer systems.
126
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a string representation so that it can be stored in memory. All of the data is one contiguous stream (stream of bytes)
Deserialization is the reverse process: turning a stream of bytes into an object in memory. Bringing back the complexity of how the data is stored
127
Why are serialization and deserialization useful?
Let's you move data from one place to another (storing and transmitting data)
Deserialized data is easy to work with
128
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify (data)
129
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse(data)
130
How do you store data in localStorage?
localStorage.setItem(keyName, keyValue)
131
How do you retrieve data from localStorage?
localStorage.getItem(KeyName)
132
How do you retrieve data from localStorage?
strings
133
When does the 'beforeunload' event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.
134
What is a method?
A method is a function which is a property of an object.
135
How can you tell the difference between a method definition and a method call?
Method definition has a function code block and is assigned to a property (:), the function keyword
Method call passes the arguments.
object.method (argument(s))
136
Describe method definition syntax (structure).
object {
method: function() {
code block}
object
method name
function keyword and optional name (most often anonymous)
parameters, if there are any
function code block
137
Describe method call syntax (structure).
// [1] [2] [3]
object.method(arg1, arg2, arg3);
1. The object
2. The method's name.
2. A comma-separated list of zero or more arguments surrounded by () parentheses.
138
How is a method different from any other function?
It's the property of an object
139
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods).
140
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
141
What does API stand for?
application programming interface (API)
142
What is the purpose of an API?
The purpose of every software API is to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
143
What is "abstraction"?
Being able to work with (possibly) complex things in simple ways.
144
What is this in JavaScript?
This is an implicit parameter whose value is determined when the function is called, not when it is defined.
145
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.
It's a value that's given to each function--it's' always present
146
When is the value of this determined in a function; call time or definition time?
Call time
147
What does this refer to in the following code snippet?
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
nothing (the function hasn't been called yet)
148
Given the below character object, what is the result of the following code snippet? Why?
character.greet();
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
It's a-me, Mario!
this refers to the character object. character.firstName = Mario
149
Given the below character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
It's a-me, undefined!
this is referring to the default Window object. window doesn't have a property named firstName
150
How can you tell what the value of this will be for a particular function or method definition?
We wouldn't know because it's value is assigned upon function call
Parameters are placeholders for future values
151
How can you tell what the value of this is for a particular function or method call?
Whatever is to the left of the dot
152
What kind of inheritance does the JavaScript programming language use?
prototype-based (or prototypal) inheritance. -- JavaScript objects give certain behaviors (methods) or data (properties) to other objects.
153
What is a prototype in JavaScript?
Simply an object that contains properties and (predominantly) methods that can be used by other objects.
154
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?
prototypal inheritance
155
If an object does not have its own property or method by a given key, where does JavaScript look for it?
on its prototype
156
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.
1. Makes an empty object
2. Takes the prototype property from the function and adds it to the new property
3. Runs the function block and makes the value of that new object the value of this
4. It returns the object if no other return is specified
157
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
158
What does the instanceof operator do?
The instanceof operator tests the presence of constructor.prototype in object's prototype chain. This usually means object was constructed with constructor.
obj instanceof class/constructor function
159
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.
160
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()
161
How can you set up a function to be called repeatedly without using a loop?
setInterval()
162
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 - gets put in the queue immediately
163
What do setTimeout() and setInterval() return?
timeout id and Interval id, respectively
164
What is AJAX?
A technique for loading data into part of a page without having to refresh the entire page.
165
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
166
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest (xhr)
167
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
168
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They are objects that can receive events
They share a prototype
169
What is a code block? What are some examples of a code block?
A group of statements of code to be executed together. Usually contained within curly braces
function code block
conditional (if statement) code block
loop code block
170
What does block scope mean?
the value of the variable is dependent/available based on the block of code its located within.
A block scoped variable means that the variable defined within a block will not be accessible from outside the block. A block can reside inside a function, and a block scoped variable will not be available outside the block even if the block is inside a function.
171
What is the scope of a variable declared with const or let?
block-scope
172
What is the difference between let and const?
block-scoped variables declared by the const keyword can’t be reassigned. read-only reference
The variables declared by the let keyword are mutable. It means that you can change their values anytime you want
173
Why is it possible to .push() a new value into a const variable that points to an Array?
The actual value to which the const variable reference is mutable.
174
How should you decide on which type of declaration to use?
If the variable is being reassigned, use let. If it's not, use const
175
What is the syntax for writing a template literal?
you create a template literal by wrapping your text in backticks (`)
let simple = `This is a template literal`;
176
What is "string interpolation"?
Embedding variables and expressions in a string. The JavaScript engine will automatically replace these variables and expressions with their values.
${variable_name}
177
What is destructuring, conceptually?
Taking property values or array objects and taking them from their respective objects and arrays and assigning them to a variable
178
What is the syntax for Object destructuring?
let { property1: variable1, property2: variable2 } = object;
If the variables have the same names as the properties of the object, you can make the code more concise as follows:
let { firstName, lastName } = person;
179
What is the syntax for Array destructuring?
const [first, second, third ] = theArray
180
How can you tell the difference between destructuring and creating Object/Array literals?
Look at what's on the left and right of the assigment operator
if the variable name that holds the object or array is on the right, it's destructuring. If it's on the left, its creating
181
What is the syntax for defining an arrow function?
(param 1, param2) => { statements }
don't need the brackets if the codeblock is multiline
if it's multiline, a return statement is required
param => expression;
() => exp;
182
When an arrow function's body is left without curly braces, what changes in its functionality?
The function body gets evaluated as an expression and the result of the expression is implicitly returned
183
How is the value of this determined within an arrow function?
Arrow functions have lexical this, meaning the value of this is determined by the surrounding scope (the lexical environment).
184
What are the three states a Promise can be in?
Pending, fulfilled, rejected
can't change state once it's fulfilled or rejected
185
How do you handle the fulfillment of a Promise?
then () method
pass a callback function that handles the successful promise
186
How do you handle the rejection of a Promise?
catch()
187
What is Array.prototype.filter useful for?
to extract certain kinds of data form a list
188
What is Array.prototype.map useful for?
Creates a new array populated with the results of calling a provided function on every element in the calling array.
189
What is Array.prototype.reduce useful for?
executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
JS general purpose aggregate function
190
What is "syntactic sugar"?
syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.
Syntactic sugar is usually a shorthand for a common operation that could also be expressed in an alternate, more verbose, form:
191
What is the typeof an ES6 class?
function
192
Describe ES6 class syntax.
class keyword Person {
constructor (param1, param2, ....rest) {
this.something= 'a thing'
}
another method ()
return value
}
}
193
What is "refactoring"?
The process of restructuring existing computer code—changing the factoring—without changing its external behavior. Refactoring is intended to improve the design, structure, and/or implementation of the software (its non-functional attributes), while preserving its functionality.
194
How are ES Modules different from CommonJS modules?
CommonJS Modules:
The dominant implementation of this standard is in Node.js (Node.js modules
have a few features that go beyond CommonJS). Characteristics:
Compact syntax
Designed for synchronous loading
Main use: server
Asynchronous Module Definition (AMD):
The most popular implementation of this standard is RequireJS.
Characteristics:
Slightly more complicated syntax, enabling AMD to work without eval()
(or a compilation step).
Designed for asynchronous loading
Main use: browsers
195
What kind of modules can Webpack support?
ECMA Script Modules, Common Modules, and AMD modules
196
What is the purpose of state in React?
Keep track of values that change over time
Think of it as a data model for a component
197
How to you pass an event handler to a React element?
provide a listener when the element is initially rendered.
