JavaScript Flashcards
1
Q
What is the purpose of variables?
A
Store data, information in variables
Data can change (vary) each time a script runs
2
Q
How do youdeclarea variable?
A
var variableName;
Keywords: var, let, const
3
Q
How do you initialize (assign a value to) a variable?
A
variableName = value;
= : assignment operator
4
Q
What characters are allowed in variable names?
A
Must begin with a: letter, $, or _
can contain numbers (numbers CANNOT start variable name)
5
Q
What does it mean to say that variable names are “case sensitive”?
A
Declare different variables depending on upper or lower case usage:
score vs. Score
6
Q
What is the purpose of a string?
A
To store text, letters and other characters
Enclosed within a pair of quotes
Frequently used to add new content into a page and they can contain HTML markup
7
Q
What is the purpose of a number?
A
To store numerical data
Calculate, determine size of screen, move position of an element on a page, set the amount of time an element should take to fade in
8
Q
What is the purpose of a boolean?
A
Boolean data types store one of two values: true or false
Purpose: Make decisions
Used like a switch: on or off
Helpful when determining which part of a script should run
9
Q
What does the=operator mean in JavaScript?
A
Assignment operator: used to assign a value to a variable
10
Q
How do you update the value of a variable?
A
variable = newValue;
Keyword is only necessary when declaring a new variable
11
Q
What is the difference betweennullandundefined?
A
Null is an assigned value, purposefully designated empty by developer while Undefined is returned by the browser
Null: represents a reference that points, generally intentionally, to a nonexistent or invalid object or address
Undefined: automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
Helpful to identify what you are logging to the console
13
Q
Give five examples of JavaScript primitives.
A
string, number, boolean, null, undefined
bigint, symbol
(7 total)
14
Q
What data type is returned by an arithmetic operation?
A
Number
15
Q
What is string concatenation?
A
Process of joining together two or more strings to create one new string
16
Q
What purpose(s) does the+plus operator serve in JavaScript?
A
Adds one value to another
Sums numerical data or string concatenation
17
Q
What data type is returned by comparing two values (<,>,===, etc)?
A
Boolean
18
Q
What does the+=”plus-equals” operator do?
A
Addition assignment: Adds the value of the right operand to a variable and assigns the result to the variable
19
Q
What are objects used for?
A
Group together a set of variables and functions to create a model of something
20
Q
What are object properties?
A
Variables that are part of an object
21
Q
Describe object literal notation.
A
var object = {
key: value,
propertyName: value,
key: function() {
}
};
22
Q
How do you remove a property from an object?
A
Delete operator
delete object.property;
23
Q
What are the two ways to get or update the value of a property?
A
Dot notation using member operator (.)
object.propertyName = newValue;
Square bracket syntax
object[‘propertyName’] = newValue;
24
Q
What are arrays used for?
A
Store a list of variables and set of values that are related to each other
Group together like data
25
Describe array literal notation.
var array = [item1, item2, item3,… lastItem];
26
How are arrays different from "plain" objects?
Special type of object, hold a relates set of key/value pairs (like all objects), but the key for each value is its index number
Arrays do not have individually names pieces of data, ordered in numeric values, 0 index
.length is applicable to array, don’t know how many data is in an object
.push() is applicable to array, dot notation or square bracket syntax to assign properties to objects
27
What number represents the first index of an array?
0
28
What is the length property of an array?
Returns the number of items in the array
array.length
29
How do you calculate the last index of an array?
array[array.length - 1]
30
What is a function in JavaScript?
Functions allow you to package up code for use later in your program
31
Describe the parts of a function definition.
function example(parameter1, parameter2, parameter3, …) {
//…code…
return;
}
function keyword, (optional) name, parameters surrounded by () and separated by ,’s, opening curly brace for the code block, (optional) return statement, closing curly brace to end the code block
32
Describe the parts of a function call.
example(arg1, arg2, arg3);
name of the function, arguments surrounded by () and separated by ,’s
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function definition has a function keyword!, parameters, code block!, and curly braces
Function call has name and arguments
34
What is the difference between a parameter and an argument?
Parameter is a placeholder, a variable whose value is not known until we call the function and pass an argument
Define functions use parameter, Call functions use arguments
35
Why are function parameters useful?
Placeholders
Allows us to write reusable code
Mutability to the code
36
What two effects does a return statement have on the behavior of a function?
1. Causes the function to produce a value we can use in our program
2. Prevents any more code in the function’s code block from being run
37
Why do we log things to the console?
Powerful tool for debugging and an easy way to inspect your variables in the browser
38
What is a method?
A function which is a property of an object
Instance methods - built-in tasks performed by an object instance
Static methods - tasks that are called directly on an object constructor
39
How is a method different from any other function?
Method is associated with an object, while a function is not
40
How do you remove the last element from an array?
.pop()
41
How do you round a number down to the nearest integer?
Math.floor(x)
42
How do you generate a random number?
Math.random()
range 0 to less than 1 (inclusive of 0, but not 1)
43
How do you delete an element from an array?
Math.splice(start, delCount)
44
How do you append an element to an array?
Math.push(element0, element1, … ,elementN)
45
How do you break a string up into an array?
.split()
46
Do string methods change the original string? How would you check if you weren't sure?
No, string methods return the result of the method call as an array of substrings
Strings are immutable
console.log(string)
47
Is the return value of a function or method useful in every situation?
No, some functions don’t return any value
Example: displayMessage(), no specific value is returned when the function is invoked, it just makes a box appear somewhere on the screen
Generally, a return value is used where the function is an intermediate step in a calculation of some kind. You want to get to a final result, which involves some values that need to be calculated by a function. After the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.
48
Give 6 examples of comparison operators.
<, >, <=, >=,
==, === (strict equal to: both type and value), !
=, !== (strict not equal to)
49
What data type do comparison expressions evaluate to?
Boolean
50
What is the purpose of an if statement?
Evaluates (or checks) a condition. If the condition evaluates to true, any statement in the subsequent code blocks are executed.
51
Is else required in order to use an if statement?
No
52
Describe the syntax (structure) of an if statement.
if (condition) {
//code block to execute if true;
}
53
What are the three logical operators?
&& - AND
|| - OR
! - NOT
54
How do you compare two different expressions in the same condition?
Use && or || operator
(expression1 && or || expression2))
55
What is the purpose of a loop?
Repeat a function by checking a condition and if it returns true, a code block will run until its final expression tells it to stop
56
What is the purpose of a condition expression in a loop?
Instructs the code to run until a condition is met
Stops a loop
57
What does "iteration" mean in the context of loops?
How many times the code block runs
58
When does the condition expression of a while loop get evaluated?
Before executing the code block, before each iteration
59
When does the initialization expression of a for loop get evaluated?
Evaluated once before the loop begins
60
When does the condition expression of a for loop get evaluated?
Evaluated right after initialization, for first iteration
Then evaluated once before each loop iteration, after the final expression
61
When does the final expression of a for loop get evaluated?
Evaluated at the end of each loop iteration
62
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break
63
What does the ++ increment operator do?
Adds one to the counter
Then saves that value to the variable
64
How do you iterate through the keys of an object?
For in loop
65
What event is fired when a user places their cursor in a form control?
Focus event fires when an element had received focus
66
What event is fired when a user's cursor leaves a form control?
Blur event fires when an element has lost focus
67
What event is fired as a user changes the value of a form control?
Input event fires when the value of an input, select, or textarea element has been changed
68
What event is fired when a user clicks the "submit" button within a form
Submit event fires on the form element itself, and not on any button or input type='submit' inside it, when the user clicks a submit button or presses Enter while editing a field in a form
69
What does the event.preventDefault() method do?
Tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be
70
What does submitting a form without event.preventDefault() do?
Browser will automatically reload the page to try to send the data to the value attributed to action in the form element
.addEventListener on a submit event will ALWAYS be paired with event.preventDefault(), should be first line of function
71
What property of a form element object contains all of the form's controls.
Elements property = can be accessed by index number or by the value of its name attribute
$form.elements[i]
$form.elements.nameOfProperty
72
What property of a form control object gets and sets its value?
Value property
$form.elements[i]value
$form.elements.nameOfProperty.value
73
What is one risk of writing a lot of code without checking to see if it works so far?
Don’t know where the bug happened
Should write code one line at a time and check frequently to see if desired action is achieved with each line
74
What is an advantage of having your console open when writing a JavaScript program?
Keep track of what your code is doing, logs and errors, in real time
75
What is the affect of setting an element to display: none?
Removes element from the document flow
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
76
What does the element.matches() method take as an argument and what does it return?
Selectors - a string consisting valid CSS selectors to test the Element against
Returns Boolean true if the Element matches the selectors, false otherwise
77
How can you retrieve the value of an element's attribute?
Element.getAttribute(attributeName)
78
At what steps of the solution would it be helpful to log things to the console?
Every action that you write in code
79
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?
Write an event handler function to execute each tab
80
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?
Huge conditional block
81
What is JSON?
JavaScript Object Notation - a standard text-based format for representing structured data based on JavaScript object syntax, commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa)
82
What are serialization and deserialization?
Serialization - the process of converting the state of an object in memory into a byte stream, which then can be saved into a file on the local disk or sent over the network to any other machine
Deserialization - the reverse process, reconverting the serialized byte stream to an object
83
What are serialization and deserialization?
Serialization - the process of converting the state of an object in memory into a byte stream, which then can be saved into a file on the local disk or sent over the network to any other machine
Deserialization - the reverse process, reconverting the serialized byte stream to an object
84
Why are serialization and deserialization useful?
Serialization allows data to be transmitted or stored data as byte streams
Deserialization allows for interaction with data
85
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify(): accepts an object as a parameter, and returns the equivalent JSON string
86
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse(): accepts a JSON string as a parameter, and returns the corresponding JavaScript object
87
How do you store data in localStorage?
Storage.setItem(keyName, keyValue) - when passed a key name and value, will add that key to the given Storage object, or update that key’s value if it already exists
88
How do you retrieve data from localStorage?
Storage.getItem(keyName)
89
What data type can localStorage save in the browser?
String
90
When does the 'beforeunload' event fire on the window object?
Close tab, refresh tab, close browser
Fired when the window, the document, and its resources are about to be unloaded, the document is still visible and the event is still cancelable at this point.
This even enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user confirms, the browser navigates to the new page, otherwise it cancels the navigation
91
What is a method?
A function which is a property of an object
92
How can you tell the difference between a method definition and a method call?
Method definition will have a function code block, function keyword, and assignment to a property with a colon (:)
Presence of parenthesis is indicative of a method call.
93
Describe method definition syntax (structure).
var object = {
method: function (parameter) {
…code block…
}
};
94
Describe method call syntax (structure).
.method()
95
How is a method different from any other function?
A method is associated with an object, while a function is not
96
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods)
97
What are the four "principles" of Object-Oriented Programming?
Abstraction - a concept of an idea which is not associated with any particular instance (one class should not know the inner details of another in order to use it, just knowing the interfaces should be good enough
Encapsulation - mechanism of hiding data implementation by restricting access to public methods by keeping instance variables private but accessor methods public
Inheritance - ability to reuse common logic and extract unique logic into separate classes by creating a child class by deriving from another parent class to form a hierarchy
Polymorphism - gives a way to use a class exactly like its parent so there’s no confusion with mixing types, but each child class keeps its own methods as they are.
98
What is “abstraction"?
Abstractions are conceptual models that give us a good enough understanding of inventions that are much more complex behind the scenes. In OOP, the inventions that we aim to simplify and make easy to use are objects. By keeping what’s not necessary for the client to know abstracted away, we reduce confusion and make it easy for other developers to know how to use our code and extend it.
99
What does API stand for?
Application Programming Interface - a software-to-software interface that enables two applications to exchange data among each other
100
What is the purpose of an API?
APIs enable two distanced entities to talk to each other in a standardized format
101
What is this in JavaScript?
The this keyword is a reference to an object depending on how this is being invoked (used or called).
The value that this stores is the current execution context of the JavaScript program. Thus, when used inside a function this’s value will change depending on how that function is defined, how it is invoked and the default execution context. Note: this always holds the reference to a single object, that defines the current line of code’s execution context.
102
What does it mean to say that this is an "implicit parameter”?
An implicit parameter is available in a function’s code block even though it was never included in the function’s parameter list or declared with var.
103
When is the value of this determined in a function; call time or definition time?
Call time
104
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);
}
};
No call time, this is an implicit parameter, a placeholder
105
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
String: ’It’s-a-me, Mario!’
Invoked greet function on the character object
Function is being called, this is referring to the character object
106
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
String: ‘It’s-a-me, undefined!’
This is in a global context and is a reference to the window object
107
How can you tell what the value of this will be for a particular function or method definition?
Can’t guarantee the value until the function is called. This is an implicit parameter, just a placeholder until the function is invoked.
108
How can you tell what the value of this is for a particular function or method call?
The value of this can be recognized as “the object to the left of the dot” when the function is called (as a method).
109
What kind of inheritance does the JavaScript programming language use?
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
110
What is a prototype in JavaScript?
An object that contains properties and (predominantly) methods that can be used by other objects
111
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?
Methods are defined on a “prototype” object and strings, arrays, and numbers borrow those methods when they are needed
112
If an object does not have its own property or method by a given key, where does JavaScript look for it?
Prototype object
JavaScript looks up its ancestral objects to borrow and grab from prototypal chain
113
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function
Creates an empty object
Points the new object’s [[Prototype]] to the constructor function’s prototypes property
Executes the constructor function with given arguments, binding new object as the ‘this’ context
Returns the object is no other return value is specified
114
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype property (value is an object)
115
What does the instanceof operator do?
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.
116
What is a "callback" function?
A function passed into another functions as an argument, which is then invoked inside the outer function to complete some kind of routine or action
117
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?
Global setTimeOut() method sets a timer which executes a function or specified piece of code once the timer expires.
118
How can you set up a function to be called repeatedly without using a loop?
setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, which a fixed time delay between each call
Returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval()
119
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
Defaults to 0 is not specified
120
What do setTimeout() and setInterval() return?
setTimeout() returns timeoutID which is a positive integer value which identifies the timer created by the call to setTimeout(). This value can be passed to clearTimeout() to cancel the timeout
setInterval() returns intervalID which is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval
121
What is AJAX?
A technique for loading data into a part of a page without having to refresh the entire page. The data is often sent in a format called JSON (JavaScript Object Notation)
A programming practice of building complex, dynamic webpages using technology known as XMLHttpRequest. Ajax allows you to update parts of the DOM of an HTML page without the need for a full page refresh. Ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading).
122
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
(XML - eXtensible Markup Language : precursor to JSON)
123
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest object
124
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
125
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
XMLHttpRequest is an object - has prototype Object - prototypal inheritance
