JavaScript Flashcards
What is the purpose of variables?
To store data so we can access them in the future and multiple times
How do you declare a variable?
Using the variable keyword ‘var’
How do you initialize (assign a value to) a variable?
Using the assignment operator “=” after declaring the variable
What characters are allowed in variable names?
Letters, numbers (but cannot start with a number), dollar signs and underscore
What does it mean to say that variable names are “case sensitive”?
The same word with a capital letter would be different variable names
What is the purpose of a string?
To save text content or series or characters
What is the purpose of a number?
To save for counting and calculating sums
What is the purpose of a boolean?
To save for when there are only two values “True & False” or “Yes & No”. Used for decisions
What does the = operator mean in JavaScript?
It is an assignment operator. It assigns values to variables
How do you update the value of a variable?
To reassign it by using the declared value
What is the difference between null and undefined?
Null is an intentional absence of a value (var hello = null) whereas undefined is a variable that hasn’t been initialized yet (just declared ‘var hello;’)
Why is it a good habit to include “labels” when you log values to the browser console?
So you can easily see what is being logged
Give five examples of JavaScript primitives. String, boolean, number, null, undefined
What data type is returned by an arithmetic operation?
An expression
What is string concatenation?
Joining two or more string values to create a new string
What purpose(s) does the + plus operator serve in JavaScript?
To add number values or to concatenate string values
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
Adds or concatenates the value of the right to the left of the operator and then assigns the result of the expression to the to the variable on the left
What are objects used for?
To group together a set of variables and functions around one subject
What are object properties?
A variable within an object
Describe object literal notation.
Define a new variable and assign it to an object literal using curly braces. Using property and values
How do you remove a property from an object?
Delete operator followed by dot notation object.property
What are the two ways to get or update the value of a property?
Using the dot notation or the bracket notation
What are object methods?
A function within an object
What are arrays used for?
Arrays store a list of values that are related to each other
Describe array literal notation.
Define a new variable and assign it to an array literal notation using square brackets.
How are arrays different from “plain” objects?
They are listed in a number index
What number represents the first index of an array?
0
What is the length property of an array?
.length - tells you how many properties are in an array
How do you calculate the last index of an array?
Object.length - 1
What is a function in JavaScript?
Special type of object that can be called multiple times
Describe the parts of a function definition.
Function keyword, optional name, zero or more parameters surrounded by parentheses, start of code block, optional return statement, closing code block
Describe the parts of a function call.
Function name with parentheses with or without arguments
When comparing them side-by-side, what are the differences between a function call and a function definition?
Call is to run/pass the arguments. Function definition has a code block with ‘instructions’.
What is the difference between a parameter and an argument?
Parameter is what is listed in the function definition. Argument is the function call (actual values passed)
Why are function parameters useful?
Placeholder - to pass additional information into the function
What two effects does a return statement have on the behavior of a function?
It causes the function to produce a value and prevents any more code in the function’s code block from being run
Why do we log things to the console?
To check our progress and see if the outcome is what we are expecting or not
What is a method?
A function that is stored within a property of an object
How is a method different from any other function?
A function can be called directly by its name, but a method is called using the dot notation
How do you remove the last element from an array?
Using the method .pop() - it also returns that removed element
How do you remove the first element from an array?
Using the method .shift() - it also returns that removed element
How do you round a number down to the nearest integer?
Using the object & method Math.floor()
How do you generate a random number?
Using the object & method Math.random()
function getRandomNumberInRange(start, end) {
var randomNum = Math.floor(math.random() * (end - start) + 1) + start;
return randomNum;
}
How do you delete an element from an array?
Using the method .splice()
How do you append an element to an array?
Using the method .push()
How do you break a string up into an array?
Using the method .split()
Do string methods change the original string? How would you check if you weren’t sure?
No. By console logging the variable of the original string.
Roughly how many string methods are there according to the MDN Web docs?
37
Is the return value of a function or method useful in every situation?
No, we don’t always need to return.
Roughly how many array methods are there according to the MDN Web docs?
39
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
“MDN”
How do you prepend an element to an array?
Using the method .unshift()
Give 6 examples of comparison operators.
Equal to, is not equal to, greater than, less than, strictly equal to, greater than or equal to
What data type do comparison expressions evaluate to?
Boolean
What is the purpose of an if statement?
If a condition is met - if it is a truthy
Is else required in order to use an if statement?
No. We don’t have to use something else if it’s not true.
Describe the syntax (structure) of an if statement
If keyword with condition in parentheses and the code block
What are the three logical operators?
And operator (&&), Or operator (||), Not operator or bang (!)
How do you compare two different expressions in the same condition?
Put them in parentheses with a logical operator
What is the purpose of a loop?
To allow us to repeat code
What is the purpose of a condition expression in a loop?
To tell loop the start and stop point to run
What does “iteration” mean in the context of loops?
It represents the code in the curly brace that will be run - a single time the code block runs
When does the condition expression of a while loop get evaluated?
The beginning of each iteration, right before the code block is run
When does the initialization expression of a for loop get evaluated?
Only once before anything. Tells us where to start
When does the condition expression of a for loop get evaluated?
Happens after the initialization and before each iteration before it continues
When does the final expression of a for loop get evaluated?
After each iteration
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?
Increments the variable by one
How do you iterate through the keys of an object?
A 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?
Prevents the default action from being played out
What does submitting a form without event.preventDefault() do?
Refreshes page
What property of a form element object contains all of the form’s controls?
Elements - use it by typing it in the console ie. $form.elements
What property of form a control object gets and sets its value?
Value property
What is one risk of writing a lot of code without checking to see if it works so far?
You won’t know where to look
What is an advantage of having your console open when writing a JavaScript program?
You can see what is being logged
What is the event.target?
The target property returns the DOM element object that triggered the event
What is the effect of setting an element to display: none?
It visually removes it from the page (from the document flow)
What does the element.matches() method take as an argument and what does it return?
It takes a css selector and returns true or false
How can you retrieve the value of an element’s attribute?
Using the .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?
Create new event listener for every view
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?
Write code for every situation (many else if statements)
What is JSON?
Standard string format to transmit data in web applications
What are serialization and deserialization?
Serialization is turning an Object into a stream of bytes. Deserialization is taking a stream of bytes and converting it back into an Object
Why are serialization and deserialization useful?
To transfer data over a network
How do you serialize a data structure into a JSON string using JavaScript?
Using JSON.stringify()
How do you deserialize a JSON string into a data structure using JavaScript?
Using JSON.parse()
How do you store data in localStorage?
setItem(). First argument is the keyName and the second argument is Value. Both in quotes
How do you retrieve data from localStorage?
Using .getItem()
What data type can localStorage save in the browser?
Strings, but because of JSON, we can store arrays and objects as well
When does the ‘beforeunload’ event fire on the window object?
Right before the window is closed or reloaded
What is a method?
A function that is stored in a property of an object
How can you tell the difference between a method definition and a method call?
Definition has a code block. Method call is a dot notation and is being called with an object. Parameters vs arguments
Describe method definition syntax (structure).
Function with function name being defined with none or more parameters. Opening code block and possible code inside. Or function being assigned to a property of an object.
Describe method call syntax (structure).
Object, dot notation, method and parentheses with one or more arguments
How is a method different from any other function?
It has to be attached to an object. Function is not associated with objects
What is the defining characteristic of Object-Oriented Programming?
It is based on the concept of objects. 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”?
It is simplifying complex things
What does API stand for?
Application Programming Interface
What is the purpose of an API?
Abstraction. A collection of tools created for someone else to use without needing to understand every piece that is happening
What is this in JavaScript?
The object that it is in. It is a keyword
What does it mean to say that this is an “implicit parameter”?
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
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);
}
};It is nothing!
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
It’s-a-me, Mario! The greet function is being called and this is being given a value
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’s referencing the window because there is no object hello() is attached to
How can you tell what the value of this will be for a particular function or method definition?
Unless you’re actively using the keyword, ‘this’ is nothing.
How can you tell what the value of this is for a particular function or method call?
The object the method is invoked on. Window for a general function
What kind of inheritance does the JavaScript programming language use?
Prototypal inheritance
What is a prototype in JavaScript?
An object that contains properties where we can create new things on
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?
The prototype object has built in properties
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
It looks in the object prototype
What does the new operator do?
Allows a new object instance to be created. Make an empty object,adds a property to the new object that links to the constructor functions’ prototype object, binds the newly created object instance as the ‘this’ context and returns ‘this’
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype
What does the instanceof operator do?
Tests to see if the prototype property (constructor) occurs in the object
What is a “callback” function?
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?
Using the setTimeout() function
How can you set up a function to be called repeatedly without using a loop?
Using setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
The return of setTimeout is a positive integer value which identifies the timer created by the call to setTimeout(). The return of setInterval is a numeric, non-zero value which identifies the timer created by the call to setInterval()
What is AJAX?
A 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
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?
They both share an object in the prototypal chain - EventTarget
