JavaScript Flashcards

1
Q

What is the purpose of variables?

A

a stored data to use it later on

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How do you declare a variable?

A

var const let

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How do you initialize (assign a value to) a variable?

A

use the assignment operator (=)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What characters are allowed in variable names?

A

letters, $, _ (underscore); cannot start with number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What does it mean to say that variable names are “case sensitive”?

A

case should match

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the purpose of a string?

A

used with any kind of text; add new content into a page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the purpose of a number?

A

used in calculations and size

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the purpose of a boolean?

A

to make a binary decision (true/false)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does the = operator mean in JavaScript?

A

value being assign to

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you update the value of a variable?

A

name = new value (no need to put var const let, only at first)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the difference between null and undefined?

A

null is intentionally exists (purpose of emptiness for a moment)
undefined exists unintentionally

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Why is it a good habit to include “labels” when you log values to the browser console?

A

helps to track what the value is for

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Give five examples of JavaScript primitives.

A

number, string, boolean, null, undefined

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What data type is returned by an arithmetic operation?

A

number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is string concatenation?

A

two or more strings used to create a single value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What purpose(s) does the + plus operator serve in JavaScript?

A

addition in numeric value or string value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What data type is returned by comparing two values (, ===, etc)?

A

boolean (true/false)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What does the += “plus-equals” operator do?

A

allow you to add on anything to current value of variable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What are objects used for?

A

stores property for variable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are object properties?

A

makes what the variable different from other variables (unique)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Describe object literal notation.

A

opning curly brace for object literal, property, column, value, closing brace

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

How do you remove a property from an object?

A

delete operator (delete ___.____);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are the two ways to get or update the value of a property?

A

using dot notation or bracket notation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What are arrays used for?

A

when you need to make a list with not knowing how many needs to be in

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Describe array literal notation.

A

[‘__’, ‘__’]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

How are arrays different from “plain” objects?

A

