JavaScript Flashcards
1
Q
What is the purpose of variables?
A
A script will have to temporarily store the bits of information it
needs to do its job. It can store this data in variables.
2
Q
How do you declare a variable?
A
Before you can use a variable, you need to announce that you want to use it. This involves creating the variable and giving it a name. Programmers say that you declare the variable.
var quantity;
var = variable keyword
quantity = variable name
If a variable name is more than one word, it is usually written in camelCase. This means the first word is all lowercase and any subsequent words have their first letter capitalized.
3
Q
How do you initialize (assign a value to) a variable?
A
Once you have created a variable, you can tell it what information you would like it to store for you. Programmers say that you assign a value to the variable.
quantity = 3;
quantity = variable name
3 = variable value
= is the assignment operator
Until you have assigned a value to a variable, programmers say the value is undefined.
4
Q
What characters are allowed in variable names?
A
letters, numbers, dollar sign $, or an underscore _
numbers cannot be the first character of a variable name
5
Q
What does it mean to say that variable names are “case sensitive”?
A
For the variable to be recognized, it needs to be entered with the same casing as it was when it was declared.
6
Q
What is the purpose of a string?
A
Strings can be used when working with any kind of text. They are frequently used to add new content into a page and they can contain HTML markup.
Strings data type consists of letters and other characters. String data type is enclosed with a pair of quotes. These can be single or double quotes, but the opening quote must match the closing quote.
7
Q
What is the purpose of a number?
A
The numeric data type handles numbers. Numbers are not only used for things like calculators; they are also used for tasks such as determining the size of the screen, moving the position of an element on a page, or setting the amount of time an element should take to fade in.
8
Q
What is the purpose of a boolean?
A
Boolean data types can have one of two values: true or false. To determine if something is true or false, and to tell if script should run or not in conditionals.
You can think of it a little like a light switch - it is either on or off. As you will see in Chapter 4, Booleans are helpful when determining which part of a script should run.
9
Q
What does the = operator mean in JavaScript?
A
It is the assignment operator. It assigns whatever is on the right side, to whatever is on the left side.
i.e. var quantity = 3
3 is being assigned to the variable quanitity
10
Q
How do you update the value of a variable?
A
Reassigning it without declaring it again, you can leave off the var
i.e.
var totalPets = 1000;
totalPets = 1001;
11
Q
What is the difference between null and undefined?
A
Null is intentional whereas undefined hasn’t been assigned yet
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
If you do not include “labels”, it can be very confusing instead of helpful. A console log “label” is simply a short string that describes the variable or value being logged.
Since the console.log( ) method can write multiple values to the console at the same time, it’s easy to include a “label” when printing a value.
i.e.
console.log(‘typeof fullName’, typeof fullName) ->
typeof fullName: string
13
Q
Give five examples of JavaScript primitives.
A
string, number, bigint, boolean, undefined, symbol, and null.
14
Q
What data type is returned by an arithmetic operation?
A
Performs basic math, it returns a number
Addition operator is + (Adds one value to another)
Subtraction operator is - (Subtracts one value from another)
Division operator is / (Divides two values)
Multiplication operator is * (Multiplies two values using an asterisk)
Increment operator is ++ (Adds one to the current number)
Decrement operator is – (Subtracts one from the current number)
Modulus operator is % (Divides two values and returns the remainder)
Several arithmetic operations can be performed in one expression, but it is important to understand how the result will be calculated. Multiplication and division are performed before addition or subtraction. This can affect the number that you expect to see.
15
Q
What is string concatenation?
A
There is just one string operator: the+ symbol. It is used to join the strings on either side of it.
There are many occasions where you may need to join two or more strings to create a single value. Programmers call the process of joining together two or more strings to create one new string concatenation.
For example, you might have a first and last name in two separate variables and want to join them to show a fullName. In this example, the variable called fullName would hold the string ‘Ivy Stone’.
var firstName = ‘Ivy ‘ ;
var lastName = ‘ Stone’ ;
var fullName = firstName + lastName;
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
Adding number values and 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
The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable. The types of the two operands determine the behavior of the addition assignment operator. Addition or concatenation is possible.
i.e.
let a = 2;
let b = ‘hello’;
console.log(a += 3); // addition
// expected output: 5
console.log(b += ‘ world’); // concatenation
// expected output: “hello world”
19
Q
What are objects used for?
A
Objects group together a set of variables and functions to create a model of a something you would recognize from the real world. In an object, variables and functions take on new names.
20
Q
What are object properties?
A
If a variable is part of an object, it is called a property. Properties tell us about the object, such as the name of a hotel or the number of rooms it has. Each individual hotel might have a different name
and a different number of rooms.
21
Q
Describe object literal notation.
A
Literal notation is the easiest and most popular way to create objects. The object is the curly braces and their contents. The object is stored in a variable called hotel, so you would refer to it as the hotel object.
var hotel = {
name: ‘Quay’,
rooms: 40,
booked: 25,
checkAvailability: function () {
return this.rooms - this.booked;
}
};
hotel = object
var = key
name: ‘Quay’, = property
rooms: 40, = property
booked: 25, = property
checkAvailability: function () { = method
return this.rooms - this.booked;
}
22
Q
How do you remove a property from an object?
A
delete object.property
i.e. delete hotel.name;
If you just want to clear the value of a property, you could set it to a blank string.
hotel.name = ‘ ‘;
23
Q
What are the two ways to get or update the value of a property?
A
dot notation and square bracket syntax
24
Q
Bracket notation
A
Allows us to put a variable in the bracket and use the value stored in that variable, as the property name
i.e.
var prop = ‘color’;
vehicle[prop] = ‘white’;
Notice how there are no quotes around [prop], because it is not a string, but a variable.
It also allows us to create or access illegal names for variables/objects
25
Primitive data types vs. Reference data types
They are stored differently.
26
What are arrays used for?
An array is a special type of variable. It doesn't just store one value; it stores a list of values.
You should consider using an array whenever you are working with a list or a set of values that are related to each other.
Arrays are especially helpful when you do not know how many items a list will contain because, when you create the array, you do not need to specify how many values it will hold.
27
Describe array literal notation.
The values in the array do not need to be the same data type, so you can store a string, a number and a Boolean all in the same array.
This technique for creating an array is known as an array literal. It is usually the preferred method for creating an array. You can also write each value on a separate line:
colors = [ 'white',
'black',
'custom'];
28
How are arrays different from "plain" objects?
The key for each value in an array is an index number. The index number is the location in the array.
29
What number represents the first index of an array?
0
30
What is the length property of an array?
The length property tells you how many items are in the array.
31
How do you calculate the last index of an array?
array.length - 1
32
What is a function in JavaScript?
Functions allow you to package up code for use later in your program.
33
Describe the parts of a function definition.
Function definitions are made of:
- the function keyword
- an optional name
- zero or more parameters
- a code block
- an optional return statement
34
Describe the parts of a function call.
Functions are a special kind of object that is "callable". Functions are called with ( ) parentheses and passed zero or more arguments.
The function name followed by the arguments replacing the parameters in ( )
35
When comparing them side-by-side, what are the differences between a function call and a function definition?
The call is just the name and arguments (within parentheses)
36
What is the difference between a parameter and an argument?
Parameters are placeholders for arguments. The key thing to remember about parameters and arguments is that when we define a function, we declare parameters and that when we call a function, we pass it arguments.
37
Why are function parameters useful?
They let us pass data into the function and to variables that are only locally accessible to them
38
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.
39
Are variables within a function accessible?
No, variables defined within a function are inaccessible from the outside. However, they can access variables on the outside of the function.
(You cannot view it from the outside, but you can look outside - like a car's tinted window)
If they aren't defined as a variable, then they can be accessed from the outside. They would be noted as an auto global.
40
Why do we log things to the console?
The JavaScript console is a debugging tool. It is where the browser prints errors and warnings as they occur in your JavaScript code. The console is a crucial learning tool and should be used as much as possible to play with and learn about JavaScript. You should be using console.log ( ) and checking the console output frequently, so be sure to include "labels" with your console.log ( )s.
The user does not see the console. Anything you print the console, the end user will not see it, unless you add it to the DOM somewhere.
41
What is a method?
A method is a function which is a property of an object. There are two kinds of methods: instance methods which are built-in tasks performed by an object instance, or static methods which are tasks that are called directly on an object constructor.
42
How is a method different from any other function?
A method is a property of an object (assigned to the property of an object)
a method can be turned into a function if it is assigned to a property of an object
43
How do you remove the last element from an array?
the pop method
44
How do you round a number down to the nearest integer?
Math.floor method. The floor method of the Math object
45
How do you generate a random number?
Math.random method.
The random method of the Math object (the range of numbers generated is 0-1)
46
How do you delete an element from an array?
The splice method. It needs start and delete count parameters to know index to delete and how many to delete from there.
library.splice(1, 1)
Start at 1, delete 1
47
How do you append an element to an array?
The push method - the quickest way to append an element to an array
48
How do you break a string up into an array?
The split method
var fullName = 'Lisa Nguyen'
It will split Lisa and Nguyen
49
Do string methods change the original string? How would you check if you weren't sure?
They don't, they can create new strings stored to new variables, you can check by console logging them (the original variable, if the console log shows the original string, that means that the original string was not modified) and MDN. There is no way to change an existing string.
Avoid using string methods that have a trash icon because they are deprecated (on MDN website)
50
Roughly how many string methods are there according to the MDN Web docs?
50
51
Is the return value of a function or method useful in every situation?
No, you don't always need a return value when calling methods (splice, push, unshift) because if you are using it to modify something, you don't need to return it
52
Roughly how many array methods are there according to the MDN Web docs?
80+
53
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
54
How do you join a split string together?
Using the join method. Join can be used to remove white space.
55
What is JavaScript also known as?
ECMA Script. This is used my developers who create the engines that run JavaScript.
56
Give 6 examples of comparison operators.
< less than
> greater than
== is equal to
!= is not equal to
=== strictly equal to
!== strictly not equal to
>= greater than or equal to
<= less than or equal to
57
What data type do comparison expressions evaluate to?
boolean
58
What is the purpose of an if statement?
The if statement evaluates (or checks) a condition. If the condition evaluates to true, any statements in the subsequent code block are executed.
If the condition resolves to false, the statements in that code block are not run. (The script continues to run from the end of the next code block.)
59
Is else required in order to use an if statement?
It is not required to use an if statement.
The if ....else statement checks a condition. If it resolves to true, the first code block is executed. If the condition resolves to false, the second code block is run instead.
i.e.
if (score >= 50) {
congratulate();
}
else {
encourage();
}
If you require code to run only when the statement returns true (and do nothing else if false) then an else statement is not needed.
60
Describe the syntax (structure) of an if statement.
key word, condition, opening curly brace (start of code block), code to be executed, closing curly brace (end of code block)
if ( ) {
};
61
What are the three logical operators?
&& and
|| or
!= not
62
How do you compare two different expressions in the same condition?
using logical operators
If both of them need to be true, use &&
If only one of them need to be true, use or ||
63
What is the purpose of a loop?
Loops check a condition. If it returns true, a code block will run. Then the condition will be checked again and if it still returns true, the code block will run again. It repeats until the condition returns false. There are three common types of loops:
for, while, do while
64
What is the purpose of a condition expression in a loop?
The purpose is to end the loop. When the condition is no longer true, the loop ends. The script moves to the next line of code. Giving conditions for the code to be executed and where to stop.
65
What does "iteration" mean in the context of loops?
Each time the loop runs
66
When does the condition expression of a while loop get evaluated?
before each iteration
67
When does the initialization expression of a for loop get evaluated?
before anything else (the first time the for loop runs)
68
When does the condition expression of a for loop get evaluated?
before each loop iteration and after the initialization expression
69
When does the final expression of a for loop get evaluated?
the end of each loop iteration (after the work is completed)
70
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
a break statement will break out of the loop but not out of a function
71
What does the ++ increment operator do?
It is the incremental operator adding one to the counter, and assigns it to the i variable.
it substitute first and then adds after
i.e.
var a = 1
a++ will return 1
logging a will return 2
if you do ++a, it will increment the value first, and then substitute it
++a will return 3 and logging a will return 3
72
How do you iterate through the keys of an object?
With a For In Loop
73
Why do we log things to the console?
The JavaScript console is a debugging tool. It is where the browser prints errors and warnings as they occur in your JavaScript code. The console is a crucial learning tool and should be used as much as possible to play with and learn about JavaScript. You should be using console.log ( ) and checking the console output frequently, so be sure to include "labels" with your console.log ( )s.
The user does not see the console. Anything you print the console, the end user will not see it, unless you add it to the DOM somewhere.
74
What is a "model"?
When the browser loads a web page, it creates a model of the page in memory. The model is called a DOM tree, and it is stored in the browsers' memory.
It is a representation of something.
75
Which "document" is being referred to in the phrase Document Object Model?
Document Object - The current web page (the HTML document) loaded into each window is modelled using a document object. The title property of the document object tells you what is between the opening < title > and closing
< / title > tag for that web page.
76
What is the word "object" referring to in the phrase Document Object Model?
Object for the document, so the whole entire page since it is an object
77
What is a DOM Tree?
The DOM tree is a model of a webpage. It is stored in the browsers' memory.
78
Give two examples of document methods that retrieve a single element from the DOM.
getElementById('id') <-- This is faster because it does not have to search the document
querySelector('css selector')
79
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementByClassName('class')
getElementByTagName('tagName')
querySelectorAll('css selector')
80
Why might you want to assign the return value of a DOM query to a variable?
You often see element nodes stored in a variable for use later in the script. If your script needs to use the same element(s) more than once, you can store the location of the element(s) in a variable.
This saves the browser looking through the DOM tree to find the same element(s) again. It is known as caching the selection.
The variables store a reference to the object in the DOM tree (It is storing the location of the node).
81
What console method allows you to inspect the properties of a DOM element object?
console.dir ( )
82
Why would a < script > tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
83
What does document.querySelector( ) take as its argument and what does it return?
Selectors - A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SyntaxError exception is thrown.
Returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
84
What does document.querySelectorAll( ) take as its argument and what does it return?
selectors
A string containing one or more selectors to match against. This string must be a valid CSS selector string; if it's not, a SyntaxError exception is thrown.
Returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
85
What is the purpose of events and event handling?
Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events from the operating system), and other causes.
Event handlers let you indicate which event you are waiting for on any particular element.
When the user interacts with the HTML on a web page, there are three steps involved in getting it to trigger some JavaScript code.
Together these steps are known as event handling.
1. Select the element node(s) you want the script to respond to. For example, if you want to trigger a function when a user clicks on a specific link, you need to get the DOM node for that link element. You do this using a DOM query (see Chapter 5).
2. Indicate which event on the selected node(s) will trigger the response. Programmers call this binding an event to a DOM node. The previous two pages showed a selection of the popular events that you can monitor for.
3. State the code you want to run when the event occurs. When the event occurs, on a specified element, it will trigger a function. This may be a named or an anonymous function.
86
Are all possible parameters required to use a JavaScript method or function?
No, because you don't necessarily need to include a parameter.
Event or e is the most common parameter to pass when using a callback function.
87
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener method
88
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.
89
What object is passed into an event listener callback when the event fires?
event object
90
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The element that dispatches the event.
The target is always going to represent the element that was interacted with.
The read-only target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling (traveling back up the html document) or capturing phase (traveling down the html document) of the event.
The event.target property can be used in order to implement event delegation.
I would check MDN to get more information about it.
91
What is the difference between these two snippets of code?
element.addEventListener('click', handleClick)
element.addEventListener('click', handleClick( ))
The first EventListener is passing a listener event and a function name (calling the function and passing it as a parameter - callback function) whereas the second one is passing a listener event and a function that we are calling.
If we call the function as an argument, we are passing undefined into the function so it returns nothing -->
element.addEventListener('click', handleClick( ))
92
What is the className property of element objects?
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
The name className is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the DOM.
93
How do you update the CSS class attribute of an element using JavaScript?
Using the className property of the Element interface with an assignment operator. The value of the class attribute of the specified element will be updated.
94
What is the textContent property of element objects?
The textContent property of the Node interface represents the text content of the node and its descendants.
textContent gets the content of all elements, including and elements. In contrast, innerText only shows "human-readable" elements.
textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of "hidden" elements.
Differences from innerHTML
Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML.
95
How do you update the text within an element using JavaScript?
Using the textContent property of the Node interface with an assignment operator
96
Is the event parameter of an event listener callback always useful?
i.e. hotButton.addEventListener('click', function (event) { } )
It's not always useful, it's not always the case that we have to use parameters
97
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 because we wouldn't be able to compare it to a number to assign the hotButton the appropriate CSS class name
We would have to access the textContent from the DOM and manipulate the string
98
Why is storing information about a program in variables better than only storing it in the DOM?
So you can access it later / have easy access to it
99
What event is fired when a user places their cursor in a form control?
the focus event
100
What event is fired when a user's cursor leaves a form control?
the blur event
101
What event is fired as a user changes the value of a form control?
the input event
102
What event is fired when a user clicks the "submit" button within a < form >?
the submit event
103
What does the event.preventDefault( ) method do?
The preventDefault( ) method of the Event interface 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.
It prevents the default behavior.
104
What does submitting a form without event.preventDefault( ) do?
The browser will automatically reload the page with the form's values in the URL
105
What property of a form element object contains all of the form's controls?
The HTMLFormElement property elements returns an HTMLFormControlsCollection listing all the form controls contained in the element.
Elements property
106
What property of a form control object gets and sets its value?
The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of elements.
value (property)
string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.
107
What is one risk of writing a lot of code without checking to see if it works so far?
It would be difficult to find the error in your code/debugging it if you had already written a lot of code
ALWAYS CHECK YOUR STEPS! Checking as you go!
108
What is an advantage of having your console open when writing a JavaScript program?
To catch errors and debug
109
Does the document.createElement( ) method insert a new element into the page?
It only creates the element, it does not add the element to the page yet
110
How do you add an element as a child to another element?
appendChild( ) method
or append( ) method
111
What do you pass as the arguments to the element.setAttribute( ) method?
setAttribute(name, value)
name and value are passed as arguments
Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
112
What steps do you need to take in order to insert a new element into the page?
1. Create the element with createElement( ) method
-This element node is stored in a variable, when the element node is created, it is not yet part of the DOM tree.
2. Give it content with createTextNode ( ) method
- The node is stored in a variable, it can be added to the element node using the appendChild ( ) method. This provides the content for the element, although you can skip this step if you want to attach an empty element to the DOM tree.
3. Add it to the DOM with appendChild( ) method
- Now that you have your element, you can add it to the DOM tree using this method. It allows you to specify which element you want this node added to, as a child of it.
113
What is the textContent property of an element object for?
The textContent property of the Node interface represents the text content of the node and its descendants.
It'll create the node and add the text content to it.
114
Name two ways to set the class attribute of a DOM element.
element.setAttribute( )
element.className( )
divThirdColumn.classList.add('column-third')
115
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
1. Being able to access the function again if you need it for future use
2. You only have to change the code in one place if changes are needed in the future (like adding more functionality, fixing a bug, etc.)
3. It helps keep your code more organized because similar or related logic can be kept in one place
116
What is the event.target?
The read-only target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.
117
Why is it possible to listen for events on one element that actually happen on its descendent elements?
Because of event flow, this happens because of event bubbling and event capturing
event bubbling - the event starts at the most specific node and flows outwards to the least specific one. This is the default type of event flow with very wide browser support.
event capturing - the event starts at the least specific node and flows inwards to the most specific one. This is not supported in IE 8 and earlier.
the final parameter in the addEventListener( ) method lets you choose the direction to trigger events:
- true = capturing phase
- false = bubbling phase
118
What DOM element property tells you what type of element it is?
The tagName read-only property of the Element interface returns the tag name of the element on which it's called.
For example, if the element is an < img >, its tagName property is "IMG" (for HTML documents; it may be cased differently for XML/XHTML documents).
119
What does the element.closest( ) method take as its argument and what does it return?
It takes selectors as its argument and returns the closest ancestor element or itself, which matches the selectors. If there are no such element, it returns null.
120
How can you remove an element from the DOM?
The Element.remove( ) method removes the element from the DOM.
121
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
Adding the clickable DOM elements to the element that already has an event listener as its descendant or ancestor (event.target)
Add an event listener to the parent element, and it would work for all descendant elements
122
What is the affect of setting an element to display: none?
Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
If you want to visually hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parsable by assistive technology such as screen readers.
123
What does the element.matches( ) method take as an argument and what does it return?
The matches( ) method of the Element interface tests whether the element would be selected by the specified CSS selector.
It takes selectors (a string containing valid CSS selectors) as an argument and
returns true if the Element matches the selectors, otherwise, it returns false
124
How can you retrieve the value of an element's attribute?
The getAttribute( ) method of the Element interface returns the value of a specified attribute on the element.
Element.getAttribute( )
125
At what steps of the solution would it be helpful to log things to the console?
You should log every time you have a new variable, whenever you're setting something new to check if it is returning what you are expecting
EVERY STEP!
126
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?
Each tab would require its own addEventListener
127
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?
Incorporate some type of conditional block, one check for each of the possible element that it could be
128
What is JSON?
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is 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). You'll come across it quite often, so in this article we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.
JSON is an extremely common data interchange format used to send and store information in computer systems. Before JSON, XML was a popular data interchange format, but JSON's simplicity and readability has made it the preferred format.
JSON exists as a string — useful when you want to transmit data across a network. It needs to be converted to a native JavaScript object when you want to access the data. This is not a big issue — JavaScript provides a global JSON object that has methods available for converting between the two.
129
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
130
Why are serialization and deserialization useful?
Serialization is useful because you can transfer objects to main memory or across network, and deserialize them again later.
131
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( )
132
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( )
133
How do you store data in localStorage?
localStorage.setItem('myCat', 'Tom');
The setItem( ) method of the Storage interface, 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.
setItem(keyName, keyValue)
134
How do you retrieve data from localStorage?
The getItem( ) method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object.
135
What data type can localStorage save in the browser?
JSON Strings
136
When does the 'beforeunload' event fire on the window object?
The beforeunload event is 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.
137
What is a method?
A method is a function which is a property of an object. There are two kinds of methods: instance methods which are built-in tasks performed by an object instance, or static methods which are tasks that are called directly on an object constructor.
138
How can you tell the difference between a method definition and a method call?
A method definition defines the method with a code block/function, and a method call only calls the method's name on a certain object using ( )
139
Describe method definition syntax (structure).
const obj = {
foo( ) {
return 'bar';
}
};
140
Describe method call syntax (structure).
object.method( )
141
How is a method different from any other function?
A method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not.
142
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods).
143
What are the four "principles" of Object-Oriented Programming?
- Abstraction
- Encapsulation
- Inheritance
- Polymorphism
144
What is "abstraction"?
The process of removing or generalizing physical, spatial, or temporal details[2] or attributes in the study of objects or systems to focus attention on details of greater importance;[3] it is similar in nature to the process of generalization;
the creation of abstract concept-objects by mirroring common features or attributes of various non-abstract objects or systems of study[3] – the result of the process of abstraction.
The most important part of the term "abstraction" boils down to being able to work with (possibly) complex things in simple ways. You are already familiar with abstractions, though you may not have thought of them this way yet. Here are just a couple of everyday examples of abstractions.
A light switch
You usually flip a light switch on or off to control the light in a room. The reality is that you are closing an electrical circuit that connects to a mains breaker somewhere in your home so that 120 volts at 15 amps goes through a light bulb. But to you, you are "turning on the lights".
145
What does API stand for?
An application programming interface (API) is a way for two or more computer programs to communicate with each other.
146
What is the purpose of an API?
One purpose of APIs is to hide the internal details of how a system works, exposing only those parts a programmer will find useful and keeping them consistent even if the internal details later change. An API may be custom-built for a particular pair of systems, or it may be a shared standard allowing interoperability among many systems.
The term API is often used to refer to web APIs, which allow communication between computers that are joined by the internet. There are also APIs for programming languages, software libraries, computer operating systems, and computer hardware. APIs originated in the 1940s, though the term did not emerge until the 1960s and 1970s. Recent developments in utilizing APIs have led to the rise in popularity of microservices, which are ultimately loosely coupled services accessed through public APIs.
147
What is this in JavaScript?
this is an implicit parameter of all JavaScript functions
148
What does it mean to say that this is an "implicit parameter"?
this is different from explicit parameters: it's an implicit parameter, meaning that it is available in a function's code block even though it was never included in the function's parameter list or declared with var
149
When is the value of this determined in a function; call time or definition time?
the value of this is determined at call time.
the value of this can be recognized as "the object to the left of the dot" when the function is called (as a method).
150
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);
}
};
character variable
151
Given the above character object, what is the result of the following code snippet? Why?
character.greet( );
'It\'s-a-me, ' + this.firstName + '!';
The greet property has a value of an anonymous function with a message in a variable
152
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello( );
'It\'s-a-me, ' + undefined
It would come out as undefined because there's no firstName property of the window
hello is to the left of the ( ) and hello does not have a define object, it will default to the window and the window does not have + this.firstName property
153
How can you tell what the value of this will be for a particular function or method definition?
You cannot tell based on the definition, you can only tell what is being called
154
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).
155
What kind of inheritance does the JavaScript programming language use?
A core concept in Object-Oriented Programming is inheritance. The concept is given the name "inheritance" because it is similar to genetics. Parent organisms give traits to their offspring through their DNA. JavaScript includes a specific kind of inheritance known as prototype-based (or prototypal) inheritance. JavaScript objects give certain behaviors (methods) or data (properties) to other objects.
Prototypal inheritance in JavaScript a fairly simple concept (especially compared to this). 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 (verb) to that "prototype" object when they aren't able to perform the required tasks themselves.
156
What is a prototype in JavaScript?
As mentioned before, a JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
157
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?
Instead, those methods are defined on a "prototype" object and arrays simply borrow those methods when they're needed.
158
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
The prototype chain
159
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.
1. Creates a blank, plain JavaScript object. For convenience, let's call it newInstance.
2. Points newInstance's [[Prototype]] to the constructor function's prototype property, if the prototype is an Object. Otherwise, newInstance stays as a plain object with Object.prototype as its [[Prototype]]. (Binding whatever is on the prototype property of that object to the proto property of the new object)
Note: Properties/objects added to the constructor function's prototype property are therefore accessible to all instances created from the constructor function.
3. Executes the constructor function with the given arguments, binding newInstance as the this context (i.e. all references to this in the constructor function now refer to newInstance).
4. If the constructor function returns a non-primitive, this return value becomes the result of the whole new expression. Otherwise, if the constructor function doesn't return anything or returns a primitive, newInstance is returned instead. (Normally constructors don't return a value, but they can choose to do so to override the normal object creation process.) (NEVER return anything from your constructor function, it returns the object)
160
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
161
What does the instanceof operator do?
The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value. Its behavior can be customized with Symbol.hasInstance.
162
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.
163
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( ) is a global function, so you can call it directly by name without any object to the left of the dot. e.g. setTimeout(func, delay).
164
How can you set up a function to be called repeatedly without using a loop?
The setInterval( ) function, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval( ).
165
What is the default time delay if you omit the delay parameter from setTimeout( ) or setInterval( )?
The time, in milliseconds that the timer should wait before the specified function or code is executed. If this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle.
Defaults to 0 if not specified.
166
What do setTimeout( ) and setInterval( ) return?
setTimeout ( ) = The returned timeoutID 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 ( ) = The returned intervalID 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.
167
What is AJAX?
Ajax is a technique for loading data into part of a page
without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (or JSON).
Ajax allows you to request data from a server and load it without having to refresh the entire page.
168
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
169
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest object
170
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
The load event
171
Bonus Question: An XMLHttpRequest object has an addEventListener( ) method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance
172
What is a code block? What are some examples of a code block?
{ }
Code blocks are denoted by curly braces.
i.e. if else, for, do while, while, has a code block
173
What does block scope mean?
inside of a code block { }
174
What is the scope of a variable declared with const or let?
it is block-scoped
175
What is the difference between let and const?
Like the let keyword, the const keyword declares blocked-scope variables. However, the block-scoped variables declared by the const keyword can’t be reassigned.
The variables declared by the let keyword are mutable. It means that you can change their values anytime.
However, variables created by the const keyword are “immutable”. In other words, you can’t reassign them to different values.
Unlike the let keyword, you need to initialize the value to the variable declared by the const keyword.
176
Why is it possible to .push() a new value into a const variable that points to an Array?
Because it is possible to change the property/value of an object but not assign a value to the constant
177
How should you decide on which type of declaration to use?
Whether or not you want the object to be immutable or mutable
178
What is the syntax for writing a template literal?
you create a template literal by wrapping your text in backticks (`) as follows:
let simple = `This is a template literal`;
To instruct JavaScript to substitute a variable and expression, you place the variable and expression in a special block as follows:
${variable_name}
179
What is "string interpolation"?
String formatting: the ability to substitute part of the string for the values of variables or expressions.
180
What is destructuring, conceptually?
Assigns properties of an object to individual variables.
181
What is the syntax for Object destructuring?
ES6 introduces the object destructuring syntax that provides an alternative way to assign properties of an object to variables:
let { firstName: fname, lastName: lname } = person;
In this example, the firstName and lastName properties are assigned to the fName and lName variables respectively.
In this syntax:
let { property1: variable1, property2: variable2 } = object;
The identifier before the colon (:) is the property of the object and the identifier after the colon is the variable.
182
What is the syntax for Array destructuring?
function getScores( ) {
return [70, 80, 90];
}
let [x, y, z] = getScores( );
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90
The variables x, y and z will take the values of the first, second, and third elements of the returned array.
Note that the square brackets [ ] look like the array syntax but they are not.
183
How can you tell the difference between destructuring and creating Object/Array literals?
When are destructing, the property/values are on the left side of the variable/equal sign
When creating object/array literals, the properties/values are on the right of the equal side
184
What is the syntax for defining an arrow function?
let add = (x, y) => x + y;
185
When an arrow function's body is left without curly braces, what changes in its functionality?
Return keyword is not needed, it returns the result of the expression
However, if you use a statement, you must wrap it inside a pair of curly braces as in the following example:
let except = msg => {
throw msg;
};
186
How is the value of this determined within an arrow function?
Unlike an anonymous function, an arrow function captures the *this* value of the enclosing context instead of creating its own *this* context.
It is determined by the parent scope.
187
What is the JavaScript Event Loop?
It allows JavaScript to run asynchronous events in sequential order
188
What is different between "blocking" and "non-blocking" with respect to how code is executed?
Blocking = a code that is being run and preventing other code from being ran (the stack/queue will prevent other code from running)
Non-blocking is when the code is being accessed later (async) so that it is not blocking (it gets pushed to the side and the rest of the code keeps doing its thing- once it's done, it has some kind of callback function that goes back into the call stack)
