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

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

How do youdeclarea variable?

A

var variableName;
Keywords: var, let, const

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

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

A

variableName = value;
= : assignment operator

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

What characters are allowed in variable names?

A

Must begin with a: letter, $, or _
can contain numbers (numbers CANNOT start variable name)

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

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

A

Declare different variables depending on upper or lower case usage:
score vs. Score

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

What is the purpose of a string?

A

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

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

What is the purpose of a number?

A

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

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

What is the purpose of a boolean?

A

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

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

What does the=operator mean in JavaScript?

A

Assignment operator: used to assign a value to a variable

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

How do you update the value of a variable?

A

variable = newValue;
Keyword is only necessary when declaring a new variable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

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

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

A

Helpful to identify what you are logging to the console

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

Give five examples of JavaScript primitives.

A

string, number, boolean, null, undefined
bigint, symbol
(7 total)

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

What data type is returned by an arithmetic operation?

A

Number

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

What is string concatenation?

A

Process of joining together two or more strings to create one new string

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

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

A

Adds one value to another
Sums numerical data or string concatenation

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

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

A

Boolean

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

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

A

Addition assignment: Adds the value of the right operand to a variable and assigns the result to the variable

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

What are objects used for?

A

Group together a set of variables and functions to create a model of something

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

What are object properties?

A

Variables that are part of an object

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

Describe object literal notation.

A

var object = {
key: value,
propertyName: value,
key: function() {
}
};

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

How do you remove a property from an object?

A

Delete operator
delete object.property;

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

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

A

Dot notation using member operator (.)
object.propertyName = newValue;
Square bracket syntax
object[‘propertyName’] = newValue;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

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

Describe array literal notation.

A

var array = [item1, item2, item3,… lastItem];

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

How are arrays different from “plain” objects?

A

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

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

What number represents the first index of an array?

A

0

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

What is thelengthproperty of an array?

A

Returns the number of items in the array
array.length

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

How do you calculate the last index of an array?

A

array[array.length - 1]

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

What is a function in JavaScript?

A

Functions allow you to package up code for use later in your program

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

Describe the parts of a functiondefinition.

A

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

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

Describe the parts of a functioncall.

A

example(arg1, arg2, arg3);

name of the function, arguments surrounded by () and separated by ,’s

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

When comparing them side-by-side, what are the differences between a functioncalland a functiondefinition?

A

Function definition has a function keyword!, parameters, code block!, and curly braces

Function call has name and arguments

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

What is the difference between aparameterand anargument?

A

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

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

Why are functionparametersuseful?

A

Placeholders
Allows us to write reusable code
Mutability to the code

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

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

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Why do we log things to the console?

A

Powerful tool for debugging and an easy way to inspect your variables in the browser

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

What is a method?

A

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

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

How is a method different from any other function?

A

Method is associated with an object, while a function is not

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

How do you remove the last element from an array?

A

.pop()

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

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

A

Math.floor(x)

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

How do you generate a random number?

A

Math.random()
range 0 to less than 1 (inclusive of 0, but not 1)

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

How do you delete an element from an array?

A

Math.splice(start, delCount)

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

How do you append an element to an array?

A

Math.push(element0, element1, … ,elementN)

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

How do you break a string up into an array?

A

.split()

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

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

A

No, string methods return the result of the method call as an array of substrings
Strings are immutable
console.log(string)

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

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

A

No, 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.

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

Give 6 examples of comparison operators.

A

<, >, <=, >=,
==, === (strict equal to: both type and value), !
=, !== (strict not equal to)

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

What data type do comparison expressions evaluate to?

A

Boolean

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

What is the purpose of anifstatement?

A

Evaluates (or checks) a condition. If the condition evaluates to true, any statement in the subsequent code blocks are executed.

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

Iselserequired in order to use anifstatement?

A

No

52
Q

Describe the syntax (structure) of anifstatement.

A

if (condition) {
//code block to execute if true;
}

53
Q

What are the three logical operators?

A

&& - AND
|| - OR
! - NOT

54
Q

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

A

Use && or || operator
(expression1 && or || expression2))

55
Q

What is the purpose of a loop?

A

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
Q

What is the purpose of aconditionexpression in a loop?

A

Instructs the code to run until a condition is met
Stops a loop

57
Q

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

A

How many times the code block runs

58
Q

Whendoes theconditionexpression of awhileloop get evaluated?

A

Before executing the code block, before each iteration

59
Q

Whendoes theinitializationexpression of aforloop get evaluated?

A

Evaluated once before the loop begins

60
Q

Whendoes theconditionexpression of aforloop get evaluated?

A

Evaluated right after initialization, for first iteration
Then evaluated once before each loop iteration, after the final expression

61
Q

Whendoes thefinalexpression of aforloop get evaluated?

A

Evaluated at the end of each loop iteration

62
Q

Besides areturnstatement, which exits its entire function block, which keyword exits a loop before itsconditionexpression evaluates tofalse?

A

Break

63
Q

What does the++increment operator do?

A

Adds one to the counter
Then saves that value to the variable

64
Q

How do you iterate through the keys of an object?

A

For in loop

65
Q

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

A

Focus event fires when an element had received focus

66
Q

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

A

Blur event fires when an element has lost focus

67
Q

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

A

