JavsScript Flashcards
What is the purpose of variables?
-Store data for a script to do its job
How do you declare a variable?
-var
How do you initialize (assign a value to) a variable?
-By using the assignment operator
What characters are allowed in variable names?
-Letters, numbers, dollar signs, underscore
What does it mean to say that variable names are “case sensitive”?
-Score and score are different variable names
What is the purpose of a string?
-String type data consists of letters and other characters
What is the purpose of a number?
-Numeric data type handle number quantities
What is the purpose of a boolean?
-Boolean data types can have one of two values: true or false.
What does the = operator mean in JavaScript?
-Assign a value to the variable
How do you update the value of a variable?
-By using the assignment operator
What is the difference between null and undefined?
-null is an intentionally assigned value to a nonexistent or invalid object, undefined means a variable has been declared but not defined yet
Why is it a good habit to include “labels” when you log values to the browser console?
-A console log “label” is simply a short string that describes the variable or value being logged
Give five examples of JavaScript primitives.
-There are 7 primitive data types: string, number, bigint, boolean, undefined, symbol, and null
What data type is returned by an arithmetic operation?
-Single numerical value
What is string concatenation?
-Concatenate is a fancy programming word that means “join together”
What purpose(s) does the + plus operator serve in JavaScript?
-The addition operator produces the sum of numeric operands or string concatenation
What data type is returned by comparing two values (, ===, etc)?
-Boolean
What does the += “plus-equals” operator do?
-The addition assignment operator adds the value of the right operand to a variable and assigns the result to the variable.
What are objects used for?
-Objects group together a set of variables and functions
What are object properties?
-Variables that are part of an object
Describe object literal notation.
- Object is the curly braces and their contents
- Separate each key from its value using a colon
- Separate each property and method with a comma (not after the last value)
How do you remove a property from an object?
- delete object.property
- delete object[‘property’]
What are the two ways to get or update the value of a property?
-dot notation or square bracket syntax
What are arrays used for?
-Storing lists of values that are related to each other
Describe array literal notation.
- Values are assigned to the array inside a pair of square brackets
- Each value is separated by a comma
How are arrays different from “plain” objects?
-Arrays create and store lists of data in a single variable while objects represent a variable with properties
What number represents the first index of an array?
0
What is the length property of an array?
-Holds the number of items in the array
How do you calculate the last index of an array?
-Subtract 1 from the value of the length property of an array
What is a function in JavaScript?
-Series of statements grouped together to perform a specific task
Describe the parts of a function definition.
- function keyword
- Name for the function
- Comma-separated list of zero or more parameters surrounded by ()
- Start of code block indicated by {
- Optional return statement
- End of code block indicated by }
Describe the parts of a function call.
- Function name
- Comma-separated list of zero or more arguments surrounded by()
When comparing them side-by-side, what are the differences between a function call and a function definition?
- Function definitions require function keywords and function callings do not require function keywords
- Function definitions have parameters and function callings have arguments
What is the difference between a parameter and an argument?
- Function parameters are the names listed in the function’s definition
- Function arguments are the real values passed to the function
Why are function parameters useful?
-The parameter will be holding the value of the argument
What two effects does a return statement have on the behavior of a function?
- Causes the function to produce a value we can use in our program
- Prevents any more code in the function’s code block from being run
Why do we log things to the console?
-For debugging and an easy way to inspect your variables in the browser
What is a method?
-A method is a function that is a property of an object
How is a method different from any other function?
-Method is associated with an object while a function is not
How do you remove the last element from an array?
-Calling the pop() method of the array
How do you round a number down to the nearest integer?
-Calling the floor() method of the Math object
How do you generate a random number?
-Calling the random() method of the Math object
How do you delete an element from an array?
-Calling the pop() method of the array
How do you append an element to an array?
-Calling the push() method of the array
How do you break a string up into an array?
-Calling the split() method of the variable
Do string methods change the original string? How would you check if you weren’t sure?
- It does not
- Log the variable containing the original string to the console
Roughly how many string methods are there according to the MDN Web docs?
-A lot
Is the return value of a function or method useful in every situation?
-No because some functions don’t return any value
Roughly how many array methods are there according to the MDN Web docs?
-A lot
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
-MDN
Give 6 examples of comparison operators.
-==, !=, ===, !==, >, =, <=
What data type do comparison expressions evaluate to?
-Boolean
What is the purpose of an if statement?
- If statement evalutates a condition
- If condition evaluates to true, code block is executed
Is else required in order to use an if statement?
-Not required
Describe the syntax (structure) of an if statement.
- if keyword
- Condition between parenthesis
- Code block between curly braces
What are the three logical operators?
-&&, ||, !
How do you compare two different expressions in the same condition?
-Using &&
What is the purpose of a loop?
- Checks a condition and runs the code if the condition returns true
- Stops the code when the code returns false
What is the purpose of a condition expression in a loop?
-Determines whether to keep going or stop
What does “iteration” mean in the context of loops?
-Every time a code block runs
When does the condition expression of a while loop gets evaluated?
-Before the code block
When does the initialization expression of a for loop get evaluated?
-Start of the loop, before the condition
When does the condition expression of a for loop get evaluated?
-Before each iteration
When does the final expression of a for loop get evaluated?
-At the end of each iteration and before the condition runs again
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
-Break
What does the ++ increment operator do?
-Adds 1 to the counter
How do you iterate through the keys of an object?
-Using the for in loop
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
submit
What does the event.preventDefault() method do?
Default action should not be taken as it normally would be.
What does submitting a form without event.preventDefault() do?
Browser will automatically reload the page
What property of a form element object contains all of the form’s controls.
.elements
What property of form a control object gets and sets its value?
.name
What is one risk of writing a lot of code without checking to see if it works so far?
To avoid rewriting the entire code
What is an advantage of having your console open when writing a JavaScript program?
Constantly check if my code isn’t breaking
What is the event.target?
The target of the event (most specific element interacted with)
What is the affect of setting an element to display: none?
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).
What does the element.matches() method take as an argument and what does it return?
Checks if the element “is” the selector.
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
Every step
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?
Event listener for every DOM element
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?
Event listener for every DOM element
What is JSON?
JSON is an extremely common data interchange format used to send and store information in computer systems.
What are serialization and deserialization?
The process whereby an object or data structure is translated into a format suitable for transferral over a network, or storage
The process whereby a lower-level format is translated into a readable object or other data structure
Why are serialization and deserialization useful?
Useful when you want to transmit data across a network.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse
How do you store data in localStorage?
Storage.setItem()
How do you retrieve data from localStorage?
Storage.getItem()
What data type can localStorage save in the browser?
UTF-16 DOMString format, which uses two bytes per character
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
What is a method?
Method is a function which is a property of an object
How can you tell the difference between a method definition and a method call?
Method definition occurs inside the object literal while method call occurs by using dot notation
Describe method definition syntax (structure).
Defines method inside object literal without function keyword
Describe method call syntax (structure).
Call the method by using dot notation
How is a method different from any other function?
Method is associated with an object while a function is not
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
Abstraction, Encapsulation, Inheritance, Polymorphism
What is “abstraction”?
Being able to work with possibly complex things in simple ways
What does API stand for?
Application Programming Interface
What is the purpose of an API?
Offers service to other pieces of software
What is this in JavaScript?
Object this is acting on
What does it mean to say that this is an “implicit parameter”?
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
When is the value of this determined in a function; call time or definition time?
Call time
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);
}
};nothing
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
‘It’s-a-me, Mario!’
this is character
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!’
How can you tell what the value of this will be for a particular function or method definition?
If you cannot see the function being called, then you do not know what the value of this will be.
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).
What kind of inheritance does the JavaScript programming language use?
prototype-based inheritance
What is a prototype in JavaScript?
JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
Methods are defined on a “prototype” object and arrays simply borrow those methods when they’re needed
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
Prototypes
What does the new operator do?
- Creates a blank, plain JavaScript object
- Adds a property to the new object (__proto__) that links to the constructor function’s prototype object
- Binds the newly created object instance as the this context
- Returns this if the function doesn’t return an object
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
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
- Return value is a boolean value
What is a callback function?
A callback function is a function passed into another function as an argument
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()
How can you set up a function to be called repeatedly without using a loop?
-setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
-Execute immediately
What do setTimeout() and setInterval() return?
-Positive integer value which identifies the timer created by the call to setTimeout() or setInterval()
What is a client?
-Piece of computer hardware or software that accesses a service made available by a server
What is a server?
-Piece of computer hardware or software that provides functionality for other programs or devices
Which HTTP method does a browser issue to a web server when you visit a URL?
-GET
What three things are on the start-line of an HTTP request message?
-HTTP method, request target, HTTP version
What three things are on the start-line of an HTTP response message?
-Protocol version, status code, status text
What are HTTP headers?
-HTTP headers let the client and the server pass additional information with an HTTP request or response
Where would you go if you wanted to learn more about a specific HTTP Header?
-MDN
Is a body required for a valid HTTP request or response message?
- Not all HTTP requests or responses have a body
- Requests fetching resources, like GET, HEAD, DELETE, or OPTIONS, usually don’t need one
- Responses with a status code that sufficiently answers the request without the need for corresponding payload usually don’t
What is AJAX?
-Technique for loading data into part of a page without having to refresh the entire page
What does the AJAX acronym stand for?
-Asynchronous JavaScript and XML
Which object is built into the browser for making HTTP requests in JavaScript?
-XMLHttpRequest or XHR
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
-load
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
- XHR object inherits properties of XMLHttpRequestEventTarget and of EventTarget
- XHR objects DOM element are both a event targets and share the addEventListener method
What is Array.prototype.filter useful for?
-For creating a new array with all elements that pass the test implemented by the provided function
What is Array.prototype.map useful for?
-Creates a new array populated with the results of calling a provided function on every element in the calling array
What is Array.prototype.reduce useful for?
- Executes a “reducer” callback function on each element of the array
- Passes the return value from the calculation on the preceding element
- The return value of reduce() is a single value
