JavaScript Flashcards
1
Q
What is the purpose of a string?
A
To store texts that doesn’t make sense to Javascript
as a sequence of characters!
2
Q
Purpose of a number?
A
to store numbers, not always mathematical values
ex) zip codes, phone numbers = numbers that are actually a type of IDs
3
Q
Purpose of a boolean?
A
to make decisions/logic switches
4
Q
What is the difference between null and undefined?
A
null = value is left out intentionally or coming later. Can only be created by coders by assigning null as the value of a variable
ex) var intentionallyEmpty = null;
undefined = Javascript can create this whenever! Causing ambiguity to the code/debugging steps
5
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
It describes the value that is being logged creating more organization and clarity
6
Q
7 examples of javascript PRIMITIVES vs JS data types?
A
string, boolean, number, bigint(numbers that are big), null, undefined, symbol
vs. all of the above AND objects
7
Q
What is string concatenation?
A
to make multiple strings become one string
not mathematical, but still an expression (aka a chunk of work that javascript must perform)
uses string operator +
8
Q
What is an object literal notation?
A
a simplified syntax = aka syntactical sugar of the constructor notation which uses a constructor function and “new” operator
9
Q
method
A
properties that store functions
OR functions that are properties of an object
10
Q
What are objects used for?
A
to group data/variables that are related
11
Q
What are object properties?
A
individual place to store data within an object
basically a variable inside of an object
12
Q
Describe object literal notation
A
{
property: value,
property: value
};
13
Q
How do we remove a property from an object?
How do we clear the value of a property from an object?
A
delete operator with object name and property name
reassign the value using dot or bracket notation = ‘ ‘ (blank string)
14
Q
How do we read this (using square bracket to assign a property and value of an object)?
vehicle[‘color’] = ‘white’;
A
string white is being assigned to the vehicle AT string color
15
Q
What makes arrays a special type of object?
A
They hold a related set of key/value pairs, but the key for each value is its index number.
16
Q
What are arrays used for?
A
to create a list and group like data with more flexibility in length/amount vs. object
17
Q
What is the length property of an array?
A
shows how many items are inside the array
array.length
18
Q
How are arrays different from “plain” objects?
A
arrays do not need a property/key name
the automatically generated name is the index number!
arrays have an order and length
requires method to add/delete data
vs
objects need property/key name
objects do not have order or length
objects require assignment operator to add
and delete operator to delete data
19
Q
How do you calculate the last index of an array?
A
array.length - 1
20
Q
What is a function in Javascript?
A
a special kind of object that is “callable”
repeatable named block of code
21
Q
Parts of the Function Definition
A
Key word: function
optional name
optional parameter
{}
*likely a return statement
22
Q
What is the difference between function parameter and argument?
A
Parameter = part of function definition (aka placeholders for potential value in the future) only exists inside of the function code block! This is what lets us reuse functions with different values!
Argument = part of function call
the value that we pass
23
Q
What 2 effects does the return statement have?
A
- return of the function spits out a value = specifies a value to be returned to the function caller
- stops the function from running
we can use it to create Guard Clauses (used when we can’t prevent something from going wrong lol)
24
Q
Does every function call have a return value?
A
Yes! Even if there is nothing specified, JavaScript will return UNDEFINED! If the code block has console.log, it will log whatever is specified.
ex) function greet () {
var greeting = ‘Hello’;
}
greet();
we will have undefined show up in our console
25
Why do we log things to the console?
to see the result and check = for debugging
console.log does not do anything for the users
DELETE console.logs once project is finished
26
6 examples of comparison operators
>, < , <=, >=, ===, !==
27
What data type do comparison expressions evaluate to?
boolean: true or false
28
Purpose of an if statement?
To create logic
29
3 logical operators
|| , && , !
(! means to flip the boolean value)
30
Syntax of an if statement
key word: if
(condition)
{}
31
What is the purpose of a loop?
To run a job multiple times/repeat!
32
What is the purpose of a condition expression in a loop?
tells the loop when to stop
33
What does "iteration" mean in the context of loops?
A single time that the loop's CODE BLOCK runs!
34
When does the condition expression of a while loop get evaluated?
before the code block/iteration
35
When does the initialization expression of a for loop get evaluated?
just ONCE BEFORE ANYTHING in the loop
ALWAYS ONCE and never again
36
When does the condition expression of a for loop get evaluated?
before each iteration = code block
after the final expression
except the first iteration, which will be after the initialization
37
When does the final expression of a for loop get evaluated?
after the code block
38
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
39
What does the ++ increment operator do?
add and assign
ex) var num = 1;
5 + ++num
// num = 2
// 5 + 2 = 7
5 + num++
// num = 1
// 5 + 1 = 6
// num = 2
num++(adds first THEN reassign) vs. ++num (reassigns incremented value first THEN adds)
40
How do you iterate through the keys of an object?
for...in loop
41
How do you store data in localStorage?
setItem() method of the localStorage object
takes ( string of the key name, string of the value of key)
42
How do you retrieve data from localStorage?
getItem() method of the localStorage object
takes string of the name of the key as the argument
43
What data type can localStorage save in the browser?
strings
which is why we use JSON
44
When does the 'beforeunload' event fire on the window object?
before the window unloads everything
ex) when the user refreshes/closes tab/browser
45
What is a method?
It is a function which is a property of an object.
2 kinds:
- Instance Methods (built-in tasks performed by an object instance)
- Static Methods (tasks called directly on an object constructor)
46
How can you tell the difference between a method definition and a method call?
definition requires a function definition
call would require object . method name ()
47
Describe method definition syntax (structure)
if creating an object, {
property name: function
if object already created,
object name.propertyname = function;
48
Describe method call syntax (structure)
object name.method name (arguments *if needed*);
49
How is a method different from any other function?
method is function stored inside an OBJECT
requires NAMING THE OBJECT with dot notation in order to call
When being called:
presence of an object vs. function name
50
What is the defining characteristic of OOP (Object-Oriented Programming)?
objects can contain both data (as properties) and behaviors (as methods)
51
What are the four "principles" of Object-Oriented Programming?
abstraction (removing complex details for ease of use)
encapsulation (?)
inheritance (prototypal inheritance/delegation)
polymorphism (?)
52
What is "abstraction"?
removing/hiding complex details (that is not relevant for current use) to work with complex things in simple ways
ex) light switch hides all the complexity of circuits, breakers, etc.
ex) automatic transmission vs manual (aka stick)
ex) javascript: built upon C (which is more intense)
53
What does API stand for?
Application Programming Interface
54
What is the purpose of API?
- give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
- a connection between computers or between computer programs. It is a type of software interface, offering a service to other pieces of software.
ex) DOM: I don't know how the .createElement() method truly creates a new DOM element, but I know how to use it!
55
What is "this" in JavaScript?
An implicit parameter that allows us to see
the object where "this" is being invoked from
56
What does it mean to say that this is an "implicit parameter"?
this is a parameter that exists in a function without having to be declared explicitly
57
When is the value of this determined in a function; call time or definition time?
call time
this is a parameter, therefore, it only has value when the function is called
58
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);
}
};
there is no value since it hasn't been called
aka we cannot be certain!
59
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();
function has been called through the greet method, therefore, the message will be printed with 'Mario'
60
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();
"message + undefined" since I called the variable hello, which means I got the function definition stored inside the character object, causing the variable to hold the function definition. Now, JS variables are actually properties! Therefore global variables = property of the window object! So, the var hello is now actually a property of the window object, and the window object does not have a firstName property = undefined!
61
How can you tell what the value of this will be for a particular function or method definition?
We can't know!
62
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
63
What kind of inheritance does the JavaScript programming language use?
JavaScript includes a specific kind of inheritance known as prototype-based (or prototypal) inheritance.
The ultimate goal is to move properties and methods that we'd like to reuse into a "prototype" object and then tell other objects to simply delegate to that "prototype" object when they aren't able to perform the required tasks themselves.
64
What is a prototype in JavaScript?
It is an object. It contains data or behavior that is accessible to all other objects that delegate to it.
65
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?
they have an prototype object, and prototypal inheritance applies to all of them since all of those are objects in JS
66
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
in the prototype object (going up on each prototypal chain)
67
How do you add a new property to all objects of the same type? (Context: you defined the object type by writing a function definition that specifies its name and properties)
ex: function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
You have to add the property to the constructor's prototype property.
ex: Car.prototype.color = 'original color';
console.log(car1.color); // 'original color'
car1.color = 'black';
console.log(car1.color); // 'black'
console.log(Object.getPrototypeOf(car1).color); // 'original color'
console.log(Object.getPrototypeOf(car2).color); // 'original color'
console.log(car1.color); // 'black'
console.log(car2.color); // 'original color'
68
Difference between .__proto__ (aka [[prototype]]) and .prototype properties?
__proto__/[[prototype]] = prototype on the created instance
prototype = prototype on the constructor function
69
What does the new operator do?
It allows us to invoke a function as a constructor function.
It creates an empty object = "instance" with all the properties and methods of the user-defined object type or of the built-in object types that has its constructor function
1. create an empty object
2. attaches prototype object to the instance and points/delegates to the constructor function's prototype property
3. makes the new object 'this' (runs the codeblock)
4. constructor function will most likely NOT have a return statement. Returns the instance/object as long as it doesn't have a return statement. If it does, it returns the statement instead of the instance!
70
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
71
What does the instanceof operator do?
It 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.
Syntax:
object instanceof constructor
72
What is a callback function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
73
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()
ex) bank account websites with timeout
74
How can you set up a function to be called repeatedly without using a loop?
setInterval()
75
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 ms
BUT this does not mean it gets done immediately.
It means it will go into the que(?) immediately and stay there until JS is done with the main activity. When it is done, it will take the first item in the que and run it.
76
What do setTimeout() and setInterval() return?
setTimeoutID (rarely used since the action will end after the first action, UNLESS we want to end the action from completing ex: bank time out gets "canceled" when user performs activity) & setIntervalID which are numeric values that identifies the timer created by the call. This value is passed to cancel the interval. They share the ID count so, if I create one interval, and then a timeout, the timeout's ID will be 2.
**NEVER expect the ID to be the next number since extensions can use timeouts and intervals as well! SAVE the return! DO NOT hard code IDs!**
77
JS values that have "falsy" value on its own?
false , 0 , "" , NaN , undefined, null
78
What is special about primitives in javascript?
they do not change in values
79
What is an algorithm?
a process made up of (3) things:
-variables
-conditionals
-loops
80
What is the purpose of variables?
To store a value under a name for the future!
Computers DO NOT hold onto data unless we TELL them to!
81
How do you declare a variable?
By using keywords, such as var, let, const
var scope = global/function scope
let/const = nearest block scope
82
What characters are allowed in variable names?
number (only if NOT first), letter, $, _
NO punctuations
83
What is a unary and binary operators?
unary = one operator and one operand
ex) typeof
binary = one operator and two operand
ex) 4 + 7
84
logical operators vs. comparison operators
logical = combine expressions and return true/false
comparison = compare two values and return true/false
85
What is the modulus operator?
% = divides two values and returns the remainder
ex) 10 % 3 = 1
86
Several arithmetic operations can be performed in one expression, what is the order of execution?
PEMDAS
87
What data type is returned by an arithmetic operation?
number
88
What is the typeof Nan?
number
89
What is the typeof null?
object
90
Why are strings primitive?
They are immutable!
ex) var str = 'cat'
str[1] = 'o';
str = 'cat'
VS.
ex) var str = 'cat'
str += 'tle'
str = 'cattle'
91
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
92
+ vs += ?
+ (add or concatenate)
+= (add or concatenate AND reassign)
93
++ vs += ?
difference in when the value is changed?
++ only increments by 1
+= can add and assign by any specified value
94
What are two ways to get or update the value of a property of an object?
dot notation = EVERYTHING that comes after is read as STRING!
bracket notation = reads EVERYTHING inside as an EXPRESSION! Think of it as a 2 step process where the expression is solved and the value that is the result is run with dot notation!
*if you can use a [""] then you should use dot notation!
95
Every property inside an object is what type of data?
string
BUT we don't put quotes around them in object literal
BUT when we use bracket notation to get or update a property, we use quotes inside the bracket!
96
Why does index start at 0?
index = how many spaces to move to get to the data
97
What is a reference data type?
since these grow over time with infinite possibility
we do not store the actual memory space inside the variable we assign it to. It simply stores the memory address that points to the memory space.
*making a copy of ref data type is tricky!! Just making another var that points to the same thing and making changes to one will corrupt the original memory!!!
ex) objects, arrays
98
Why do we log things to the console?
to debug!
it is a way to see what is happening as we make changes/create
99
How do you remove the last element from an array?
pop() = removes the last element from an array and returns that element. This method changes the length of the array.
100
Math.floor()
rounds down to the lower number
ex) -4.5 will become -5
101
Math.random()
generate random number from 0 - 0.9999999~
DOES NOT go up to 1
to represent a percentage
102
How do you delete an element from an array?
Why is this method dangerous?
splice()
It changes the content of the array!
We don't want to modify original data!
103
How do you append (add to the end) of an array?
What does it return?
push() = adds one or more elements to the end of an array and returns the new length of the array.
104
How do you break a string up into a array?
split() = takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.
105
Do string methods change the original string? How would you check if you weren't sure?
NOPE! String are immutable!
Log the string!
106
Is the return value of a function or method useful in every situation?
No.
Sometimes the function or method may not return what we want.
ex) push() returns the new LENGTH of the array
pop() returns the last ELEMENT that was removed
107
array.splice() return value is?
an array of element/elements that are removed
108
What is a shallow copy?
it only makes a copy of the primitive data types BUT the reference data types will NOT be a different copy! It is still the same reference point to the memory space!
ex) array with objects
if shallow copy's object is changed = original object inside original array is changed as well!
109
What is type coercion in JavaScript?
js can convert data types behind the scenes to complete an operation
ex) '1' (string) can be turned into 1 (number)
*this is why js is said to use weak typing vs. strong typing
*to check this behavior, use strictly equal to === / !==
110
The difference between
if (document.getElementById('header')) {
console.log('found')
} else {
console.log('not found')
}
vs.
if (document.getElementById('header') == true) {
console.log('found')
} else {
console.log('not found')
}
The first if statement will check if the element exists, and if it does, return truthy.
The second statement using a loose equality will return an object which is a truthy value but NOT equal to boolean true! Resulting in logging the 'not found' else statement.
111
null and undefined unique feature?
they are both falsy, but they are not equal to anything other than themselves.
ex) null === undefined => false
112
conditional vs condition in code reading?
conditional includes all of the if and else statements
condition is the expression inside the parenthesis after the keywords if, else, while, etc.
113
What is a truthy/falsy value?
a value that will convert into a boolean true/boolean false.
114
Do order of conditionals matter in if...else and similar statements?
Yes! Try to go from detailed to general!
ex)
if the first condition is too general and has a return statement, the function will exit before it gets to the other conditions!
115
When do we use a for loop?
while loop?
do while loop?
for...in loop?
for loop = when we KNOW exactly when to STOP
while = executes a specified statement as long as the test condition evaluates to true. In other words when we DON'T know when to stop.
do while =
for..in = to go through an object
116
What does the keyword continue do in a loop?
Terminates execution of the statements in the current iteration of the current loop, and continues execution of the loop with next iteration.
117
What should you be careful of when declaring variables inside loops?
the variable will be redeclared every time the loop runs
*if the variable should not change within the loop, define it outside!
118
What is the purpose of a guard clause?
- to sift out potentially bad data that has no relation to the function
- to make our code easier to read:
the code block that we WANT to run shouldn’t seem like a result of a conditional
119
What is a SPA (single page application)?
application that uses one HTML document that has content that are hidden/ in view through JS
120
What is a data-* attribute?
It lets us customize an attribute!
ex) data-view
121
What is the affect of setting an element to display: none?
A value of display="none" indicates that the given element and its children will not be rendered.
When applied to a container element, the container and all of its children will be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none.
122
What does the element.matches() take as an argument and what does it return?
it takes a string containing a CSS selector as an argument
it returns a boolean
123
How do you retrieve the value of an element's attribute?
.getAttribute()
className
124
What is JSON?
a data interchange format used to send and store information in computer systems as a string representive of a JS object
125
What are serialization and deserialization?
serialization = all the data is in one location (simplified)
deserialization = bringing back the complexity of data being placed in all potentially different locations
Objects are stored in a memory space, but would this location be the same in another server? user? No! So serialization strips all the complexity = string, while deserialization recreates the data adding all the necessary parts like objects memory location/array indexes.
ex) objects and arrays are stored in different locations to let them grow!
126
Why are serialization and deserialization useful?
We use objects and arrays to make groups of data easier to work with!
But serialization is better to transfer/send data (ex: network request)!
Objects are stored in a memory space, but would this location be the same in another server? user? No!
127
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify();
128
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse();
129
What is AJAX?
It is a technique for loading data into part of a page without having to reload the entire page. It lets us create dynamic webpages using a technology called XMLHttpRequest (xhr);
130
What does the AJAX acronym stand for?
Asynchronous JS and XML
XML is becoming deprecated with the introduction of JSON
131
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
132
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
133
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance
sharing a prototype object!
134
What must the return value of myFunction be if the following expression is possible?
myFunction()();
Another function since the return has to be callable!
135
What does this code do?
const wrap = value => () => value;
Wrap is storing a function with one parameter value, and this function is returning another function that returns the same value. The second function knows the same value because the first function created a closure for the second function at its definition time.
136
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
When it is defined!
137
What allows JavaScript functions to "remember" values from their surroundings (lexical environment)?
Closures!
138
When do we use closures?
event handlers
