JavaScript Flashcards
What is the purpose of variables?
Allows you to store data and access them later.
How do you declare a variable?
- variable keyword
- variable name
- assignment operator (=)
- variable value
How do you initialize (assign a value to) a variable?
=
What characters are allowed in variable names?
letters, digits, _, $, and it cannot start with a number
(ex: cat1 is okay but not 1cat)
What does it mean to say that variable names are “case sensitive”?
uppercase and lowercase matters in JavaScript.
(ex. JavaScript != javascript)
precision is mandatory
What is the purpose of a string?
Storing some sequence of characters
What is the purpose of a number?
Stored when we need to manipulate mathematical information
What is the purpose of a boolean?
It is important for conditions. Able to represent if something is or isn’t.
Their purpose is to make decisions.
What does the = operator mean in JavaScript?
It is the assignment operator.
Used to assign a value to a variable.
How do you update the value of a variable?
When updating, you do not need the variable keyword, but still need the assignment operator.
+=
What is the difference between null and undefined?
undefined ==> a value that is not actually there. Means empty
null ==> null is a value that is assigned. It is done on purpose.
Why is it a good habit to include “labels” when you log values to the browser console?
Having labels makes it clear what we are working with.
Sometimes, there are multiple console.logs and you would need to differentiate.
Give five examples of JavaScript primitives.
- String
- Numbers
- Booleans
- Null
- Undefined
What data type is returned by an arithmetic operation?
a number
What is string concatenation?
The process of joining together two or more strings to create one new string. Uses the + (plus operator)
What purpose(s) does the + plus operator serve in JavaScript?
The plus operator can be used for string concatenation and as an arithmetic operation (adding).
What data type is returned by comparing two values (<, >, ===, etc)?
A boolean
(true or false)
What does the += “plus-equals” operator do?
The += is an assignment operator that sums up the left and right operand values then assign the obtaining result to the left operand.
It will increment your sum variable with the amount next to it.
What are objects used for?
Objects group together a set of variables and functions to create a model of something you would recognize from the real world
What are object properties?
If a variable is part of an object, it is called a property. Properties tell us about the object, such as the name of a hotel or the number of rooms it has.
Describe object literal notation.
The object is the curly braces and their contents. Separate each key from its value using a colon. Separate each property and method with a comma (but not after the last value).
How do you remove a property from an object?
Use the delete operator and assign the property using either the dot or bracket notation.
What are the two ways to get or update the value of a property?
Dot notation and bracket notation.
Ex. student.firstName || student[‘firstName’]
What are arrays used for?
Arrays store a list of values.
You should consider using an array whenever you are working with a list or a set of values that are related to each other.
Describe array literal notation.
The values are assigned to the array inside a pair of square brackets[ ], and each value is separated by a comma.
The values in the array do not need to be the same data type, so you can store a string, a number and a Boolean all in the sam array.
How are arrays different from “plain” objects?
Arrays are a special type of object. They hold a related set of key/value pairs (like all objects), but the key for each value of an array is its index number.
They tell you the length. To add data, you would need a method (push). Arrays have an order.
What number represents the first index of an array?
0
What is the length property of an array?
Each array has a property called length, which holds the number of items in the array.
( ex. array.length)
How do you calculate the last index of an array?
You take the length property of the array and subtract by 1.
What is a function in JavaScript?
Packed up code that can be reused throughout a program.
A set of statements that performs a task or calculates a value.
Describe the parts of a function definition.
- The function keyword to begin the creation of the function
- An optional name
- A comma-separated list of zero or more parameters, surrounded by ( )
- The start of the function’s code block, indicated by an { opening curly
brace - An optional return statement.
- The end of the function’s code block, as indicated by a } closing curly brace
Describe the parts of a function call.
- The function’s name
- A comma-separated list of zero or more arguments surrounded by ( )
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function call is just the function name with the argument.
Function definition has the function keyword and the code block.
What is the difference between a parameter and an argument?
A parameter is a placeholder. It is a variable whose value is not known until we call the function and pass an argument. When the function’s code block is run, the parameter will be holding the value of the argument.
When we define a function, we declare parameters
When we call a function, we pass it arguments
Why are function parameters useful?
It can be used as a placeholder for when the arguments will eventually be passed.
Also, the parameter can be used within the code block when making the function
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?
The JavaScript console is a debugging tool. It is where the browser prints errors and warnings as they occur in your JavaScript code.
What is a method?
A method is a function which is a property of an object.
How is a method different from any other function?
Methods are associated with an object, while a function is not.
How do you remove the last element from an array?
Using the pop() method
Array.prototype.pop()
How do you round a number down to the nearest integer?
using the floor method of the Math object.
Math.floor()
How do you generate a random number?
by calling the random() method of the Math object.
Math.random()
How do you delete an element from an array?
By calling the splice() method
Array.prototype.splice()
splice(start, deleteCount)
How do you append an element to an array?
By calling the push() methods.
Array.prototype.push()
append = Put it on the end
How do you break a string up into an array?
By calling the split() method
String.prototype.split()
Do string methods change the original string? How would you check if you weren’t sure?
No. Strings are immutable.
You would check logging the value to the console.
Roughly how many string methods are there according to the MDN Web docs?
50 string methods
Is the return value of a function or method useful in every situation?
No. functions and methods are only useful in specific situations
Roughly how many array methods are there according to the MDN Web docs?
41 array methods
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 (>)
- Less than or equal too (<=)
- Greater than or equal too (>=)
- Strict equality operator (===)
- Strict inequality operator (!==)
What data type do comparison expressions evaluate too?
Booleans
What is the purpose of an if statement?
To make decisions in the code
Is else required in order to use an if statement?
No
Describe the syntax (structure) of an if statement.
- if keyword
- condition
- opening curly brace
- code to execute if value is 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?
You use the logical operators (AND, OR)
&&, ||
What is the purpose of a loop?
Loops are a programming element that repeat a portion of code a set number of times until the desired process is complete.
What is the purpose of a condition expression in a loop?
If the value of conditionExpression is true, the loop statements execute. Otherwise, the for loop terminates.
What does “iteration” mean in the context of loops?
Iteration is the process of repeating steps.
How many times the loop gets repeated.
When does the condition expression of a while loop get evaluated?
The condition test occurs before statement in the loop is executed.
Occurs before each iteration
When does the initialization expression of a for loop get evaluated?
One time before everything.
When does the condition expression of a for loop get evaluated?
condition expression is evaluated after the initialization expression, and then it happens before the final expression after each iteration.
When does the final expression of a for loop get evaluated?
Before the condition and after the code block
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break
What does the ++ increment operator do?
Adds one to the variable it is applied too and saves it in that variable
How do you iterate through the keys of an object?
Use a for in loop
Why do we log things to the console?
So that we can see all the properties within the object
Helps with debugging.
What is a “model”?
A series of objects that represents a web page that the browser saves in memory.
A model of the HTML webpage
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?
A javascript object that is modeling the HTML document
What is a DOM Tree?
It is a representation of the entire webpage. Every element, attribute, and piece of text in the HTML is represented by its own DOM node.
Everything below the document node is called the DOM Tree.
Give two examples of document methods that retrieve a single element from the DOM.
- querySelector()
- getElementById()
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
You can use dot notation to access the content within that node since the DOM is made up of all objects
What console method allows you to inspect the properties of a DOM element object?
console.dir()
dir = directory
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
It may slow down the page rendering speed since it will execute the javascript code on the spot.
HTML document loads from top to bottom. Part of HTML will not be created yet if you are using JavaScript to work with the DOM
What does document.querySelector() take as its argument and what does it return?
document.querySelector() takes in string as an argument and returns the first element that matches that selector.
What does document.querySelectorAll() take as its argument and what does it return?
document.querySelectorAll() takes in a string as an argument and returns returns a nodeList object of all the elements that the string represents.
Why do we log things to the console?
Helps with debugging and checking to see if there are any mistakes in our code
What is the purpose of events and event handling?
Allows users to interact with the webpage.
For us to be aware when a certain action happens. Our job as developers is to have something happen when that action happens
Are all possible parameters required to use a JavaScript method or function?
No
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 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.
What object is passed into an event listener callback when the event fires?
A function that we have made will be called when the event fires
The event object.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The event.target is the piece of HTML where the event originated.
We can check by logging it into the console.
We can get more information by googling online using MDN
What is the difference between these two snippets of code?
1. element.addEventListener(‘click’, handleClick)
2. element.addEventListener(‘click’, handleClick())
In the first snippet of code, the handleClick function is being called when the click event happens.
In the second snippet of code, the handleClick function is being called when the page loads.
What is the className property of element objects?
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Property containing that class attribute of that element.
How do you update the CSS class attribute of an element using JavaScript?
Using the className property
What is the textContent property of element objects?
The textContent property of the Node interface represents the text content of the node and its descendants.
How do you update the text within an element using JavaScript?
Using the textContent property using the assignment operator
Is the event parameter of an event listener callback always useful?
No
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More complicated since a variable can be reused
Why is storing information about a program in variables better than only storing it in the DOM?
Because variables are shorter to write and you can use them whenever you need to.
Better to use data from the language you are using.
What is JSON?
JavaScript Object Notation (JSON)
It is a standard text-based format for representing structured data based on JavaScript object syntax
What are serialization and deserialization?
Serialization: the process of turning an object in memory into a stream(one line) of bytes so you 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?
Serialization turns the object into a string, which is useful for when you want to transmit data across a network. Although serialized data resembles javascript object literal syntax, it can be used independently from javascript.
Deserialization is useful because it can take serialized data and return it into object form.
How do you serialize a data structure into a JSON string using JavaScript?
Use the JSON.stringify() method
How do you deserialize a JSON string into a data structure using JavaScript?
Use the JSON.parse() method
How do you store data in localStorage?
setItem method of the local storage object
How do you retrieve data from localStorage?
getItem method of the localStorage object
What data type can localStorage save in the browser?
A string
When does the ‘beforeunload’ event fire on the window object?
When the window is about to be closed
What is a method?
A method is a function which is a property of an object.
How can you tell the difference between a method definition and a method call?
Method definition: Includes a property name, the function key word, parameters, and function code block.
Method call: Only includes the object name with the method using dot notation and the arguments inside parentheses.
Describe method definition syntax (structure).
Method definition: Define an object literal. Within the object literal, includes a property name being define. Within the value is the function key word, parameters inside parentheses, and the function code block.
ex. var calculator = {
add: function (x, y) {
return x + y;
}
Describe method call syntax (structure).
Method call: Only includes the object name with the method using dot notation and the arguments inside parentheses.
ex. calculator. add(5, 5);
How is a method different from any other function?
A method is a function that is ONLY the property of 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”?
The most important part of the term “abstraction” boils down to being able to work with (possibly) complex things in simple ways.
Light switch analogy.
What does API stand for?
Application Programming Interface (API)
What is the purpose of an API?
The purpose of every software API is to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
What is this in JavaScript?
Implicit parameter that allows up to call a variable within the code block
What does it mean to say that this is an “implicit parameter”?
A value that is just given to each function. It is always present.
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?
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);
}
};
The value of this is nothing because the greet method has not been called yet.
How can you tell what the value of this will be for a particular function or method definition?
We wouldn’t know what the value of this is when the method is being defined. You would only know when the method is called. ‘This’ is a placeholder and we never know the value of the placeholder.
How can you tell what the value of this is for a particular function or method call?
Whatever is on the left of the dot.
What kind of inheritance does the JavaScript programming language use?
prototype/prototypal-based inheritance
What is a prototype in JavaScript?
The prototype is an object that is associated with every functions and objects by default in JavaScript
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?
It turns out arrays don’t actually have the methods that you’ve come to know. Instead, those methods are defined on a “prototype” object and arrays simply borrow those methods when they’re needed.
If an object does not have its own property or method by a given key, where does JavaScript look for it?
In the prototype object
What does the new operator 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.
What property of JavaScript functions can store shared behavior for instances created with new?
The prototype property
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.
What is a “callback” function?
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?
Use the setTimeout method
How can you set up a function to be called repeatedly without using a loop?
Use the setInterval method
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
default time delay of 0
What do setTimeout() and setInterval() return?
setInterval returns the intervalID and setTimeout returns the timeoutID. Which will always be a positive integer
What is AJAX?
Ajax, which initially stood for Asynchronous JavaScript And XML, is a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.
Loading data to a part of the page without a need for reloading.
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?
The ‘load’ event is fired when an XMLHttpRequest transaction completes successfully.
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share a prototype
What is Array.prototype.filter useful for?
The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.
What must the return value of myFunction be if the following expression is possible?
myFunction()();
It would return the return value of the function that is inside of myFunction.
What does this code do?
const wrap = value => () => value;
When wrap is called, it would return the function that holds value
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
When it is defined
What allows JavaScript functions to “remember” values from their surroundings?
Closures
What are closures?
It is a backpack for functions that remember values that it might need later.
If the value of the outer function is used in the inner function. The value in the outer function is remembered when the value is used in the inner function.
