JavaScript Flashcards
What is the purpose of variables?
store and manipulate data in the future
How do you declare a variable?
var, const, or let
How do you initialize (assign a value to) a variable?
use = (assignment operator) after declaring the variable
What characters are allowed in variable names?
letters, dollar sign, underscore, numbers (not first character)
What does it mean to say that variable names are “case sensitive”?
uppercase and lowercase letters are considered different by the engine
What is the purpose of a string?
store/manipulate text content
What is the purpose of a number?
store/manipulate numbers with math
What is the purpose of a boolean?
logic with binary states, decision making
What does the = operator mean in JavaScript?
assignment operator
How do you update the value of a variable?
use assignment operator (variable = value)
What is the difference between null and undefined?
null is intentional emptiness (can’t exist unless assigned to variable), undefined is default value of variables
Why is it a good habit to include “labels” when you log values to the browser console?
understand what the log’s content contains
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
attach one string to another to create a new string
What purpose(s) does the + plus operator serve in JavaScript?
arithmetic addition, string concatenation if string is present
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
add/concatenate a value onto stated variable, then assign the result to the variable
What are objects used for?
storing related data within a single variable
What are object properties?
the “variables” contained within the object, key and value pair
Describe object literal notation.
curly braces containing properties, property : value
How do you remove a property from an object?
using the “delete” operator
What are the two ways to get or update the value of a property?
dot notation ( object.property ) / bracket notation ( object[‘property’] )
What are arrays used for?
storing related values within a single variable
Describe array literal notation.
values in brackets, separated by commas
How are arrays different from “plain” objects?
there is no “key”, but rather an index for each value. it’s an ordered list.
What number represents the first index of an array?
0
What is the length property of an array?
the amount of values in the array
How do you calculate the last index of an array?
array length - 1
• What is a function in JavaScript?
○ A set of code that can be called in the future with arguments that can affect the outcome of the code.
• Describe the parts of a function definition.
○ keyword, name, parameters, code block
• Describe the parts of a function call.
○ name, arguments
• When comparing them side-by-side, what are the differences between a function call and a function definition?
○ function definition has a code block, keyword, and parameters rather than arguments
• What is the difference between a parameter and an argument?
○ parameter is a placeholder, argument is the data sent to function
• Why are function parameters useful?
○ placeholder. allows data to influence the return
• What two effects does a return statement have on the behavior of a function?
○ exits and gets back the value
Why do we log things to the console?
Development debugging tool
What is a method?
A function defined as a property within an object
How is a method different from any other function?
not much, just in an object
How do you remove the last element from an array?
array.pop
How do you round a number down to the nearest integer?
Math.round(x)
How do you generate a random number?
Math.random() (gives a percentage value)
How do you delete an element from an array (at any index)?
array.splice
How do you append an element to an array?
array.push
How do you break a string up into an array?
string.split(seperator as string)
Do string methods change the original string? How would you check if you weren’t sure?
they don’t. check via console log
Is the return value of a function or method useful in every situation?
no
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.
equal, strictly equal, not equal, strictly not equal, greater, greater and equal, less than, less than and equal
• What data type do comparison expressions evaluate to?
○ boolean
• What is the purpose of an if statement?
○ to allow for decision based on whether or not something is true or false
• Is else required in order to use an if statement?
○ no
• Describe the syntax (structure) of an if statement.
• Describe the syntax (structure) of an if statement.
• What are the three logical operators?
○ AND &&, OR ||, NOT !
• How do you compare two different expressions in the same condition?
○ use logic operators
• What is the purpose of a loop
○ to allow for repeated tasks
• What is the purpose of a condition expression in a loop?
○ determine whether to continue the loop
• What does “iteration” mean in the context of loops?
○ a single cycle of a loop
• When does the condition expression of a while loop get evaluated?
○ before the code block
• When does the initialization expression of a for loop get evaluated?
○ before the first condition, at the beginning ONCE
• When does the condition expression of a for loop get evaluated?
○ before each iteration of the code block
• When does the final expression of a for loop get evaluated?
○ at the end of each iteration
• 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?
○ increments value by 1
• How do you iterate through the keys of an object?
○ “for in” loop
• Which “document” is being referred to in the phrase Document Object Model?
○ HTML document that script has been linked to
• What is the word “object” referring to in the phrase Document Object Model?
○ JavaScript Objects
• What is a DOM Tree?
○ The a chunk of HTML represented as a JavaScript object, including its children and all details
• Give two examples of document methods that retrieve a single element from the DOM.
○ document.querySelector(css selector) or ○ document.getElementById(id attribute)
• Give one example of a document method that retrieves multiple elements from the DOM at once.
○ document.querySelectorAll(css selector)
• Why might you want to assign the return value of a DOM query to a variable?
○ cache the location of the DOM element to refer back to later without having to rewrite the same query and waste performance
• 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 DOM only forms when the script is called. the browser reads HTML in a straight order.
• What does document.querySelector() take as its argument and what does it return?
○ Class selector as an argument, returns the first node that matches the selector
• What does document.querySelectorAll() take as its argument and what does it return?
○ Class selector as an argument, returns NodeList (array-like object) of matching nodes
• What is the purpose of events and event handling?
○ create reactive code
○ handler: function made as response to effect occuring
○ listener: watches for the event to trigger handler
• 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 function definition passed as an argument via name without () for another function
• What object is passed into an event listener callback when the event fires?
○ the “event” object as an argument
• What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
○ the element where the event originated from in the DOM. use console logging to check
• What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
○ first is passing a callback function, second is calling the function for a return to be passed
• What is the className property of element objects?
○ the value of the class attribute of the element in the DOM
• How do you update the CSS class attribute of an element using JavaScript?
○ assign a value to the className property of the element’s DOM object
• What is the textContent property of element objects?
○ all text within the element, ignoring any markup
• How do you update the text within an element using JavaScript?
○ assign a value to the textContent property of the element’s DOM object
• Is the event parameter of an event listener callback always useful?
○ not all the time
• 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, as it would result in variables being handled by the HTML content rather than the JS code itself
• Why is storing information about a program in variables better than only storing it in the DOM?
○ easier manipulation by developer in JS, harder for users to try and break the program.
• 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?
○ prevent the default behavior of an event
• What does submitting a form without event.preventDefault() do?
○ refresh 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?
○ you might fuck yourself over later and build upon a non-working foundation
• What is an advantage of having your console open when writing a JavaScript program?
○ it’s a playground that allows for checking values and testing functions without having to reload the webapp
• Does the document.createElement() method insert a new element into the page?
○ no
• How do you add an element as a child to another element?
○ appendChild or append
• What do you pass as the arguments to the element.setAttribute() method?
○ attribute: string, value: string
• What steps do you need to take in order to insert a new element into the page?
○ create element, modify element (optional), append element onto target (parent)java
• What is the textContent property of an element object for?
○ the text of the node and its decendants
• Name two ways to set the class attribute of a DOM element.
○ className property, setAttribute() method
• What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
○ to be able to repeat the task without having to write it again
• What is the event.target?
○ the origin element that triggered the event
• Why is it possible to listen for events on one element that actually happen its descendent elements?
○ event bubbling flow (goes outwards from most specific node)
• What DOM element property tells you what type of element it is?
○ .tagName
• What does the element.closest() method take as its argument and what does it return?
○ takes a CSS selector as argument, returns node element of nearest parent matching provided selector
• How can you remove an element from the DOM?
○ remove() method of node element
• 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?
○ use event delegation and attach a listener to the element containing the clickable DOM elements.
• What is JSON?
○ Java Script Object Notation. a way to send and store data in and between computers, even outside of JavaScript
• What are serialization and deserialization
○ serialization: converting a native object into a universal format (like JSON)
○ deserialization: converting a universal format (like JSON) to a native object
• Why are serialization and deserialization useful?
○ to allow for data to be sent between different systems and parsed in different languages under one common data type
• How do you serialize a data structure into a JSON string using JavaScript?
○ JSON.stringify(json string)
• How do you deserialize a JSON string into a data structure using JavaScript?
○ JSON.parse(object)
• How to you store data in localStorage?
○ localStorage.setItem(key, value), strings
• How to you retrieve data from localStorage?
○ localStorage.getItem(key)
• What data type can localStorage save in the browser?
○ strings, mainly for JSON
• When does the ‘beforeunload’ event fire on the window object?
○ before the page unloads via closing the tab
• What is the affect of setting an element to display: none?
○ hides the content and removes it and its descendants from document flow as if it was never there
• What does the element.matches() method take as an argument and what does it return?
○ takes CSS Selector, gives back a bool if CSS Selector matches the element
• How can you retrieve the value of an element’s attribute?
○ getAttribute()
• At what steps of the solution would it be helpful to log things to the console?
○ when calling getAttribute
- What is amethod?
- A function that is a property of an object.
- How can you tell the difference between a methoddefinitionand a methodcall?
Method Definition: defined in the object as a property with the value of an anonymous function
Method Call: Has path to method from object and has parenthesis for calling functions.
Describe methoddefinitionsyntax (structure).
object = {
property: function (parameter, parameter, ...) {
Code Block
}
}Describe method call syntax (structure)
Object.method(parameter);
How is a method different from any other function?
It is a parameter of the object it is attached to, rather than a standalone variable function.
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data and behavior (properties and methods)
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “Abstraction”?
A complex process that is accessible in a simplified manner.
A facade that hides a bunch of complex shit behind the scenes.
What does API stand for?
Application Programming Interface.
A way for software to interact with another software.
A set of code features that allow other devs to make use of it, rather than humans
What is the purpose of an API?
To enable devs to allow for software to interact with each other
What is “this” in JavaScript?
- An implicit parameter of all JavaScript functions that takes the value of a reference of the object it is being called from.
What does it mean to say that “this” is an “implicit parameter”?
An available parameter of a function even if it wasn’t included in the parameter list.
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);
}
};
Nothing (not being called yet)
How can you tell what the value of this will be for a particular function or method definition?
You can’t. It doesn’t have a value yet.
How can you tell what the value of this is for a particular function or method call?
Check the object that is being used to access the method. If there’s none, then it’ll be window global object.
What kind of inheritance does the JavaScript programming language use?
prototype-based (prototypal) inheritance
What is a prototype in JavaScript?
The structure/defaults that new objects are built off of when newly created. Behaviors and data are passed to the inheritors.
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?
Strings, arrays, and numbers are objects themselves that inherit from their respective prototypes.
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
The object that it inherits from. (prototype)
What does the new operator do?
Creates a blank object
Assigns value of prototype property of constructor function to __proto__ property of the new object
Calls the provided constructor function with “this” bound to the new object.
Constructor function returns an object, which becomes the value of the “new” expression.
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
What does the instanceof operator do?
Checks if an object inherits from a certain prototype in its prototype chain.
Returns a boolean.
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(), or setInterval() (if the code should be ran repeatedly)
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
delay defaults to 0 (instant within the queue)
What do setTimeout() and setInterval() return?
An ID, timeoutID or intervalID, which allows you to cancel the action and prevent the function from actually being called via clearTimeout() or setTimeout() . It’s like an ID for the specific action.
