JavaScript Flashcards
What is the purpose of variables?
Store data, information in variables
Data can change (vary) each time a script runs
How do youdeclarea variable?
var variableName;
Keywords: var, let, const
How do you initialize (assign a value to) a variable?
variableName = value;
= : assignment operator
What characters are allowed in variable names?
Must begin with a: letter, $, or _
can contain numbers (numbers CANNOT start variable name)
What does it mean to say that variable names are “case sensitive”?
Declare different variables depending on upper or lower case usage:
score vs. Score
What is the purpose of a string?
To store text, letters and other characters
Enclosed within a pair of quotes
Frequently used to add new content into a page and they can contain HTML markup
What is the purpose of a number?
To store numerical data
Calculate, determine size of screen, move position of an element on a page, set the amount of time an element should take to fade in
What is the purpose of a boolean?
Boolean data types store one of two values: true or false
Purpose: Make decisions
Used like a switch: on or off
Helpful when determining which part of a script should run
What does the=operator mean in JavaScript?
Assignment operator: used to assign a value to a variable
How do you update the value of a variable?
variable = newValue;
Keyword is only necessary when declaring a new variable
What is the difference betweennullandundefined?
Null is an assigned value, purposefully designated empty by developer while Undefined is returned by the browser
Null: represents a reference that points, generally intentionally, to a nonexistent or invalid object or address
Undefined: automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments
Why is it a good habit to include “labels” when you log values to the browser console?
Helpful to identify what you are logging to the console
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
bigint, symbol
(7 total)
What data type is returned by an arithmetic operation?
Number
What is string concatenation?
Process of joining together two or more strings to create one new string
What purpose(s) does the+plus operator serve in JavaScript?
Adds one value to another
Sums numerical data or string concatenation
What data type is returned by comparing two values (<,>,===, etc)?
Boolean
What does the+=”plus-equals” operator do?
Addition assignment: Adds the value of the right operand to a variable and assigns the result to the variable
What are objects used for?
Group together a set of variables and functions to create a model of something
What are object properties?
Variables that are part of an object
Describe object literal notation.
var object = {
key: value,
propertyName: value,
key: function() {
}
};
How do you remove a property from an object?
Delete operator
delete object.property;
What are the two ways to get or update the value of a property?
Dot notation using member operator (.)
object.propertyName = newValue;
Square bracket syntax
object[‘propertyName’] = newValue;
What are arrays used for?
Store a list of variables and set of values that are related to each other
Group together like data
Describe array literal notation.
var array = [item1, item2, item3,… lastItem];
How are arrays different from “plain” objects?
Special type of object, hold a relates set of key/value pairs (like all objects), but the key for each value is its index number
Arrays do not have individually names pieces of data, ordered in numeric values, 0 index
.length is applicable to array, don’t know how many data is in an object
.push() is applicable to array, dot notation or square bracket syntax to assign properties to objects
What number represents the first index of an array?
0
What is thelengthproperty of an array?
Returns the number of items in the array
array.length
How do you calculate the last index of an array?
array[array.length - 1]
What is a function in JavaScript?
Functions allow you to package up code for use later in your program
Describe the parts of a functiondefinition.
function example(parameter1, parameter2, parameter3, …) {
//…code…
return;
}
function keyword, (optional) name, parameters surrounded by () and separated by ,’s, opening curly brace for the code block, (optional) return statement, closing curly brace to end the code block
Describe the parts of a functioncall.
example(arg1, arg2, arg3);
name of the function, arguments surrounded by () and separated by ,’s
When comparing them side-by-side, what are the differences between a functioncalland a functiondefinition?
Function definition has a function keyword!, parameters, code block!, and curly braces
Function call has name and arguments
What is the difference between aparameterand anargument?
Parameter is a placeholder, a variable whose value is not known until we call the function and pass an argument
Define functions use parameter, Call functions use arguments
Why are functionparametersuseful?
Placeholders
Allows us to write reusable code
Mutability to the code
What two effects does areturnstatement have on the behavior of a function?
- Causes the function to produce a value we can use in our program
- Prevents any more code in the function’s code block from being run
Why do we log things to the console?
Powerful tool for debugging and an easy way to inspect your variables in the browser
What is a method?
A function which is a property of an object
Instance methods - built-in tasks performed by an object instance
Static methods - tasks that are called directly on an object constructor
How is a method different from any other function?
Method is associated with an object, while a function is not
How do you remove the last element from an array?
.pop()
How do you round a number down to the nearest integer?
Math.floor(x)
How do you generate a random number?
Math.random()
range 0 to less than 1 (inclusive of 0, but not 1)
How do you delete an element from an array?
Math.splice(start, delCount)
How do you append an element to an array?
Math.push(element0, element1, … ,elementN)
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, string methods return the result of the method call as an array of substrings
Strings are immutable
console.log(string)
Is the return value of a function or method useful in every situation?
No, some functions don’t return any value
Example: displayMessage(), no specific value is returned when the function is invoked, it just makes a box appear somewhere on the screen
Generally, a return value is used where the function is an intermediate step in a calculation of some kind. You want to get to a final result, which involves some values that need to be calculated by a function. After the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.
Give 6 examples of comparison operators.
<, >, <=, >=,
==, === (strict equal to: both type and value), !
=, !== (strict not equal to)
What data type do comparison expressions evaluate to?
Boolean
What is the purpose of anifstatement?
Evaluates (or checks) a condition. If the condition evaluates to true, any statement in the subsequent code blocks are executed.
Iselserequired in order to use anifstatement?
No
Describe the syntax (structure) of anifstatement.
if (condition) {
//code block to execute if true;
}
What are the three logical operators?
&& - AND
|| - OR
! - NOT
How do you compare two different expressions in the same condition?
Use && or || operator
(expression1 && or || expression2))
What is the purpose of a loop?
Repeat a function by checking a condition and if it returns true, a code block will run until its final expression tells it to stop
What is the purpose of aconditionexpression in a loop?
Instructs the code to run until a condition is met
Stops a loop
What does “iteration” mean in the context of loops?
How many times the code block runs
Whendoes theconditionexpression of awhileloop get evaluated?
Before executing the code block, before each iteration
Whendoes theinitializationexpression of aforloop get evaluated?
Evaluated once before the loop begins
Whendoes theconditionexpression of aforloop get evaluated?
Evaluated right after initialization, for first iteration
Then evaluated once before each loop iteration, after the final expression
Whendoes thefinalexpression of aforloop get evaluated?
Evaluated at the end of each loop iteration
Besides areturnstatement, which exits its entire function block, which keyword exits a loop before itsconditionexpression evaluates tofalse?
Break
What does the++increment operator do?
Adds one to the counter
Then saves that value to the variable
How do you iterate through the keys of an object?
For in loop
What event is fired when a user places their cursor in a form control?
Focus event fires when an element had received focus
What event is fired when a user’s cursor leaves a form control?
Blur event fires when an element has lost focus
What event is fired as a user changes the value of a form control?
Input event fires when the value of an input, select, or textarea element has been changed
What event is fired when a user clicks the”submit”button within aform
Submit event fires on the form element itself, and not on any button or input type=’submit’ inside it, when the user clicks a submit button or presses Enter while editing a field in a form
What does theevent.preventDefault()method do?
Tells the user agent 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 withoutevent.preventDefault()do?
Browser will automatically reload the page to try to send the data to the value attributed to action in the form element
.addEventListener on a submit event will ALWAYS be paired with event.preventDefault(), should be first line of function
What property of a form element object contains all of the form’s controls.
Elements property = can be accessed by index number or by the value of its name attribute
$form.elements[i]
$form.elements.nameOfProperty
What property of a form control object gets and sets its value?
Value property
$form.elements[i]value
$form.elements.nameOfProperty.value
What is one risk of writing a lot of code without checking to see if it works so far?
Don’t know where the bug happened
Should write code one line at a time and check frequently to see if desired action is achieved with each line
What is an advantage of having your console open when writing a JavaScript program?
Keep track of what your code is doing, logs and errors, in real time
What is the affect of setting an element todisplay: none?
Removes element from the document flow
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
What does theelement.matches()method take as an argument and what does it return?
Selectors - a string consisting valid CSS selectors to test the Element against
Returns Boolean true if the Element matches the selectors, false otherwise
How can you retrieve the value of an element’s attribute?
Element.getAttribute(attributeName)
At what steps of the solution would it be helpful to log things to the console?
Every action that you write in code
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?
Write an event handler function to execute each tab
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?
Huge conditional block
What is JSON?
JavaScript Object Notation - a standard text-based format for representing structured data based on JavaScript object syntax, commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa)
What are serialization and deserialization?
Serialization - the process of converting the state of an object in memory into a byte stream, which then can be saved into a file on the local disk or sent over the network to any other machine
Deserialization - the reverse process, reconverting the serialized byte stream to an object
What are serialization and deserialization?
Serialization - the process of converting the state of an object in memory into a byte stream, which then can be saved into a file on the local disk or sent over the network to any other machine
Deserialization - the reverse process, reconverting the serialized byte stream to an object
Why are serialization and deserialization useful?
Serialization allows data to be transmitted or stored data as byte streams
Deserialization allows for interaction with data
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify(): accepts an object as a parameter, and returns the equivalent JSON string
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse(): accepts a JSON string as a parameter, and returns the corresponding JavaScript object
How do you store data inlocalStorage?
Storage.setItem(keyName, keyValue) - when passed a key name and value, will add that key to the given Storage object, or update that key’s value if it already exists
How do you retrieve data fromlocalStorage?
Storage.getItem(keyName)
What data type canlocalStoragesave in the browser?
String
When does the’beforeunload’event fire on thewindowobject?
Close tab, refresh tab, close browser
Fired when the window, the document, and its resources are about to be unloaded, the document is still visible and the event is still cancelable at this point.
This even enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user confirms, the browser navigates to the new page, otherwise it cancels the navigation
What is amethod?
A function which is a property of an object
How can you tell the difference between a methoddefinitionand a methodcall?
Method definition will have a function code block, function keyword, and assignment to a property with a colon (:)
Presence of parenthesis is indicative of a method call.
Describe methoddefinitionsyntax (structure).
var object = {
method: function (parameter) {
…code block…
}
};
Describe methodcallsyntax (structure).
.method()
How is a method different from any other function?
A method is associated with an object, while a function is not
What is thedefining characteristicof Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
Abstraction - a concept of an idea which is not associated with any particular instance (one class should not know the inner details of another in order to use it, just knowing the interfaces should be good enough
Encapsulation - mechanism of hiding data implementation by restricting access to public methods by keeping instance variables private but accessor methods public
Inheritance - ability to reuse common logic and extract unique logic into separate classes by creating a child class by deriving from another parent class to form a hierarchy
Polymorphism - gives a way to use a class exactly like its parent so there’s no confusion with mixing types, but each child class keeps its own methods as they are.
What is “abstraction”?
Abstractions are conceptual models that give us a good enough understanding of inventions that are much more complex behind the scenes. In OOP, the inventions that we aim to simplify and make easy to use are objects. By keeping what’s not necessary for the client to knowabstracted away, we reduce confusion and make it easy for other developers to know how to use our code and extend it.
What does API stand for?
Application Programming Interface - a software-to-software interface that enables two applications to exchange data among each other
What is the purpose of an API?
APIs enable two distanced entities to talk to each other in a standardized format
What isthisin JavaScript?
The this keyword is a reference to an object depending on how this is being invoked (used or called).
The value that this stores is the current execution context of the JavaScript program. Thus, when used inside a function this’s value will change depending on how that function is defined, how it is invoked and the default execution context. Note: this always holds the reference to a single object, that defines the current line of code’s execution context.
What does it mean to say thatthisis an “implicit parameter”?
An implicit parameter is available in a function’s code block even though it was never included in the function’s parameter list or declared with var.
Whenis the value ofthisdetermined in a function;call timeordefinition time?
Call time
What doesthisrefer to in the following code snippet?
var character = {
firstName: ‘Mario’,
greet: function () {
var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
console.log(message);
}
};
No call time, this is an implicit parameter, a placeholder
Given the abovecharacterobject, what is the result of the following code snippet? Why?
character.greet();
String: ’It’s-a-me, Mario!’
Invoked greet function on the character object
Function is being called, this is referring to the character object
Given the abovecharacterobject, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
String: ‘It’s-a-me, undefined!’
This is in a global context and is a reference to the window object
How can you tell what the value ofthiswill be for a particular function or methoddefinition?
Can’t guarantee the value until the function is called. This is an implicit parameter, just a placeholder until the function is invoked.
How can you tell what the value ofthisis for a particular function or methodcall?
The value of this can be recognized as “the object to the left of the dot” when the function is called (as a method).
What kind of inheritance does the JavaScript programming language use?
Prototype-based (or prototypal) inheritance - the ultimate goal is to move properties and methods that we’d like to reuse into a “prototype” object and then tell other objects to simply delegate to that “prototype” object when they aren’t able to perform the required tasks themselves
What is a prototype in JavaScript?
An object that contains properties and (predominantly) 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 strings, arrays, and numbers?
Methods are defined on a “prototype” object and strings, arrays, and numbers borrow those methods when they are needed
If an object does not have its own property or method by a given key, where does JavaScript look for it?
Prototype object
JavaScript looks up its ancestral objects to borrow and grab from prototypal chain
What does thenewoperator do?
The new operator 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
Creates an empty object
Points the new object’s [[Prototype]] to the constructor function’s prototypes property
Executes the constructor function with given arguments, binding new object as the ‘this’ context
Returns the object is no other return value is specified
What property of JavaScript functions can store shared behavior for instances created withnew?
Prototype property (value is an object)
What does theinstanceofoperator do?
Tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.
What is a “callback” function?
A function passed into another functions 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 thedocument, what is one way to delay the execution of a JavaScript function until some point in the future?
Global setTimeOut() method sets a timer which executes a function or specified piece of code once the timer expires.
How can you set up a function to be called repeatedly without using a loop?
setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, which a fixed time delay between each call
Returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval()
What is the default time delay if you omit thedelayparameter fromsetTimeout()orsetInterval()?
Defaults to 0 is not specified
What dosetTimeout()andsetInterval()return?
setTimeout() returns timeoutID which is a positive integer value which identifies the timer created by the call to setTimeout(). This value can be passed to clearTimeout() to cancel the timeout
setInterval() returns intervalID which is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval
What is AJAX?
A technique for loading data into a part of a page without having to refresh the entire page. The data is often sent in a format called JSON (JavaScript Object Notation)
A programming practice of building complex, dynamic webpages using technology known as XMLHttpRequest. Ajax allows you to update parts of the DOM of an HTML page without the need for a full page refresh. Ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading).
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
(XML - eXtensible Markup Language : precursor to JSON)
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest object
What event is fired byXMLHttpRequestobjects when they are finished loading the data from the server?
load
AnXMLHttpRequestobject has anaddEventListener()method just like DOM elements. How is it possible that they both share this functionality?
XMLHttpRequest is an object - has prototype Object - prototypal inheritance
