JavaScript Flashcards
1
Q
What is the purpose of variables?
A
store and manipulate data in the future
2
Q
How do you declare a variable?
A
var, const, or let
3
Q
How do you initialize (assign a value to) a variable?
A
use = (assignment operator) after declaring the variable
4
Q
What characters are allowed in variable names?
A
letters, dollar sign, underscore, numbers (not first character)
5
Q
What does it mean to say that variable names are “case sensitive”?
A
uppercase and lowercase letters are considered different by the engine
6
Q
What is the purpose of a string?
A
store/manipulate text content
7
Q
What is the purpose of a number?
A
store/manipulate numbers with math
8
Q
What is the purpose of a boolean?
A
logic with binary states, decision making
9
Q
What does the = operator mean in JavaScript?
A
assignment operator
10
Q
How do you update the value of a variable?
A
use assignment operator (variable = value)
11
Q
What is the difference between null and undefined?
A
null is intentional emptiness (can’t exist unless assigned to variable), undefined is default value of variables
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
understand what the log’s content contains
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
number
15
Q
What is string concatenation?
A
attach one string to another to create a new string
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
arithmetic addition, string concatenation if string is present
17
Q
What data type is returned by comparing two values (, ===, etc)?
A
boolean
18
Q
What does the += “plus-equals” operator do?
A
add/concatenate a value onto stated variable, then assign the result to the variable
19
Q
What are objects used for?
A
storing related data within a single variable
20
Q
What are object properties?
A
the “variables” contained within the object, key and value pair
21
Q
Describe object literal notation.
A
curly braces containing properties, property : value
22
Q
How do you remove a property from an object?
A
using the “delete” operator
23
Q
What are the two ways to get or update the value of a property?
A
dot notation ( object.property ) / bracket notation ( object[‘property’] )
24
Q
What are arrays used for?
A
storing related values within a single variable
25
Describe array literal notation.
values in brackets, separated by commas
26
How are arrays different from "plain" objects?
there is no "key", but rather an index for each value. it's an ordered list.
27
What number represents the first index of an array?
0
28
What is the length property of an array?
the amount of values in the 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 can be called in the future with arguments that can affect the outcome of the code.
31
• Describe the parts of a function definition.
○ keyword, name, parameters, code block
32
• Describe the parts of a function call.
○ name, arguments
33
• When comparing them side-by-side, what are the differences between a function call and a function definition?
○ function definition has a code block, keyword, and parameters rather than arguments
34
• What is the difference between a parameter and an argument?
○ parameter is a placeholder, argument is the data sent to function
35
• Why are function parameters useful?
○ placeholder. allows data to influence the return
36
• What two effects does a return statement have on the behavior of a function?
○ exits and gets back the value
37
Why do we log things to the console?
Development debugging tool
38
What is a method?
A function defined as a property within an object
39
How is a method different from any other function?
not much, just in an object
40
How do you remove the last element from an array?
array.pop
41
How do you round a number down to the nearest integer?
Math.round(x)
42
How do you generate a random number?
Math.random() (gives a percentage value)
43
How do you delete an element from an array (at any index)?
array.splice
44
How do you append an element to an array?
array.push
45
How do you break a string up into an array?
string.split(seperator as string)
46
Do string methods change the original string? How would you check if you weren't sure?
they don't. check via console log
47
Is the return value of a function or method useful in every situation?
no
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.
equal, strictly equal, not equal, strictly not equal, greater, greater and equal, less than, less than and equal
50
• What data type do comparison expressions evaluate to?
○ boolean
51
• What is the purpose of an if statement?
○ to allow for decision based on whether or not something is true or false
52
• Is else required in order to use an if statement?
○ no
53
• Describe the syntax (structure) of an if statement.
• Describe the syntax (structure) of an if statement.
54
• What are the three logical operators?
○ AND &&, OR ||, NOT !
55
• How do you compare two different expressions in the same condition?
○ use logic operators
56
• What is the purpose of a loop
○ to allow for repeated tasks
57
• What is the purpose of a condition expression in a loop?
○ determine whether to continue the loop
58
• What does "iteration" mean in the context of loops?
○ a single cycle of a loop
59
• When does the condition expression of a while loop get evaluated?
○ before the code block
60
• When does the initialization expression of a for loop get evaluated?
○ before the first condition, at the beginning ONCE
61
• When does the condition expression of a for loop get evaluated?
○ before each iteration of the code block
62
• When does the final expression of a for loop get evaluated?
○ at the end of each iteration
63
• Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
○ break
64
• What does the ++ increment operator do?
○ increments value by 1
65
• How do you iterate through the keys of an object?
○ "for in" loop
66
• Which "document" is being referred to in the phrase Document Object Model?
○ HTML document that script has been linked to
67
• What is the word "object" referring to in the phrase Document Object Model?
○ JavaScript Objects
68
• What is a DOM Tree?
○ The a chunk of HTML represented as a JavaScript object, including its children and all details
69
• Give two examples of document methods that retrieve a single element from the DOM.
○ document.querySelector(css selector) or ○ document.getElementById(id attribute)
70
• Give one example of a document method that retrieves multiple elements from the DOM at once.
○ document.querySelectorAll(css selector)
71
• Why might you want to assign the return value of a DOM query to a variable?
○ cache the location of the DOM element to refer back to later without having to rewrite the same query and waste performance
72
• What console method allows you to inspect the properties of a DOM element object?
○ console.dir
73
• Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
○ the DOM only forms when the script is called. the browser reads HTML in a straight order.
74
• What does document.querySelector() take as its argument and what does it return?
○ Class selector as an argument, returns the first node that matches the selector
75
• What does document.querySelectorAll() take as its argument and what does it return?
○ Class selector as an argument, returns NodeList (array-like object) of matching nodes
76
• What is the purpose of events and event handling?
○ create reactive code
○ handler: function made as response to effect occuring
○ listener: watches for the event to trigger handler
77
• Are all possible parameters required to use a JavaScript method or function?
○ no
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 function definition passed as an argument via name without () for another function
80
• What object is passed into an event listener callback when the event fires?
○ the "event" object as an argument
81
• What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
○ the element where the event originated from in the DOM. use console logging to check
82
• What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
○ first is passing a callback function, second is calling the function for a return to be passed
83
• What is the className property of element objects?
○ the value of the class attribute of the element in the DOM
84
• How do you update the CSS class attribute of an element using JavaScript?
○ assign a value to the className property of the element's DOM object
85
• What is the textContent property of element objects?
○ all text within the element, ignoring any markup
86
• How do you update the text within an element using JavaScript?
○ assign a value to the textContent property of the element's DOM object
87
• Is the event parameter of an event listener callback always useful?
○ not all the time
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, as it would result in variables being handled by the HTML content rather than the JS code itself
89
• Why is storing information about a program in variables better than only storing it in the DOM?
○ easier manipulation by developer in JS, harder for users to try and break the program.
90
• What event is fired when a user places their cursor in a form control?
○ focus
91
• What event is fired when a user's cursor leaves a form control?
○ blur
92
• What event is fired as a user changes the value of a form control?
○ input
93
• What event is fired when a user clicks the "submit" button within a form ?
○ submit
94
• What does the event.preventDefault() method do?
○ prevent the default behavior of an event
95
• What does submitting a form without event.preventDefault() do?
○ refresh the page
96
• What property of a form element object contains all of the form's controls.
○ .elements
97
• What property of a form control object gets and sets its value?
○ .value
98
• What is one risk of writing a lot of code without checking to see if it works so far?
○ you might fuck yourself over later and build upon a non-working foundation
99
• What is an advantage of having your console open when writing a JavaScript program?
○ it's a playground that allows for checking values and testing functions without having to reload the webapp
100
• Does the document.createElement() method insert a new element into the page?
○ no
101
• How do you add an element as a child to another element?
○ appendChild or append
102
• What do you pass as the arguments to the element.setAttribute() method?
○ attribute: string, value: string
103
• What steps do you need to take in order to insert a new element into the page?
○ create element, modify element (optional), append element onto target (parent)java
104
• What is the textContent property of an element object for?
○ the text of the node and its decendants
105
• Name two ways to set the class attribute of a DOM element.
○ className property, setAttribute() method
106
• What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
○ to be able to repeat the task without having to write it again
107
• What is the event.target?
○ the origin element that triggered the event
108
• Why is it possible to listen for events on one element that actually happen its descendent elements?
○ event bubbling flow (goes outwards from most specific node)
109
• What DOM element property tells you what type of element it is?
○ .tagName
110
• What does the element.closest() method take as its argument and what does it return?
○ takes a CSS selector as argument, returns node element of nearest parent matching provided selector
111
• How can you remove an element from the DOM?
○ remove() method of node element
112
• 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?
○ use event delegation and attach a listener to the element containing the clickable DOM elements.
113
• What is JSON?
○ Java Script Object Notation. a way to send and store data in and between computers, even outside of JavaScript
114
• What are serialization and deserialization
○ serialization: converting a native object into a universal format (like JSON)
○ deserialization: converting a universal format (like JSON) to a native object
115
• Why are serialization and deserialization useful?
○ to allow for data to be sent between different systems and parsed in different languages under one common data type
116
• How do you serialize a data structure into a JSON string using JavaScript?
○ JSON.stringify(json string)
117
• How do you deserialize a JSON string into a data structure using JavaScript?
○ JSON.parse(object)
118
• How to you store data in localStorage?
○ localStorage.setItem(key, value), strings
119
• How to you retrieve data from localStorage?
○ localStorage.getItem(key)
120
• What data type can localStorage save in the browser?
○ strings, mainly for JSON
121
• When does the 'beforeunload' event fire on the window object?
○ before the page unloads via closing the tab
122
• What is the affect of setting an element to display: none?
○ hides the content and removes it and its descendants from document flow as if it was never there
123
• What does the element.matches() method take as an argument and what does it return?
○ takes CSS Selector, gives back a bool if CSS Selector matches the element
124
• How can you retrieve the value of an element's attribute?
○ getAttribute()
125
• At what steps of the solution would it be helpful to log things to the console?
○ when calling getAttribute
126
- What is a method?
- A function that is a property of an object.
127
- How can you tell the difference between a method definition and a method call?
Method Definition: defined in the object as a property with the value of an anonymous function
Method Call: Has path to method from object and has parenthesis for calling functions.
128
Describe method definition syntax (structure).
```
object = {
property: function (parameter, parameter, ...) {
Code Block
}
}
```
129
Describe method call syntax (structure)
Object.method(parameter);
130
How is a method different from any other function?
It is a parameter of the object it is attached to, rather than a standalone variable function.
131
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data and behavior (properties and methods)
132
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
133
What is "Abstraction"?
A complex process that is accessible in a simplified manner.
| A facade that hides a bunch of complex shit behind the scenes.
134
What does API stand for?
Application Programming Interface.
A way for software to interact with another software.
A set of code features that allow other devs to make use of it, rather than humans
135
What is the purpose of an API?
To enable devs to allow for software to interact with each other
136
What is "this" in JavaScript?
- An implicit parameter of all JavaScript functions that takes the value of a reference of the object it is being called from.
137
What does it mean to say that "this" is an "implicit parameter"?
An available parameter of a function even if it wasn't included in the parameter list.
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 (not being called yet)
140
How can you tell what the value of this will be for a particular function or method definition?
You can't. It doesn't have a value yet.
141
How can you tell what the value of this is for a particular function or method call?
Check the object that is being used to access the method. If there's none, then it'll be window global object.
142
What kind of inheritance does the JavaScript programming language use?
prototype-based (prototypal) inheritance
143
What is a prototype in JavaScript?
The structure/defaults that new objects are built off of when newly created. Behaviors and data are passed to the inheritors.
144
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?
Strings, arrays, and numbers are objects themselves that inherit from their respective prototypes.
145
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
The object that it inherits from. (prototype)
146
What does the new operator do?
Creates a blank object
Assigns value of prototype property of constructor function to __proto__ property of the new object
Calls the provided constructor function with "this" bound to the new object.
Constructor function returns an object, which becomes the value of the "new" expression.
147
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
148
What does the instanceof operator do?
Checks if an object inherits from a certain prototype in its prototype chain.
Returns a boolean.
149
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(), or setInterval() (if the code should be ran repeatedly)
150
How can you set up a function to be called repeatedly without using a loop?
setInterval()
151
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
delay defaults to 0 (instant within the queue)
152
What do setTimeout() and setInterval() return?
An ID, timeoutID or intervalID, which allows you to cancel the action and prevent the function from actually being called via clearTimeout() or setTimeout() . It's like an ID for the specific action.
