Javascript Flashcards
1
Q
What is the purpose of variables?
A
to store data/information
2
Q
How do you declare a variable?
A
with a variable’s keyword and a variable name (ex. var fullName)
3
Q
How do you initialize (assign a value to) a variable?
A
by giving the variable a value using an assignment operator (usually =)
4
Q
What characters are allowed in variable names?
A
Variable names cannot contain space
names must begin with a letter, underscore, or dollar sign
variable names can only contain letters, numbers, underscores, or dollar signs
variable names are case sensitive
5
Q
What does it mean to say that variable names are case sensitive?
A
variables can store different values if using different casing even with the same word(s).
6
Q
What is the purpose of a string?
A
store text data
7
Q
What is the purpose of a number?
A
store numeric data
8
Q
What is the purpose of a boolean?
A
act as an on/off switch to determine whether a script should run
aka makes decisions
9
Q
What does the “=” operator mean in Javascript?
A
assignment operator
assigns a value to a variable
10
Q
How do you update the value of a variable?
A
variableName = new value
you don’t need the variable keyword.
11
Q
What is the difference between “null” and “undefined”?
A
undefined is the computer saying “nothing”
null is the programmer/human saying “nothing”
vacant lot versus parking lot
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
provides clarity to other programmers as to where the values are coming from
good reminder for yourself as well
13
Q
Give 7 examples of javascript primitives:
A
strings numbers booleans null undefined bigint symbols
14
Q
What data type is returned by an arithmetic operation?
A
numeric
15
Q
What is string concatenation?
A
combining two or more strings together to make a new longer string
strings are immutable
16
Q
What purpose(s) does the “+” operator serve in Javascript?
A
concatenate strings
add numbers together
17
Q
What data type is returned by comparing two values (, ===, etc)?
A
boolean
18
Q
what does the += operator do?
A
variable = variable + value
19
Q
What are objects used for?
A
Helps us to store and collect data in pairs or groupings.
20
Q
What are object properties?
A
key:value pairs
21
Q
Describe object literal notation:
A
{}
22
Q
How do you remove a property from an object?
A
use the delete keyword
delete object.property;
23
Q
What are the two ways to get or update the value of a property of an object?
A
Dot notation object.property = “new value”;
Square bracket notation object[“property”] = “new value”
24
Q
What are arrays used for?
A
storing list data
25
Describe array literal notation:
[ ]
26
How are arrays different from 'plain' objects?
arrays don't have individually named indexes, only numeric indexes.
arrays have a property length that is constantly changing based on the number of values in an array
changing data in arrays is different than objects due to the multiple methods/functions we are able to use.
27
What number represents the first index of an array?
0
28
What is the length property of an array?
It stores the total number values in an array.
29
How do you calculate the last index of an array?
array.length - 1
30
what is a function in javascript?
a set of code that performs a task and is reusable.
31
Describe the parts of a function definition:
1. keyword function
2. name (optional)
3. a comma separated list of parameters (optional), between ( )
4. { indicating start of code block
5. return statement (optional)
6. } end of the code block for the function
32
Describe the parts of a function call:
1. functions name
| 2. comma separated list of arguments (optional) inside ( ).
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
In a function call there is no code block or function keyword. There is also no return statement in a function call.
functionName( ); is a function call
34
What is the difference between a parameter and an argument?
we declare parameters
we pass arguments
parameters are essentially placeholders for arguments
35
Why are function parameters useful?
We can vary the results of the function by using parameters. Without parameters the function will return the same result each time it is called.
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
Why do we log things to the console?
to check to see if our output is correct. It is a debugging tool.
It is also a way to inspect our variables
38
What is a method?
A method is a function, which is technically a property of an object.
39
How is a method different from any other function?
a function can be called directly by its name
a method consists of a code that can be called by the name of its object and its method name using dot notation or square bracket notation
40
How do you remove the last element of an array?
the pop( ) method allows you to remove the last element from an array and returns that element
41
How do you round a number down to the nearest integer?
Math.floor( ) function returns the largest integer less than or equal to a given number.
42
How do you generate a random number?
Math.random( ) function returns a floating-point, pseudo-random number in the range between 0 to less than 1. (it can be 0 but it can't be 1)
43
How do you delete an element from an array?
The splice ( ) method changes the contents of an array by removing or replacing existing elements.
arr.splice(0, 1, 'feb')
in the example above, we remove 1 index starting at the 0 index and replace it with the string 'feb'.
44
How do you append an element to an array?
You can use the push ( ) method.
| Append = add to the end
45
How do you break a string up into an array?
The split ( ) method divides a string into an ordered list of substrings and puts the substrings into an array, and returns the array
var.split(' ');
46
Do string methods change the original string? How would you check?
strings are immutable so you cannot modify the original string
inspect your values to see if it has changed
47
How many string methods are there roughly according to MDN?
45-50
48
Is the return value of a function or method useful in every situation?
No, a good example would be the push ( ) method as it returns the new length of the array. Not always is that useful information.
49
Roughly how many array methods are there according to MDN?
35 ish
50
Give 6 examples of comparison operators:
```
><
===
!==
>=
<=
```
51
What data type do comparison expressions evaluate to?
Boolean
52
What is the purpose of an if statement?
to help make decisions when conditions are either met or not met
53
Is else required to use an if statement?
no
54
Describe the syntax structure of an if statement:
if (condition) {
statement1
}
```
condition = an expression that is considered to either be truthy or falsy
statement1 = statement that is executed if the condition is truthy
```
can have more than one statement
55
What are three logical operators?
```
logical AND (&&)
logical OR (||)
logical NOT (!)
```
56
How do you compare two different expressions in the same condition?
Using the logical AND or OR operators
57
What is the purpose of a loop?
it is a way to repeat something more than once without having to type it out again and again
58
What is the purpose of the condition expression in a loop?
it tells the loop when to stop when the condition is no longer true
59
What does iteration mean in the context of loops?
each iteration is a single time that the code block runs
60
When does the condition expression of the while loop get evaluated?
before each iteration to decide whether the loop should run again
61
When does the initialization expression of the for loop get evaluated?
at the beginning of the first iteration and not after. first step in the loop.
62
When does the condition expression of a for loop get evaluated?
before each iteration of the loop and after the initialization is evaluated
63
When does the final expression of a for loop get executed?
after the code block runs and before the condition for the next iteration is evaluated
64
Besides a return statement, which keyword exits a loop before its condition evaluates to false?
break statement
65
What does the ++ increment operator do?
adds one to its operand and returns a value
66
How do we iterate through the keys of an object?
use a for in loop
67
What is a "model"?
a replica of something
68
Which "document" is being referred to in the phrase Document Object Model?
the html document
69
What is the word "object" referring to in the phrase Document Object Model?
the data type object in javascript
javascript object that is modeling the html document
the DOM is not literally the html doc
70
What is the DOM tree?
a relationship tree of a parent element (node) and all of it child nodes and content within
71
Give 2 examples of document methods that retrieve a single element from the dom:
getElementById
| querySelector
72
Give 1 example of a document method that retrieves multiple elements from the DOM at once:
querySelectorAll
73
Why might you want to assign the return value of a DOM query to a variable?
so you can access the value quickly later on if needed
74
What console method allows you to inspect the properties of a DOM element object?
console.dir() method
75
Why would the script tag need to be placed at the bottom of the HTML content instead of the top?
So we can let the html document load first
the elements need to exist before we apply and JS code to the content
76
What does document.querySelector() take as its argument and what does it return?
a css selector and returns only the first of the matching elements
77
What does document.querySelectorAll() take as its argument and what does it return?
a css selector in string form and returns a node list of all elements with the CSS selector that matches
78
Why do people use the "$" in javascript variables with DOM?
It is not a rule but is common to store dom values with a $ at the beginning of the variable.
79
What is the purpose of events and event handling?
to update the webpage and help the web page feel more interactive for the user
80
Are all possible parameters required to use a Javascript method or function?
no, depends on what you are trying to accomplish
81
What method of element objects let you set up a function to be called when a specific type of event occurs?
addEventListener( )
82
What is 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
83
What object is passed into an event listener callback when the event fires?
the event object with numerous properties and values describing the event that took place.
84
What is the "event.target"? If you weren't sure, how would you check? Where could you get more information about it?
MDN for source
| the target property is a property of the event object that points towards where the event took place
85
What is the difference between:
element.addEventListener('click', handleclick)
and
element.addEventListener('click', handleclick( ))
The second one would execute the function as the page loads rather than when the event fires.
the first's function will fire only when the event occurs
86
What is the className property of element objects?
the className property of the element interface gets and sets the value of the class attribute of the specified element.
87
How do you update the CSS class attribute of an element using Javascript?
using the dom queried element and the className property
$variable.className = 'new-value'
88
What is the textContent property of element objects?
represents the text content of the node and its descendants
89
How do you update the text within an element using Javascript?
using the dom queried element and the textContent property
$variable.textContent = 'new-value'
90
Is the event parameter of an event listener callback always useful?
no, but you do need to use the event parameter so that you know you don't need the developer to call the function.
91
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
more complicated.
| Try not to store data on the dom elements and instead in a javascript variable
92
Why is storing information about a program in variables better than only storing it in the DOM?
It is easier and more efficient to use javascript to store data
93
What event is fired when a user places their cursor in a form control?
focus
94
What event is fired when a user's cursor leaves a form control?
blur
95
What event is fired when a user changes the value of a form control?
input
96
What event is fired when a user clicks the "submit" button within a form?
submit
97
What does the event.preventDefault() method do?
prevents the default event from occurring, which can change from event to event
98
What property of a form element object contains all of the form's controls?
the "elements" property
99
What property of a form control object gets and sets its value?
value property (used .value)
100
What is one risk of writing a lot of code without checking to see if it works so far?
Spend more time writing code that doesn't work and is now more confusing to know where your bug(s) may be.
101
What is an advantage of having your console open when writing a javascript program?
able to check your work and debug as you go
102
does the document.createElement() method insert a new element into the page?
no
103
How do you add an element as a child to another element?
Use the appendChild( ) method
| anotherElement.appendChild(currentElement)
104
What do you pass as the arguments to the element.setAttribute( ) method?
the first argument is the javascript string of the name of the attribute
the second is the javascript string value of the attribute
105
What steps do you need to take in order to insert a new element into the page?
create the new element and store it in a variable
create a text node and store it in a variable
attach the new text node to the new element
select the parent element from the DOM with querySelector()
insert the new element into its position (parent.appendChild(newElement)
106
What is the textContent property of an element object for?
allows programmers to access the text within an element to see it or modify the text content.
107
Name two ways to set the class attribute of a DOM element:
element. className
| element. setAttribute('class', 'value')
108
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
it is easier to test
| re-use the code more easily
109
What is the event.target?
is a reference to the object onto which the event was dispatched.
110
Why is it possible to listen for events on one element that actually happen to its descendent elements?
Due to event flow
| Event bubbling is the most widely accepted event flow and it goes from most specific node outwards
111
What DOM element property tells you what type of element it is?
tagName property
112
What does element.closest() take as its argument?
| What does it return?
string version of a CSS selector that identifies the element
| returns the closest ancestor of the selected element
113
How can you remove an element from the DOM?
element.remove( ) method
114
If you wanted to insert aa new clickable DOM element into the page using Javascript, how could you avoid adding an event listener to every new element individually?
use an event listener on the parent element
115
What is the event.target?
the element that triggered the event
116
What is the affect of setting an element to display: none?
No longer visible and is removed from the document flow
117
What does the element.matches( ) method take as its argument and what does it return?
CSS selector
| boolean value saying whether or not the element "is" the selector
118
How can you retrieve the value of an element's attribute?
element.getAttribute('name of attr')
119
At what steps of the solution would it be helpful to log things to the console?
all steps of the solution
120
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 event handler functions for each individual tabs
121
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?
We would have to add a new if statement for every new tab.
122
How do you store data in local storage?
using localStorage.setItem('keyname', 'keyvalue')
123
How do you retrieve data from localStorage?
localStorage.getItem('keyname')
124
What data type can localStorage save in the browser?
string only
Which is why JSON is important
125
When does 'beforeunload' event fire on the window object?
the event is fired when the window, the document, and its resources are about to be unloaded (close the web page or refresh the web page).
The document is still visible and the event is still cancelable at this point.
126
What is a method?
Is a function, which is a property of an object.
127
How can you tell the difference between method definition and method call?
Definition:
function assigned to property
function keyword
code block
Method Call:
dot notation
arguments
128
Method definition syntax structure:
methodName: function ( ) {
code block
}
129
method call syntax:
object.method(arguments)
130
How is a method different from any other function?
You cannot call a method function without the object it is part of using dot notation.
functions can be called by just using the function name.
131
What is the defining characteristic of Object Oriented Programming (OOP)?
objects can contain both data (as properties) and behavior (as methods).
132
What are the 4 principles of Object Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
133
What is abstraction?
Being able to work with complex things in simple ways.
example = light switch, simple action with complex process
Knowing what something does without knowing how it does it.
134
What does API stand for?
Application Programming Interface
135
What is the purpose of an API?
an API acts to connect computers or pieces of software to each other.
It is essentially software abstraction
136
What is 'this' in JS?
reference to an object that the behavior being executed is within
137
What does it mean to say that 'this' is an "implicit parameter"?
this is available in a function's code block even though it was never included in the function's parameter list or declared with var.
138
When is the value of 'this' determined in a function? Call time or definition time?
Call time
139
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, because character.greet( ) has not been called yet
140
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
This = character object
Why? Because the method was called and so the code will be executed.
141
Given the above character object, what is the result of the following code snippet? Why?
```
var hello = character.greet;
hello();
```
hello has now been assigned the value of the greet method of the character object.
this will be undefined and return: It's a me, undefined.
a variable is actually a property of the window. window.hello( )
window doesn't have a firstName property so the value will be undefined
142
How can you tell what the value of 'this' is for a particular function or method call?
The value of 'this' is whatever is on the left side of the dot
object.method( )
143
What kind of inheritance does the JS programming language use?
Prototype-based inheritance
style of OOP in which behavior reuse is performed via a process of reusing existing objects that serve as prototypes
JS objects give certain behaviors (methods) and/or data (properties) to other objects
144
What is a prototype in JS?
an original object on which other objects are patterned
145
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?
thanks to the prototype!
146
If an object does not have it's own property or method by a given key, where does JS look for it?
On the prototype object
147
What does the 'new' operator do?
creates an instance of an object that has a constructor function.
148
What property of a Javascript function can store shared behavior for instances created with new?
prototype
149
What does '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. Then it returns a boolean value.
150
What steps are executed when using the 'new' keyword?
1. Creates a blank, plain JS 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 (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
151
What is a 'callback' function?
It is a function that passes another function as an argument
152
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JS function until some point in the future?
setTimeout ( ) function
| setInterval ( ) function
153
How can you set up a function to be called repeatedly without using a loop?
setInterval( ) function
154
What is the default time delay if you omit the delay parameter from either setTimeout or setInterval methods?
0, it executes immediately
155
What do setTimeout () and setInterval () return?
timeoutID
intervalID
156
What is AJAX?
Ajax is a technique used for loading data into part of a page without having to refresh the entire page. It loads data asynchronously.
Data is often sent in the JSON format.
157
What does AJAX stand for?
Asynchronous Javascript And XML
However, it is now used to refer to a group of technologies that offer asynchronous functionality in the browser.
158
Which object is built into the browser for making HTTP requests in JS?
XMLHttpRequest
159
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
160
An XMLHttpRequest object has an addEventListener( ) method just like DOM elements.
How is it possible that they both share this functionality?
prototype inheritance
Both have the same prototype object
161
What is a code block? What are some examples of code block?
the block is delimited by a pair of curly braces
a structure of source code that is grouped together
Blocks consist of one or more declarations and statements
162
What does the block scope mean?
It means variables introduced within a block are scoped to the containing function or script. They don't persist beyond the block itself.
163
What is the scope of a variable declared with const or let?
Block-scope instead of global or function-scope
164
What is the difference between const and let?
const variables CANNOT be reassigned or redeclared.
Must initialize a const variable at the same time as when it is declared.
165
Why is it possible to .push( ) a new value into a const variable that points to an array?
due to the fact that the actual value to which the const variable is referencing is not immutable.
we can use a method to change the value of the array, however, we cannot change the value like this:
colors = ['red', 'green']
we can use:
colors.push('green')
166
How should you decide on which type of declaration to use?
use const unless you can't (prefer const)
simple code doesn't use reassignment.
Reassignment can make code difficult to understand
167
What is the syntax for writing a template literal?
`string` -----> those are called backticks
168
What is "string interpolation"?
substituting part of the string in a template literal for values of variables or expressions.
To instruct JS to substitute a variable or expression use: ${variable}
169
What is destructuring? (conceptually)
Extracting data from arrays, objects, and maps and setting them into their own variables.
170
What is the syntax for Object destructuring?
let or const {property1: variable1, property2: variable2} = object;
if the variables have the same names as the properties you can simplify this further
let {firstName, lastName} = person
171
What is the syntax for Array destructuring?
let/const [x, y] = arrayName
| comma separated list of elements
172
How can you tell the difference between destructuring and creating Object/Array literals?
curly braces or square brackets will be on the left side of the assignment operator instead of the right side when destructuring
173
What is the syntax for defining an arrow function?
(parameter(s)) => either a return expression or a code block
parameters are optional
1 parameter doesn't require parentheses
2 or 0 parameters require curly braces
if curly brace are used in the code block then you need to use a return statement as well
174
When an arrow function's body is left without curly braces, what changes in its functionality?
You don't have to use return in order to return the result of the expression
With curly braces you need to use a return statement.
175
How is the value of "this" determined within an arrow function?
Arrow functions capture the "this" value of the enclosing context instead of creating its own "this" context
Kind if like inheriting it
176
When is the value of "this" determined with an arrow function?
When the arrow function is defined instead of when it is being called.
177
What is a promise?
The "promise" object represents the eventual completion (or failure) of an asynchronous operation and its resulting value
178
What are the three states a Promise can be in?
1. pending = initial state, neither fulfilled or rejected
2. fulfilled = meaning that the operation was completed successfully
3. rejected = meaning the operation failed
179
How do you handle the fulfillment of a Promise?
Promise.prototype.then( )
180
How do you handle the rejection of a Promise?
Promise.prototype.catch ( )
181
What is Array.prototype.filter useful for?
creating a new array of values that pass some condition/test from an old array
182
What is Array.prototype.map useful for?
create a new array from transforming the original array
183
What is Array.prototype.reduce useful for?
Get a single value from a group of data
184
What is 'syntactic sugar'?
syntax that is designed to make things easier to read or to express.
185
What is the typeof an ES6 class?
function
186
Describe ES6 class syntax:
class className { }
187
What is refactoring?
process of restructuring existing computer code without changing its external behavior (preserve functionality).
188
do class functions have code blocks?
No, they have class bodies
189
How are ES modules different from CommonJS modules?
ES is part of the JS language officially and CommonJS is not
- require will not work in the browser
use import instead of require
use export instead of export.module
190
What kind of modules can Webpack support?
ECMAScript modules
CommonJS modules
AMD modules
191
What is a JavaScript closure?
it is a combination of a function bundled together (enclosed) with references to its surrounding state (lexical environment).
A closure gives you access to an outer function's scope from an inner function.
192
What must the return value of myFunction be if the following expression is possible?
myFunction()();
function
193
```
What does this code do?
const wrap = value => () => value;
```
returns a function
194
In JS, when is a function's scope determined? When it is called or at definition?
when it is defined
195
What allows JS functions to "remember" values from their surroundings?
closures
196
Create a random number between 0 and 100:
const randomNum = Math.floor(Math.random() * 100)
197
Create a random number between 2 and 10, including 2 and 10
```
const randomNum = Math.Floor(Math.random() * (10 - 2 + 1)) + 2
const randomNum = Math.Floor(Math.random() * (max - min + 1)) + min
```
198
sort an array of numbers from smallest to largest
```
const sortedArr = array.sort(function (a, b) {
return a - b})
```
