JavaScript Flashcards
What is the purpose of variables?
Stores data
How do you declare a variable?
Variable keyword + variable names = variable value;
Must give variable a name
How do you initialize (assign a value to) a variable?
Assign the value using an assignment operator
= sign
What characters are allowed in variable names?
$ or underscore
What does it mean to say that variable names are “case sensitive”?
camelCase - first word lowercase, any additional words have first letter capitalized
What is the purpose of a string?
Working with any kind of text to add new content to a page
Can contain HTML markup
What is the purpose of a number?
Involves counting or calculating sums
Numeric values
What is the purpose of a boolean?
Give values of true or false
Helps determine which part of the script should run
What does the = operator mean in JavaScript?
Assignment operator
Assigns names to value
How do you update the value of a variable?
Change the value
What is the difference between null and undefined?
Null: intentional absence of the value. Undefined: It means the value does not exist in the compiler.
Why is it a good habit to include “labels” when you log values to the browser console
Name of what is for
helps self and others to define what it is used for
Give five examples of JavaScript primitives.
undefined, null, boolean, string, and number
What data type is returned by an arithmetic operation?
Numeric
What is string concatenation?
Process of joining two or more strings to create one new string
What purpose(s) does the + plus operator serve in JavaScript?
Addition as well as concatenation
What data type is returned by comparing two values (, ===, etc)?
Comparison operators
What does the += “plus-equals” operator do?
adds the value of the right operand to a variable and assigns the result to the variable
What are arrays used for?
Storing values as a list
Describe array literal notation.
Values assigned to the array inside of a pair of square brackets, each value separated by a comma.
Don’t need to be same data type
How are arrays different from “plain” objects?
Can combine arrays and objects to create a data structure
What number represents the first index of an array?
0
What is the length property of an array?
sets or returns the number of elements in an array
How do you calculate the last index of an array?
Name.length - 1
Why do we log things to the console?
Making sure everything is working and running correctly
What is a method?
Function which is a property of an object
How is a method different from any other function?
method is associated with an object
How do you remove the last element from an array?
pop()
How do you round a number down to the nearest integer?
math.floor()
How do you generate a random number?
math.random()
How do you delete an element from an array?
splice()
How do you append an element to an array?
unshift()
push()
How do you break a string up into an array?
Call the split() method
Do string methods change the original string? How would you check if you weren’t sure?
No, immutable - log it to the console
Roughly how many string methods are there according to the MDN Web docs?
50+
Allow work with strings after been created
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?
3
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.
< - less than, > - greater than, != - not equal to, || - logical or, === - strictly equal to, && - logical and
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
Evaluates (checks) a condition
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
Keyword, condition, opening curly brace, code to execute if value true, closing curly brace
What are the three logical operators?
&& - logical and, || logical or, ! logical not
How do you compare two different expressions in the same condition?
Using a logical and && - logical or ||
What is the purpose of a loop?
Check a condition that will run the code block
Repeat a block of code
What is the purpose of a condition expression in a loop?
Is evaluated n gets tested every time the loop runs
It determines if and when the loop stops.
What does “iteration” mean in the context of loops?
Means how many times the loop will loop.
When does the condition expression of a while loop get evaluated?
evaluated before each pass through the loop
Before each iteration to decide whether we should stop or not
When does the initialization expression of a for loop get evaluated?
evaluated once before the loop begins
When does the condition expression of a for loop get evaluated?
evaluated before each loop iteration
When does the final expression of a for loop get evaluated?
evaluated at the end of each loop iteration
After the code block runs
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 the operand.
How do you iterate through the keys of an object?
Using the for in loop.
Why do we log things to the console?
Checks to see if the code is running and working properly
What is a “model”?
Representation of something
Which “document” is being referred to in the phrase Document Object Model?
The elements of the page
What is the word “object” referring to in the phrase Document Object Model?
Each node is an object with methods and properties
What is a DOM Tree?
Model of the webpage
Give two examples of document methods that retrieve a single element from the DOM.
getElementById( )
querySelector( )
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll()
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
To avoid having the browser look for that location again.
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
browser needs to go through all the HTML elements before the JavaScript code can access it
What does document.querySelector() take as its argument and what does it return?
A css selector and it returns the first element in doc matching the specified set of CSS selectors
Or null if no matches
What does document.querySelectorAll() take as its argument and what does it return?
A css selector and it returns a Node List with all the properties of that selector.
What is the className property of element objects?
gets and sets the value of the class attribute of the specified element
How do you update the CSS class attribute of an element using JavaScript?
Query for element, get new value and assign using the className property.
What is the textContent property of element objects?
Property that gets and sets the text content of an element
Holds parents and children elements - all text inside the element
How do you update the text within an element using JavaScript?
Query selector + new value onto textContent property
Is the event parameter of an event listener callback always useful?
not always
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More complicated
Why is storing information about a program in variables better than only storing it in the DOM?
storing DOM locations in a variable prevents the browser from looking for the information.
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?
tells the user that if the event does not get explicitly handled, its default action should not be taken as it normally would be
What does submitting a form without event.preventDefault() do?
Reloads the page
What property of a form element object contains all of the form’s controls.
elements
What property of a 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?
unchecked bugs, may not be running properly
What is an advantage of having your console open when writing a JavaScript program?
able to see where issues occur; debugging
What is a method?
A piece of code that is called by a name that is associated with an object
How can you tell the difference between a method definition and a method call?
Method call has ( ). calculator.getAverage([23,423,4234]) getAvg method of the calculator obj Method definition Has the function keyword and function code block Getting assigned to a property
Describe method definition syntax (structure).
- Method name;
- Function keyword;
- Parameters (optional);
- Opening curly brace;
- Code;
- Closing curly brace
Describe method call syntax (structure).
- Object;
- Method name;
- Arguments inside parentheses (optional)
How is a method different from any other function?
function stored inside an object as a property
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
polymorphism
What is “abstraction”?
being able to work with (possibly) complex things in simple ways
Document Object Model is a software example of an abstraction. It is not the original HTML text, but instead a tree of JavaScript objects with convenient methods and properties that allow you to manipulate the document as the user interacts with it.
What does API stand for?
application programming interface
What is the purpose of an API?
The connection between computers or computer programs
Converting information from one application to another.
What is this in JavaScript?
Refers to an object
can be recognized as “the object to the left of the dot” when the function is called (as a method).
What does it mean to say that this is an “implicit parameter”?
available in a function’s code block even though it was never included in the function’s parameter list or declared with var
Dont have to state it
When is the value of this determined in a function; call time or definition time?
the value of this is determined when the function is called, not when it is defined
when you call a function, it’s this will be given the value of the global window object.
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 - method is not being called
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
The message including Mario’s name in message bc character name was called to the firstName with this
Given the above character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
undefined, nothing before hello - window
this = window
How can you tell what the value of this will be for a particular function or method definition?
The value of “this” will be the object that is calling it
How can you tell what the value of this is for a particular function or method call?
The value of this will be in relation to who made the call
What kind of inheritance does the JavaScript programming language use?
Prototype-based inheritance
What is a prototype in JavaScript?
JavaScript prototype is an object that contains properties and methods that can be used by other objects.
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?
Because those methods are inside a prototype object
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 object
What does the new operator do?
Lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype
What does the instanceof operator do?
It checks if a prototype property appears anywhere in the prototype chain of an object
Return value is boolean
What is a “callback” function?
is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
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?
Using setTimeout( ) function
How can you set up a function to be called repeatedly without using a loop?
Using setInterval() function
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
They return a timeoutID or intervalID, which are positive integer values.
What is AJAX?
Allows you to request data from a server and load it without having to refresh the entire page
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML.
Which object is built into the browser for making HTTP requests in JavaScript?
XMLRequest object
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
Load event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Because both descend from the same class being EventTarget.
What is JSON?
Javascript object notation
common data interchange format used to send and store information in computer systems
Text-based data format following JavaScript object syntax, exists as a string
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes
can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process
turning a stream of bytes into an object in memory
Why are serialization and deserialization useful?
Transmit data across network
How do you serialize a data structure into a JSON string using JavaScript?
Using JSON.Stringify( ).
How do you deserialize a JSON string into a data structure using JavaScript?
Using JSON.parse()
What is a code block? What are some examples of a code block?
code blocks are denoted by curly braces { }
ex: if, for, while
What does block scope mean?
the variable inside the block is a new variable and it shadows the variable declared at the top of the script
What is the scope of a variable declared with const or let?
Blocked scope variables
What is the difference between let and const?
const - denotes that a variable is a constant and can’t be reassigned
let - can be reassigned
Why is it possible to .push() a new value into a const variable that points to an Array?
the actual value to which the const variable reference is not immutable
How should you decide on which type of declaration to use?
if the variable will be reassigned
use let otherwise use const
What is the syntax for writing a template literal?
wrapping your text in backticks and writing expressions inside ${ }
What is “string interpolation”?
replacing placeholders with values in a string literal
What is destructuring, conceptually?
extracting data from arrays or objects into smaller parts
What is the syntax for Object destructuring?
let / const keyword { propertyOfObj: nameOfVariable} = object
What is the syntax for Array destructuring?
let / const keyword [varName1, varName2, etc] = array;
How can you tell the difference between destructuring and creating Object/Array literals?
creating - the name of the variable comes first
destructuring - curly brace / square bracket comes first
What is the syntax for defining an arrow function?
(parameter) => {code block}
When an arrow function’s body is left without curly braces, what changes in its functionality?
without curly braces, it can only be a single expression, with curly braces, it needs a return keyword
How is the value of this determined within an arrow function?
an arrow function doesn’t have it’s own this value and captures the this value of the lexical scope (the outer function)
What is the JavaScript Event Loop?
runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-task
What is the difference between “blocking” and “non-blocking” with respect to how code is executed?
A blocking assignment takes effect immediately when it is processed.
Stuff that’s blocking is on the stack , nothing else can happen until it pops off the stack
A nonblocking assignment takes place at the end of processing the current “time delta” - can move on to another task, asynchronous
What is a client?
piece of computer hardware or software that accesses a service made available by a server as part of the client–server model of computer networks.
Server requesters
What is a server?
Service provider
provides functionality for other programs or devices - clients
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
What is on the first line of an HTTP request message?
HTTP method, request target and HTTP version
What is on the first line of an HTTP response message?
The protocol version, status code and status text.
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response.
Metadata about request or response
Is a body required for a valid HTTP message?
no
What are the three states a Promise can be in?
pending
fulfilled OR rejected
How do you handle the fulfillment of a Promise?
promise.then( )
How do you handle the rejection of a Promise?
then() and a final catch() statement
What is Array.prototype.filter useful for?
It’s useful for getting just the values you need out of an array and ignoring the rest.
What is Array.prototype.map useful for?
Creating a new array containing the transformed elements of another.
useful for calling a function on every element of an array and assigning the results to a new array, without modifying the original.
What is Array.prototype.reduce useful for?
It’s useful for calling a function on every element of an array and storing the combined result in a single output value
Combining elements of an array into a single value
What is “syntactic sugar”?
Designed to make things/language easier to read or to express
What is the typeof an ES6 class?
function
What is “refactoring”?
the process of changing a software system in such a way that it does not alter the function of the code yet improves its internal structure.
Describe ES6 class syntax.
Class declaration keyword, curly brace for the class body Prototype methods Closing curly brace for class body
