JavaScript Flashcards
What are objects used for?
Objects allow us to put data that makes sense together in one group/container.
What are object properties?
Data stored in an object.
Describe object literal notation.
var objectName = {
property: value,
otherProperty: otherValue
}
How do you remove a property from an object?
Using the delete operator.
delete object.propertyName
What are the two ways to get or update the value of a property?
Dot Notation:
object.propertyName = “new value”
Bracket Notation:
object[‘properyName’] = “new value”
What is the purpose of variables?
Variables allow us to store data in memory to use later.
How do you declare a variable?
var variableName;
How do you initialize (assign a value to) a variable?
var variableName = value;
What characters are allowed in variable names?
letters, numbers (non-starting), $, _
What does it mean to say that variable names are “case sensitive”?
When calling a variable, it must be exactly the name of that variable with exact casing.
variable and Variable are different variables.
What is the purpose of a string?
What is the purpose of a number?
What is the purpose of a boolean?
Strings store text data
Numbers store numbers, used for measurements, etc.
Booleans store true or false, used for yes and no situations
What does the = operator mean in JavaScript?
Assignment
How do you update the value of a variable?
varName = updatedValue;
What is the difference between null and undefined?
Null is a value for purposely blank, undefined means a variable has not been assigned a value
Why is it a good habit to include “labels” when you log values to the browser console?
Labels give us context to what is being logged.
What data type is returned by an arithmetic operation?
number
What is string concatenation?
The joining of strings
What purpose(s) does the + plus operator serve in JavaScript?
Addition, concatenation of strings
What data type is returned by comparing two values (, ===, etc)?
Boolean, with values true or false
What does the += “plus-equals” operator do?
Adds the right side value to the left side variable and reassigns that new value to the left side variable
What are arrays used for?
Arrays are used for storing lists of similar data.
Describe array literal notation.
[firstItem, secondItem]
How are arrays different from “plain” objects?
Arrays have order, item keys are indices.
What number represents the first index of an array?
0, arrays are 0 indexed
What is the length property of an array?
The length property is the number of items in the array
How do you calculate the last index of an array?
length-1
Why are function parameters useful?
Allows us to pass data in dynamically
What two effects does a return statement have on the behavior of a function?
1) Cause the function to produce a value
2) Exits the function, code in the code black after will not run
What is a function in JavaScript?
A callable object that contains reusable code
Describe the parts of a function definition.
- function keyword
- name
- (parameters)
- { code block
}
Describe the parts of a function call.
functionName(arguments);
When comparing them side-by-side, what are the differences between a function call and a function definition?
The definition has function keyword, code block, and paramters compared to arguments in the function call which has no function keyword and no code block
What is the difference between a parameter and an argument?
Parameters are placeholders in the function definition.
Arguments are actual values passed into a function call.
Why do we log things to the console?
For inspection, testing and spotting errors in code
What is a method?
How is a method different from any other function?
A function that is a property of an object.
How do you remove the last element from an array?
With the pop() method
array.pop()
How do you round a number down to the nearest integer?
Math.floor()
How do you generate a random number?
Math.floor(Math.random( ) * (end - start) + 1 ) + start
(end-start) - gives range
+1 - because Math.random( ) is 1 (non-inclusive)
How do you delete an element from an array?
array.splice(start, deleteCount)
Do string methods change the original string? How would you check if you weren’t sure?
No, strings are immutable
Alter a string, then console.log the original string
Is the return value of a function or method useful in every situation?
Not always, functions may just be used to change a variable but not have to return anything.
Give 6 examples of comparison operators.
> < >= <= == ===
What data type do comparison expressions evaluate to?
boolean, true or false
What is the purpose of an if statement?
To execute a block of code if the condition is truthy
Is else required in order to use an if statement?
No
Describe the syntax (structure) of an if statement.
if (condition) {
code block
}
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
Parenthesis around each expression and joined with a logical operator.
When does the condition expression of a while loop get evaluated?
At the beginning of each iteration, before the code block runs.
When does the initialization expression of a for loop get evaluated?
Before anything.
Once at the start of the loop.
When does the condition expression of a for loop get evaluated?
Before each.
Before each iteration.
When does the final expression of a for loop get evaluated?
After each.
After the code block and before the next iteration’s condition is evaluated.
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 after an expression.
How do you iterate through the keys of an object?
Using a for in loop.
What is a “model”?
A representation of the actual thing
Which “document” is being referred to in the phrase Document Object Model?
The HTML document
What is the word “object” referring to in the phrase Document Object Model?
JavaScript objects
What is the DOM?
Javascript object as a model of an HTML document.
Contains all the information about the HTML document but is NOT the HTML document
What is a DOM Tree?
A representation of all HTML elements as their own DOM nodes.
Why might you want to assign the return value of a DOM query to a variable?
To be able to reuse the queried value later on.
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
So all the HTML content prior can load first
What does document.querySelector() take as its argument and what does it return?
Takes a CSS selector and returns the first element that matches that selector
What does document.querySelectorAll() take as its argument and what does it return?
Takes a CSS selector and returns a NodeList of all matching element with that selector
What is the purpose of events and event handling?
To allow creation of interactive and dynamic websites
Are all possible parameters required to use a JavaScript method or function?
No,
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener() method
What is a callback function?
a function passed into another function that is then invoked inside that function
What object is passed into an event listener callback when the event fires?
The event object containing all information relevant to that specific event
What is the event.target? If you weren’t sure, how would you check?
Target is the element we are dealing with currently, where it originated from.
What is the textContent property of element objects?
The text content of a node and all descendent nodes
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More complicated.
Why is storing information about a program in variables better than only storing it in the DOM?
It’s better to have data stored in JavaScript if will be used again in JavaScript rather than querying for the element every time.
What is the className property of element objects? How do you update the CSS class attribute of an element using JavaScript?
The element's class attribute. targetElement.className = "class"
What is the affect of setting an element to display: none?
Visually hides the elements, but programatically still there
What does the element.matches() method take as an argument and what does it return?
returns true or false if the string CSS selector would be valid to match that element
How can you retrieve the value of an element’s attribute?
getAttribute() method
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?
Would have to create a 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?
Would have a long list of list of else if statements.
What is JSON?
It is a format design to replicate the format of JavaScript objects.
What are serialization and deserialization?
Serialization - process of turning an object in memory into stream of bytes (characters in a string)
Deserialization - turns stream of bytes into an object in memory
Why are serialization and deserialization useful?
Makes it possible to transfer the data within the contents of an object or array.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( ) method
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( ) method
How can you tell the difference between a method definition and a method call?
The method definition contains the keyword function and the code block.
The method call has the object followed by a dot and the method name with parenthesis and any args.
Describe method definition syntax (structure).
Assigning a function to a property in an object or adding to an object.
Describe method call syntax (structure).
object.method()
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (variables) and behavior (methods).
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “abstraction”?
Simplifying complex processes to into simple ways to interact with those complex things.
What does API stand for?
What is the purpose of an API?
Application Programming Interface.
To give programmers a way to interact with a system in a simplified way.
What is this in JavaScript?
Keyword referring to the object that it belongs to.
What does it mean to say that this is an “implicit parameter”?
Means it is present in any function code block despite it not being in the parameter or declared with var keyword.
When is the value of this determined in a function; call time or definition time?
During the call time.
Within the function definition, “this” does not have a value yet, it is nothing until call time.
How can you tell what the value of this will be for a particular function or method definition?
You cannot tell the value of ‘this’ because it is created when the function is invoked.
How can you tell what the value of this is for a particular function or method call?
When the function is invoked, ‘this’ is the object left of the dot. Otherwise ‘this’ does not exist yet and cannot have a value.
What kind of inheritance does the JavaScript programming language use?
Prototypal inheritance
What is a prototype in JavaScript?
An object that contains properties and methods that other objects can use.
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 those methods that other objects, arrays, and numbers can delegate to.
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
Looks in the object prototype.
What does the new operator do?
Creates a new instance of an object, sets the prototype of the object.
The ‘this’ becomes the new instance of the object
Runs the code.
Returns the object.
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
What does the instanceof operator do?
Checks to see if the prototype of a an object matches the prototype specified.
pet instanceOf petConstructor, returns true
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?
Can use setTimeout() function.
How can you set up a function to be called repeatedly without using a loop?
Can use setInterval( ) function.
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 milliseconds.
What do setTimeout() and setInterval() return?
They return timerID or intervalID
