JavaScript Flashcards
1
Q
What is the purpose of variables?
A
Store information for the script to its job.
2
Q
How do you declare a variable?
A
First use the variable keyword, then the variable name.
3
Q
How do you initialize (assign a value to) a variable?
A
After the variable name use the equal sign or assignment operator then the variable value.
4
Q
What characters are allowed in variable names?
A
letters, underscore, dollar sign, numbers.
5
Q
What does it mean to say that variable names are “case sensitive”?
A
The language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
6
Q
What is the purpose of a string?
A
Working with any kind of text. Represent and manipulate a sequence of characters.
7
Q
What is the purpose of a number?
A
Working with numeric data.
8
Q
What is the purpose of a boolean?
A
Create true or false statements. Determine which part of a script should run.
9
Q
What does the = operator mean in JavaScript?
A
Is an assignment operator. Is used to give the value to a variable.
10
Q
How do you update the value of a variable?
A
Just use the variable name, the equals sign and the new value.
11
Q
What is the difference between null and undefined?
A
Undefinided is a variable has been declared but has not been assigned a value. Null is an assignment value. It can be assigned to a variable as a representation of no value.
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
Is good to avoid confusions between similar values.
13
Q
Give five examples of JavaScript primitives.
A
String, number, boolean, null, undefined.
14
Q
What data type is returned by an arithmetic operation?
A
Numerical value.
15
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
The addition operator ( + ) produces the sum of numeric operands or string concatenation
16
Q
What data type is returned by comparing two values (<, >, ===, etc)?
A
A boolean value (true or false).
17
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.
18
Q
What is string concatenation?
A
Join two or more strings values into one value.
19
Q
What are object properties?
A
An association between a name (or key) and a value
20
Q
Describe object literal notation.
A
Value pairs, with a colon separating the keys and values, and a comma after every key:value pair, except for the last one
21
Q
How do you remove a property from an object?
A
Using the delete operator.
22
Q
What are the two ways to get or update the value of a property?
A
With a dot and with brackets.
23
Q
What are objects used for?
A
For store data as properties (key-value pairs).
24
Q
What are arrays used for?
A
Used to store values that are related to each other.
25
Describe array literal notation.
a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ( [] )
26
What number represents the first index of an array?
zero.
27
What is the length property of an array?
size of the array or the total number of elements present in the array.
28
How do you calculate the last index of an array?
Get the last element of ArrayList with use of get(index) method by passing index = size – 1.
29
How are arrays different from "plain" objects?
Arrays are used when we store multiple values of a single variable, while an object can contain multiple variables or properties with their values.
30
What is a function in JavaScript?
A JavaScript function is a block of code designed to perform a particular task.
31
Describe the parts of a function definition.
1. - Function keyword
2. - Optional name.
3. - Parameters separated by a comma.
4. - Opening curly brace { for the code block.
5. - Optional return.
7. -Closing curly brace} for the code block
32
Describe the parts of a function call.
The function's name. A comma separated the arguments surrounded by parentheses.
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
Define a function doesn't cause the code block run because is just an object. Call an object does the code block run.
34
What is the difference between a parameter and an argument?
parameters are the name within the function definition.
Arguments are the values passed in when the function is called.
35
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. - Used to stop the function.
36
Why are function parameters useful?
They received the arguments that are passed when the function is called.
37
What are the four components of "the Cascade".
1. - Source order
2. - Inheritance
3. - Specificity
4. - !important
38
Why do we log things to the console?
to verify that what we are doing is correct
39
What is a method?
Is statement or code block that performs a specific task.
40
How is a method different from any other function?
Method is function that belongs to an object while function not.
41
How do you remove the last element from an array?
With pop method
42
How do you round a number down to the nearest integer?
Math.floor method
43
How do you generate a random number?
Random method
44
How do you delete an element from an array?
splice method
45
How do you append an element to an array?
Push method
46
How do you break a string up into an array?
split method
47
Do string methods change the original string? How would you check if you weren't sure?
No, we can console.log the original variable
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.
strictly equal(===), not equal to (!=), not strict equal to(!==), greater than (>), less than(<), greater or equal than (>=), less or equal than (<=).
50
What data type do comparison expressions evaluate to?
Boolean values
51
Is else required in order to use an if statement?
No
52
What are the three logical operators?
logical and(&&), logical or (| |), logical not (!)
53
Syntax of an if statement
if keyword, condition, opening curly brace, code to execute if value is true, closing curly bracket
54
What is the purpose of a loop?
repeat the same, or similar, code a number of times. Simplify work.
55
What is the purpose of a condition expression in a loop?
tested each time the loop repeats.
56
What does "iteration" mean in the context of loops?
sequence of instructions that is continually repeated.
57
When does the condition expression of a while loop get evaluated?
An expression evaluated before each pass through the loop.
58
When does the initialization expression of a for loop get evaluated?
before the execution of the first loop.
59
When does the condition expression of a for loop get evaluated?
each time before the loop runs.
60
When does the final expression of a for loop get evaluated?
This expression is executed after each iteration of the loop
61
which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break keyword
62
What does the ++ increment operator do?
increases the value of a variable by 1
63
How do you iterate through the keys of an object?
With for..in loops.
64
Why do we log things to the console?
Test if what we did works before to print the final result to the user.
65
Which "document" is being referred to in the phrase Document Object Model?
HTML document
66
What is the word "object" referring to in the phrase Document Object Model?
Represent each object that conform the structure and content of a document on the web.
67
What is a DOM Tree?
Structure of nested nodes.
68
Give two examples of document methods that retrieve a single element from the DOM.
querySelector() and getElementById()
69
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName()
70
Why might you want to assign the return value of a DOM query to a variable?
If you want to work with that element more than once
71
What console method allows you to inspect the properties of a DOM element object?
console.dir()
72
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
Because the browser needs to parse all of the elements in the HTML page before JavaScript code can access them.
73
What does document.querySelector() take as its argument and what does it return?
Takes a string that contains css selector describing the HTML element you want to work with. Returns only the first of the matching elements
74
What does document.querySelectorAll() take as its argument and what does it return?
Takes a css selector and returns all of those that match.
75
What is a model?
a representation of something else
76
Why do we log things to the console?
To see how our code is working
77
What is the purpose of events and event handling?
Allows the page to be interactive
78
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener()
79
What is a callback function?
A call back function is a function that is passed into another function as an argument.
80
What object is passed into an event listener callback when the event fires?
Event object
81
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
Where interactions occurred. You can log it or with debugger. MDN
82
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
The first one runs the eventlistener when the event is fired. The last one indicates that the event listener should run as the page loads
83
What is the className property of element objects?
A string containing the value of a class attribute on that element.
84
How do you update the CSS class attribute of an element using JavaScript?
With classname property: .className
85
What is the textContent property of element objects?
Is a string containing the value of the text content of an element
86
How do you update the text within an element using JavaScript?
By using textContent property
87
Is the event parameter of an event listener callback always useful?
Not always
88
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
89
Why is storing information about a program in variables better than only storing it in the DOM?
Easier access for later use
90
Give four examples of CSS transform functions.
Matrix, translate, scale, rotate, skew.
91
What does the transform property do?
Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
92
What event is fired when a user places their cursor in a form control?
Focus control
93
What event is fired when a user's cursor leaves a form control?
blur event
94
What event is fired as a user changes the value of a form control?
input event
95
What event is fired when a user clicks the "submit" button within a ?
submit event
96
What does the event.preventDefault() method do?
Prevents the default function of an element
97
What does submitting a form without event.preventDefault() do?
Reloads the page
98
What property of a form element object contains all of the form's controls.
elements property
99
What property of a form control object gets and sets its value?
value property
100
What is one risk of writing a lot of code without checking to see if it works so far?
You don't know if or where things are failing.
101
What is an advantage of having your console open when writing a JavaScript program?
Ability to check if your code is working.
102
Does the document.createElement() method insert a new element into the page?
No, it only creates an element, but does not insert it into the page. .
103
How do you add an element as a child to another element?
How do you add an element as a child to another element?
104
What do you pass as the arguments to the element.setAttribute() method?
two string representing an attribute and its value
105
What steps do you need to take in order to insert a new element into the page?
create the element, give the element some content, and insert the element into the page.
106
What is the textContent property of an element object for?
setting or getting text of an element
107
Name two ways to set the class attribute of a DOM element.
.setAttribute and .className
108
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
- - automate repetitive work
| - - can be reusedcan change it anytime
109
What is the event.target?
The element most directly interacted with by an event. The target of the event (most specific element interacted with)
110
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
111
What DOM element property tells you what type of element it is?
tagName
112
What does the element.closest() method take as its argument and what does it return?
A selector containing a selector list, and it returns the element which is the closest ancestor of the element.
113
How can you remove an element from the DOM?
.remove()
114
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
Adding event listener to the parent that will contain the new item with bubbling event
115
What is the event.target?
The object of that event is ocurring
116
What is the affect of setting an element to display: none?
Turns off the display of an element and acts as if it was not there.
117
What does the element.matches() method take as an argument and what does it return?
It takes a selector in the form of a string and returns a boolean.
118
How can you retrieve the value of an element's attribute?
.getAttribute() method
119
At what steps of the solution would it be helpful to log things to the console?
Every step
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 add an event listener for each tab and view
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?
many if/else statements.
t would have more code to check every tab.
conditionals for for each one
122
What is JSON?
JavaScript Object Notation and it is lightweight data-interchange format.
123
What are serialization and deserialization?
serialization: converting a native object to a string so it can be transmitted across the network or it can be stored
deserialization: Converting a string to a native object
124
Why are serialization and deserialization useful?
Sending information over a network.
for data exchange and storing data without having to rely on it storing as a reference in your computer
it allows you to save the state of an object and convert it to 1s and 0s so it can be transferred over networks and then it can be translated back into an object through deserialization
125
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( ) method
126
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( ) method
127
How do you store data in localStorage?
call the setItem method of the localStorage object.
128
How do you retrieve data from localStorage?
call the getItem method of the localStorage object.
129
What data type can localStorage save in the browser?
key/value pairs in the form of strings.
130
When does the 'beforeunload' event fire on the window object?
just before the program closes, while the content is still visible.
The beforeunload event is fired when the page is about to be unloaded.
Before everything is dumped out of the memory from the browser.
131
What is a method?
A function which is a property of an object.
132
How can you tell the difference between a method definition and a method call?
A method definition has the keyword function and the code block following it. A method call only has the argument inside of the method.
133
Describe method definition syntax (structure).
property name followed by the function keyword and its parameters. And then a code block that has the necessary code.
134
Describe method call syntax (structure).
object followed by a period and the property after. And then parenthesis to hold the given arguments for that method call.
object.methodName()
obj, method name, arguments.
135
How is a method different from any other function?
A method is a property thats defined within that object, while a normal function is a method of the global scope (window).
136
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods).
137
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
138
What is "abstraction"?
Being able to work with (possibly) complex things in simple ways.
139
What does API stand for?
Application Programming Interface
140
What is the purpose of an API?
To allow a programmer a way to interact with a system in a simplified way.
141
What is this in JavaScript?
An implicit parameter that allows us to see the object that 'this' is being invoked upon.
142
What does it mean to say that this is an "implicit parameter"?
It is available in a functions code block even though it was never included in the function's parameter list or declared with var.
143
When is the value of this determined in a function; call time or definition time?
When function is called
| The value of this is determined when the function is called, not when it is defined.
144
```
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);
}
};
```
Mario
145
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
The greet method of the character object is call. This method includes a string that is concatenated with this.FirstName.
It would return: 'It's-a-me, Mario!'
Because character is the object which contains the method 'greet', which refers to the firstName property of character in its codeblock
146
```
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
```
undefined.
this is attached to hello when it is called with hello. hello does not have a firstName property. this is attached to whoever is calling the function.
It returns the message + undefined because this.firstName isn't defined within the variable hello. This keyword is now attached to hello rather than the firstName property of the character object.
147
How can you tell what the value of this will be for a particular function or method definition?
you can't tell until the method or function is called.
you can tell what [this] will be because it is attached to an object. so [this] is referring the object that it is contained in.
148
How can you tell what the value of this is for a particular function or method call?
look at the object left of the dot when the function or method is being called
149
What kind of inheritance does the JavaScript programming language use?
prototype based
150
What is a prototype in JavaScript?
An object that contains properties and (predominantly) methods that can be used by other objects.
151
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on strings, arrays, and numbers?
Those methods are defined on a "prototype" object and arrays simply borrow those methods when they're needed.
152
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
The prototype chain
153
What does the new operator do?
Creates a new instance of an object.
Creates a blank object
Sets the constrcutor of new object to other object
Passes new object as this
Returns this if the function does not return an object
154
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype
155
What does the instanceof operator do?
Check if the object is inheriting from the specified object.
The instanceof operator 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.
tests the presence of constructor.prototype in object's prototype chain
156
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
157
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.
158
How can you set up a function to be called repeatedly without using a loop?
setInterval() method.
159
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
The default time delay is 0, which executes immediately. or more accurately, the next event cycle.
160
What do setTimeout() and setInterval() return?
The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout();
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval()
161
What is AJAX?
A technique for loading data into part of a page without having to refresh the entire page. Data is often sent in JSON format.
increasing the user experience and better performance.
162
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
163
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest()
164
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
165
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
there is an EventTarget prototype object that is the prototype of the XMLHttpRequest that has the addEventListener method
both DOM elements and XMLHttpRequest objects inherit the method from the same prototype (EventTarget) that does have that method.
Both inherit the EventTarget method from the DOM interface
prototype chain
Both inherit the EventTarget method from the DOM interface
166
What is a code block? What are some examples of a code block?
A code block is a set of code that is grouped together, usually by using {}. Functions, loops, and conditionals have code blocks. - if/else, for, do while, while, try, catch, etc.
a chunk of code that will do a specific task when appropriate (when the function is called or a conditional is met/true)
167
What does block scope mean?
the variables exist only within the corresponding block; variables are not visible outside the block
as opposed to function scoped.
inside the code block
- things that happen inside the curl braces.
block scope refers to the area within code block
variables exist only within the corresponding bloc
168
What is the scope of a variable declared with const or let?
block-scoped
169
What is the difference between let and const?
The difference is that let is mutable while const is a read-only reference.
const keyword creates block-scoped variables whose values can't be reassigned
let - mutable, const- immutable
170
Why is it possible to .push() a new value into a const variable that points to an Array?
- because we are not reassigning a block-scope, we're just modifying the array held by the const variable
- const's values can change/be mutated, but it cannot be reassigned to a dif block-scope value
171
How should you decide on which type of declaration to use?
If a variable is not going to need changing, const should be used. If the variable may need its value updated, let is the right way to declare.
is the whole variable being reassigned (let), or are just the values inside the variable changing (const)
arrays & objects, always CONST
172
What is the syntax for writing a template literal?
wrap the string in backticks
| any expressions or variables go inside curly braces with a dollar sign before
173
What is "string interpolation"?
ability to substitute part of the string for the values of variables or expressions.
String interpolation is the process of evaluating a string that contains one or more placeholders(variables), which will be replaced by their appropriate values when the string is evaluated.
To replace variables and expressions with their values within a string.
174
What is destructuring, conceptually?
Taking properties and values from an object and assigning their values to independent variable.
- a way to assign the properties of an object to individual variables
- to get values from an object.
way of extracting multiple values from data stored in (possibly nested) objects and Arrays.
175
What is the syntax for Object destructuring?
const {names you want to assign to your variables} = object
Declare a variable followed by the curly brace. Property names are assigned to variables with the colon sign in between. Followed by a closing curly brace. and that whole code block is assigned to a variable name.
```
const/let keyword,
curly braces,
variable names within curly brace,
assignment operator,
variable
```
176
What is the syntax for Array destructuring?
```
const/let keyword,
brackets,
variable names,
assignment operator,
variable
```
177
How can you tell the difference between destructuring and creating Object/Array literals?
creating, on the right
destructuring, on the left
destructuring, check for variable name at the end
or if there is no variable name following const/let
178
What is the syntax for defining an arrow function?
parameter list, arrow, codeblock
let funcName = (parameter) => { return expression; };
one param - param => expression (for anonymous)
multiple params - (param1, param2) => expression, requires parantheses
multiple statements - require body brackets and return
(param1, param2)=>{ return;}:
param=> exp;
()=>exp
179
When an arrow function's body is left without curly braces, what changes in its functionality?
No return keyword is needed. The keyword return is implied for the body. If there are multiple expressions to compute, then the return won't occur.
Function body is
180
How is the value of this determined within an arrow function?
The value of this is determined at the time the arrow function is defined.
181
What is a CLI?
command line interface. processes commands to a computer program in the form of lines of text
182
What is a GUI?
graphical user interface. is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, instead of text-based user interfaces, typed command labels or text navigation.
is a system of interactive visual components for computer software. A GUI displays objects that convey information, and represent actions that can be taken by the user. The objects change color, size, or visibility when the user interacts with them.
183
```
Give at least one use case for each of the commands listed in this exercise.
man
cat
ls
pwd
echo
touch
mkdir
mv
rm
cp
```
man- interface to online reference manuals (use when there's a command you don't know much about)
cat- concatenate files and print on the standard output (use when you want to see contents of file or even combine files together in a new file)
ls- list directory contents (when you want to see what is inside the current directory)
(-a do not ignore entries that start with .
- F append indicator to entries)
pwd- print name of current/working directory ( when you want to know which directory you are in currently)
echo- display a line of text (when you want to display text and possibly put that text into a file)
touch- create new files
mkdir- make directories
(-p makes parent directories as needed)
mv- rename files/directories
rm- delete files
(-r removes directories and all their contents
-f ignore nonexistent files and arguments, never prompt)
cp- copy files and directories
(-r copy directories recursively)
184
What are the three virtues of a great programmer?
Laziness, Impatience, Hubris
185
What is Array.prototype.filter useful for?
It is useful for creating a new array when you only want to grab specific values from an existing array that meet a specific condition.
186
What is Array.prototype.map useful for?
when you want to run a function on every index in the array and return the same amount of values as the input array
creating a new array containing the values resulting from calling a provided callback function on each value of an array
187
What is Array.prototype.reduce useful for?
for reducing an array to a single value using a provided callback function
When you want to run a function on every index in the array and return a single value
