JavaScript Flashcards
What is the purpose of variables?
Represents and stores the values in our data
How do you declare a variable?
By using var, let, or const before naming the variable
Ex. var variableName
How do you initialize (assign a value to) a variable?
By using var to declare our variable, then an equal sign, and then our value
What characters are allowed in variable names?
$, letters, numbers, underscore
What does it mean to say that variable names are “case sensitive”?
A capital A is not the same as a lowercase a. Uppercase and lowercase letters are different values in JS.
What is the purpose of a string?
Allows us to store and manipulate text
What is the purpose of a number?
Allows us to calculate sums, count, and perform other tasks (i.e determining size, moving position of an element, etc.)
What is the purpose of a boolean?
Gives us a true or false value that tells our program which script to run
What does the = operator mean in JavaScript?
This is the assignment operator. It assigns the value on the right to the variable on the left
How do you update the value of a variable?
Put the variable on a new line with a different value assigned to it
What is the difference between null and undefined?
Null - an intentional absence of a value
Cannot be created by javascript only by humans
Undefined - accident; no one plans for this to have a value
Why is it a good habit to include “labels” when you log values to the browser console?
The console does not log the variable name in the output so it is good practice to include it ourselves so that we see what the purpose of our value is (helps other people understand your data as well)
Give five examples of JavaScript primitives.
Undefined , null , boolean , string and number
What data type is returned by an arithmetic operation?
Numbers
What is string concatenation?
The process of adding two strings together to create a new string
What purpose(s) does the + plus operator serve in JavaScript?
Addition - math purposes
Concatenation - adding strings together
What data type is returned by comparing two values (, ===, etc)?
A boolean true or false
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 objects used for?
An object is a collection of properties, and a property is an association between a name (or key) and a value.
A data type that allows you to store and manipulate data.
What are object properties?
Object properties are variables/key that gives us information about an object
Describe object literal notation.
Var declaration, then we have the object, within the curly opening and closing curly brace we have the keys: which are the property names and its value & the method
How do you remove a property from an object?
By using the delete operator and then object.property
Ex. delete hotel.name;
What are the two ways to get or update the value of a property?
Dot notation
Put the object name with a dot and then assign the new variable on the right
Ex. hotel.name = ‘new value’
Square brackets
Ex. hotel[‘name’] = ‘new value’
What are arrays used for?
They are used to store a list of values
Describe array literal notation.
Var declaration, variable name, and [ ]
How are arrays different from “plain” objects?
Objects represent things in real life while arrays hold a list of values;
the key for each value in an array represents a number; all arrays come with a property which is length that is always being updated
What number represents the first index of an array?
zero
What is the length property of an array?
Length property counts how many items are in our array
How do you calculate the last index of an array?
n-1
What is a function in JavaScript?
a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.
A reusable block of code
Describe the parts of a function definition.
Also called a function declaration:
- Function keyword
- Optional name
- Comma-separated list of zero or more parameters
- Opening curly brace to indicate start of our function
- Optional return statement
- Closing curly brace to indicate end of function code block
Describe the parts of a function call.
- Function name
- A comma-separated list of zero or more arguments
When comparing them side-by-side, what are the differences between a function call and a function definition?
A function definition defines what needs to be done in order to achieve our goal; the call function helps executes those needs to achieve that goal
Function definition:
Has function keyword and code block
Function call:
Has arguments
What is the difference between a parameter and an argument?
Parameters:
- Have a value that is not known
- Placeholders for arguments
Arguments:
- Have a value that is known
- Replaces the parameter once it is called in
Why are function parameters useful?
- It holds our value until an argument gets called into it
- Helps us get reusable behaviors
What two effects does a return statement 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?
To ensure that our code is working and correct (debugging purposes)
What is a method?
A method is a function that belongs to an object and executed with that object as a context.
or
A function that is a property of an object
How is a method different from any other function?
A method is associated with an object while a function is not
How do you remove the last element from an array?
By using pop method
How do you round a number down to the nearest integer?
With Math.floor
How do you generate a random number?
Math.random( ) function
How do you delete an element from an array?
Splice ( )
How do you append an element to an array?
Append ( )
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?
Strings are immutable; therefore they cannot be changed - only replaced. We can check by logging it through the console.
Roughly how many string methods are there according to the MDN Web docs?
45-60; there’s a lot lol
Is the return value of a function or method useful in every situation?
No, because it is optional. Sometimes the value of a return is not useful while some are
Roughly how many array methods are there according to the MDN Web docs?
40-50
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.
== - is equal to
!= - is not equal to
=== - strict equal to
>
- greater than
< - less than
> = - greater than or equal to
What data type do comparison expressions evaluate to?
A boolean true or false
What is the purpose of an if statement?
Evaluates our condition to see if it is true or false
Is else required in order to use an if statement?
No
Describe the syntax (structure) of an if statement.
if (condition) {
statement1
} else {
statement2
What are the three logical operators?
&& - logical and
| | - logical or
! - logical not
What is the purpose of a loop?
It checks a condition repeatedly
What is the purpose of a condition expression in a loop?
- Keeps our loop running as long as the condition is true
- Responsible for stopping
What does “iteration” mean in the context of loops?
- a process wherein a set of instructions or structures are repeated in a sequence a specified number of times or until a condition is met
- Each time a loop runs
When does the condition expression of a while loop get evaluated?
-An expression is evaluated before each pass through the loop.
When does the initialization expression of a ‘for loop’ get evaluated?
It’s executed once at the beginning of the loop
or
Evaluated once before the loop begins
When does the condition expression of a for loop get evaluated?
Before each loop iteration
aka if the condition is true, it shall execute
When does the final expression of a for loop get evaluated?
At the end of each loop iteration and before the condition 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, reassign, and substitutes one to our operand
How do you iterate through the keys of an object?
Using the for in statement.
Why do we log things to the console?
To label our values to make it easier for others and ourselves to understand
Good for debugging
What is a “model”?
A representation of an object, thing, person, etc.
Which “document” is being referred to in the phrase Document Object Model?
The browser page/HTML page
What is the word “object” referring to in the phrase Document Object Model?
The properties, methods, and events available for manipulating and creating web pages
Data object in JS
What is a DOM Tree?
Also known as a node tree; it is a structure that represents the parent node and the child node branches of the parent nodes
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.
querySelectorAll( )
Why might you want to assign the return value of a DOM query to a variable?
Assigning a variable to our element will allow us to work with it more than once
Stores location of the node
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 browser loads a script from top to bottom so putting our script tag at the bottom will allow all the html to load first before our JavaScript does
What does document.querySelector() take as its argument and what does it return?
Argument: a DOM string w/ CSS selector
Return: It returns the first element within the document that matches the specified selector or group of selectors; null is returned if no matches are found
What does document.querySelectorAll() take as its argument and what does it return?
Argument: a DOM string w/ a CSS selector
Return: nodes list
What is the purpose of events and event handling?
It allows our browser to feel more interactive
Events occur when users interact with a web page (click, hover, type, etc.)
Event handling occurs when: a function runs after being triggered when an event occurs
Are all possible parameters required to use a JavaScript method or function?
No because you can call a function without a parameter
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 that is passed to another function as a parameter/argument is a callback function.
What object is passed into an event listener callback when the event fires?
Object that contains all info about the event that just occurred:
-The list that displays all the info that just occurred with the properties and its value
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
- The read-only target property of the Event interface is a reference to the object onto which the event was dispatched.
- The target event property returns the element that triggered the event
- MDN
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The first code has the name of the function it is listening for:
-A function definition
The second code is set up where it is calling a function
-Will never have a return statement because we are not the one calling it; it tells handleClick to return undefined
What is the className property of element objects?
It 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?
By using the className property Query, get a new value and assign the className property on that element
What is the textContent property of element objects?
It represents the text content of the node and its descendants
How do you update the text within an element using JavaScript?
By using the textContent property
Query the element, get a new value on element, utilize textContent on the element and assign new value
Is the event parameter of an event listener callback always useful?
No; commonly useful but 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?
It would be more complicated
Why is storing information about a program in variables better than only storing it in the DOM?
It allows us to access the information much quicker when we have it stored vs when we do not have it stored
What event is fired when a user places their cursor in a form control?
Event = focus
What event is fired when a user’s cursor leaves a form control?
Event = blur
What event is fired as a user changes the value of a form control?
Event = input
What event is fired when a user clicks the “submit” button within a form?
Event = submit
What does the event.preventDefault() method do?
- Prevents the default event from happening/the default action that generally occurs will not occur
- Should be required for every form event
What does submitting a form without event.preventDefault() do?
The default action will occur if there is no event.preventDefault
What property of a form element object contains all of the form’s controls.
HTMLFormElement.elements
Example:
var inputs = document.getElementById("my-form").elements;
What property of a form control object gets and sets its value?
The value property or .value
What is one risk of writing a lot of code without checking to see if it works so far?
Debugging will be hard when an error occurs
What is an advantage of having your console open when writing a JavaScript program?
We can see whether or not our console is logging the values properly
Does the document.createElement() method insert a new element into the page?
No - it only creates the element node
How do you add an element as a child to another element?
With the appendChild( ) method;
This method adds the element to the DOM tree
What do you pass as the arguments to the element.setAttribute() method?
A name - string that represents the attribute
A value
What steps do you need to take in order to insert a new element into the page?
- Create the element - createElement ( )
- Give it content - createTextNode( ) (optional)
- Query the DOM that is going to hold the child aka the parent
- Add it to the dom/append it to the parent element - appendChild( )
What is the textContent property of an element object for?
Represents the text content of the node and its descendants.
Name two ways to set the class attribute of a DOM element.
- Element.setAttribute( );
- className( )
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
- We have a piece of data that will always be reusable
- Allows us to test whether or not our code works
What is the event.target?
The target property of the event object returns the element that triggered the event.
Why is it possible to listen for events on one element that actually happen on its descendent elements?
It is possible due to event flow via event bubbling or event capturing
- Event bubbling flows outwards to least specific one
- Event capturing flows inwards to most specific one
What DOM element property tells you what type of element it is?
Event.type property
What does the element.closest() method take as its argument and what does it return?
- Argument = selectors; a DOMstring containing a selector list
- Return = closestElement; which is the closest ancestor of the selected element; may be null
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?
With event delegation, you can add the event listener to one parent and it will analyze the bubbled events to find a match on child elements
What is the effect of setting an element to display: none?
The element will disappear and be removed from the document flow
What does the element.matches() method take as an argument and what does it return?
Checks to see if the Element would be selected by the provided selectorString – in other words – checks if the element “is” the selector.
- Argument: takes a string that is a css selector
- Returns: a boolean
How can you retrieve the value of an element’s attribute?
Element.getAttribute( )
At what steps of the solution would it be helpful to log things to the console?
Every chance you get aka all steps LOL
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?
Our JavaScript code would have more code than it should have because we would have to write something for the parent and its children ??
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?
We would have more functions that target each specific action vs having one code that targets these
What is JSON?
-Stands for JavaScript Object Notation
JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and null.
What are serialization and deserialization?
Serialization: converting a native object to a string so it can be transmitted across the network
Deserialization: Converting a string to a native object
Why are serialization and deserialization useful?
- Allows you to transmit data across a network and save them to a hard drive
- Allows you to convert string to object and vice versa
How do you serialize a data structure into a JSON string using JavaScript?
object -> string
JSON.stringify()
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
How do you store data in localStorage?
storage.setItem(keyName, keyValue);
How do you retrieve data from localStorage?
storage.getItem(keyName);
What data type can localStorage save in the browser?
String data only
When does the ‘beforeunload’ event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
What is a method?
A method is a function which is a property of an object.
In JavaScript functions themselves are objects, so, in that context, a method is actually an object reference to a function.
How can you tell the difference between a method definition and a method call? Regarding syntax
A method definition has:
A function keyword, a code block, and a function being assigned to an object
A method call has:
Name of method, object, and argument
Describe method definition syntax (structure).
Property name, colon, function key word, parameter list, and a code block
Describe method call syntax (structure).
Method name and method property
Separated with a dot
ex. character.description( );
How is a method different from any other function?
A function is independent, whereas a method is a function linked with an object.
- Function — a set of instructions that perform a task.
- Method — a set of instructions that are associated with an object.
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
Ex. light switch example
What does API stand for?
Application Programming Interface
What is the purpose of an API?
A set of functions that allows applications to access data and interact with external software components, operating systems, or micro-services.
To simplify, an API delivers a user response to a system and sends the system’s response back to a user.
What is this in JavaScript?
An implicit parameter
Purpose: gets the value of the object that the behavior of the function its attached to
What does it mean to say that this is an “implicit parameter”?
This means that it is available in a function’s code block even though it was never included in the function’s parameter list or declared with var
When is the value of this determined in a function; call time or definition time?
It is determined when the function is called (call time)
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);
}
};
This refers to nothing cause there is no object attached to it
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
It’s-a-me, Mario!
There is an object attached to the property greet
In this case, the greet method is being called on the character object
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!
- There is no object attached so the computer cannot register what the value is when asking for the name
- Hello has no properties
How can you tell what the value of this will be for a particular function or method definition?
When a method is being written, and this is being used, there is no value until it is called
How can you tell what the value of this is for a particular function or method call?
If an object is attached to it on the left
What kind of inheritance does the JavaScript programming language use?
Prototype inheritance - JavaScript objects give certain behaviors (methods) or data (properties) to other objects.
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 objects, arrays, and numbers?
The methods are defined on a prototype object that gets borrowed when needed
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
The prototype
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.
Constructor function - The constructor method is a special method of a class for creating and initializing an object instance of that class.
Does four things:
-Creates a blank, plain JavaScript object.
- Adds a property to the new object (__proto__) that links to the constructor function’s prototype object
- Binds the newly created object instance as the ‘this’ context (i.e. all references to this in the constructor function now refer to the object created in the first step).
- 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 property - defines a property that is shared by all objects created with that function, rather than by just one instance of the object type.
What does the instanceof operator do?
The instanceof operator 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 that is 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?
setTimeout( ) function - sets a timer which executes a function or specified piece of code once the timer expires.
Note: Is a global function, so you can call it directly by name without any object to the left of the dot. e.g. setTimeout(func, delay).
How can you set up a function to be called repeatedly without using a loop?
setInterval( ) function - repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
For setTimeout - 0; it is executed immediately
For setInterval - 0; it is executed immediately
What do setTimeout() and setInterval() return?
setTimeout ( ) returns: a positive integer value which identifies the timer created by the call
setInterval ( ) returns: a numeric, non-zero value which identifies the timer created by the call
What is a client?
- Service requesters
- A piece of software using another piece of software
What is a server?
The providers of a resource or service
Which HTTP method does a browser issue to a web server when you visit a URL?
“GET” method
What three things are on the start-line of an HTTP request message?
-An HTTP method - verb or noun that describes action to be performed
Verb: GET, PUT, POST
Noun: HEAD or OPTIONS
- The request target - usually a URL
- The HTTP version - defines structure of the remaining message
What three things are on the start-line of an HTTP response message?
- Protocol version; usually HTTP/1.1
- A status code, indicating success or failure
- A status text; text description of status code that helps human understand HTTP message
What are HTTP headers?
- Let the client and the server pass additional information with an HTTP request or response.
- An HTTP header consists of its case-insensitive name followed by a colon ( : ), then by its value.
Where would you go if you wanted to learn more about a specific HTTP Header?
HTTP Headers at MDN
Is a body required for a valid HTTP request or response message?
No
What is AJAX?
A technique for loading data into part of a page without having to refresh the entire page
Data is often sent in JSON
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 inheritance
What is a code block? What are some examples of a code block?
A set of statements/instructions within a curly brace
Examples:
Function code block
CSS code block
Loop code block
What does block scope mean?
Block Level Scope: This scope restricts the variable that is declared inside a specific block, from access by the outside of the block.
Block scope - variables live and die within the curly braces/within its block
What is the scope of a variable declared with const or let?
Both are block-scoped variables
What is the difference between let and const?
Let:
- Mutable: values can be reassigned
- Can be declared without initialization
Const:
- Immutable - cannot be reassigned or redeclared
- Needs to be initialized with a value after const declaration
- The const keyword creates a read-only reference to a value. The read-only reference cannot be reassigned but the value can be changed.
Why is it possible to .push() a new value into a const variable that points to an Array?
We are only adding to the array, not modifying it
How should you decide on which type of declaration to use?
If we have a value that we intend to reassign, then we would use the let. If we need a variable to be immutable or not reassign, we would use const
What is the syntax for writing a template literal?
let simple = This is a template literal;
Variable declaration, variable name, a string wrapped in between two backticks
${variable name}
-Dollar sign, curly brace, variable name
What is “string interpolation”?
String interpolation is replacing placeholders with values in a string literal
What is destructuring, conceptually?
Getting the data out of the array or object/extracting
What is the syntax for Object destructuring?
let { property1, property2} = object;
Variable declaration, opening curly brace, property key names, closing curly brace, equal sign and object name destructuring from
What is the syntax for Array destructuring?
Variable declaration, square brackets [ ] and items in between the brackets, equal assignment operator, and array name
Ex. let [x, y, z] = getScores();
How can you tell the difference between destructuring and creating Object/Array literals?
The syntax is the opposite for destructuring and creating.
Destructuring (curly or square bracket) is on the left, creating is on the right
When creating object/array literals, we declare the variable declaration first, the object/array variable name, followed by an equal sign and the opening curly braces or brackets
When destructuring, we have the variable declaration, the curly brace or bracket, an equal sign, and then the variable name of the object or array
What is the syntax for defining an arrow function?
Either var, let, or const Variable name Assignment operator Parentheses Parameters (optional) The arrow => The expression
**If it is a block syntax, place the expression within a curly brace with the return keyword
When an arrow function’s body is left without curly braces, what changes in its functionality?
If there is no curly brace, this indicates that the expression is not a part of the function
Curly brace represents that its a statement
How is the value of ‘this’ determined within an arrow function?
‘this’ is determined by call time in arrow function