array has an ordered list (index #)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What number represents the first index of an array?

A

0

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is the length property of an array?

A

how many items it holds in the array (not index #)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

How do you calculate the last index of an array?

A

subtract 1 from the length

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What is a function in JavaScript?

A

repeatable and reusable block of code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Describe the parts of a function definition.

A

keyword, parameter, code block { } , return

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Describe the parts of a function call.

A

name of function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

When comparing them side-by-side, what are the differences between a function call and a function definition?

A
call -> name of function
function definition -> keyword, code block, parameter
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What is the difference between a parameter and an argument?

A

parameter -> placeholder for argument

argument -> actual value f0r function to run

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Why are function parameters useful?

A

argument placeholder

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

What two effects does a return statement have on the behavior of a function?

A

executes and exits the code block and gives back a value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Why do we log things to the console?

A

debugging tools

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What is a method?

A

function stored in property of object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

How is a method different from any other function?

A

basically same

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

How do you remove the last element from an array?

A

pop-method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

How do you round a number down to the nearest integer?

A

Math.floor() -> round-down

Math.trunc() -> removes decimal

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

How do you generate a random number?

A

Math.random()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

How do you delete an element from an array?

A

splice method (index#, #items)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

How do you append an element to an array?

A

push method

append => add at the end

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

How do you break a string up into an array?

A

split method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

Do string methods change the original string? How would you check if you weren’t sure?

A

no

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

Is the return value of a function or method useful in every situation?

A

no

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

Give 6 examples of comparison operators.

A

=, >, =, logical operator (&&)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

What data type do comparison expressions evaluate to?

A

boolean

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

What is the purpose of an if statement?

A

to make your code to make decision (true/false)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

Is else required in order to use an if statement?

A

no

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

Describe the syntax (structure) of an if statement.

A

if (condition) code block {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

What are the three logical operators?

A

&& ll !

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

How do you compare two different expressions in the same condition?

A

&& or ll

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

What is the purpose of a loop?

A

a repeated block of code happening under certain condition

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

What is the purpose of a condition expression in a loop?

A

stop point of the loop

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

What does “iteration” mean in the context of loops?

A

one repetition of code block

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

When does the condition expression of a while loop get evaluated?

A

before the code bock runs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

When does the initialization expression of a for loop get evaluated?

A

in the beginning (first step)

“before anything”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

When does the condition expression of a for loop get evaluated?

A

after initialization and “before the code block (iteration)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

When does the final expression of a for loop get evaluated?

A

after each iteration, “before the condition”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

A

break

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

What does the ++ increment operator do?

A

add value of variable

goes up by 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
64
Q

How do you iterate through the keys of an object?

A

for in loop

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
65
Q

What are the four components of “the Cascade”.

A

source order/ inheritance/ specificity/ important rule

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
66
Q

What does the term “source order” mean with respect to CSS?

A

order of giving a style matters

last style strongest

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
67
Q

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

A

inheritance

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
68
Q

List the three selector types in order of increasing specificity.

A

element < class < id

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
69
Q

Why is using !important considered bad practice?

A

too strong!!!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
70
Q

Why do we log things to the console?

A

debugging tool

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
71
Q

What is a “model”?

A

example of a HTML structure

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
72
Q

Which “document” is being referred to in the phrase Document Object Model?

A

HTML document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
73
Q

What is the word “object” referring to in the phrase Document Object Model?

A

javascript

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
74
Q

What is a DOM Tree?

A

tree of element with all of its HTML children elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
75
Q

Give two examples of document methods that retrieve a single element from the DOM.

A

querySelector(‘.name’), getElementById(‘name’)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
76
Q

Give one example of a document method that retrieves multiple elements from the DOM at once.

A

querySelectorAll(‘.name’);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
77
Q

Why might you want to assign the return value of a DOM query to a variable?

A

if you want to access it to multiple times

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
78
Q

What console method allows you to inspect the properties of a DOM element object?

A

console.dir() method - directory method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
79
Q

Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

A

so HTML can run before javascript does

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
80
Q

What does document.querySelector() take as its argument and what does it return?

A

css selector, first element that matches first

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
81
Q

What does document.querySelectorAll() take as its argument and what does it return?

A

css selectors, all node list - abject with properties that are numbers (not an array)

82
Q

Why do we log things to the console?

A

verifying actually something happened

83
Q

What is the purpose of events and event handling?

A

event is an action that occurs as a result of the user or another source, such as a mouse click.
An event handler is a response to an event when it is triggered

84
Q

Are all possible parameters required to use a JavaScript method or function?

A

no, boolean value could be used

85
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

addEventListener() method

86
Q

What is a callback function?

A

function definition that is being passed to an argument to other function

87
Q

What object is passed into an event listener callback when the event fires?

A

event

88
Q

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

A

event.target is a reference to the object onto which the event was dispatched

89
Q

What is the className property of element objects?

A

get the value of class attribute

90
Q

How do you update the CSS class attribute of an element using JavaScript?

A

class name property

91
Q

What is the textContent property of element objects?

A

text of an element that shows on the application

92
Q

How do you update the text within an element using JavaScript?

A

.textContent

93
Q

Is the event parameter of an event listener callback always useful?

A

no

94
Q

Why is storing information about a program in variables better than only storing it in the DOM?

A

assigning element to variable if you have to use it several times is more efficient than searching it every time.

95
Q

What does the transform property do?

A

let you rotate, scale, skew, or translate

96
Q

Give four examples of CSS transform functions.

A

rotate, scale, translate, matrix

97
Q

The transition property is shorthand for which four CSS properties?

A

transition-property, transition-duration, transition-timing-function, transition

(color change. scale

98
Q

What event is fired when a user places their cursor in a form control?

A

focus

99
Q

What event is fired when a user’s cursor leaves a form control?

A

blur

100
Q

What event is fired as a user changes the value of a form control?

A

input

101
Q

What event is fired when a user clicks the “submit” button within a ?

A

submit

102
Q

What does the event.preventDefault() method do?

A

prevent default behavior
(when delete stored data from local storage,
this defaults the removal, so need to // code and delete and refresh)

103
Q

What does submitting a form without event.preventDefault() do?

A

refresh entire page

104
Q

What property of a form element object contains all of the form’s controls.

A

element’s property

value of the property is the object

105
Q

What property of a form control object gets and sets its value?

A

value property

106
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

had to find out what went wrong

107
Q

What is an advantage of having your console open when writing a JavaScript program?

A

debugging tool

108
Q

Does the document.createElement() method insert a new element into the page?

A

no,

109
Q

How do you add an element as a child to another element?

A

append, appendChild()

110
Q

What do you pass as the arguments to the element.setAttribute() method?

A

document.setAttribute(‘.class or id’, ‘value’)

111
Q

What steps do you need to take in order to insert a new element into the page?

A

parent.appeneChild(new element)

112
Q

What is the textContent property of an element object for?

A

text that want to be added

113
Q

Name two ways to set the class attribute of a DOM element.

A

setAttribute(), className

114
Q

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

A

reuse

115
Q

Give two examples of media features that you can query in an @media rule.

A

min-width, max-width

116
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

meta tag with viewport

117
Q

What is the event.target?

A

dom object representing HTML element where an event originally occur

118
Q

What DOM element property tells you what type of element it is?

A

tagName

119
Q

What does the element.matches() method take as an argument and what does it return?

A

first ancestor that matches css selector

120
Q

How can you remove an element from the DOM?

A

remove() method

121
Q

What is the affect of setting an element to display: none?

A

makes it invisible

122
Q

What does the element.matches() method take as an argument and what does it return?

A

1st string of css selector, boolean whether to check that element is being called on

123
Q

How can you retrieve the value of an element’s attribute?

A

getAttribute(‘string css selector’)

124
Q

At what steps of the solution would it be helpful to log things to the console?

A

every steps

125
Q

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?

A

addEventListener

126
Q

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

separate conditional block

127
Q

What is a breakpoint in responsive Web design?

A

point where the styles of application change

128
Q

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

A

gives an ability to have some variant

129
Q

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

A

source order

130
Q

What is JSON?

A

format for storing and transporting data

131
Q

What are serialization and deserialization?

A

serialization -> a process of converting an object (value in array) to a string so it can be transferred
decentralization -> opposite of serialization, string to object

132
Q

Why are serialization and deserialization useful?

A

serialization: complex data in order
deserialization: makes it easy to access to the data

133
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

JSON.stringify()

134
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

JSON.parse()

135
Q

How to you store data in localStorage?

A

setItem()

136
Q

How to you retrieve data from localStorage?

A

getItem(‘keyword’)

137
Q

What data type can localStorage save in the browser?

A

’ ‘ string so use stringify() first

138
Q

When does the ‘beforeunload’ event fire on the window object?

A

before the page unload

139
Q

What is a method?

A

function which is a property of object

140
Q

How can you tell the difference between a method definition and a method call?

A

method definition is actual function definition need to be assigned to property

141
Q

Describe method definition syntax (structure).

A

object literal, properties, function definition

142
Q

Describe method call syntax (structure).

A

call is just a name of function with (argument)

143
Q

How is a method different from any other function?

A

a method includes a code that is called by the object’s name

144
Q

What are the four “principles” of Object-Oriented Programming?

A

abstraction, encapsulation, inheritance, polymorphism

145
Q

What is “abstraction”?

A

complex things in simple ways so people use it without fully understanding

146
Q

What does API stand for?

A

application programming interface

147
Q

What is the purpose of an API?

A

allow developers to create complex functions more easily

148
Q

What is this in JavaScript?

A

implicit parameter that contains an object

149
Q

What does it mean to say that this is an “implicit parameter”?

A

parameter that always in present even not defined

150
Q

When is the value of this determined in a function; call time or definition time?

A

call time (only happens when called)

151
Q

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);
  }
};
A

nothing

152
Q
var character = {
  firstName: 'Mario',
  greet: function () {
    var message = 'It\'s-a-me, ' + this.firstName + '!';
    console.log(message);
  }
};

Given the above character object, what is the result of the following code snippet? Why?
character.greet();

A

mario because function is being called

153
Q
var character = {
  firstName: 'Mario',
  greet: function () {
    var message = 'It\'s-a-me, ' + this.firstName + '!';
    console.log(message);
  }
};
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
A

it’s a me, undefined

154
Q

How can you tell what the value of this will be for a particular function or method definition?

A

nothing, because not called

155
Q

How can you tell what the value of this is for a particular function or method call?

A

object to the left dot notation, if no dot, window

156
Q

What kind of inheritance does the JavaScript programming language use?

A

prototype-based (prototypal)

157
Q

What is a prototype in JavaScript?

A

original model on which something is patterned

158
Q

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?

A

inheritance

159
Q

If an object does not have it’s own property or method by a given key, where does JavaScript look for it?

A

prototype

160
Q

What does the new operator do?

A

blank object + prototype

161
Q

What property of JavaScript functions can store shared behavior for instances created with new?

A

prototype

162
Q

What does the instanceof operator do?

A

check if on the right is present to one to left

163
Q

What is a client?

A

one that sends request for data

164
Q

What is a server?

A

response or provides data

165
Q

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET post,put

166
Q

What three things are on the start-line of an HTTP request message?

A

HTTP method, request target, HTTP version

167
Q

What three things are on the start-line of an HTTP response message?

A

protocal version, status code, status text

168
Q

What are HTTP headers?

A

lets the client and server pass additional info with HTTP request or response

169
Q

Is a body required for a valid HTTP request or response message?

A

no

170
Q

What is AJAX?

A

a technique for loading data on application without reloading it

171
Q

What does the AJAX acronym stand for?

A

asynchronous javascript and xml

172
Q

Which object is built into the browser for making HTTP requests in JavaScript?

A

XMLHTTPRequest()

173
Q

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

A

‘load’

174
Q

Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

A

prototype

175
Q

What is a code block? What are some examples of a code block?

A

code that run and return expected output

176
Q

What does block scope mean?

A

variable is being declared inside of specific code block

177
Q

What is the scope of a variable declared with const or let?

A

block-scope

178
Q

What is the difference between let and const?

A

const -> cannot be re-declared nor updated
(if array, we can add it by pushing)
let -> can be updated but cannot be re-declared

179
Q

Why is it possible to .push() a new value into a const variable that points to an Array?

A

when push, you are not re-declaring, it’s mutating the contents

180
Q

How should you decide on which type of declaration to use?

A

if the variable would need to be re-assigned, let

if not const

181
Q

What is the syntax for writing a template literal?

A

backtick 'string and if assigned variable ${javascript expression}'

182
Q

What is “string interpolation”?

A

ability to substitute part of the string for the values of variable or expression

183
Q

What is destructuring, conceptually?

A

new positioning of properties so they could be used as variable

184
Q

What is the syntax for Object destructuring?

A

const {property1, property2} = object

185
Q

What is the syntax for Array destructuring?

A

const [property1, property2] = array

186
Q

How can you tell the difference between destructuring and creating Object/Array literals?

A

when curly brace or square bracket is on the right side of assignment operator, it’s destructuring, whereas to the right, creating.

187
Q

What is the syntax for defining an arrow function?

A
const \_\_\_ = (if more than two) => { 
return
}
188
Q

When an arrow function’s body is left without curly braces, what changes in its functionality?

A

return

189
Q

How is the value of this determined within an arrow function?

A

window
(es6 -> this is being defined when definition
es5 -> this is being defined when called)

190
Q

What are the three states a Promise can be in?

A

pending, fulfilled, rejected

191
Q

How do you handle the fulfillment of a Promise?

A

.then(result => {
res.status(200).json(result.rows);
})

192
Q

How do you handle the rejection of a Promise?

A

.catch(error => {

console. error(err);
res. status(500).json({ error: ‘An unexpected error occured.’ });

193
Q

What is Array.prototype.filter useful for?

A

Creating a new array while excluding some elements.
does for loop and if statement

ex.
const overFive = numbers.filter(number => number > 5);
194
Q

What is Array.prototype.map useful for?

A

Creating a new array containing the transformed elements of another.

ex.
const doubled = (numbers.map(number => number * 2));
195
Q

What is Array.prototype.reduce useful for?

A

Combining the elements of an array into a single value.

ex.
const balance = account.reduce((previous, current) => {
  if (current.type === 'deposit') {
    return previous + current.amount;
  }
  return previous - current.amount;
}, 0);
196
Q

What is “syntactic sugar”?

A

syntax within a programming language expressed more clear and easier

197
Q

What is the typeof an ES6 class?

A

function

198
Q

Describe ES6 class syntax.

A
class \_\_\_\_ {
   constructor(\_\_){
   this.name = name
    } 
   getName(){
   return 
   }
}
(class name is being defined with name of \_\_\_
{} for classbody
prototype method of \_\_\_ is being defined
)
199
Q

What is “refactoring”?

A

change the structure but no the behavior

200
Q

How are ES Modules different from CommonJS modules?

A
commonJS -> require('file path')
ES Modules -> import & export
when default: import create-own-name from 'file name or path' -> no .js needed
if not import filename
export default function/class {} -> only one in module
if multiple export function/class name{} 
import {name} from 'file'
201
Q

What kind of modules can Webpack support?

A

js or json files