JavaScript Flashcards
What is the purpose of variables?
Variables store data!
How do you declare a variable?
Use the var, let, or const keyword
How do you initialize (assign a value to) a variable?
Follow the declaration with an “=“ and the value you’d like to assign
What characters are allowed in variable names?
Start with letter, underscore, or dollarsign. Afterwards — numbers are okay. No keywords! No dashes or periods~!
What does it mean to say that variable names are “case-sensitive”
the two variables lovesDogs and lovesdogs are different due to the D / d.
What is the purpose of a string?
Stores text-data, good for manipulation.
What is the purpose of a number?
Stores number-data, good for mathematics
What is the purpose of a Boolean?
Stores true/false data, good for logic
What does the = operator mean in Javascript?
Assignment operator — assigns right value to the left operand
How do you update the value of a variable?
Use the = operator with the variable on the left, and the new value on the right.
What is the difference between null and undefined?
Null is an intentionally empty value, undefined means no value was assigned
Why is it a good habit to include labels when logging values to the console?
When you add multiple console logs it gets confusing pretty quickly what you logging.
Give five examples of JavaScript primitives.
Number, string, Boolean, null, undefined
What is a JavaScript primitive?
A data that is not an object, and hence has no methods or properties.
What data type is retuned by an arithmetic operation?
Number is returned
What is string concatenation?
Joining together two strings and returning a new string
What purpose(s) does the + operator serve in JavaScript?
Adds two operands (not necessarily nums!)
What data type is returned by comparing two values (<, >, ===, etc.)?
Boolean (t / f)
What do the += “plus-equals’ operator do?
Shorthand — adds the value of right side to the left side variable and returns the result
How are reference data types and primitive data types stored differently?
Reference data types only store the memory pointer to that specific data
The two reference data types are…
Objects and arrays
What are objects used for?
To group together variables and functions in order to model something from the real world
What are object properties?
The variables of the object are its properties (its functions are known methods)
Describe object literal notation.
Declare variable and assign it the value of empty curly braces
How do you remove a property from an object
Use the delete keyword followed by the property and value
What are two ways to get or update the value of a property?
Dot & bracket notation
Dot notation vs bracket notation differences?
Dot notation requires a legal variable name —> bracket notation can also be used with variables
What are arrays used for?
Storing related data of unknown length — sort of like lists
Describe array literal notation.
var array = [data seperated by commas
How are arrays different from plain objects?
array keys are index numbers, object keys are assigned by us
What number represents the first index of an array?
Arrays are 0-indexed
What is the length property of an array?
It holds a number with the amount of items in the array
How do you calculate the last index of an array?
Use array.length - 1
What is a function in JavaScript?
A set of statements that performs a task — often with an input and output.
Describe the parts of a function definition.
Function keyword, function name (opt), (paramteter list), {code body, return(opt)}
Describe the parts of a function call.
Function name, (arguments)
How are function calls and function definitions different?
Definitions are stored in memory, calls look in memory and run the stored function
What is the difference between a parameter and an argument?
Parameters are for definitions, no concrete value —> arguments are for calling, has value
Why are function parameters useful?
They allow us to take advantage of a functions functionality by passing in specific arguments
What two effects does a return statement have on the behavior of a function?
- kicks you out of that execution context
- Specifies a value to be returned to the function caller
Why do we log things to the console?
It helps with debugging —> we can see what is stored in memory at that point
What is a method?
A property on objects with a function stored as the value
How is a method different from any other function?
Methods are linked directly to their related object —> otherwise they’re the exact same
How do you remove the last element from an array?
The pop method (no args)
How do you round a number down to the nearest integer?
The floor method (number to execute on)
How do you generate a random number?
Use the random method to get a num between 0 -> 1 (no args)
How do you delete an element from an array?
The splice method (takes starting index and number of elements to remove)
How do you append an element to an array?
The push method (element to push)
How do you break a string up into an array?
The split method (takes the character to split with)
Do string methods change the original string? How would you check if you weren’t sure?
Nope —> console.log(original string) to check for changes!
Roughly how many string methods are there according to MDN?
~50!
Roughly how many array methods are there?
~80!
Is the return value of a function or method useful in every situation?
Nope! Some methods alter the original array (like pop) & return undefined
What three-letter acronym should you always include when searching Google for answers?
MDN!
Give 6 examples of comparison operators.
<, >, <=, >=, ==, !=, !==, ===
What data type do comparison expressions evaluate to?
Boolean t/f
What is the purpose of an if statement?
To evaluate a condition and run code specific to that condition
Is “else” required in order to use an if statement?
Nope! (But it’s good practice if you’re trying to catch edge cases)
Describe the syntax of an if statement.
If keyword (condition) {code block to run if condition is satisified}
What are the three logical operators?
&& (and) || (or) ! (Not)
How do you compare two different expressions in the same condition?
Write the conditions in the same parenthesis, seperated by the desired logical operator.
What is the purpose of a loop?
To repeat code!
What is the purpose of a condition expression in a loop?
It tells the loop when to stop!
What does “iteration” mean in the context of loops?
Repeating some code over some data
When does the condition expression of a while loop get evaluated?
- Before the loop starts
- After each iteration
When does the initialization expression of a for loop get evaluated?
The first time the loop runs
When does the condition of a for loop get evaluated?
- After the initialization statement
- After each final expression
When does the final expression of a for loop get evaluated?
After each iteration of the loop
Besides the return statement, what keyword exits the loop before it evaluates to false?
Break statement will break the loop, but not the function
What does the ++ increment operator do?
- It increases the value of the affected variable by 1
- It substitutes first and THEN increments
How do you iterate through the keys of an object?
Use a for / in loop!
What event is fired when a user places their cursor in a form control?
The focus event
What event is fired when a user’s cursor leaves a form control?
The blur event
What event is fired as a user changes the value of a form control?
The input event
What event is fired when a user clicks the “submit” button in a form?
The submit event
What does the event.preventDefault() method do?
It prevents the page from reloading after submitting a form (default behavior)
What property of a form element object contains all of the form controls?
The form.elements property —> make sure you check legal variable names for {.notation}
What property of a form control object gets and sets its value?
Form.elements.(element-name).value
What is one risk of writing a lot of code without checking if it works?
When you inevitably run into a bug, you have no idea what part of the code it came from
What is an advantage of having your console open when writing a JavaScript program?
You can use it alongside console.logs to make sure your code does what you think it does
Pretty much all of the time you create a form, the first line will be…
event.preventDefault( );
What is the event.target?
The element that dispatched the event (the one the user interacted with)
What is the effect of setting an element to display: none?
It hides all content within that element from the user.
What does the element.matches( ) method take as an argument and what does it return?
Takes CSS selectors as the argument, returns true if the element matches the selector(s), otherwise returns false
How can you retrieve the value of an element’s attribute?
Use the getAttribute( ) method with the HTML attribute you are looking for.
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JS code be written instead?
You would have to create all those elements, give them the appropriate classes, append them as children, and give each child the appropriate event listener to hide/show on click.
If you didn’t use a loop to conditionally show or hide the views, how would your JS code be written instead?
You would have to add event listeners for each view item, and when that view item is clicked bring it into view, while hiding the other view items.
What is JSON?
JavaScript Object Notation —> text based format for represented structured data in objects
What are serialization and deserialization?
S: process of turning an object into a stream of bytes so you can send it / store it.
D: turnings stream of sent / stored information into an object in memory
Why are serialization and deserialization useful?
Whenever we want to send or store JS objects, we need a way to do it!
How do you serialize a data structure into a JSON string using JS?
JSON.stringify( ); parameters: value, replacer(opt.), space(opt.)
How do you deserialize a JSON string into a data structure using JS?
JSON.parse( ); parameters: text, reviver(opt.)
How do you store data in localStorage?
Use the setItem method and pass in the key and value of what you are storing (JSON value!)
How do you retrieve data from localStorage?
Use the getItem method and pass in the key of the JSON item you are pulling
What data type can localStorage save in the browser?
JSON
When does the ‘beforeunload’ event fire on the window object?
It happens before the page gets rid of all the data — before you leave the page, typically.
What is ‘this’ in JavaScript?
It’s an implicit parameter defined when the function is called
What does it mean to say that this is an “implicit” parameter?
It’s available in the code block even though it was never explicitly declared.
When is the value of ‘this’ determined in a function?
When the function is called.
How can you tell what the value of this will be for a particular function or method definition?
You can’t — this is not determined until that function is called. Look for where it’s called
How can you tell what the value of this is for a particular function or method call?
Look for the object to the left of the dot. If there’s no value there, ‘this’ is the global window object
What kind of inheritance does the JavaScript programming language use?
Prototypical inheritance
What is a prototype in JavaScript?
A mechanism that JS objects use to inherit features from one another
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t exist on strings, arrays, and numbers?
Through prototypical inheritance! The factory that makes strings attaches a prototype chain to strings that allows them to access the methods we are familiar with.
If an object does not have it’s own property of method by a given key, where does JavaScript look for it?
The prototype chain!
What does the new operator do?
The new operator creates an instance of an object. The type of instance is determined by the constructor following the new keyword.
Specifically, the 4 things the new operator does are…
- Creates a blank, plain JS object.
- Points newInstance’s [[prototype]] to the constructor function’s prototype property.
- It binds the ‘this’ keyword to that new object.
- If the constructor returns a non-primitive, the return value becomes the result of the entire new expression (but we never return anything from these constructors!)
What property of JavaScript functions can store shared behavior for instances created with new?
The prototype property allows shared behavior between instances created with new.
What does the instanceof operator do?
The instance of operator returns a bool (t / f) whether the object to the right is an instanceof the left.
What is a “callback” function?
A function that 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 JS function until some point in the future?
Use setTimeout(cb fx, time(Ms))
How can you set up a function to be called repeatedly without using a loop?
Use setInterval (cb fx, time(Ms) —> stop interval using clearInterval
What is the default time delay if you omit the delay parameter from setTimeout( ) or setInterval( )
0 —> the code will execute immediately (or more accurately, the next event cycle)
What do setTimeout() and setInterval() return?
They both return an ID —> can be passed to clearTimeout()/Interval() to cancel the timeout / interval.
What is array.prototype.filter useful for?
It’s good when you need to grab elements from an array that satisfy a certain condition
What is array.prototype.map useful for?
It’s good for when you want to do something to every element of the array
What is array.prototype.reduce useful for?
It’s good for when you want to reduce an array down to one value.
If your goal is to return an object from reduce, don’t forget to…
Start the recursion with a new empty object to prevent reference errors
What is “synatic sugar”
Syntatic sugar makes the code easier to read and understand
What is the type of an ES6 class?
It’s a function!
Describe ES6 class syntax?
Class keyword, name of class, optionally a constructor, optionally a method
What is refactoring?
Changing code structure without affecting it’s functionality.
Why is prototyping beneficial?
If we define a function on the constructor, each instance of that object gets a copy of that function (which is super overkill —> takes up a lot of memory). Defining it on the prototype means that all instances point to that same function (which saves memory)
