Javascript Flashcards
What is the purpose of variables?
To hold values
How do you declare a variable?
var (name of var)
How do you initialize (assign a value to) a variable?
var (name of var) = value
What characters are allowed in variable names?
a-z, numbers, $, _
What does it mean to say that variable names are “case sensitive”?
The casing matters when trying to use variables
What is the purpose of a string?
To hold a collection of characters
What is the purpose of a number?
To hold numerical data
What is the purpose of a boolean?
To announce if a value is true or false. Likewise, it can announce 0 for false and 1 for true
What does the = operator mean in javascript
The assignment operator
How do you update the value of a variable?
re assign the value using the the name of the variable and = to new value
What is the difference between null and undefined?
Null is an object, but undefined is a type
Why is it a good habit to include “labels” when you log values to the browser console?
To identify what is being printed to the console.
Give 5 examples of JavaScript primitives
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
2 strings combine and become 1 string
What purpose(s) does the + plus operator serve in Javascript?
Increment by 1
What data type is returned by comparing two values?
boolean
What does the += operator do?
Combines the left with the right
What are objects used for?
A collection of data
What are object properties?
data fields of an object
Describe object literal notation.
When you declare the object’s properties literally
How do you remove a property from an object?
Delete
What are the two ways to get or update the value of a property?
dot notation or bracket notation
What are arrays used for?
Collection of data
Describe array literal notation
create an array and place items within the indexes of the array
How are arrays different from “plain” objects?
objects do not require uniqueness
What number represents the first index of an array?
0
What is the length property of an array?
Tells how many elements are in an array
How do you calculate the last index of an array?
length -1
What is a function in JavaScript?
A set of statements that performs a task
Describe the parts of a function definition
function keyword, “name”, parameters within parenthesis, curly braces
Describe parts of a function call
function name, arguements
WHen comparing them side-by-side, what are the differences between a function call and function definition
the call only requires the name of the function and the possible arguments, the definition requires the keyword and the steps.
What is the difference between a parameter and an argument
parameter is what the function requires, but an argument is what the user passes to be used in the function
what two effects does a return statement have on the behavior of a function?
Exits the function and returns the value to the original call.
Why do we log things to the console?
To debug and check data
What is a method?
A function within a class
How is a method different from any other function?
It must be called using an object
How do you remove the last element of an array?
pop()
How do you round a number down to the nearest integer?
floor
How do you generate a random number?
random
How do you delete an element from an array?
splice
How do you append an element to an array?
push
How do you break a string up into an array?
split
Do string methods change the original string? How would you check if you weren’t sure?
No they replace it. You would log the string
Roughly how many string methods are there according to the MDN web docs?
25
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?
30
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?
To evaluate different conditions
Is else required in order to use an if statement?
No
Describe the syntax(structure) of an if statement.
keyword if, condition, block
What are the three logical operators?
AND, OR, NOT
How do you compare two different expressions in the same condition?
&& or ||
What is the purpose of a loop?
To repeat lines of codes
What is the purpose of a condition expression in a loop?
To let it know when to exit the loop
What does iteration mean in the context of loops?
Incrementing a counter. So each repeated step
When does the condition expression of a while loop get evaluated?
At the beginning
When does the initialization of a for loop get evaluated?
At the beginning
When does the condition expression of a for loop get evaluated?
after the initialization and after increment
When does the final expression of a for loop get evaluated?
At the end of the code block
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 ++ increment operator do?
Increments the variable in use, but depending on if its in the front or back it will be used first then incremented or incremented then used
How do you iterate through the keys of an object?
for in
Why do we log things to the console?
Debugging and to find the results of data
What is a model?
The outline of an object
Which document is being referred to in the phrase Document Object Model
The HTML
What is the word object referring to in the phrase DOM
The elements in the html
What is a DOM tree?
tags
Give two examples of document methods that retrieve a single element from the dom.
querySelector, getElementByID
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 retain that information
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
The element would not be created at the time the script is ran. So it would not affect the HTML
What does querySelector() take as its argument and what does it return?
Object, element
What does document.QuerySelectorAll() take as its argument and what does it return?
object, nodeList
Why do we log things to the console?
To read about the object and debug
What is the purpose of the events and event handling?
Event is what occurs when the user interacts with the page and event handling is processing what to do when that event occurs
What do the [] square brackets mean in function and method syntax documentation?
optional arguments
What method of element objects lets you set up a function to be called when a specific type of event occurs?
eventlistener
What is a callback function?
function that is meant to be passed as part of another function’s argument
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?
element being targeted. html, console
What is the difference between adding () to callback functions in addEventListener?
When you use () the function is called, but it is not waiting for an event to fire. We pass the name in the function rather than the function itself. Trigger when the click happens, not when the event is made
What is the className property of element objects?
Allows you to change the class attribute of an element
How do you update the CSS class attribute of an element using JavaScript?
className
What is the textContent property of element objects?
Allows you to change the textContent attribute
How do you update the text within an element using JavaScript?
Update the 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?
no
Why is storing information about a program in variables better than only storing it in the DOM?
tracking, don’t want to store in the DOM
What event is fired when a user places their cursor in a form control?
focus
What even 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 form?
the data in the form is passed
What does the event.preventDefault() method do?
Cancels an event
What does submitting a form without event.preventDefault() do?
Submits the form and resets
What property of a form element object contains all of the form’s controls?
elements
What property of form control object gets and sets its value
value
What is one risk of writing a lot of code without checking to see if it works so far?
debugging will be a pain
What is an advantage of having your console open when writing a JS program/
Can see errors as you got and it tells you what lines.
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?
attribute name, value
What steps do you need to take in order to insert a new element into the page?
append it to an element that is on the html
What is the textContent property of an element object for?
text content, text the user can see
Name 2 ways to set the class attribute of a DOM element.
setAttribute, classList, className
What are two advantages of defining a function to do create something?
Can repeatedly create an object without having to explicitly write it. So if you have a list of data, then you can just write a for loop
The transition property is shorthand for which 4 CSS properties?
delay, duration, property, timing-function
What is the event.target?
The element that the event was triggered on
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event delegation
What DOM element property tells you what type of element it is?
target.tagName
What does the element.closest() method take as its argument and what does it return?
string (DOMString) and it returns an element obj which is the closest ancestor of the selected element
How can you remove an element from the DOM?
element.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?
put it in a div
what is the event-target?
element that the event was triggered on?
What is the affect of setting an element to display: none?
Removes the display
What does the element.matches() method take as an argument and what does it return?
selector, returns a boolean
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
All
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?
multiple event listeners
If you didn’t use a loop to conditionally show or hide the views in the page, how would your javascript code b written instead?
many many lines
What is JSON?
Javascript object notation
What are serialization and deserialization?
Serialization - Converting objects into byte stream
Deserialization - Turning byte stream into objects
Why are serialization and deserialization useful?
Allows us to send data
How do you serialize a data structure into a JSON string using JavaScript?
.stringify()
How do you deserialize a JSON string into a data structure using javascript?
.parse()
How do you store data in localstorage?
localstorage.setItem()
How do you retrieve data from localstorage?
getItem()
What data type can localStorage save in the browser?
string
When does the beforeUnload event first on the window object?
right before closing the window
What is a method?
a function which is a property of an object
How can you tell the difference between a method definition and a method call?
A method definition goes within the object and takes parameters. Method call will call the object and send arguments
Describe method definition syntax(structure).
function name, parameters, definition;
Describe method call syntax(structure).
obj, method name, arguements;
How is method different from any other function?
Methods belong to objects so they can manipulate the object and its properties
What is the defining characteristic of OOP?
The use of objects to hold properties
What are the four principles of OOP?
Abstraction, encapsulation, inheritance, polymorphism
What is abstraction?
Hiding functionality from users. ie interfaces
What does API stand for?
Application Programmign Interface
What is the purpose of an API
Defines interactions between multiple software intermediaries
What is this in JavaScript?
refer to the object that it currently is referring to
What does it mean to say that this is an implicit parameter?
does not need to be specified
When is the value of this determined in a function; call time or definition time?
call time
How can you tell what the value of this will be for a particular function or method definition?
The object from where its being referred
How can you tell what the value of this is for a particular function or method call?
The object that calls the function
What kind of inheritance does the javascript language use?
Prototypal inheritance
What is a prototype in javascript?
template object
How is it possible to call methods on strings, arrays, and numbers even though those methods dont actually exist on objects, arrays, and numbers?
proto
If an object does not have its own property or method by a given key, where does javascript look for it?
proto
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 if the object is inheriting from the specified object
What is a callback function?
A function passed into 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()
How can you set up a function to be called repeatedly without using a loop?
interval
What is the default time delay if you omit the delay parameter from setTimeOut or setInterval()?
0
What do setTimeout() and setInterval() return?
timeoutID
What is a coded block? What are some examples of a code block?
Its code that is grouped together that can be executed within its scope. functions, for statements, if statements
What does block scope mean?
Variables that are declared within a block only exist within that block
What is the scope of a variable declared with const or let?
The block
Why is it possible to .push() a new value into a const variable that points to an array?
const are not immutable. The variable itself is read only, but you may manipulate the contents inside. You just cannot instantiate the variable
How should you decide on which type of declaration to use?
const for all things
let if you can’t const.
What is destructuring, conceptually?
Decompose the properties of an object or the indexes of an array to separate them to create specific variables
What is the syntax for object destructuring?
let {object: name} = “object to get from”
What is the syntax for Array destructuring?
let {object} = “array to get from”
How can you tell the difference between destructuring and creating Object/Array literals?
If the declaration of the variable is on the left or right side.
What is the syntax for writing a template literal?
` ${variable}`
What is “string interpolation”?
Replace placeholders with values in a string literal
What is the syntax for defining an arrow function?
() => {}
When an arrow function’s body is left without curly braces, what changes in its functionality?
its a 1 liner
How is the value of this determined within an arrow function?
it is determined by the surrounding scope
What is a CLI?
Command line interface
What is a GUI?
Graphical User Interface
man
man cat
cat
cat txt file
ls
ls any directory
pwd
pwd to find your directory
echo
to write arguments
touch
Create a file
mkdir
Create directory
mv
Move
rm
Remove
cp
copy
What are the three virtues of a great programmer?
lazy, patience, huburous
What is Node.js?
Server environment
What can Node.js be used for?
Single-threaded, non-blocking, asynchronously programming, generate dynamic page content, crud on server, collect form data, add, delete, modify data in db
What is REPL?
Read-Eval-Print-Loop,
Shell that processes node expressions
When was Node.js created?
2009
What back end languages have you heard of?
java, .net, python, ruby, php, go
What is a process?
Computer program that is being executed on 1 or more threads
Roughly how many computer processes are running on your host operating system?
151
Why should a full stack web developer know that computer processes exist?
Application speed, memory needed, optimization, bottlenecks
What is the process object in a Node.js program?
Global object that provides information about the current Node.js process
How do you access the process object in a Node.js program?
process object and node command
What is the data type of process.argv in Node.js?
Array
What is a javascript module?
Exports specific objects making them available
What values are passed into a node.js module’s local scope?
exports, require, module, __filename, __dirname
Give two examples of truly global variables in a Node.js program
global process
What is Array.prototype.filter useful for?
You can filter out unwanted or wanted data.
What is Array.prototype.map useful for?
When you want to manipulate values within an array
What is Array.prototype.reduce useful for?
To reduce to 1 obj
What is syntactic sugar?
Syntax to make things more readable
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class {
constructor(){}
methods()
}
What is refactoring?
restructure code to be more legible, or improve design, WITHOUT changing its functionality
How are ES modules different from CommonJS modules?
ES6 is pre-parsed
CommonJS load dependencies on demand
What is React?
A front-end javascript library
What is a React element?
JSX, object like a DOM node
How do you mount a React element to the DOM?
ReactDOM.render
What is Babel?
Toolchain made to convert ES6 to ES5
What is a Plug-in?
Component that adds a feature
What is a Webpack loader?
transformations that are applied to the sources code of a module
How can you make Babel and Webpack work together?
babel-loader
What is JSX?
Syntax extension
Why must the React object be imported when authorizing JSX in a module?
JSX compiles into calls to React.createElement()
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
plugin-transform-react-jsx
What are props in react?
Dynamic data. Properties to add into your component
How do you pass props to a component?
Add it as a parameter, then user {props.name}
How do you write JavaScript expressions in JSX?
{}
How do you create “class” component in React?
extends React.Component
How do you access props in a class component?
this.props
What is the purpose of state in React?
to have different dynamic data
How do you pass an event handler to a React element?
bind this, attribute
What Array method is commonly used to create a list of React elements?
Map
What is the best value to use as a “key” prop when rendering lists?
Index or ID
What are controlled components?
When a components input value is driven by React state
What two props must you pass to an input for it to be controlled?
handleChange, handleSubmit
What does express.static() return?
middleware
What is the local __dirname variable in a node.js module?
directory name of the current module
What does the join() method of Node’s path module do?
Join path segments
What does fetch() return?
promise
What is the default request method used by fetch()?
get
How do you specify the request method (GET, POST, etc) when calling fetch?
Create a request with the necessary headers
When does React call a component’s componentDidMount method?
After a component is mounted
name 3 React.Component lifecycle methods
ComponentDidMount, DidUpdate, WillUnMount
How do you pass data to a child component?
props
What must the return value of myFunction be if the following expression is possible?
myFunction()();
function
What does this code do? const wrap = value => () => value;
wrap is equal to value
value is = to function that returns value.
const wrap = value
value = function () {
return value}
function that calls another function that returns the parameter
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
defined
What allows javascript functions to remember values from their surroundings?
Closures
