JavaScript Flashcards
What is the purpose of variables?
Variables store data that will be used in the future
How do you declare a variable?
var variableName
var keyword + variable name
How do you initialize (assign a value to) a variable?
Assignment operator ( = )
var variableName = expression;
What characters are allowed in variable names?
all Alphanumeric characters and the underscore symbol
tip: can’t start variable names with number and recommended to not start with a capital
What does it mean to say that variable names are “case sensitive”?
Uppercased letters and lowercased letters are completely different in the case of names
var Apple is not the same as var apple
What is the purpose of a string?
String stores text data
What is the purpose of a number?
number stores number data for a mathematical expression
What is the purpose of a boolean?
Boolean is used for yes or no situations
What does the = operator mean in JavaScript?
Assignment operator ( = )
How do you update the value of a variable?
Assigning the variableName with a new expression or value
var A = 3 A = 6
variable A is now 6
What is the difference between null and undefined?
null is used when the developer intentionally wants a variable to be empty.
undefined occurs when a variable has not been assigned a value and is most oftentimes a bug in the code
Why is it a good habit to include “labels” when you log values to the browser console?
console logging “labels” makes it easier for debugging when checking through many different variables
Give five examples of JavaScript primitives.
String
Number
Boolean
Null
Undefined
What data type is returned by an arithmetic operation?
number data type
What is string concatenation?
String concatenation refers to the ( + ) in a string expression
Attaches a string value to another string value
What purpose(s) does the + plus operator serve in JavaScript?
Addition or concatenation
What data type is returned by comparing two values (, ===, etc)?
Boolean (true or false)
What does the += “plus-equals” operator do?
Addition-Assignment Operator ( += )
Adds/Concatenates the left operand with a number/string and assigns the value back to the left operand
motto += 2
motto = motto + 2
What are objects used for?
Objects are used to sort and categorize sets of data
What are object properties?
Object properties are names of each category the data will be sorted into
{
propertyName: propertyValue;
}
Describe object literal notation.
var objectName = { propertyName: propertyValue, property2Name: property2Value };
How do you remove a property from an object?
Use delete keyword to remove property from an object
var object = { property1: property1Value };
delete object.property1;
What are the two ways to get or update the value of a property?
dot notation => object.property1
bracket notation => object[‘property1’]
What are arrays used for?
Arrays are used for creating/sorting/organizing data into ordered lists
Describe array literal notation.
var Array = [ value1, value2, value3 ];
How are arrays different from “plain” objects?
Arrays are ordered while objects are not
Arrays do not have titles/property names for each value while objects do
Array values can be called upon based on their order in the list while Object values must use specific names of their properties to call upon values
Length of an array can easily be accessed while object’s cannot
What number represents the first index of an array?
0
array[0]
What is the length property of an array?
length property is how many values are in the array
length of the array
How do you calculate the last index of an array?
array.length - 1
var lastIndexOfArray = array[ array.length - 1 ] ;
Why do we log things to the console?
Debugging
Developers are able to check for errors as they build their code
What is a method?
A function inside of an object
How is a method different from any other function?
A method is a function inside of an object.
JavaScript method is an object property that has a function value while a function is a block of code designed to perform a particular task.
How do you remove the last element from an array?
array.pop() method
pop() removes last element from an array and returns that element
How do you round a number down to the nearest integer?
Math.floor()
method
How do you generate a random number?
Math.random() method
How do you delete an element from an array?
splice() method
splice method changes contents of an array by removing or replacing existing elements and/or adding new elements in place
splce(start, deleteCount, item1, itemN)
How do you append an element to an array?
push() method
push method adds one or more elements to the end of an array and returns the new length of the array
How do you break a string up into an array?
split() method’
split method divdes a string into an ordered list of substring, puts these substrings into an array, and returns the array
Do string methods change the original string? How would you check if you weren’t sure?
String methods don’t normally change the original string and you can console.log the original string after the method has been used to make sure
Roughly how many string methods are there according to the MDN Web docs?
Around 30-40ish
Is the return value of a function or method useful in every situation?
The return value is not always useful in every situation.
Depends on the context it is used in
Roughly how many array methods are there according to the MDN Web docs?
Around 30ish
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN Mozilla Developer Network
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?
Test whether a condition is true or false and then proceeds to do any statement in its code block if true
Is else required in order to use an if statement?
Else is not required to use an if statement
Describe the syntax (structure) of an if statement.
if ( condition ) { statement }
What are the three logical operators?
|| Or
&& And
! Not
How do you compare two different expressions in the same condition?
With the two logical operators:
&& And
|| Or
What is the purpose of a loop?
To run a code block a certain amount of times based on its condition
What is the purpose of a condition expression in a loop?
Condition expression in a loop instructs the loop to run a specific amount of times
What does “iteration” mean in the context of loops?
Iteration refers to the specific amount of the times the loop has already cycled through
When does the condition expression of a while loop get evaluated?
At the start of every iteration of the while loop
When does the initialization expression of a for loop get evaluated?
At the beginning of the loop
When does the condition expression of a for loop get evaluated?
At the start of every iteration of the for loop
When does the final expression of a for loop get evaluated?
At the end of an iteration of the loop
basically bottom of the code block of the loop
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break keyword
What does the ++ increment operator do?
The ++ operator increments a variable by 1
How do you iterate through the keys of an object?
For in loop
for ( keys in object) {
Will cycle through every property in the object
}
What event is fired when a user places their cursor in a form control?
focus event is fired
What event is fired when a user’s cursor leaves a form control?
blur event is fired
What event is fired as a user changes the value of a form control?
input event is fired
What event is fired when a user clicks the “submit” button within a < form > ?
submit event is fired
What does the event.preventDefault() method do?
Prevents the default behavior for an event
What does submitting a form without event.preventDefault() do?
It would refresh the page
What property of a form element object contains all of the form’s controls.
elements property holds all of the form’s control
What property of a form 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?
finishing the code and then realizing the entire block does not work
What is an advantage of having your console open when writing a JavaScript program?
Able to check if your code is working as you write it
Able to make changes to code and see it working realtime
Does the document.createElement() method insert a new element into the page?
No it does not
It creates a new element node inside the DOM but is not attached to the DOM yet
How do you add an element as a child to another element?
appendChild( ) method
What do you pass as the arguments to the element.setAttribute() method?
attribute title and name
What steps do you need to take in order to insert a new element into the page?
.querySelect( ) the parent element
.createElement( )
.appendChild( ) the element created to the parent element
What is the textContent property of an element object for?
1) To append text to a node
2) To get textContent from an element
Name two ways to set the class attribute of a DOM element.
.setAttribute( ) method
.className( ) method
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Makes it reusable and saves time so that you don’t have to repeat the same function over and over again
What is the event.target?
where the HTML element originated from
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event delegation allows the developer to traverse up the DOM tree and select ancestral elements based on relation to the element and more specifically tag names
What DOM element property tells you what type of element it is?
.tagName
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
Traverses the element and its parents until it finds a node that matches the specified CSS selector
How can you remove an element from the DOM?
Call the remove( ) method
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
Add event listener to the parent( ) and look for tag name of the specific element
What is the event.target?
The element that triggers the event
What is the affect of setting an element to display: none?
Removes the element from the document flow completely
No longer visible
What does the element.matches() method take as an argument and what does it return?
returns a boolean of whether the DOM element matches the selected element in the argument
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?
At every step of the solution
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?
Add event listeners for each individual 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?
Would have a long code block to check each condition manually
What is JSON?
JavaScript Object Notation
What are serialization and deserialization?
Serialization: Converting primitive data to serialized data ( series of bytes )
Deserialization: Converting the serialized data back to primitive data
In JavaScript, serialized data is string format
Why are serialization and deserialization useful?
Serialization: To take complex data and put it in a format that is easily transmissable to somewhere else
Deserialization: Serialized data is not efficient to format and deserialization allows interacting with data more usable
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( ) method
return is a string
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( ) method
What is a method?
A function stored inside of an object
How can you tell the difference between a method definition and a method call?
A method definition will include an entire function definition while a method call will be object.methodName + ( )
Describe method definition syntax (structure).
Any function definition being assigned.to a property (usually an anonymous function)
Describe method call syntax (structure).
Object name. propertyName holding the function ( )
How is a method different from any other function?
A method is stored inside a property of an object
What is the defining characteristic of Object-Oriented Programming?
Create objects where data and behavior that utilizes that data are in a shared space
So now methods can just access the data attached to the object that that method is attached to
Saves the need for parameters frequently
Object 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”?
Simpler way to access complex behavior
Idea of abstraction is to “simplify”
What does API stand for?
Application
Programming
Interface
What is the purpose of an API?
Set of functionality that’s been created to allow you to access functionality on some resource
Set of tools that have been created to allow you to access functionality of a complex system easily
The DOM is an example of an API
What is this in JavaScript?
‘this’ refers to the object you are currently working with
What does it mean to say that this is an “implicit parameter”?
A value provided to the function when it is invoked that is not listed in the parameter list but will always be there
A parameter you don’t have to state in your parameter list
When is the value of this determined in a function; call time or definition time?
this only has a value when it is running
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);
}
};
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
Given the above character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
this does not refer to anything yet because it has not been called
The string ‘it’s a me Mario!” will be outputted to the console
“It’s a me undefined!” because this acquires the property to the right of hello which in this case there is none which translates to the window object
How can you tell what the value of this will be for a particular function or method definition?
In a definition, you can’t know.
If you’re not using it, you are unable to know for sure.
What does the new operator do?
Creates a blank plain javascript object
Points it to the constructor function’s prototype property
Executes the constructor function
What property of JavaScript functions can store shared behavior for instances created with new?
Using the prototype property
What does the instanceof operator do?
Checks whether the object contains the stated prototype
How can you tell what the value of this is for a particular function or method call?
value of this is the object to the left of the method call
What kind of inheritance does the JavaScript programming language use?
Prototype based inheritance
or prototypal inheritance
What is a prototype in JavaScript?
What is a “callback” function?
What is Array.prototype.filter useful for?
Creating a new array while excluding some elements.
What is Array.prototype.map useful for?
Creating a new array containing the transformed elements of another.
