JavaScript Flashcards
What is the purpose of variables?
Store bits of data.
How do you declare a variable?
create a variable using
var(variable keyword) then providing it a name quantity(variable name): var quantity;
How do you initialize (assign a value to) a variable?
By using the =(assignment operator) sign followed by the data.
What characters are allowed in variable names?
a-z, 0-9, $ and _
What does it mean to say that variable names are “case sensitive”?
You can have two variables with different cases that refer to different variables but use the same word.
What is the purpose of a string?
To store written text often times information about a user.
What is the purpose of a number?
Used to count the items of things or doing mathematical equations.
What is the purpose of a boolean?
Gives us the ability to make decisions.
What does the = operator mean in JavaScript?
It is the assignment operator.
How do you update the value of a variable?
use the variable name followed by = and the new value:
fullname = Kalen Cobb
What is the difference between null and undefined?
Null = used by a developer to denote future use
undefined is usually accidental and the computer is telling you it is undefined.
Why is it a good habit to include “labels” when you log values to the browser console?
So you can keep track of your output.
Give some examples of JavaScript primitives.
strings, numbers, booleans, null, undefined.
What datatype is returned by an arithmetic operation?
Number
What is string concatenation?
The conjoining of two or more strings together using the + operator.
What purpose(s) does the + plus operator serve in JavaScript?
Addition and Concatenation
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
Addition Assignment
adds whatever is on the right side to the value of the variable and then the result of that expression is assigned to the variable.
What are objects used for?
A box to keep related stuff together
What are object Properties?
Another way to store data, exclusive to the specific variable
Describe object literal notation.
Properties and values nested inside curly braces.
How do you remove a property from an object?
delete operator (although this is rare)
What are the two ways to get or update the value of a property in JavaScript?
dot notation or bracket notation
What are arrays used for?
Storing lists of data
Describe array literal notation.
values nested inside square brackets.
How are arrays different from “plain” objects?
Arrays are an ordered list with numeric indexes
What is the length property of an array?
A property that holds the number of items in an Array
How do you calculate the last index of an array?
array.length -1
Describe the parts of a function definition.
- Function keyword
- Function name (optional)
- Comma separated parameters surrounded by parenthesis ( ).
- Function code block starting with an opening curly brace {
- Optional return statement
- end of the functions code block indicated by a closing curly brace }
What is a function in JavaScript?
A group of actions that are repeatable
When comparing them side-by-side, what are the differences between a function call and a function definition?
The Definition is followed by the code block which holds the tasks, while the Call is followed by parentheses only.
What is the difference between a parameter and an argument?
A parameter is a placeholder for the argument that is passed to it.
When comparing them side-by-side, what are the differences between a function call and a function definition?
The function keyword will not be present when being called.
What is the difference between a parameter and an argument?
A parameter is a variable placeholder for the argument that is passed to it.
Why are function parameters useful?
We can input data we didn’t previously have when writing the function.
What two effects does a return statement have on the behavior of a function?
- Causes the function to produce a value we can use in our program.
- Prevents any more code in the function’s code block from being run.
Why do we log things to the console?
To debug our work during the development phase.
What is a method?
A method is a function which is a property of an object.
How is a method different from any other function?
It is being used ON an object (object.method())
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()
How do you delete an element from an array?
Use .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 look at the documentation.
Roughly how many strings methods are there according to the MDN Web docs?
Look at the Docs!
What three-letter acronym should you alwasy include in your google search about a JavaScript method or CSS property?
MDN
Is the return value of a function or method useful in every situation?
Not really.
Roughly how many array methods are there according to MDN web docs?
look at the docs!
What data type do comparison expressions evaluate to?
Boolean
Is else required in order to use an if statement?
No
Describe the syntax (structure) of an if statement.
Keyword if (condition in parenthesis) opening curly brace
code
closing curly brace
What are three logical operators?
&&(logical and), ||(logical or), ! (logical not)
How do you compare two different expressions in the same condition?
Using && and/or ||
How do you compare two different expressions in the same condition?
Using && and/or ||
What is the purpose of a loop?
Allow us to do a repeatable action.
What is the purpose of a condition expression in a loop?
To check whether or not the loop should stop.
What does “iteration” mean in the context of loops?
The number of times we run the action.
When does the condition expression of a while loop get evaluated?
Immediately and before every iteration.
When does the initialization expression of a for loop get evaluated?
Before anything else but only once.
When does the condition expression of a for loop get evaluated?
After the initialization and with every iteration.
When does the final expression of a for loop get evaluated?
At the end of 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?
Increases by an increment of one after it is used.
How do you iterate through the keys of an object?
Use a for…in loop.
Why do we log things to the console?
To check our work and inspect our data.
Verification and inspecting data.
What is a “model”?
A system or thing used as an example to follow or imitate.
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 a DOM Tree?
A model of a webpage consisting of all of the elements and their nodes including the parent and any child and other descendents.
Give examples of document methods that retrieve a single element from the DOM
getElementById()
querySelector() (use this primarily)
Give examples of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName()
getElementsByTagName()
querySelectorAll() (use this primarily)
Why might you want to assign the return value of a DOM query to a variable?
For future use to help with browser search speed.
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?
HTML needs to load completely before we access it through JavaScript
What does document.querySelector() take as its argument and what does it return?
A css selector in the form of a string.
It returns the first HTML element object.
What does document.querySelectorAll() take as its argument and what does it return?
A css selector in the form of a string.
It returns a node list of all HTML elements.
Why do we log things to the console?
To confirm our assumptions about our data.
What is the purpose of events and event handling?
To make the webpage more interactive.
What do [] square brackets mean in function and method syntax documentation?
That the content in that portion is optional.
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 to be used at some point in the future.
What object is passed into an event listener callback when the event fires?
event
What is the event.target? if you weren’t sure, how would you check? where could you get more information about it?
The property which holds a reference to the HTML element that triggered the event.
Look up the documents on MDN.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The handleClick() is calling the function whereas handleClick is being passed to the method.
What is the className property of element objects?
A string containing the value of a class attribute on that element.
How do you update the CSS class attribute of an element using JavaScript?
.className
What is the textContent property of element objects?
A string containing the value of the text content of an element.
How do you update the text within an element using JavaScript?
.textContent = value
Is the event parameter of an event listener callback always useful?
No.
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?
Easier access for later use.
What event is fired when a user places their cursor in a form control?
focus event
What event is fired when a user’s cursor leaves form control?
blur event
What event is fired when a user clicks the “submit” button within a form?
submit event
What does the event.preventDefault() method do?
prevents the browser from reloading the page
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
What is one risk of writing a lot of code without checking to see if it works so far?
You don’t know where things are failing.
What is an advantage of having your console open when writing a JavaScript program?
Ability to check if things are working.
what event is fired when a user changes the value of a form control?
input event
what does submitting a form without event.preventDefault() do?
The page will be reloaded.
Does the document.createElement() method insert a new element into the page?
No
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?
name of the attribute you want to set
and the value you want that attribute to have
What steps do you need to take in order to insert a new element into the page?
create element then append to the element you want it to be attached to
What is the textContent property of an element object for?
setting or getting text of an element
Name two ways to set the class attribute of a DOM element.
.setAttribute
.className
What are two advantages of defining a function to create something (like the work of creating the DOM tree)?
You don’t have to write the same code over and over.
Easier to test because you’re putting data in and getting data out.
What is the event.target?
The element most directly interacted with by an event.
Why is it possible to listen for events on one element that actually happen in its descendent elements
event bubbling
What DOM element property tells you what type of element it is?
.tagName
What does element.closest() method take as its argument and what does it return?
A selector containing a selector list, and it returns the element which is the closest ancestor of the element.
How can you remove an element from the DOM?
.remove()
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?
event-delegation
Add the event listener to the parent item that will contain the new item(s).
What is the event.target?
The element that originated the event
What is the affect of setting an element to display: none?
Turns off the display of an element so that it has no effect on layout.
What does the element.matches() method take as an argument and what does it return?
It takes a selector in the form of a string and returns a boolean.
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.
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 new event listeners, queries, etc to make up for the new tab/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?
It would have more code to check every tab.
What is a Method?
A function which is a property of an object.
Instance Methods: built in tasks performed by an object instance.
Static Methods: Tasks that are called directly on an object constructor.
How can you tell the difference between a method definition and a method call?
Method definition starts with a function keyword and is followed by the code block.
Method call is being called using parentheses and dot notation.
Describe method definition syntax (structure).
Property: function (parameters) {
code block
};
Describe method call syntax (structure).
object.methodName()
How is a method different from any other function?
Dot or bracket notation must be used to be called.
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data and properties as methods.
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “abstraction”?
Being able to work with (possibly) complex things in simple ways.
What does API stand for?
Application Programming Interface
What is the purpose of an API?
Give programmers a way to interact with a system in a simplified, consistent fashion.
What is This in JavaScript?
An implicit parameter that allows us to see the object that ‘this’ is being invoked upon.
What does it mean to say that THIS is an “implicit parameter”?
It is available in a functions code block even though it was never included in the function’s parameter list or declared with var.
When is the value of THIS determined in a function; call time or definition time?
Function is called.
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);
}
};
There is no ‘this’ yet.
Given the above character object, what is the result of the following code snippet? why?
character.greet();
‘It’s-a-me, Mario!’
because this is referring to the object character as defined in the calling of greet().
Given the above character object, what is the result of the following code snippet? why?
var hello = character.greet; hello();
undefined because hello is not a method of the character function?
How can you tell what the value of this will be for a particular function or method definition?
You cannot know what it will be.
How can you tell what the value of this is for a particular function or method call?
This is defined when the function/method is called. If it is part being called as a property of an object it will return from that object, otherwise it is the global window object.
What kind of inheritance does the JavaScript programming language use?
Prototype-based (or prototypal)
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?
Prototypal Inheritance
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
in the prototypes?
What does the NEW operator do?
Creates a new instance of an object.
What property of JavaScript functions can store shared behavior for instances created with NEW?
prototype
What does the INSTANCEOF operator do?
Check whether the instance we are checking is an instance of something else and it returns a boolean.
What is a “callback” function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
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()
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 timeout ID and an interval ID.
What is AJAX?
A technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (JSON).
What does 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
An XMLHttpRequest object has an addEventListener() method just like the DOM elements. How is it possible that they both share this functionality?
They share the proto event target.
What is a code block? what are some examples of code block?
A piece of code inside curly braces
Function code block
conditional code block
loops
What does block scope mean?
The variable is only used within the code block in which it is initialized.
What is the scope of a variable declared with const or let?
Block-Scope
What is the difference between let and const?
Let is mutable while const is immutable, mostly.
Why is it possible to .push() a new value into a const variable that points to an array?
You are not assigning the variable to a new value, you are assigning it A new property.
How should you decide on which type of declaration (const or let) to use?
If you need a variable to be modifiable you should use let otherwise use const.
What is destructuring, conceptually?
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables
What is the syntax for Object destructuring?
Let/const keyword
Opening { for property list
Comma separated property keys
Closing } for property list
Assignment operator followed by object name.
What is the syntax for Array destructuring?
Let/const keyword
Opening square bracket
Comma separated variables.
Closing square bracket
Assignment operator followed by name of array.
How can you tell the difference between destructuring and creating Object/Array literals?
The syntax.
What is the syntax for writing a template literal
Surround the string in backticks instead of quotes. Within the string you can use JavaScript Expressions (${}).
What is “string interpolation”?
String formatting: The ability to substitute part of the string for the values of variables or expressions.
What is this: ${data}?
A JavaScript expression.
What is the syntax for defining an arrow function?
let/const keyword
parameters (a, b) if theres more than one you need parenthesis.
arrow =>
code
(If you use the block syntax you need to use the return keyword {return a + b}
If you use an expression you do not need curly braces, but if you use a statement curly braces are required.
When an arrow function’s body is left without curly braces, what changes in its functionality?
It expects an expression and it will return a value.
How is the value of this determined within an arrow function?
It captures the “this” value of the enclosing context instead of creating its own “this” context.
What is Array.prototype.filter useful for?
Finding a specific variety of data in an array.
What is Array.prototype.map useful for?
Manipulating each piece of data from an array individually.
What is Array.prototype.reduce useful for?
Manipulating the data from an array using the other data in the array.
What must the return value of myFunction be if the following expression is possible?
myFunction()();
It returns a function.
What does this code do?
const wrap = value =>()=>value;
Creates a variable named wrap that returns a function that takes no arguments and returns a value.
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
When it is defined.
What allows JavaScript functions to “remember” values from their surroundings?
Lexical Scope
