JavaScript Flashcards
Up until learning about OOP and ES6 and the event loop
What is the purpose of variables?
To store data for use later on
How do you declare a variable?
Var keyword and variable name
How do you initialize (assign a value to) a variable?
Variable Name = Variable Value
What characters are allowed in variable names?
letters, underscore, dollar sign, numbers (can’t start with this)
What does it mean to say that variable names are “case sensitive”?
There must be consistency in the way names are typed with capitalization
What is the purpose of a string?
Safe enclosure for text data. Add new content to a page.
What is the purpose of a number?
For math and other tasks like size of screen, moving the position of an element on a page, or setting the amount of time an element should take to fade in.
What is the purpose of a boolean?
Generates true or false to determine which part of script should run
What does the = operator mean in JavaScript?
Storing Values
How do you update the value of a variable?
Variable name = new value
What is the difference between null and undefined?
Null: can only exist if it is purposely assigned; acts as a purposeful empty much like a placeholder
Undefined: this is something uses to say nothing or ‘I don’t know’
Why is it a good habit to include “labels” when you log values to the browser console?
Easier for debugging
Give five examples of JavaScript primitives.
String, Number, Boolean, Null, Undefined
What data type is returned by an arithmetic operation?
Numeric
What is string concatenation?
Using the concatenation operator (+)
What purpose(s) does the + plus operator serve in JavaScript?
Concatenation and Math
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
The current value of variable + new value is a result of the new value of the original variable.
What are objects used for?
Grouped data of a set of variables and functions in relation to each other
What are object properties?
Variables that are part of an object
Describe object literal notation.
Curly braces with key value pairs
How do you remove a property from an object?
Delete operator
What are the two ways to get or update the value of a property?
Dot notation and square bracket notation
What are arrays used for?
Making lists of related data as the same type
Describe array literal notation.
[ ] with comma separated values
How are arrays different from “plain” objects?
Array: numbered indexes, uses [ ], has order and is less customizable
Objects: has properties, alphanumerical, uses { }, has no order and has more ability to be changed
What number represents the first index of an array?
0
What is the length property of an array?
Total number of values in an array
How do you calculate the last index of an array?
Length property of an array - 1
What is a function in JavaScript?
Reusable block of code instead of always repeating a set of instructions.
Describe the parts of a function definition.
Function Keyword Name (Optional) Parameter (Optional) Code Block Return Value (Optional)
Describe the parts of a function call.
Function name and argument
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function calls do not have the code block and function keyword
What is the difference between a parameter and an argument?
Parameter - used for function definition
Arguments - used for function call
Why are function parameters useful?
Allows the function to be more reusable by giving you more clarity on what arguments need to be called.
What two effects does a return statement have on the behavior of a function?
Stops function and gives return value.
Why do we log things to the console?
To check work and to debug
What is a method?
A function which is a property of an object
How is a method different from any other function?
Methods have a . with an object. We need to know where the function is coming from
How do you remove the last element from an array?
.pop( )
How do you round a number down to the nearest integer?
Math.floor( )
How do you generate a random number?
Math.random - generates 0 to 1 usually used for percentage to multiply against
How do you delete an element from an array?
.splice ( ) leaving out the parameters of item1, item2, item3 etc.
How do you append an element to an array?
.push ( )
How do you break a string up into an array?
.split ( )
Do string methods change the original string? How would you check if you weren’t sure?
No. You can check through console.log or MDN
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 not all the time sometimes it is just part of the sequence of steps.
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?
Helps code make a decision
Is else required in order to use an if statement?
No not all the time
Describe the syntax (structure) of an if statement.
If key word with a initializer, condition, and final expression in parenthesis followed by the conditional in { }
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
&&, ||
What is the purpose of a loop?
Repeats a chunk of code until the condition is met
What is the purpose of a condition expression in a loop?
Helps us stop the loop
What does “iteration” mean in the context of loops?
Each time code block runs
When does the condition expression of a while loop get evaluated?
Before each iteration
When does the initialization expression of a for loop get evaluated?
In the beginning once
When does the condition expression of a for loop get evaluated?
After the final expression and before each iteration
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?
Adds 1 to whatever the current value is
How do you iterate through the keys of an object?
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?
This prevents the default behavior of the element
What does submitting a form without event.preventDefault() do?
The page will refresh because the data of the form is being sent no where so it sends it to the page itself which will cause a reload.
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?
.value
What is one risk of writing a lot of code without checking to see if it works so far?
If it does not work it will be hard to spot the bug
What is an advantage of having your console open when writing a JavaScript program?
You will know when things need to be fixed
What is the event.target?
Element where event occurs
What is the affect of setting an element to display: none?
Hides element from viewport and is removed from document flow
What does the element.matches() method take as an argument and what does it return?
String for CSS selector and returns a boolean
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 to check your work
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?
You would have to put event listeners on each individual tab which would not be sustainable
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?
You would have a huge condition block which would need to be updates frequently if changed were made to the views
What is JSON?
It is a data interchange format
What are serialization and deserialization?
Serialization - turns object to a stream of bytes. Takes data and turns it into order
Deserialization - takes stream of bytes and turns it into an object. This is a format that we can work with
Why are serialization and deserialization useful?
For sending data over the 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?
setItem method
How to you retrieve data from localStorage?
getItem method
What data type can localStorage save in the browser?
Strings
When does the ‘beforeunload’ event fire on the window object?
When the window, the document and its resources are about to be unloaded.
What is a “callback” function?
Function being passed 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 ( ) method
How can you set up a function to be called repeatedly without using a loop?
setInterval ( ) method
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 - meaning execute “immediately” or more accurately on the next event cycle
What do setTimeout() and setInterval() return?
Returns a number ID
What is AJAX?
Allows you to request data from a server and load it
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 Event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They both share a prototype
What is a code block? What are some examples of a code block?
Code between two curly braces (ex: in if conditions, loops, function)
What does block scope mean?
Area within if, switch conditions or for and while loops.
What is the scope of a variable declared with const or let?
Block scope
What is the difference between let and const?
let can be reassigned while const cannot
Why is it possible to .push() a new value into a const variable that points to an Array?
Because you can change the contents of it but you cannot actually reassign the whole variable
How should you decide on which type of declaration to use?
Use let if you need to reassign. Use const if you don’t need to reassign.
What is the syntax for writing a template literal?
${...}
What is “string interpolation”?
Ability to embed variables inside a string
What is destructuring, conceptually?
Assigning properties and objects to individual variables
What is the syntax for Object destructuring?
const/let/var {list of properties} = Object (you want to deconstruct)
What is the syntax for Array destructuring?
const/let/var [list of elements] = Name of array (you want to deconstruct)
How can you tell the difference between destructuring and creating Object/Array literals?
Placement of the brackets in respect to = is important:
Creating usually means brackets are on the right side of the = while deconstructing means brackets are on the left side of the =
What is the syntax for defining an arrow function?
0 parameters ( ) => 1 parameter (parameter) => Multiple parameters (parameter, parameter) =>
When an arrow function’s body is left without curly braces, what changes in its functionality?
Nothing however, if you have multiple lines of code you need the curly braces
How is the value of this determined within an arrow function?
It will be defined in the surrounding scope the arrow is defined in
What is the JavaScript Event Loop?
Responsible for executing code, processing events, and executing queued tasks.
What is different between “blocking” and “non-blocking” with respect to how code is executed?
Blocking is synchronous
Non-blocking is asynchronous
What are the three states a Promise can be in?
Pending, fulfilled, rejected
How do you handle the fulfillment of a Promise?
then method
How do you handle the rejection of a Promise?
catch method
What is Array.prototype.filter useful for?
Truncates list depending on specific criteria
What is Array.prototype.map useful for?
When you want a new array with every element changed
What is Array.prototype.reduce useful for?
Combining an array to a single value
What is “syntactic sugar”?
Primarily for aesthetics - makes code easier to understand and more readable
What is the typeof an ES6 class?
Function
Describe ES6 class syntax
class OptionalName {
constructor()
optionalMethods()
}What is “refactoring”?
Rewriting and restructuring code for sustainability and viability while preserving original behavior
What must the return value of myFunction be if the following expression is possible?
myFunction()();
A function
What does this code do? const wrap = value => () => value;
Defines a function that takes an argument and returns a function that will return an argument.
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
Defined
What allows JavaScript functions to “remember” values from their surroundings?
Closures