Input event fires when the value of an input, select, or textarea element has been changed

68
Q

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

A

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
Q

What does theevent.preventDefault()method do?

A

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
Q

What does submitting a form withoutevent.preventDefault()do?

A

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
Q

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

A

Elements property = can be accessed by index number or by the value of its name attribute

$form.elements[i]
$form.elements.nameOfProperty

72
Q

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

A

Value property

$form.elements[i]value
$form.elements.nameOfProperty.value

73
Q

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

A

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
Q

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

A

Keep track of what your code is doing, logs and errors, in real time

75
Q

What is the affect of setting an element todisplay: none?

A

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
Q

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

A

Selectors - a string consisting valid CSS selectors to test the Element against
Returns Boolean true if the Element matches the selectors, false otherwise

77
Q

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

A

Element.getAttribute(attributeName)

78
Q

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

A

Every action that you write in code

79
Q

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

A

Write an event handler function to execute each tab

80
Q

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

A

Huge conditional block

81
Q

What is JSON?

A

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
Q

What are serialization and deserialization?

A

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
Q

What are serialization and deserialization?

A

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
Q

Why are serialization and deserialization useful?

A

Serialization allows data to be transmitted or stored data as byte streams
Deserialization allows for interaction with data

85
Q

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

A

JSON.stringify(): accepts an object as a parameter, and returns the equivalent JSON string

86
Q

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

A

JSON.parse(): accepts a JSON string as a parameter, and returns the corresponding JavaScript object

87
Q

How do you store data inlocalStorage?

A

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
Q

How do you retrieve data fromlocalStorage?

A

Storage.getItem(keyName)

89
Q

What data type canlocalStoragesave in the browser?

A

String

90
Q

When does the’beforeunload’event fire on thewindowobject?

A

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
Q

What is amethod?

A

A function which is a property of an object

92
Q

How can you tell the difference between a methoddefinitionand a methodcall?

A

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
Q

Describe methoddefinitionsyntax (structure).

A

var object = {
method: function (parameter) {
…code block…
}
};

94
Q

Describe methodcallsyntax (structure).

A

.method()

95
Q

How is a method different from any other function?

A

A method is associated with an object, while a function is not

96
Q

What is thedefining characteristicof Object-Oriented Programming?

A

Objects can contain both data (as properties) and behavior (as methods)

97
Q

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

A

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
Q

What is “abstraction”?

A

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 knowabstracted away, we reduce confusion and make it easy for other developers to know how to use our code and extend it.

99
Q

What does API stand for?

A

Application Programming Interface - a software-to-software interface that enables two applications to exchange data among each other

100
Q

What is the purpose of an API?

A

APIs enable two distanced entities to talk to each other in a standardized format

101
Q

What isthisin JavaScript?

A

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
Q

What does it mean to say thatthisis an “implicit parameter”?

A

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
Q

Whenis the value ofthisdetermined in a function;call timeordefinition time?

A

Call time

104
Q

What doesthisrefer to in the following code snippet?

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

A

No call time, this is an implicit parameter, a placeholder

105
Q

Given the abovecharacterobject, what is the result of the following code snippet? Why?

character.greet();

A

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
Q

Given the abovecharacterobject, what is the result of the following code snippet? Why?

var hello = character.greet;
hello();

A

String: ‘It’s-a-me, undefined!’
This is in a global context and is a reference to the window object

107
Q

How can you tell what the value ofthiswill be for a particular function or methoddefinition?

A

Can’t guarantee the value until the function is called. This is an implicit parameter, just a placeholder until the function is invoked.

108
Q

How can you tell what the value ofthisis for a particular function or methodcall?

A

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
Q

What kind of inheritance does the JavaScript programming language use?

A

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
Q

What is a prototype in JavaScript?

A

An object that contains properties and (predominantly) methods that can be used by other objects

111
Q

How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?

A

Methods are defined on a “prototype” object and strings, arrays, and numbers borrow those methods when they are needed

112
Q

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

A

Prototype object
JavaScript looks up its ancestral objects to borrow and grab from prototypal chain

113
Q

What does thenewoperator do?

A

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
Q

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

A

Prototype property (value is an object)

115
Q

What does theinstanceofoperator do?

A

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
Q

What is a “callback” function?

A

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
Q

Besides adding an event listener callback function to an element or thedocument, what is one way to delay the execution of a JavaScript function until some point in the future?

A

Global setTimeOut() method sets a timer which executes a function or specified piece of code once the timer expires.

118
Q

How can you set up a function to be called repeatedly without using a loop?

A

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
Q

What is the default time delay if you omit thedelayparameter fromsetTimeout()orsetInterval()?

A

Defaults to 0 is not specified

120
Q

What dosetTimeout()andsetInterval()return?

A

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
Q

What is AJAX?

A

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
Q

What does the AJAX acronym stand for?

A

Asynchronous JavaScript And XML

(XML - eXtensible Markup Language : precursor to JSON)
123
Q

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

A

XMLHttpRequest object

124
Q

What event is fired byXMLHttpRequestobjects when they are finished loading the data from the server?

A

load

125
Q

AnXMLHttpRequestobject has anaddEventListener()method just like DOM elements. How is it possible that they both share this functionality?

A

XMLHttpRequest is an object - has prototype Object - prototypal inheritance