JavaScript Flashcards
(117 cards)
1
Q
What is the purpose of variables?
A
A variable is a way to store values
2
Q
How do you declare a variable?
A
To declare (create) a variable, you will specify the type, leave at least one space, then the name for the variable and end the line with a semicolon. var x; this variable has been declared but the value is undefined
3
Q
How do you initialize (assign a value to) a variable?
A
with = assignment operator
4
Q
What characters are allowed in variable names?
A
The period, the underscore, and the characters $, #, and @ can be used within variable names. For example, A. _$@#1 is a valid variable name.
5
Q
What is the purpose of a string?
A
To store text data
6
Q
What is the purpose of a number?
A
7
Q
What is the purpose of a boolean?
A
Boolean data types can have one of two values: true or false, used to create true/false statements.
(Booleans are helpful when determining which part of a script should run.)
8
Q
What is the difference between null and undefined?
A
null is an assigned value. It means nothing. undefined means a variable has been declared but not defined yet.
9
Q
How do you update the value of a variable?
A
10
Q
Give five examples of JavaScript primitives.
A
In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties.
There are 7 primitive data types: string, number, bigint, boolean, undefined, symbol, and null.
11
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
A console log “label” is simply a short string that describes the variable or value being logged.
Since the console.log() method can write multiple values to the console at the same time, it’s easy to include a “label” when printing a value.
12
Q
How do you update the value of a variable?
A
Once you have assigned a value to a variable, you can then change what is stored in the variable later in the same script.
Once the variable has been created, you do not need to use the var keyword to assign it a new value.
var inStock;
var shipping;
inStock = true;
shipping = false;
inStock = false;
shipping =true;
13
Q
What data type is returned by an arithmetic operation?
A
Number data type
14
Q
What is string concatenation?
A
Combination of two or more strings
15
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
Addition operator. Arithmetic operation with numbers and combinations for stings
16
Q
What data type is returned by comparing two values (<, >, ===, etc)?
A
Boolean (true or false)
17
Q
What does the += “plus-equals” operator do?
A
Adds new variable to the current variable. Changes/reassigned the value
18
Q
Unary operators
A
A unary operation is an operation with only one operand.
(delete
The delete operator deletes a property from an object.)
typeof
The typeof operator determines the type of a given object.
+
The unary plus operator converts its operand to Number type.
19
Q
What are objects used for?
A
Objects group together a set of variables and functions to create a model of a something you would recognize from the real world. In an object, variables and functions take on new names.
20
Q
What are object properties?
A
A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects.
The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:
21
Q
Describe object literal notation.
A
The Object literal notation is basically an array of key:value pairs, with a colon separating the keys and values, and a comma after every key:value pair, except for the last, just like a regular array.
22
Q
What are arrays used for?
A
An array is a special type of variable. It doesn’t just store one value; it stores a list of values.
23
Q
Describe array literal notation
A
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 same array.
colors = [‘white’, ‘black’, ‘custom’];
24
Q
Describe the parts of a function definition.
A
The function keyword to begin the creation of a new function.
An optional name. (Our function’s name is sayHello.)
A comma-separated list of zero or more parameters, surrounded by () parentheses. (Our sayHello function doesn’t have any parameters.)
The start of the function’s code block, as indicated by an { opening curly brace.
An optional return statement. (Our sayHello function doesn’t have a return statement.)
The end of the function’s code block, as indicated by a } closing curly brace.
25
What is a method?
A method is a function which is a property of an object.
26
How is a method different from any other function?
A method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not.
27
How do you remove the last element from an array?
Array.prototype.pop()
The pop() method removes the last element from an array and returns that element. This method changes the length of the array.
28
How do you round a number down to the nearest integer?
Math.floor()
The Math.floor() function returns the largest integer less than or equal to a given number.
29
How do you generate a random number?
Math.random()
The Math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uniform distribution over that range — which you can then scale to your desired range.
30
How do you delete an element from an array?
Array.prototype.splice()
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice().
31
How do you append an element to an array?
Array.prototype.push()
The push() method adds one or more elements to the end of an array and returns the new length of the array.
32
How do you break a string up into an array?
The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.
const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
const chars = str.split('');
console.log(chars[8]);
// expected output: "k"
const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]
33
When does the condition expression of a while loop get evaluated?
while
The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
34
What is the purpose of a loop?
Definition: Loops are a programming element that repeat a portion of code a set number of times until the desired process is complete. Repetitive tasks are common in programming, and loops are essential to save time and minimize errors.
35
What is the purpose of a condition expression in a loop?
Condition is an expression that is tested each time the loop repeats. As long as condition is true, the loop keeps running.
36
What does "iteration" mean in the context of loops?
Sometimes an algorithm needs to repeat certain steps until told to stop or until a particular condition has been met. Iteration is the process of repeating steps.
37
When does the condition expression of a while loop get evaluated?
The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
38
When does the condition expression of a while loop get evaluated?
The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
39
When does the initialization expression of a for loop get evaluated?
The initialization step occurs one time only, BEFORE the loop begins. The condition is tested at the beginning of each iteration of the loop. If the condition is true ( non-zero ), then the body of the loop is executed next.
40
When does the condition expression of a for loop get evaluated?
An expression to be evaluated before each loop iteration. If this expression evaluates to true, statement is executed. If the expression evaluates to false, execution exits the loop and goes to the first statement after the for construct.
This conditional test is optional. If omitted, the condition always evaluates to true.
41
When does the final expression of a for loop get evaluated?
An expression to be evaluated at the end of each loop iteration. This occurs before the next evaluation of condition . Generally used to update or increment the counter variable. A statement that is executed as long as the condition evaluates to true.
42
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
43
What does the ++ increment operator do?
The increment operator (++) increments (adds one to) its operand and returns a value.
44
Array.prototype.slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.
45
Array.prototype.pop()
The pop() method removes the last element from an array and returns that element. This method changes the length of the array.
46
Array.prototype.push()
The push() method adds one or more elements to the end of an array and returns the new length of the array.
47
Falsy values
A falsy value is a value that is considered false when encountered in a Boolean context.
Value Description
false The keyword false.
0 The Number zero (so, also 0.0, etc., and 0x0).
-0 The Number negative zero (so, also -0.0, etc., and -0x0).
0n The BigInt zero (so, also 0x0n). Note that there is no BigInt negative zero — the negation of 0n is 0n.
"", '', `` Empty string value.
null null — the absence of any value.
undefined undefined — the primitive value.
NaN NaN — not a number.
document.all Objects are falsy if and only if they have the [[IsHTMLDDA]] internal slot. That slot only exists in document.all and cannot be set using JavaScript.
48
Document.querySelector()
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
Syntax:
querySelector(selectors)
Parameters:
selectors
49
What is a DOM Tree?
As a browser loads a web page, it creates a MODEL of that page.
The model is called a DOM tree, and it is stored in the browsers' memory. It consists of four main types of nodes.
50
Give two examples of document methods that retrieve a single element from the DOM.
getElementByld(1 id1
Selects an individual element given the value of its i d attribute.
The HTML must have an id attribute in order for it to be selectable.
querySelector(1css selector')
Uses CSS selector syntax that would select one or more elements.
This method returns only the first of the matching elements.
51
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll ('css selector')
Uses CSS selector syntax to select one or more elements and returns all of those that match.
52
Why might you want to assign the return value of a DOM query to a variable?
To store a reference to that Node/element.
53
What console method allows you to inspect the properties of a DOM element object?
console.dir()
54
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
55
What does document.querySelector() take as its argument and what does it return?
querySelector('css selector')
Uses CSS selector syntax that would select one or more elements.
This method returns only the first of the matching elements.
56
What does document.querySelectorAll() take as its argument and what does it return?
querySelectorAll ('css selector')
Uses CSS selector syntax to select one or more elements and returns all of those that match.
57
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.
58
EventTarget.addEventListener()
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
59
What method of element objects lets you set up a function to be called when a specific type of event occurs?
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
60
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.
61
What event is fired when a user places their cursor in a form control?
focus event
62
What event is fired when a user's cursor leaves a form control?
blur event
63
What event is fired when a user clicks the "submit" button within a ?
Most HTML forms have a submit button at the bottom of the form. Once all of the fields in the form have been filled in, the user clicks on the submit button to record the form data.
64
What property of a form element object contains all of the form's controls.
Elements property
65
What property of form a control object gets and sets its value?
Value property
66
HTMLFormElement.elements
The HTMLFormElement property elements returns an HTMLFormControlsCollection listing all the form controls contained in the element.
67
HTMLFormElement: submit event
The submit event fires when a is submitted.
Note that the submit event fires on the element itself, and not on any or inside it. However, the SubmitEvent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request.
68
Element.setAttribute()
Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
To get the current value of an attribute, use getAttribute(); to remove an attribute, call removeAttribute().
Syntax
setAttribute(name, value)
69
Node.appendChild()
The appendChi 1d() method allows you to specify which element you want this node added to, as a child of it.
Syntax
appendChild(aChild);
Parameters
aChild
The node to append to the given parent node (commonly an element).
70
Does the document.createElement() method insert a new element into the page?
NO
71
How do you add an element as a child to another element?
appendChild()
72
What is the textContent property of an element object for?
createTextNode() creates a new text node. Again, the node is stored in a variable. It can be added to the element node using the appendChild() method.
This provides the content for the element, although you can skip this step if you want to attach an empty element to the DOM tree.
73
What is the event.target?
The target event property returns the element that triggered the event.
The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.
74
element.closest()
The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
75
What does the element.matches() method take as an argument and what does it return?
The matches() method of the Element interface tests whether the element would be selected by the specified CSS selector.
matches(selectorString)
Parameters
selectors
A string containing valid CSS selectors to test the Element against.
Return value
true if the Element matches the selectors. Otherwise, false.
76
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"
77
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
console.log(obj.count);
// expected output: 42
console.log(obj.result);
// expected output: true
78
How do you store data in localStorage?
Storage.setItem()
The setItem() method of the Storage interface, 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.
Syntax
setItem(keyName, keyValue)
79
How do you retrieve data from localStorage?
Storage.getItem()
The getItem() method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object.
Syntax
getItem(keyName)
Parameters
keyName
A string containing the name of the key you want to retrieve the value of.
80
What data type can localStorage save in the browser?
string data
LocalStorage is a key/value datastore that's available on a user's browser. Like cookies, LocalStorage can only store string data for its keys and values. The datastore is only accessible to JavaScript within that domain.
81
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. The document is still visible and the event is still cancelable at this point.
82
Describe method definition syntax (structure).
83
Describe method call syntax (structure).
Calling an object's method is similar to getting an object's variable. To call an object's method, simply append the method name to an object reference with an intervening '. ' (period), and provide any arguments to the method within enclosing parentheses.
84
Describe method definition syntax (structure).
85
What does it mean to say that this is an "implicit parameter"?
THIS is an implicit parameter, meaning 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.
86
When is the value of this determined in a function; call time or definition time?
The value of this is determined when the function is called
87
What is a prototype in JavaScript?
JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
88
What does the new operator do?
1. Creates a blank, plain JavaScript object. For convenience, let's call it newInstance.
2. Points newInstance's [[Prototype]] to the constructor function's prototype property.
3. Executes the constructor function with the given arguments, binding newInstance as the this context (i.e. all references to this in the constructor function now refer to newInstance).
4. Returning the object
89
instanceof
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. Its behavior can be customized with Symbol.hasInstance.
90
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. The above example is a synchronous callback, as it is executed immediately.
91
How can you set up a function to be called repeatedly without using a loop?
setInterval()
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
setInterval(code)
setInterval(code, delay)
92
What do setTimeout() and setInterval() return?
The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout() and setInterval().
93
What is AJAX?
Ajax is a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (or JSON)
94
What does block scope mean?
Block Scope
A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.
95
declare a variable using the let keyword
- Variables are declared using the let keyword are block-scoped, are not initialized to any value, and are not attached to the global object.
- Redeclaring a variable using the let keyword will cause an error.
- A temporal dead zone of a variable declared using the let keyword starts from the block until the initialization is evaluated.
- The variables declared by the let keyword are mutable. It means that you can change their values anytime you want
96
const keyword
- the const keyword creates a read-only reference to a value.
- const keyword declares blocked-scope variables. However, the block-scoped variables declared by the const keyword can’t be reassigned.
- variables created by the const keyword are “immutable”. In other words, you can’t reassign them to different values.
- The const keyword creates a read-only reference to a value. The readonly reference cannot be reassigned but the value can be change.
- The variables declared by the const keyword are blocked-scope and cannot be redeclared.
97
What is the difference between let and const?
`const` is a signal that the identifier won't be reassigned. `let` is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm.
98
What is the syntax for writing a template literal?
To create a template literal, instead of single quotes ( ' ) or double quotes ( " ) quotes we use the backtick ( ` ) character. This will produce a new string, and we can use it in any way we want.
99
What is destructuring?
Destructuring broadly means extracting data from arrays or objects. Using destructuring, we can break a complex array or object into smaller parts.
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
100
What is the syntax for Object destructuring?
const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
101
What is the syntax for Array destructuring?
const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;
102
Syntax for defining an Arrow Functions
param => expression
(param) => expression
103
What is Array.prototype.filter useful for?
The filter() method creates a new typed array with all elements that pass the test implemented by the provided function.
104
What is Array.prototype.map useful for?
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
105
What is Array.prototype.reduce useful for?
The reduce() method is used in an array to return a single value from an array after executing the user-supplied callback function on each element of the array.
106
What is "syntactic sugar"?
Syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.
107
What is "refactoring"?
Code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior. Advantages of refactoring may include improved code readability and reduced complexity;
108
What is React?
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components
109
What is a React element?
A React Element is what gets returned from components. It's an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns. With a class component, the element is the object that the component's render function returns.
110
How do you mount a React element to the DOM?
To render a React element, first pass the DOM element to ReactDOM.createRoot() , then pass the React element to root.render() :
111
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
- Source code transformations (codemods)
112
What does the acronym LIFO mean?
last-in-first-out (LIFO) operations: the last thing pushed onto the stack is the first thing that can be poped out.
113
What methods are available on a Stack data structure?
push(), pop(), peek(),
114
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
When it is determined
115
prototype, closures, this
116
What allows JavaScript functions to "remember" values from their surroundings?
Closures
117
What is closures?
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
