Javascript Flashcards
What is the purpose of a variable?
to provide a place to store data to access
in the future
How do you declare a variable?
var variable = value
How do you initialize (assign a value to) a variable?
by using =, with variable on left side and value on right
What characters are allowed in variable names?
letters, dollar sign, underscore, numbers(but cannot start with number)
What does it mean to say that variable names are “case sensitive”?
that uppercase and lowercase are entirely separate entities
What is the purpose of a string?
to store non-numerical values + data
What is the purpose of a number?
to store mathematical operations + numerics
What is the purpose of a boolean?
to store the true/false values and make decisions
What does the = operator mean in JavaScript?
to assign
How do you update the value of a variable?
by changing value after the = sign
What is the difference between null and undefined?
null = purposefully put by human programmer undefined = organic javascript
Why is it a good habit to include “labels” when you log values to the browser console?
to make it easier to debug
ALWAYS label
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?
combining two string using concatenation operator (+)
What purpose(s) does the + (plus) operator serve in JavaScript?
- to concatenate
2. to add
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
takes current value of variable and adds new value to variable and returns value of it
What are objects used for?
useful for storing multiple pieces of data that are related to each other
What are object properties?
names of the related pieces of objects
Describe object literal notation.
a set of curly braces, with keys and values within them
How do you remove a property from an object?
the delete operator
What are the two ways to get or update the value of a property?
dot notation and square bracket notation
ALWAYS use dot notation
What are arrays used for?
making lists of related data of the same type
Describe array literal notation
brackets [ } with commas separating values
How are arrays different from “plain” objects?
Arrays have numbered indexes,
objects have alpha numerical indexes
What number represents the first index of an array?
0
What is the length property of an array?
how long the array is /
how many pieces of data are in it
How do you calculate the last index of an array?
the length property of an array - 1
What is a function in JavaScript?
an expression that gives repeatability to a code block
Describe the parts of a function definition.
function keyword, optional name, parameters, function code block, optional return statement
Describe the parts of a function call.
function name, parenthesis, data in parenthesis
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call = no keyword, and no code block
What is the difference between a parameter and an argument?
parameters exist when defining a function,
arguments happen when calling a function
Why are function parameters useful?
they provide re-usability
What two effects does a return statement have on the behavior of a function?
- It stops the function
2. spits out the return value of the function
Why do we log things to the console?
to spit out the current value of things
What is a method?
a function stored as a property on an object
How is a method different from any other function?
methods always need dot (.) before they’re called,
functions can be called by themselves
How do you remove the last element from an array?
.pop() method
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
How do you append an element to an array?
.push() method
How do you break a string up into an array?
.split() method
Do string methods change the original string? How would you check if you weren’t sure?
No, and you can check with console log/MDN
Roughly how many string methods are there according to the MDN Web docs?
Around fifty, A lot
Is the return value of a function or method useful in every situation?
Not always
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.
strictly equal, less than or equal to, more than, more than or equal to, not equal
What data type do comparison expressions evaluate to?
boolean true/false
What is the purpose of an if statement?
let functions make decisions based on conditions
Is else required in order to use an if statement?
No
Describe the syntax (structure) of an if statement.
keyword if, condition in parenthesis, conditional code block
What are the three logical operators?
&& - and
|| - or
! - not
How do you compare two different expressions in the same condition?
using && - and or || - or
What is the purpose of a loop?
to keep repeating a chunk of code until a certain condition is met
What is the purpose of a condition expression in a loop?
to help stop the loop
What does “iteration” mean in the context of loops?
each time the 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 right before the code block
When does the final expression of a for loop get evaluated?
right 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 statement
What does the ++ increment operator do?
adds one to whatever the value is
How do you iterate through the keys of an object?
for ..in loops
Why do we log things to the console?
To inspect their value and make sure it’s up to par
What is a “model”?
A representation of something
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?
An object model of the HTML document
What is a DOM tree?
A JavaScript object for an HTML element that holds all of its children and children’s contents, values, text content and attributes
Give two examples of document methods that retrieve a single element from the DOM.
GetElementByID, querySelector
Give one example of a document method that retrieves multiple elements from the DOM at once.
QuerySelectorALL
Why might you want to assign the return value of a DOM query to a variable?
To go back and adjust it later
What console method allows you to inspect the properties of a DOM element object?
Console.dir
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The HTML needs to load before the script
What does document.querySelector() take as its argument and what does it return?
Returns the first element it finds and takes css selectors as arguments as strings
What does document.querySelectorAll() take as its argument and what does it return?
Arguments = string of css selector
Returns node list (array type of data)
Why do we log things to the console?
To check if the right value is returned
What is the purpose of events and event handling?
To create a reaction in response to something happening
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
What is a callback function?
A function definition being passed to another function as a value
What object is passed into an event listener callback when the event fires?
An object with a huge amount of properties with data explaining event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
Where the event EXACTLY occurs, more information available through console.log
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
One of the functions is being called and returns the return
The other one uses function DEFINITION
What is the className property of element objects?
a property stored on a DOM Element object that stores the class attributes of that object
How do you update the CSS class attribute of an element using JavaScript?
the className property with a value assigned to it
What is the textContent property of element objects?
allows to set or update text content of HTML element
How do you update the text within an element using JavaScript?
using .textContent and new string in parenthesis
Is the event parameter of an event listener callback always useful?
No
Would a DOM assignment be simpler or more complicated if a variable wasn’t used to keep track of the number of clicks?
would be simpler with variable
Why is storing information about a program in variables better than only storing it in the DOM?
so that you can use it later and to not mix languages with each other
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 default browser behavior for the element for that event
What does submitting a form without event.preventDefault() do?
It Acts as it normally would
What property of a form element object contains all of the form’s controls.
The .elements property
What property of a form control object gets and sets its value?
The value property
What is one risk of writing a lot of code without checking to see if it works so far?
If it doesn’t work, you don’t know where it’s broken
What is an advantage of having your console open when writing a JavaScript program?
So you know what goes right, wrong and in general so you know what goes on
Does the document.createElement() method insert a new element into the page?
No, it just creates one
How do you add an element as a child to another element?
.appendChild
What do you pass as the arguments to the element.setAttribute() method?
First string with the name of attribute, then second string as the value of the attribute
What steps do you need to take in order to insert a new element into the page?
.CreateElement method and append method on another element
What is the textContent property of an element object for?
It stores the text content of an HTML element to make new, or retrieve
Name two ways to set the class attribute of a DOM element.
className property and setAttribute method
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Easier to test, and easier to re-use
What is the event.target?
The element where the event occurred
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event bubbling
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
Takes a CSS selector string as an argument, and returns the ancestor of the element being called
How can you remove an element from the DOM?
.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 an eventListener to the parent
What is the event.target?
The element on which the event took place
What is the affect of setting an element to display: none?
It hides and removes the element from the document flow completely, yielding it’s space to visible elements
What does the element.matches() method take as an argument and what does it return?
$element.matches() takes a string containing a CSS selector as its argument and returns a Boolean indicating whether or not it matched the selector
How can you retrieve the value of an element’s attribute?
$element.getAttribute(‘attribute name’)
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?
You would have to add an event listener to each of the tab elements individually
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 to write out the code to hide and reveal views based on the condition of which tab was clicked
What is JSON?
JSON is a format for converting JavaScript objects into strings of text.
What are serialization and deserialization?
Serialization is the process of converting an object in memory into a stream of bytes.
Deserialization is converting the bytes to an object in memory
Why are serialization and deserialization useful?
They’re useful for transmitting JavaScript objects and the data they contain to other platforms that may not support JavaScript, but can read JSON strings.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify(object)
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse(JSONstring)
How do you store data in localStorage?
localStorage.setItem(‘name’, ‘value’)
How do you retrieve data from localStorage?
localStorage.getItem(‘name’)
What data type can localStorage save in the browser?
Strings. Other data types are converted to Strings, and Objects must be stringified first.
When does the ‘beforeunload’ event fire on the window object?
Before the page get unloaded
ie:
closed, refreshed, or clicked away from
What is a method?
A function stored as a value for a property of an object
How can you tell the difference between a method definition and a method call?
Call would include object.method()
Definition includes property with function
Ie:
Property: function()
Describe method definition syntax (structure).
Function definition that is being stored as property of an object
Describe method call syntax (structure).
Object.method(argument)
How is a method different from any other function?
A method NEEDS an object.
Functions are independent.
What is the defining characteristic of Object-Oriented Programming?
That an object can contain both data and methods to work together
What are the four “principles” of Object-Oriented Programming?
Abstraction, inheritance, polymorphism, incapsulation
What is “abstraction”?
Taking complex problems and making them accessible
What does API stand for?
Application Programming Interface
What is the purpose of an API?
To communicate between different pieces of software
What is this in JavaScript?
“This” is an implicit parameter that returns the value of the object from which the function was called
What does it mean to say that this is an “implicit parameter”?
That it’s given to the function even if you don’t see the parameter listed
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);
}
};
Nothing
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();
It’s a me mario
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?
var hello = character.greet; hello();
It’s a me undefined
How can you tell what the value of this will be for a particular function or method definition?
You can’t.
How can you tell what the value of this is for a particular function or method call?
By the object to the left of the dot
What kind of inheritance does the JavaScript programming language use?
Prototypal Inheritance
What is a prototype in JavaScript?
An object that a bunch of objects can build off of
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?
Because they’re grabbing it from the prototype
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
On the prototypes
What does the new operator do?
- Lets you create an object
- Adds property to new object proto
- Binds new object as this
- Returns “this” if function doesn’t return object
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype property
What does the instanceof operator do?
Checks whether or not an object is in the same prototypal chain
What is a “callback” function?
Functions being passed around as values
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?
Applying a delay with setTimeout()
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
A number id to represent the interval
What is a code block? What are some examples of a code block?
A codeblock is code between two curly braces
Ie:
Function codeblocks, conditional codeblocks
What does block scope mean?
Located within codeblock
What is the scope of a variable declared with const or let?
What the written code is applicable to
What is the difference between let and const?
Let can be reassigned, const cannot
Why is it possible to .push() a new value into a const variable that points to an Array?
Because you’re changing the contents, not reassigning the variable itself
How should you decide on which type of declaration to use?
If you need to reassign the variable, use let
Otherwise use const
What is the syntax for writing a template literal?
High quotation marks to initiate and close: ‘ ‘
Along with ${variable} to reference any variables within template literal
What is “string interpolation”?
Ability to embed variables within strings
What is destructuring, conceptually?
Assigning properties to individual variables
What is the syntax for Object destructuring?
Variable declaration, curly braces, property names, right side of = would be object being destructured.
What is the syntax for Array destructuring?
Variable declaration, square brackets, variables for elements at indexes, commas to separate and array being destructured on right side of =
How can you tell the difference between destructuring and creating Object/Array literals?
Placement of brackets in respect to assignment operator (left or right of object/array)
What is the syntax for defining an arrow function?
Variable name, assignment operator, parameter(more than one needs parenthesis), => operator and codeblock
When an arrow function’s body is left without curly braces, what changes in its functionality?
It will return expression without curly braces but needs curly braces for multiple lines of code
How is the value of this determined within an arrow function?
Based on surrounding scope that arrow function was defined in
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?
Returning a list of the filter criteria
What is Array.prototype.map useful for?
To apply something to every element in the array, and receive a new array with changes values for the whole original array
What is Array.prototype.reduce useful for?
Combining elements of an array into a single value
What is “syntactic sugar”?
Syntax that makes things easier to read, write, and understand
What is the typeof an ES6 class?
Function
Describe ES6 class syntax.
Class declaration, class body, class name, optional constructor function
What is “refactoring”?
Rewriting the same code with different syntax that accomplishes the same actions
How are ES Modules different from CommonJS modules?
- ES modules are built into JS
- Syntactically different
- No need for variable assignments in ES6
