JavaScript Flashcards
What is the purpose of variables?
variables give us permanents (store data to use later)
How do you declare a variable?
type the keyword var, let, const
How do you initialize (assign a value to) a variable?
use a single =
What characters are allowed in variable names?
letter, dollar sign, underscore, and numbers
What does it mean to say that variable names are “case sensitive”?
lowercase & uppercase matters in JS
What is the purpose of a string?
characters (store texts)
What is the purpose of a number?
calculations, any math related value
What is the purpose of a boolean?
potential to have logic (binary statement)
What does the = operator mean in JavaScript?
assignment operator (to put a value)
How do you update the value of a variable?
only write the variable name (without rewriting var)
What is the difference between null and undefined?
null is an assigned value. (made to be empty on purpose)
undefined means a variable has been declared but not defined yet.
Why is it a good habit to include “labels” when you log values to the browser console?
makes it easier to debug
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined, objects
What data type is returned by an arithmetic operation?
number
What is string concatenation?
addition for strings
What purpose(s) does the + plus operator serve in JavaScript?
add values or concatenate strings
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
allows you to add numbers or strings to an existing variable
What are objects used for?
grouping of data
What are object properties?
variables within a certain boundaries
Describe object literal notation.
variable = {
property: value }
How do you remove a property from an object?
delete operator
What are the two ways to get or update the value of a property?
dot notation, bracket notation
What are arrays used for?
store set of orders
Describe array literal notation.
[ set of values stored, separated by comma ]
How are arrays different from “plain” objects?
they have orders, square brackets, not individually named
What number represents the first index of an array?
0
What is the length property of an array?
total number of items inside an array
How do you calculate the last index of an array?
subtract one from length
What is a function in JavaScript?
reusable statement for tasks
Describe the parts of a function definition.
parameter, function keyword, function code block
Describe the parts of a function call.
name of the function, parenthesis, and arguments
When comparing them side-by-side, what are the differences between a function call and a function definition?
definitions: keyword, code block, parameters
call: arguments
What is the difference between a parameter and an argument?
parameter: placeholder for argument
argument: actual value for function to be called
Why are function parameters useful?
without it, the function’s end result is always the same
What two effects does a return statement have on the behavior of a function?
- exits the code block
2. gives a value
Why do we log things to the console?
debugging tool
What is a method?
methods are functions stored into the property of an object.
How is a method different from any other function?
stored into the property of an object.
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
How do you generate a random number?
math.random
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?
they do not change the original. Check by using console.log()
Is the return value of a function or method useful in every situation?
no
Roughly how many array methods are there according to the MDN Web docs?
25
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.
, >=, <=, ==, ===
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
add conditions to the code
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if, condition, {}
What are the three logical operators?
and, or, not
How do you compare two different expressions in the same condition?
use logical and or logical or
What is the purpose of a loop?
to perform repeated task
What is the purpose of a condition expression in a loop?
if it s true, it continues, if it s false, it stops
What does “iteration” mean in the context of loops?
one repetition of the code block loop
When does the condition expression of a while loop get evaluated?
before the code block runs
When does the initialization expression of a for loop get evaluated?
very beginning (before anything)
When does the condition expression of a for loop get evaluated?
before each iteration
When does the final expression of a for loop get evaluated?
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
What does the ++ increment operator do?
increments variable by 1
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 if the code is working, to make debugging easier
What is a “model”?
representation of something
Which “document” is being referred to in the phrase Document Object Model?
HTML doc
What is the word “object” referring to in the phrase Document Object Model?
data type in javascript
What is a DOM Tree?
model of the page when a browser loads a web page.
Give two examples of document methods that retrieve a single element from the DOM.
document.getElementById(), document.querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
if you want to access it multiple times
What console method allows you to inspect the properties of a DOM element object?
dir method
directory
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
so that it runs after all the information on HTML document
What does document.querySelector() take as its argument and what does it return?
css selector as an argument (String)
first element in HTML doc that matches
What does document.querySelectorAll() take as its argument and what does it return?
css selector as argument
returns nodelist
Why do we log things to the console?
To check the process and values. Verifying if something actually happened.
What is the purpose of events and event handling?
event handling = creating code the handle the event
event = things that happen
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?
function definition being passed in as an argument
What object is passed into an event listener callback when the event fires?
Event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
property on event object whose value is whatever element that event originated at.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
top: handleClick is being referenced
bottom: handleClick is being called (never use)
What is the className property of element objects?
gets and sets the value of the class attribute of the specified element.
How do you update the CSS class attribute of an element using JavaScript?
use queryselector and class name property
What is the textContent property of element objects?
get the value of the current text element and update
How do you update the text within an element using JavaScript?
queryselect the element and get whatever the new value is and assign it to textcontent property
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?
it makes it easier to make sense.
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 a form control?
blur event
What event is fired as a user changes the value of a form control?
input 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 default behavior
What does submitting a form without event.preventDefault() do?
reloads/refreshes the page
What property of a form element object contains all of the form’s controls.
elements property
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?
hard to see where the code went wrong
What is an advantage of having your console open when writing a JavaScript program?
to see if your code is working, check variable values, etc.
Does the document.createElement() method insert a new element into the page?
no, it just makes them. does not inset until appendchild method is used.
How do you add an element as a child to another element?
appendchild method or append method
What do you pass as the arguments to the element.setAttribute( ) method?
name and value
What steps do you need to take in order to insert a new element into the page?
createElement and appendChild()
What is the textContent property of an element object for?
To get text content or to set the text content of an element
Name two ways to set the class attribute of a DOM element.
Element.setAttribute( )
Element.className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Defining a function allows for reusability so you don’t have to write the function over and over. Defined functions are also easy to test.
What is the event.target?
Object that the event is working on
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbles all the way up to the parent element (the document and then the window).
What DOM element property tells you what type of element it is?
The tagName property
What does the element.closest() method take as its argument and what does it return?
It takes in a css selector as an argument and returns the closest parent
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 the event listener to parent
What is the event.target?
property on event object whose value is whatever element that event originated at.
What is the affect of setting an element to display: none?
The element won’t be displayed because it won’t get rendered. The document will treat it as if it didn’t exist along with child elements.
What does the element.matches() method take as an argument and what does it return?
Takes a css selector as a string for an argument and returns a Boolean value
How can you retrieve the value of an element’s attribute?
getAttributes( ) method
At what steps of the solution would it be helpful to log things to the console?
Anytime you want to verify a value or to verify if the code is working correctly.
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?
The code would have to have multiple conditions for each tab.
(event handler for every single tab)
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 be written by adding new event listener and possibly new event handler function for each tab.
What is JSON?
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.
What are serialization and deserialization?
Serialization: converting complex data (like an object) to string
Deserialization: converting string to object
Why are serialization and deserialization useful?
Serialization allows from data to be stored in memory. Also makes it easier to transfer data across a network.
Deserialization makes it so that data is easier to interact with.
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( )
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( )
How to you store data in localStorage?
localStorage.setItem( ) method
How to you retrieve data from localStorage?
localStorage.getItem( ) method
What data type can localStorage save in the browser?
‘String’ type data (local storage needs serialized data )
When does the ‘beforeunload’ event fire on the window object?
Before the page unloads
What is a method?
A method is a function that is a property of an object.
How can you tell the difference between a method definition and a method call?
A method definition would have the keyword function and { } for the function code block.
A method call would have the object followed by dot notation, name of method and then ( ).
Describe method definition syntax (structure).
{ property: function methodName ( [optional parameters] ) {code block }, }
Describe method call syntax (structure).
object.methodName( )
How is a method different from any other function?
Needs dot notation or bracket notation. Also a method belongs to an object as a property of the object.
What is the defining characteristic of Object-Oriented Programming?
Objects 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”?
It is a process that enables a user to work with (possibly) complex things in simply ways.
What does API stand for?
Application Programming Interface
What is the purpose of an API?
Selection of tools (set of code features such as methods, properties, events, and URLS) to make it easier for developers to interact with a software.
What is this in JavaScript?
‘this’ is an implicit parameter of all JavaScript functions.
What does it mean to say that this is an “implicit parameter”?
It is available in a function’s code block even though it was never included in the function’s parameters list or declared with ‘var’.
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. The value of ‘this’ can only be determined during call time (not during a function definition).
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
Result = “It’s-a-me, Mario!” because ‘this’ refers to the object being called. The object firstName property has the value of Mario.
Given the above character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
Result = “It’s-a-me, undefined!” because ‘this’ refers to the window (hello is not a property of an object, therefore default object would be the window object). Window object does not have the property firstName so therefore, ‘this.firstName” has the value of undefined.
How can you tell what the value of this will be for a particular function or method definition?
You can’t. Value of ‘this’ is determined at call time.
How can you tell what the value of this is for a particular function or method call?
By looking to the left of the dot (the object).
What kind of inheritance does the JavaScript programming language use?
prototype-based (or prototypal) inheritance
What is a prototype in JavaScript?
move properties and methods that we’d like to reuse into a “prototype” object and then tell other objects to simply delegate (verb) to that “prototype” object when they aren’t able to perform the required tasks themselves.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
Due to JS prototypes; models that was created that contain these methods.
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
From the object’s prototype, if it’s not there then object’s object’s prototype
What does the new operator do?
Creates a blank, plain JavaScript object
Links (sets the constructor of) the newly created object to another object by setting the other object as its parent prototype;
Passes the newly created object from Step 1 as the this context;
Returns this if the function doesn’t return an object.
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype property
What does the instanceof operator do?
It tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. Returns a boolean.
What is a “callback” function?
It is a function passed in through 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 JavaScript function until some point in the future?
setTimeout() function
How can you set up a function to be called repeatedly without using a loop?
setInterval() function
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
setTimeout( ): The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout( )
setInterval( ): The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval( )
What is AJAX?
Is a technique for loading data into part of a page without having to refresh the entire page.
What does the 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 event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share a prototype. Both are chained to the EventTarget Prototype
What is a code block? What are some examples of a code block?
A block of code within curly braces { };
Examples: if else, for, do while, while; function code block;
What does block scope mean?
An area within the block where variables can be referenced
What is the scope of a variable declared with const or let?
Let = block-scoped; Const = block-scoped
What is the difference between let and const?
Const can’t be reassigned while let can. Both cannot be redeclared.
Why is it possible to .push() a new value into a const variable that points to an Array?
The value within the array is mutable
How should you decide on which type of declaration to use?
If the variable is not going to be reassigned, use ‘const’. If it will be reassigned, then use ‘let’
What is the syntax for writing a template literal?
Template literals use backticks rather than single or double quotes and the javascript expression is as follows: ${variable}
What is “string interpolation”?
A process where variables and expressions is embedded in a string. The variable/expression has to be placed in a space block as follows:
${variable_name}
What is destructuring, conceptually?
Taking the values within the object and assign it to a variable
What is the syntax for Object destructuring?
let {
property1: variable1,
property2: variable2
} = object;
What is the syntax for Array destructuring?
let [index1, index 2] = array
How can you tell the difference between destructuring and creating Object/Array literals?
Destructuring: variable name goes on the right of the assign operator ( let/const { } or [ ] = variable )
Creating: variable name goes on the left of the assign operator ( variable = { } or [ ])
What is the syntax for defining an arrow function?
(parameters separated by commas) => { code block };
If there is only 1 parameter, the parentheses are not needed. If return is a simple expression, brackets and return keyword can be omitted. Brackets and return keyword are needed for code block if it’s multiline statements.
When an arrow function’s body is left without curly braces, what changes in its functionality?
Body becomes a return.
How is the value of this determined within an arrow function?
Arrow functions: value of this is determined at definition time
Regular functions: value of this is determined at call time
What is the JavaScript Event Loop?
The Event Loop is a queue of callback functions. Takes the first thing on the callback queue and puts it back on the stack if the stack is empty
What is different between “blocking” and “non-blocking” with respect to how code is executed?
Blocking is when the execution of additional JavaScript in the Node.js process must wait until a non-JavaScript operation completes.
Non-blocking methods execute asynchronously.
How do you mount a middleware with an Express application?
By app.use()
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
Request object, response object
What are the three states a Promise can be in?
- pending: initial state, neither fulfilled nor rejected.
- fulfilled: meaning that the operation was completed successfully.
- rejected: meaning that the operation failed.
How do you handle the fulfillment of a Promise?
Use then( ) method
How do you handle the rejection of a Promise?
Use then( ) method or catch( ) method
What is Array.prototype.filter useful for?
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
What is “syntactic sugar”?
Is syntax within a programming language that is designed to make things easier to read or to express.
It makes the language “sweeter” for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.
What is the typeof an ‘ES6 class’?
function
Describe ES6 class syntax.
Class keyword followed by curly braces for the class declaration constructor (parameter)
What is “refactoring”?
Code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior; preserve functionality
How are ES Modules different from CommonJS modules?
ES modules are the standard for JavaScript, while CommonJS is the default in Node. js.
What does fetch() return?
returns a promise containing the response (a Response object).
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
use method:
