JavaScript Flashcards
What is the purpose of variables?
To store data for use
How do you initialize (assign a value to) a variable?
variable name = (assignment operator) variable value;
What characters are allowed in variable names?
letters, dollar sign, underscore, numbers (cannot start with a number)
What does it mean to say that variable names are “case sensitive”?
variable with that same name but different casing is a different variable
What is the purpose of a string?
store and use text data
What is the purpose of a number?
store and use numeric data
What is the purpose of a boolean?
boolean is a data type with two values true/false can be used to for decision making
What does the = operator mean in JavaScript?
assignment operator, assigns value to a variable
How do you update the value of a variable?
variable name = (assignment operator) new value
What is the difference between null and undefined?
o undefined: computationally empty value and type are undefined o null: means nothing value is null type is object
Why is it a good habit to include “labels” when you log values to the browser console?
to see what is being logged and in what order
Give five examples of JavaScript primitives.
o string o number o boolean o undefined o null
What data type is returned by an arithmetic operation?
number
What is string concatenation?
Join two or more strings together
What purpose(s) does the + plus operator serve in JavaScript?
o Addition
o Concatenation
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adds the value of the variable to the right operand and assigns the result to the variable i.e.:
x += y means: x = x + y
What are objects used for?
grouping related data variables (properties) and functionality functions(methods) together
What are object properties?
key: value pairs
data attached to a name, data may change, name will stay the same
a variable attached to a object
Describe object literal notation.
const/let objName = { }
can include properties and methodsHow do you remove a property from an object?
delete (keyword) object.(member operator)property
What are the two ways to get or update the value of a property?
o Dot notation object.(member operator)property/method = (assignment operator) value
o Bracket notation object[“property”] = (assignment operator) value
What are arrays used for?
storing a list of values
Describe array literal notation.
var keyword arrayName = (assignment operator) [value, value, value];
How are arrays different from “plain” objects?
arrays are ordered and use numbered indices instead of property names
What number represents the first index of an array?
0
What is the length property of an array?
holds the number of items in the array
How do you calculate the last index of an array?
arrayName.length -1
What is a function in JavaScript?
a block of code that performs a task
Describe the parts of a function definition.
o Function keyword
o Function name (optional)
o Opening and closing parenthesis which may include a comma separated list of parameters
o A code block surrounded by curly braces
o Return statement (optional)
Describe the parts of a function call.
o Function name
o Opening and closing parenthesis which may include a comma separated list of arguments
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function call does not have the function keyword or the code block surrounded by curly braces and the parameters are now arguments
What is the difference between a parameter and an argument?
o A parameter is declared when defining a function to hold the place for a value
o Arguments are the values that are passed to the function when it is called
Why are function parameters useful?
o Provide data to the function
o Can provide different data for different results without having to repeat code
What two effects does a return statement have on the behavior of a function?
o Causes the function to produce a value for use
o Exits the function and prevents any more of the function’s code block from being run
Why do we log things to the console?
For debugging and to check output
What is a method?
A function that is a property of an object
How is a method different from any other function?
Attached to object so able to access the information on that object so has greater functionality.
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(number);
How do you generate a random number?
Math.random();
0 to .9repeating
How do you delete an element from an array?
.splice(index, number); method
How do you append an element to an array?
.push(); method
How do you break a string up into an array?
.split(pattern ie ‘ ‘); method
Do string methods change the original string?
No, strings are immutable the only way to save a string with changes is to create a new variable to hold new string
Is the return value of a function or method useful in every situation?
Not if you don’t need to see or use the return value at the moment.
Give 6 examples of comparison operators.
o === strictly equal to (value and type) o !== not strictly equal to (value and type) o > greater than o > less than o >= greater than or equal to o <= less than or equal to
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
To make a decision. Evaluates a condition and if true executes the code block.
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
o if keyword
o condition surrounded by parentheses
o code block surrounded by curly braces
What are the three logical operators?
o && logical and
o || logical or
o ! logical not
How do you compare two different expressions in the same condition?
(expression1 > comparison operator expression2)
What is the purpose of a loop?
To run a block of code multiple times.
What is the purpose of a condition expression in a loop?
Defines the condition required to run the code block, once false loop ends
What does “iteration” mean in the context of loops?
Loop repetition
When does the condition expression of a while loop get evaluated?
Before each loop iteration
When does the initialization expression of a for loop get evaluated?
One time before the first time the condition is evaluated.
When does the condition expression of a for loop get evaluated?
Before each loop iteration.
When does the final expression of a for loop get evaluated?
At the end of each loop iteration before the next evaluation of 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?
Adds one to its operand and returns a value
How do you iterate through the keys of an object?
for in loop
Why do we log things to the console?
To check output and for debugging
What is a “model”?
A representation/recreation of something
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?
The JavaScript objects that are modelling the HTML document
What is a DOM Tree?
A model of an element and all of it’s children
Give two examples of document methods that retrieve a single element from the DOM.
o getElementById() uses the value of an element’s id attribute o querySelector() uses a CSS selector, and returns the first matching element
Give one example of a document method that retrieves multiple elements from the DOM at once.
o querySelectorAll() uses a CSS selector to select all matching elements o getElementsByClassName() selects all elements that have a specific value for their class attribute o getElementsByTagName() selects all elements that have the specified tag name
Why might you want to assign the return value of a DOM query to a variable?
To store the reference for it for future use, don’t have to search the whole DOM tree again.
What console method allows you to inspect the properties of a DOM element object?
.dir()
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to analyze all of the elements in the HTML page first.
What does document.querySelector() take as its argument and what does it return?
A string holding a CSS selector, the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
A string holding a CSS selector, a node list of all matching elements
What is the purpose of events and event handling?
o To respond to the actions of our users.
o Events are what happens
o Event listeners to trigger functions when an event occurs
What do [] square brackets mean in function and method syntax documentation?
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 passed into another function as an argument
What object is passed into an event listener callback when the event fires?
The event object which contains all the information about that event.
What is the event.target?
The target property of the event object the value of which is the element that the event originated from
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
- the function is passed as an argument (callback function)
2. the function is called and will be replaced by the return of the function call
What is the className property of element objects?
get and set the value of a class attribute
How do you update the CSS class attribute of an element using JavaScript?
element.className = ‘newValue’
What is the textContent property of element objects?
get and set the value of text content of an element and it’s descendants
How do you update the text within an element using JavaScript?
element.textContent = ‘new value’
Is the event parameter of an event listener callback always useful?
No, don’t always need the info stored in event.
Why is storing information about a program in variables better than only storing it in the DOM?
Easy to see and use values multiple times, faster than searching the DOM tree every time
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 form?
submit
What does the event.preventDefault() method do?
prevents the default behavior of the event
What does submitting a form without event.preventDefault() do?
refreshes the page and adds the form’s values to the URL
What property of a form element object contains all of the form’s controls.
elements
What property of form a 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?
difficult to debug
What is an advantage of having your console open when writing a JavaScript program?
verify code as you go
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?
o element.appendChild(childelement);
o element.append(childelement);
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?
o Create element node
o Get element to append the new element to.
o Add element to DOM tree (append to parent element)
What is the textContent property of an element object for?
Get(read) or set(write) text content of an element and it’s children
Name two ways to set the class attribute of a DOM element.
o element.setAttribute(name, value);
o element.className = ‘attribute’;
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
o Define once, repeat as many times needed
o Dynamic
o Name the purpose of the code block
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling & event capturing
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
o selectors (a string containing a selector or selector list) o returns itself or the first matching ancestor, null if no matches
How can you remove an element from the DOM?
ChildNode.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 event listener to an ancestor element
What is the event.target?
the most specific element the event happened on
What is the affect of setting an element to display: none?
Turns off the display of an element and it’s children so it has no effect on the layout, the document is rendered as though they doesn’t exist, taken out of document flow
What does the element.matches() method take as an argument and what does it return?
o A string representing the selector to test
o A boolean
How can you retrieve the value of an element’s attribute?
element.getAttribute(‘attribute name’) method
What is JSON?
JavaScript Object Notation
What are serialization and deserialization?
Serialization is the processes of translating an object into a format that can be stored or transmitted (JSON is string) and deserialization is the reverse of that process, reconstructing the object
Why are serialization and deserialization useful?
o To transmit an object across a network o Persistence (storage)
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(keyName, keyValue);
How to you retrieve data from localStorage?
localStorage.getItem(KeyName);
What data type can localStorage save in the browser?
string
When does the ‘beforeunload’ event fire on the window object?
When the window, document and its resources are about to be unloaded (refresh, close, etc)
How can you tell the difference between a method definition and a method call?
a function definition being assigned to an object.
object.method();
Describe method definition syntax (structure).
const/let objectName = {
propertyName: function(parameters) {
code block};
}[comma here if multiple methods]
};Describe method call syntax (structure).
objectName.methodName();
How is a method different from any other function?
Attached to an object so it access and sometimes modify that object’s data.
What is the defining characteristic of Object-Oriented Programming?
Objects pair both data (as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
o Abstraction
o Encapsulation
o Inheritance
o Polymorphism
What is “abstraction”?
The ability to interact with something complex in a simple way
What does API stand for?
Application Programming Interface
What is the purpose of an API?
To be able to interact with a system in a simplified way (abstraction)
What is this in JavaScript?
the object to the left of the dot
What does it mean to say that this is an “implicit parameter”?
It is available in a function code block even though it was never included in the function parameter list or declared with var.
When is the value of this determined in a function; call time or definition time?
call
How can you tell what the value of this will be for a particular function or method definition?
You can’t
How can you tell what the value of this is for a particular function or method call?
The value to the left of the dot when the method is called, if there is none, will default to window object.
What kind of inheritance does the JavaScript programming language use?
Prototype-based/prototypal inheritance
What is a prototype in JavaScript?
An object that contains properties and methods that can be used as a template for other objects to use.
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?
They are defined on a prototype object that they utilize.
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
Prototype objects
What does the new operator do?
o Creates a blank object.
o Adds a property to the new object __proto__ that links to the constructor function’s prototype object.
o Binds the newly created object instance as the this context
o 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
What does the instanceof operator do?
Tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
What is a “callback” function?
A function passed to 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?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0ms
What do setTimeout() and setInterval() return?
timeoutID / intervalID a positive number that identifies the timer created by the call
What is a client?
programs that request data from a server
What is a server?
computer program that stores and transmits data to other computers on the network when asked to
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
What three things are on the start-line of an HTTP request message?
o HTTP method
o Request target
o HTTP version
What three things are on the start-line of an HTTP response message?
o The protocol version
o A status code
o A status text
What are HTTP headers?
The meta data for the request/response
Is a body required for a valid HTTP request or response message?
no
What is AJAX?
A technique for requesting and loading data onto a part of the page without having to refresh the entire page using XMLHTTPRequest
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
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Prototype chain (EventTarget)
What are some examples of a code block?
Loops
Conditionals
What does block scope mean?
Variables can only be accessed within the code block curly braces
What is the difference between let and const?
Const variable is immutate; it cannot be reassigned
Const must be assigned value on declaration
Why is it possible to .push() a new value into a const variable that points to an Array?
Because an array is an object so it is pass by reference and is mutable
How should you decide on which type of declaration to use?
Use const unless you can’t, then use let
What is the syntax for writing a template literal?
Surrounded by backticks
expressions ${}
What is “string interpolation”?
Substituting expression values in a string
What is destructuring, conceptually?
Assigning property values of an object to variables
What is the syntax for Object destructuring?
Const/let {
propertyKey: variableName,
What is the syntax for Array destructuring?
Const/let [variableName, variableName] = arrayName;
How can you tell the difference between destructuring and creating Object/Array literals?
{} or [] on left or right of the assignment operation
What is the syntax for defining an arrow function?
() => expression; expression; expression {multiple expressions or statements}
When an arrow function’s body is left without curly braces, what changes in its functionality?
Don’t need a return statement
How is the value of this determined within an arrow function?
Determined at definition time by the value of this in the enclosing code block, window if none
What is a CLI?
Command Line Interface
What is a GUI?
Graphical User Interface
o man o cat o ls o pwd o echo o touch o mkdir o mv o rm o cp
o man look at the manual for a program o cat concatenate files, create new files, see contents of a file > create new file o ls list directory contents o pwd print name of working directory o echo print a line of text > create new file o touch create a file without content (ie: .gitkeep) o mkdir make directories (parent directories with -p option) o mv rename or move files o rm remove files (directories with -r option) o cp copy files (directories with -r option)
What is Node.js?
a runtime environment that allows JavaScript to be executed outside of a web browser
What can Node.js be used for?
build back ends for Web applications, command-line programs, or any kind of automation that developers wish to perform
What is a REPL?
read-eval-print loop: an interactive shell that reads user inputs, executes them, and returns the result
What is a computer process?
The instance of a program that is being executed
What is the process object in a Node.js program?
A global object that provides information about, and control over, the current Node.js process
How do you access the process object in a Node.js program?
globally available by referring to the name
What is the data type of process.argv in Node.js?
An array of strings
Why should a full stack Web developer know that computer processes exist?
To program applications where client, server and database work together
What is a JavaScript module?
a .js file
What values are passed into a Node.js module’s local scope?
o exports o require o module o \_\_filename o \_\_dirname
Give two examples of truly global variables in a Node.js program
o process
o global
o console
What is the purpose of module.exports in a Node.js module?
To make data and functions available to other modules
How do you import functionality into a Node.js module from another Node.js module?
require() method
What is a directory?
a file container
What is a relative file path?
The location of a file or directory relative to the current directory
What is an absolute file path?
The complete location of a file or directory starting from root
What module does Node.js include for manipulating the file system?
fs
What is the JavaScript Event Loop?
It moves asynchronous functions in the task queue to the call stack when it is empty
What is different between “blocking” and “non-blocking” with respect to how code is executed?
Blocking code stays on the stack until complete, non-blocking code pushed to the task queue
What method is available in the Node.js fs module for writing data to a file?
writeFile() method
Are file operations using the fs module synchronous or asynchronous?
They have asynchronous and synchronous methods
What is NPM?
npm website, command line client, package registry
What is a package?
a directory with one or more files and has a package.json
How can you create a package.json with npm?
npm init -y
What is a dependency and how to you add one to a package?
files required by a package, npm install
What happens when you add a dependency to a package with npm?
package.json gets updated to include the new dependency and the dependency files get downloaded
How do you add express to your package dependencies?
npm install express
What Express application method starts the server and binds it to a network PORT?
listen method
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
What are the three states a Promise can be in?
o pending: initial state, neither fulfilled nor rejected.
o fulfilled: meaning that the operation was completed successfully.
o rejected: meaning that the operation failed.
How do you handle the fulfillment of a Promise?
then method
How do you handle the rejection of a Promise?
catch method
What is Array.prototype.filter useful for?
Filtering an array to show only the values that meet your criteria
What is Array.prototype.map useful for?
Creating a new array with the return of a function being called on each element of an array
What is Array.prototype.reduce useful for?
Combining the elements in an array into a single value
What is “syntactic sugar”?
syntax within a programming language that is designed to make things easier for humans to read or to write
What is “syntactic sugar”?
syntax within a programming language that is designed to make things easier for humans to read or to write
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
class Name {
constructor(property(ies)) {
this.property = property;
}
method() {
return this.property;
}
}What is “refactoring”?
restructuring existing code without changing its external behavior (usually to improve readability, reduce complexity, or improve performance)
What is Webpack?
A module bundler for JavaScript applications
How do you add a devDependency to a package?
npm install –save-dev
How do you execute Webpack with npm run?
npm run key
How are ES Modules different from CommonJS modules?
Use import or {} from ‘./filepath’ and export instead of const variable = require(‘file’) & module.exports = ;
What kind of modules can Webpack support?
o ECMA Script modules o CommonJS modules o AMD modules o Assets o WebAssembly modules
What is React?
a JavaScript library/framework for creating user interfaces
What is a React element?
An object modeling a DOM node
How do you mount a React element to the DOM?
ReactDOM.render(element, container)
What is Babel?
A JavaScript compiler* mainly used to translate JavaScript to an older version of JavaScript (*program that translates from one language to another)
What is a Plug-in?
A software component that adds a feature to an existing program
What is a Webpack loader?
A plug in that can transform a source module’s code as it is imported
How can you make Babel and Webpack work together?
install babel-loader as a devDependency
What is JSX?
A syntax extension for JavaScript that produces React elements
Why must the React object be imported when authoring JSX in a module?
Because when you make elements it compiles to React.createElement()
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Install plug-in: npm install @babel/plugin-transform-react-jsx
What is a React component?
A function that takes an input and returns a React element
How do you define a function component in React?
function Name(props) { return <h1>Hello, {props.user} </h1>;}
How do you mount a component to the DOM?
ReactDOM.render(element, container)
What are props in React?
Properties used for passing data from one component to another
How do you pass props to a component?
Use a key=”value” pair when creating element
How do you write JavaScript expressions in JSX?
{expression}
How do you create “class” component in React?
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}How do you access props in a class component?
Property of the this object
