JavaScript Flashcards
[JS Primitives and Variables]
What is the purpose of variables?
store temporary bits of information such as strings or numbers for future use
[JS Primitives and Variables]
How do youdeclarea variable?
keywords let, const, var and variable name
[JS Primitives and Variables]
How do you initialize (assign a value to) a variable?
using the equals operator ( = )
[JS Primitives and Variables]
What characters are allowed in variable names?
alphabet letters, numbers, dollar sign ($) and underscore (_)
numbers cannot be used as the first character
[JS Primitives and Variables]
What does it mean to say that variable names are “case sensitive”?
variable names have to be exactly the same, even capitalized letters
[JS Primitives and Variables]
What is the purpose of a string?
storing text which JS cannot read
[JS Primitives and Variables]
What is the purpose of a number?
for tasks involving counting or operations
[JS Primitives and Variables]
What is the purpose of a boolean?
for making decisions / choice (yes or no)
[JS Primitives and Variables]
What does the=operator mean in JavaScript?
assignment operator
[JS Primitives and Variables]
How do you update the value of a variable?
variableName = newValue;
[JS Primitives and Variables]
What is the difference betweennullandundefined?
null is a value that intentionally is nonexistent or invalid
undefined are variables that were not defined
[JS Primitives and Variables]
Why is it a good habit to include “labels” when you log values to the browser console?
to know what is being logged and when the log was called
[JS Primitives and Variables]
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
[JS Operators and Expressions]
What data type is returned by an arithmetic operation?
number
[JS Operators and Expressions]
What is string concatenation?
Adding two strings together
[JS Operators and Expressions] What purpose(s) does the + plus operator serve in JavaScript?
addition & concatenation
[JS Operators and Expressions]
What data type is returned by comparing two values (< , >, ===, etc)?
true or false (boolean)
[JS Operators and Expressions]
What does the += “plus-equals” operator do?
it adds to the original value and assigns the sum as the value
What value is given when trying to multiple, divide or subtract two strings?
NaN (not a number)
[JS Objects]
What are objects used for?
for storing variables and functions (that have similarities)
[CSS Objects]
What are object properties?
bits of information as variables about an object
[CSS Objects]
Describe object literal notation.
var obj = {
property: value,
property: value
}
[CSS Objects]
How do you remove a property from an object?
delete object.property
delete object[‘property’]
[CSS Objects]
What are the two ways to get or update the value of a property?
dot notation or bracket notation
[JS Arrays]
What are arrays used for?
Storing a list or set of variables related to each other.
[JS Arrays]
Describe array literal notation.
var arrayName = [value1, value2, value3, etc.];
[JS Arrays]
How are arrays different from “plain” objects?
objects- have individually named properties and value pairs
arrays- have index number and values
objects don’t have an order
[JS Arrays]
What number represents the first index of an array?
[0]
[JS Arrays]
What is the length property of an array?
shows how many pieces of data are in an array
[JS Arrays]
How do you calculate the last index of an array?
array.length - 1
[JS Functions]
What is a function in JavaScript?
repeatable block of code that does something when called
[JS Functions]
Describe the parts of a function definition.
function keyword
optional function name
parenthesis
optional parameters between parentheses
curly braces {}
return keyword within curly braces[JS Functions]
Describe the parts of a function call.
functionName (arguments)
[JS Functions]
When comparing them side-by-side, what are the differences between a function call and a function definition?
A function definition tells JS what to do (without actually doing it). Contains keyword, parameters and code block.
A function call is simply asking JS to go through the function. Contains function name, arguments and parentheses.
[JS Functions]
What is the difference between a parameter and an argument?
Parameters are part of a definition.
Arguments are part of a function call.
[JS Functions]
Why are function parameters useful?
To show what information is needed for the function to work without having to rewrite a whole function for different arguments.
[JS Functions]
What two effects does a return statement have on the behavior of a function?
- It replaces the function call
2. Stops the function
[JS Methods]
Why do we log things to the console?
To check for desired outputs and that everything is working in the expected.
[JS Methods]
What is a method?
A function that is a property of an object.
[JS Methods]
How is a method different from any other function?
It is called on an object, not through a function name and parenthesis.
[JS Methods]
How do you remove the last element from an array?
array.pop();
[JS Methods]
How do you round a number down to the nearest integer?
Math.floor();
[JS Methods]
How do you generate a random number?
Math.random();
[JS Methods]
How do you delete an element from an array?
array.splice(index, delAmount, item1, …);
[JS Methods]
How do you append an element to an array?
array.push();
[JS Methods]
How do you break a string up into an array?
string.split();
[JS Methods]
Do string methods change the original string?
No
[JS Methods]
Is the return value of a function or method useful in every situation?
No, their functionalities can be used to manipulate data without the use of the value returned.
[JS If statements]
Give 6 examples of comparison operators.
strictly equals === not strictly equal !== greater than > greater than or equals >= less than < less than or equals <=
[JS If statements]
What data type do comparison expressions evaluate to?
boolean: true or false
[JS If statements]
What is the purpose of an if statement?
allows the computer make a decision based on certain stated criteria
[JS If statements]
Is else required in order to use an if statement?
no
[JS If statements]
Describe the syntax of an if statement.
if keyword
parenthesis with condition inside
curly brackets with code to run if true
if (condition) {
code to be executed
}
[JS If statements]
What are three logical operators?
or ||
and &&
not !
[JS If statements]
How do you compare two different expressions in the same condition?
using the and logical operators and && or ||
example: (a == b && c ==d )
[JS Loops]
What is the purpose of a loop?
To repeat a block of code as necessary
[JS Loops]
What is the purpose of a condition expression in a loop?
Tells the loop when to stop running
[JS Loops]
What does iteration mean in the context of loops?
Single run of the loop’s code block
[JS Loops]
When does the condition expression of a while loop get evaluated?
At the beginning of each iteration.
[JS Loops]
When does the initialization expression of a for loop get evaluated?
Once, before the first iteration.
[JS Loops]
When does the condition expression of a for loop get evaluated?
After the initialization and before each iteration
[JS Loops]
When does the final expression of a for loop get evaluated?
After each iteration.
[JS Loops]
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
[JS Loops]
What does the ++ increment operator do?
Increments and substitutes a variable
[JS Loops]
How do you iterate through the keys of an object?
for…in loop
[DOM Querying]
What is a ‘model’?
It’s a representation of elements
[DOM Querying]
Which ‘document’ is being referred to in the phrase Document Object Model?
the whole HTML page
[DOM Querying]
What is the word ‘object’ referring to in the phrase Document Object Model?
refers to the elements on the HTML page that are represented as objects
[DOM Querying]
What is a DOM Tree?
representative chunk of a page as objects
[DOM Querying]
Give two examples of document methods that retrieve a single element from the DOM.
getElementById();
querySelector();
[DOM Querying]
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName();
getElementsByTagName();
querySelectorAll();
[DOM Querying]
Why might you want to assign the return value of a DOM query to a variable?
in order to reuse it instead of looking for it everytime you want to manipulate it
[DOM Querying]
What console method allows you to inspect the properties of a DOM element object?
console.dir();
[DOM Querying]
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
So that the HTML elements are loaded first
[DOM Querying]
What does document.querySelector() take as its argument and what does it return?
argument: string (css selector)
returns the HTML element
[DOM Querying]
What does document.querySelectorAll() take as its argument and what does it return?
argument: string (css selector)
returns a node list with all the HTML elements inside
[DOM Events]
What is the purpose of events and event handling?
fire actions for when users interact with a web page
[DOM Events]
Are all possible parameters required to use a JavaScript method or function?
No, some parameters are optional
[DOM Events]
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener();
[DOM Events]
What is a callback function?
a function passed into another function as an argument
[DOM events]
What object is passed into an event listener callback when the event fires?
an object with data about the event that occurred
[DOM Events]
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
a target property of the event object storing the DOM element was where the event originated from
[DOM Events]
What is the difference between these two snippets of code?
-element.addEventListener(‘click’, handleClick);
-element.addEventListener(‘click’, handleClick( ));
if the parenthesis is there, it would indicate that the function should run when the page loads
[DOM Manipulation]
What is the className property of element objects?
gets or sets the class of an element
[DOM Manipulation] How do you update the CSS class attribute of an element using JavaScript?
element.className = ‘newClassName’;
[DOM Manipulation]
What is the textContent property of element objects?
get what’s there or assign a new value
[DOM Manipulation]
How do you update the text within an element using JavaScript?
element.textContent = ‘text you want’;
[DOM Manipulation]
Is the event parameter of an event listener callback always useful?
no, when we already know all the elements we want to change
[DOM Manipulation]
Why is storing information about a program in variables better than only storing it in the DOM?
it’s easier to find and reuse in JavaScript
[JS Forms]
What event is fired when a user places their cursor in a form control?
focus
[JS Forms]
What event is fired when a user’s cursor leaves the form control?
blur
[JS Forms]
What event is fired as a user changes the value of a form control?
input
[JS Forms]
What event is fired when a user clicks the “submit” button within a form?
submit
[JS Forms]
What does the event.preventDefault() method do?
it prevents the default behavior of an event
[JS Forms]
What does submitting a form without event.preventDefault() do?
refreshes the page
[JS Forms]
What property of a form element object contains all of the form’s controls.
elements property
[JS Forms]
What property of a form control object gets and sets its value?
value property
[DOM Creation]
Does the document.createElement() method insert a new element into the page?
No, creates an element but doesn’t insert it to the page
[DOM Creation]
How do you add an element as a child to another element?
parent. appendChild(child);
element. append(multipleChildren);
[DOM Creation]
What do you pass as the arguments to the element.setAttribute() method?
2 strings
- name of the attribute
- attribute value
[DOM Creation]
What steps do you need to take in order to insert a new element into the page?
createElement()
createTextNode()
querySelect() a parent
appendChild() (to an element already on the page)
[DOM Creation]
What is the textContent property of an element object for?
for adding or getting text from an element
[DOM Creation] Name two ways to set the class attribute of a DOM element.
.className
.setAttribute(‘class’, ‘className)
[DOM Creation]
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
to use it repeatedly for many elements created saving time & work
[CSS Media Queries]
Give two examples of media features that you can query in an @media rule.
min-width
max-width
min-height
max-height
[CSS Media Queries]
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
[DOM-event-delegation]
What is the event.target?
the HTML element from which the event originated from
[DOM-event-delegation]
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
[DOM-event-delegation]
What DOM element property tells you what type of element it is?
event.target.tagName;
[DOM-event-delegation]
What does the element.closest() method take as its argument and what does it return?
takes a css selector and returns the nearest upward match to the selector (reverse querySelector)
[DOM-event-delegation]
How can you remove an element from the DOM?
remove method
[DOM-event-delegation]
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 event listener to the parent
avoid by matches or finding a className, or element type through tagName
[JS View Swapping]
What is the effect of setting an element to display: none?
it removes it from the page layout (as if it didn’t exist)
[JS View Swapping]
What does the element.matches() method take as an argument and what does it return?
it takes a selector string as an argument
returns: true if matches
false: if doesn’t match
[JS View Swapping]
How can you retrieve the value of an element’s attribute?
element.getAttribute(‘attributeName’);
[JS View Swapping]
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 to each individual element
[JS Custom Methods]
What is a method?
A function that is a property of an object.
[JS Custom Methods]
How can you tell the difference between a method definition and a method call?
a method definition contains parameters and the keyword function while a method call only contains the object that has the method and the property name of the function
[JS Custom Methods]
Describe method definition syntax (structure).
inside of the object, give a property name and the value is a unnamed function.
[JS Custom Methods]
Describe method call syntax (structure).
objectName.method(optional arguments);
[JS Custom Methods]
How is a method different from any other function?
it can only be called with the object it’s in
[JS Custom Methods]
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods).
[JS Custom Methods]
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
[JS Custom Methods]
What is “abstraction”?
Working with complex things in simpler ways by breaking them down.
[JS Custom Methods]
What does API stand for?
Application programing interface
[JS Custom Methods]
What is the purpose of an API?
For functionalities to be used or exchange information between different software more easily
[JS this]
What is ‘this’ in JavaScript?
Refers to the object that is calling a method. By default it’s the window
[JS this]
What does it mean to say that ‘this’ is an implicit parameter?
It’s a parameter that is available even though it’s never included in the parameter list or declared.
[JS this]
When is the value of ‘this’ determined in a function; call time or definition time?
call time
[JS this]
How can you tell what the value of ‘this’ will be for a particular function or method definition?
we can’t know
[JS this]
How can you tell what the value of ‘this’ is for a particular function or method call?
look at the object that is calling the method (left to the dot)
[JS Prototypes]
What kind of inheritance does the JavaScript programming language use?
Prototypal-inheritance
[JS Prototypes]
What is a prototype in JavaScript?
An object that is a prototype for other objects that can access the prototype’s methods or information.
[JS Prototypes]
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?
through prototypal inheritance
[JS Prototypes]
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
in the prototype
[JS Constructors]
What does the new operator do?
- creates a blank plain JS object
- points the new object’s prototype to the constructors functions’ prototype property
- ‘this’ in the object now refers to the new object
- the new object created is returned
[JS Constructors]
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
[JS Constructors]
What does the ‘instanceof’ operator do?
checks if a variable (objects) is a instance of a constructor function
[JS Timers]
What is a ‘callback’ function?
a function passed as another function’s argument
[JS timers]
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()
[JS Timers]
How can you set up a function to be called repeatedly without using a loop?
setInterval();
[JS Timers]
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
no delay - 0ms
[JS Timers]
What do setTimeout() and setInterval() return?
a numeric ID to be used as an argument in the clearInterval() function
[HTTP Messages]
What is a client?
a program requesting data (service request)
[HTTP Messages]
What is a server?
the one that provides service
[HTTP Messages]
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
[HTTP Messages]
What three things are on the start-line of an HTTP request message?
an HTTP method (get, put, post, head or options)
a request target (URL or absolute path)
HTTP version
[HTTP Messages]
What three things are on the start-line of an HTTP response message?
protocol version
status code
status text
[HTTP Messages]
What are HTTP headers for?
meta-data for describing a document in key-value pairs
[HTTP Messages]
Is a body required for a valid HTTP request or response message?
Not required
[JS AJAX]
What is AJAX?
Technologies that offer asynchronous functionality to the browser, loading parts of a page without having to reload the whole page.
[JS AJAX]
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
[JS AJAX]
Which object is built into the browser for making HTTP requests in JavaScript? And what are the three parameters for open()?
XMLHttpRequest object
- HTTP method
- URL of page that will handle the request
- Boolean for if it should be asynchronous
[JS AJAX]
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
[JS AJAX]
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance
[const & let]
What is a code block? What are some examples of a code block?
Code block is a part of code that does something for example the code between curly braces in functions, if statements, and loops.
[const & let]
What does block scope mean?
Everything that happens inside a code block which is not accessible outside of the codeblock.
[const & let]
What is the scope of a variable declared with ‘const’ or ‘let’?
code block scope
[const & let]
What is the difference between ‘let’ and ‘const’?
const cannot be reassigned
let can be reassign
[const & let]
Why is it possible to .push() a new value into a const variable that points to an array?
The contents of the array is being updated but not the value of the const variable
[const & let]
How should you decide on which type of declaration to use?
If you want to change the variable or not in the future
[ES6 Template Literals]
What is the syntax for writing a template literal?
backticks for start and end
dollar sign and curly braces for expressions
${}
[ES6 Template Literals]
What is ‘string interpolation’?
the ability to substitute part of the string for the values of variables or expressions
[ES6 Destructuring]
What is destructuring, conceptually?
Take objects or arrays and creates variables based on an object’s properties or an array’s elements.
[ES6 Destructuring]
What is the syntax for ‘Object’ destructuring?
const {property : newVarName} = objOriginName
variable keyword, open curly brace, property to be retrieved, optional: new variable name, optional: with comma property sequence, equals sign, object from which to get data from
[ES6 Destructuring]
What is the syntax for ‘Array’ destructuring?
const [ element : newVarName ] = originalArray
variable keyword, square brackets, element name, colon, new variable name at correct position, optional sequence for other elements or empty commas (ORDER MATTERS), equals sign, original array
[ES6 Destructuring]
How can you tell the difference between destructuring and creating Object/Array literals?
square brackets for array and curly brackets for objects on the LEFT of the equals sign
[ES6 Arrow Functions]
What is the syntax for defining an arrow function?
(parameters) => {statement or expression};
[ES6 Arrow Functions]
When an arrow function’s body is left without curly braces, what changes in its functionality?
the function returns the result of that single expression
[ES6 Arrow Functions]
How is the value of this determined within an arrow function?
it doesn’t bind; this is from the outer scope of the arrow function
ES6 arrow function: this is defined in function definition
ES5: this is defined when called
What is the difference between the web and the internet?
Web -> HTTP and URLs (navigation from page to page)
Internet is the network -> TCPIP (transmission control protocol/internet protocol)
[ES6 Promises]
What are the three states a Promise can be in?
pending
fulfilled
rejected
[ES6 Promises]
How do you handle the fulfillment of a Promise?
promise.then(callback)
[ES6 Promises]
How do you handle the rejection of a Promise?
promise.catch(callback)
[Array Filter]
What is Array.prototype.filter useful for?
creating a new array while excluding certain elements
[Array Map]
What is Array.prototype.map useful for?
manipulating and transforming elements inside an array
[ES6 Classes]
What is “syntactic sugar”?
Something that doesn’t add anything new but is easier to read.
[ES6 Classes]
What is the typeof an ES6 class?
function
[ES6 Classes] Describe ES6 class syntax.
class ClassName {
constructor(name) {
this.name = name;
}
method(){
return this.name;
}
}[ES6 Classes]
What is ‘refactoring’?
restructuring existing code without changing it’s behavior
[ES6 Modules]
How are ES Modules different from CommonJS modules?
ES Modules uses import instead of require() ES Modules uses export instead of module object
ES Modules are officially part of ECMAScript standard
[ES6 Modules]
What kind of modules can Webpack support?
CommonJS, ECMAScript, AMD
[fetch]
What does ‘fetch()’ return?
a promise object that resolves with a response object
[fetch]
What is the default request method used by ‘fetch()’?
GET
[fetch]
How do you specify the request method (GET, POST, etc.) when calling ‘fetch’?
fetch with a request option (object after the path) which determines the method
const response = fetch(url, { method: ‘POST’ })
[Data Structures]
What does the acronym LIFO mean?
last-in-first-out
[Data Structures]
What methods are available on a stack data-structure?
push and pop, sometimes peek
[Data Structures]
What must you do to access the value at an arbitrary point in a stack (not just the top)?
remove items from the stack one by one
[Data Structures]
What does the acronym FIFO mean?
first-in-first-out
[Data Structures]
What methods are available on a Queue data structure?
enqueue- adds value to back of queue
dequeue- removes value from front of queue
[Data Structure]
What must you do to access the value at an arbitrary point in a queue?
dequeue until arriving at point
[Data Structures]
How are linked lists different from an array?
Linked lists are sequential access (cannot grab values from the middle whenever).
[Data Structures]
How would you access an arbitrary node in a linked list (not just the ‘head’)?
Traverse node by node
[JS Closures] What must the return value of myFunction be if the following expression is possible? // myFunction( )( );
myFunction is being called and it’s return is being called
I can assume the return of myFunction is a function
[JS Closures] What does this code do? // const wrap = value => () => value;
variable wrap is a function that takes a value and returns a function that returns value
[JS Closures]
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
defined
[JS Closures]
What allows JavaScript functions to ‘remember’ values from their surroundings?
Closures
