JavaScript Flashcards
What is the purpose of variables?
a stored data to use it later on
How do you declare a variable?
var const let
How do you initialize (assign a value to) a variable?
use the assignment operator (=)
What characters are allowed in variable names?
letters, $, _ (underscore); cannot start with number
What does it mean to say that variable names are “case sensitive”?
case should match
What is the purpose of a string?
used with any kind of text; add new content into a page
What is the purpose of a number?
used in calculations and size
What is the purpose of a boolean?
to make a binary decision (true/false)
What does the = operator mean in JavaScript?
value being assign to
How do you update the value of a variable?
name = new value (no need to put var const let, only at first)
What is the difference between null and undefined?
null is intentionally exists (purpose of emptiness for a moment)
undefined exists unintentionally
Why is it a good habit to include “labels” when you log values to the browser console?
helps to track what the value is for
Give five examples of JavaScript primitives.
number, string, boolean, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
two or more strings used to create a single value
What purpose(s) does the + plus operator serve in JavaScript?
addition in numeric value or string value
What data type is returned by comparing two values (, ===, etc)?
boolean (true/false)
What does the += “plus-equals” operator do?
allow you to add on anything to current value of variable
What are objects used for?
stores property for variable
What are object properties?
makes what the variable different from other variables (unique)
Describe object literal notation.
opning curly brace for object literal, property, column, value, closing brace
How do you remove a property from an object?
delete operator (delete ___.____);
What are the two ways to get or update the value of a property?
using dot notation or bracket notation
What are arrays used for?
when you need to make a list with not knowing how many needs to be in
Describe array literal notation.
[‘__’, ‘__’]
How are arrays different from “plain” objects?
array has an ordered list (index #)
What number represents the first index of an array?
0
What is the length property of an array?
how many items it holds in the array (not index #)
How do you calculate the last index of an array?
subtract 1 from the length
What is a function in JavaScript?
repeatable and reusable block of code
Describe the parts of a function definition.
keyword, parameter, code block { } , return
Describe the parts of a function call.
name of function
When comparing them side-by-side, what are the differences between a function call and a function definition?
call -> name of function function definition -> keyword, code block, parameter
What is the difference between a parameter and an argument?
parameter -> placeholder for argument
argument -> actual value f0r function to run
Why are function parameters useful?
argument placeholder
What two effects does a return statement have on the behavior of a function?
executes and exits the code block and gives back a value
Why do we log things to the console?
debugging tools
What is a method?
function stored in property of object
How is a method different from any other function?
basically same
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() -> round-down
Math.trunc() -> removes decimal
How do you generate a random number?
Math.random()
How do you delete an element from an array?
splice method (index#, #items)
How do you append an element to an array?
push method
append => add at the end
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
Is the return value of a function or method useful in every situation?
no
Give 6 examples of comparison operators.
=, >, =, logical operator (&&)
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
to make your code to make decision (true/false)
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if (condition) code block {}
What are the three logical operators?
&& ll !
How do you compare two different expressions in the same condition?
&& or ll
What is the purpose of a loop?
a repeated block of code happening under certain condition
What is the purpose of a condition expression in a loop?
stop point of the loop
What does “iteration” mean in the context of loops?
one repetition of code block
When does the condition expression of a while loop get evaluated?
before the code bock runs
When does the initialization expression of a for loop get evaluated?
in the beginning (first step)
“before anything”
When does the condition expression of a for loop get evaluated?
after initialization and “before the code block (iteration)
When does the final expression of a for loop get evaluated?
after each iteration, “before the condition”
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?
add value of variable
goes up by 1
How do you iterate through the keys of an object?
for in loop
What are the four components of “the Cascade”.
source order/ inheritance/ specificity/ important rule
What does the term “source order” mean with respect to CSS?
order of giving a style matters
last style strongest
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
List the three selector types in order of increasing specificity.
element < class < id
Why is using !important considered bad practice?
too strong!!!
Why do we log things to the console?
debugging tool
What is a “model”?
example of a HTML structure
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
javascript
What is a DOM Tree?
tree of element with all of its HTML children elements
Give two examples of document methods that retrieve a single element from the DOM.
querySelector(‘.name’), getElementById(‘name’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll(‘.name’);
Why might you want to assign the return value of a DOM query to a variable?
if you want to access it to multiple times
What console method allows you to inspect the properties of a DOM element object?
console.dir() method - directory method
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
so HTML can run before javascript does
What does document.querySelector() take as its argument and what does it return?
css selector, first element that matches first
What does document.querySelectorAll() take as its argument and what does it return?
css selectors, all node list - abject with properties that are numbers (not an array)
Why do we log things to the console?
verifying actually something happened
What is the purpose of events and event handling?
event is an action that occurs as a result of the user or another source, such as a mouse click.
An event handler is a response to an event when it is triggered
Are all possible parameters required to use a JavaScript method or function?
no, boolean value could be used
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener() method
What is a callback function?
function definition that is being passed to an argument to other function
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?
event.target is a reference to the object onto which the event was dispatched
What is the className property of element objects?
get the value of class attribute
How do you update the CSS class attribute of an element using JavaScript?
class name property
What is the textContent property of element objects?
text of an element that shows on the application
How do you update the text within an element using JavaScript?
.textContent
Is the event parameter of an event listener callback always useful?
no
Why is storing information about a program in variables better than only storing it in the DOM?
assigning element to variable if you have to use it several times is more efficient than searching it every time.
What does the transform property do?
let you rotate, scale, skew, or translate
Give four examples of CSS transform functions.
rotate, scale, translate, matrix
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition
(color change. scale
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?
prevent default behavior
(when delete stored data from local storage,
this defaults the removal, so need to // code and delete and refresh)
What does submitting a form without event.preventDefault() do?
refresh entire page
What property of a form element object contains all of the form’s controls.
element’s property
value of the property is the object
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?
had to find out what went wrong
What is an advantage of having your console open when writing a JavaScript program?
debugging tool
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?
append, appendChild()
What do you pass as the arguments to the element.setAttribute() method?
document.setAttribute(‘.class or id’, ‘value’)
What steps do you need to take in order to insert a new element into the page?
parent.appeneChild(new element)
What is the textContent property of an element object for?
text that want to be added
Name two ways to set the class attribute of a DOM element.
setAttribute(), className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reuse
Give two examples of media features that you can query in an @media rule.
min-width, max-width
Which HTML meta tag is used in mobile-responsive web pages?
meta tag with viewport
What is the event.target?
dom object representing HTML element where an event originally occur
What DOM element property tells you what type of element it is?
tagName
What does the element.matches() method take as an argument and what does it return?
first ancestor that matches css selector
How can you remove an element from the DOM?
remove() method
What is the affect of setting an element to display: none?
makes it invisible
What does the element.matches() method take as an argument and what does it return?
1st string of css selector, boolean whether to check that element is being called on
How can you retrieve the value of an element’s attribute?
getAttribute(‘string css selector’)
At what steps of the solution would it be helpful to log things to the console?
every steps
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?
addEventListener
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?
separate conditional block
What is a breakpoint in responsive Web design?
point where the styles of application change
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
gives an ability to have some variant
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
source order
What is JSON?
format for storing and transporting data
What are serialization and deserialization?
serialization -> a process of converting an object (value in array) to a string so it can be transferred
decentralization -> opposite of serialization, string to object
Why are serialization and deserialization useful?
serialization: complex data in order
deserialization: makes it easy to access to the data
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?
setItem()
How to you retrieve data from localStorage?
getItem(‘keyword’)
What data type can localStorage save in the browser?
’ ‘ string so use stringify() first
When does the ‘beforeunload’ event fire on the window object?
before the page unload
What is a method?
function which is a property of object
How can you tell the difference between a method definition and a method call?
method definition is actual function definition need to be assigned to property
Describe method definition syntax (structure).
object literal, properties, function definition
Describe method call syntax (structure).
call is just a name of function with (argument)
How is a method different from any other function?
a method includes a code that is called by the object’s name
What are the four “principles” of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
What is “abstraction”?
complex things in simple ways so people use it without fully understanding
What does API stand for?
application programming interface
What is the purpose of an API?
allow developers to create complex functions more easily
What is this in JavaScript?
implicit parameter that contains an object
What does it mean to say that this is an “implicit parameter”?
parameter that always in present even not defined
When is the value of this determined in a function; call time or definition time?
call time (only happens when 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);
}
};
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();
mario because function is being called
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?
nothing, because not called
How can you tell what the value of this is for a particular function or method call?
object to the left dot notation, if no dot, window
What kind of inheritance does the JavaScript programming language use?
prototype-based (prototypal)
What is a prototype in JavaScript?
original model on which something is patterned
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?
inheritance
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype
What does the new operator do?
blank object + prototype
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
What does the instanceof operator do?
check if on the right is present to one to left
What is a client?
one that sends request for data
What is a server?
response or provides data
Which HTTP method does a browser issue to a web server when you visit a URL?
GET post,put
What three things are on the start-line of an HTTP request message?
HTTP method, request target, HTTP version
What three things are on the start-line of an HTTP response message?
protocal version, status code, status text
What are HTTP headers?
lets the client and server pass additional info with HTTP request or response
Is a body required for a valid HTTP request or response message?
no
What is AJAX?
a technique for loading data on application without reloading it
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’
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototype
What is a code block? What are some examples of a code block?
code that run and return expected output
What does block scope mean?
variable is being declared inside of specific code block
What is the scope of a variable declared with const or let?
block-scope
What is the difference between let and const?
const -> cannot be re-declared nor updated
(if array, we can add it by pushing)
let -> can be updated but cannot be re-declared
Why is it possible to .push() a new value into a const variable that points to an Array?
when push, you are not re-declaring, it’s mutating the contents
How should you decide on which type of declaration to use?
if the variable would need to be re-assigned, let
if not const
What is the syntax for writing a template literal?
backtick 'string and if assigned variable ${javascript expression}'
What is “string interpolation”?
ability to substitute part of the string for the values of variable or expression
What is destructuring, conceptually?
new positioning of properties so they could be used as variable
What is the syntax for Object destructuring?
const {property1, property2} = object
What is the syntax for Array destructuring?
const [property1, property2] = array
How can you tell the difference between destructuring and creating Object/Array literals?
when curly brace or square bracket is on the right side of assignment operator, it’s destructuring, whereas to the right, creating.
What is the syntax for defining an arrow function?
const \_\_\_ = (if more than two) => {
return
}When an arrow function’s body is left without curly braces, what changes in its functionality?
return
How is the value of this determined within an arrow function?
window
(es6 -> this is being defined when definition
es5 -> this is being defined when called)
What are the three states a Promise can be in?
pending, fulfilled, rejected
How do you handle the fulfillment of a Promise?
.then(result => {
res.status(200).json(result.rows);
})
How do you handle the rejection of a Promise?
.catch(error => {
console. error(err);
res. status(500).json({ error: ‘An unexpected error occured.’ });
What is Array.prototype.filter useful for?
Creating a new array while excluding some elements.
does for loop and if statement
ex. const overFive = numbers.filter(number => number > 5);
What is Array.prototype.map useful for?
Creating a new array containing the transformed elements of another.
ex. const doubled = (numbers.map(number => number * 2));
What is Array.prototype.reduce useful for?
Combining the elements of an array into a single value.
ex.
const balance = account.reduce((previous, current) => {
if (current.type === 'deposit') {
return previous + current.amount;
}
return previous - current.amount;
}, 0);
What is “syntactic sugar”?
syntax within a programming language expressed more clear and easier
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class \_\_\_\_ {
constructor(\_\_){
this.name = name
}
getName(){
return
}
}
(class name is being defined with name of \_\_\_
{} for classbody
prototype method of \_\_\_ is being defined
)What is “refactoring”?
change the structure but no the behavior
How are ES Modules different from CommonJS modules?
commonJS -> require('file path')
ES Modules -> import & export
when default: import create-own-name from 'file name or path' -> no .js needed
if not import filename
export default function/class {} -> only one in module
if multiple export function/class name{}
import {name} from 'file'What kind of modules can Webpack support?
js or json files
