JavaScript

Question 1

What is the purpose of variables?

Answer 1

To use as an identifier in JavaScript and the variable must be identified with unique names.

Question 2

How do you declare a variable?

Answer 2

Use var, let (variable with restricted scope), or const (a variable that can’t be reassigned) keyword.

Question 3

How do you initialize (assign a value to) a variable?

Answer 3

Put variable (name) = (operator) and value. Ex) var a = 1.

Question 4

What characters are allowed in variable names?

Answer 4

The first character must start with a letter, underscore, or a dollar sign ($), and don’t forget variable names are case-sensitive and don’t use JavaScript’s reserved keywords.

Question 5

What does it mean to say that variable names are “case sensitive”?

Answer 5

This means that any identifiers should always be typed with consistent character capitalization within acceptable rules.

Question 6

What is the purpose of a string?

Answer 6

It is used for storing and manipulating text in JavaScript.

Question 7

What is the purpose of a number?

Answer 7

It is a primitive wrapper object used to represent and manipulate numbers.

Question 8

What is the purpose of a boolean?

Answer 8

It is used to represent one of two values in a value, such as True or False, Yes or No, and On or Off.

Question 9

What does the = operator mean in JavaScript?

Answer 9

It performs some operation on single or multiple operands (data values) and produces a result.

Question 10

How do you update the value of a variable?

Answer 10

Just update the new value under the same variable name or use temporary values.

Question 11

What is the difference between null and undefined?

Answer 11

They are equal in value (empty value) but different in type. Undefined can exist by itself in JS, but null is not. If you see the null object, that means your existing variable value is reserved for some reason.

Question 12

Why is it a good habit to include “labels” when you log values to the browser console?

Answer 12

To identify easier, faster, and more directly when you work on some big project or work with coworkers.

Question 13

Give five examples of JavaScript primitives.

Answer 13

String, number, boolean, null, and undefined. Everything else is an object.

Question 14

What data type is returned by an arithmetic operation?

Answer 14

It returns a number data type.

Question 15

What is string concatenation?

Answer 15

It is the process of appending one string to the end of another string.

Question 16

What purpose(s) does the plus operator (+) serve in JavaScript?

Answer 16

It produces the sum of numeric operands or string concatenation.

Question 17

What data type is returned by comparing two values (, ===, etc)?

Answer 17

It returns a boolean value.

Question 18

What does the plus-equals (+=) operator do?

Answer 18

It adds the value of the right operand to a variable and assigns the result to the variable.

Question 19

What are objects used for?

Answer 19

It holds multiple values in terms of properties and methods in an object.

Question 20

What are object properties?

Answer 20

It’s a variable that is attached to the object. It is sorted as the same as an ordinary variable except for the attachment to the object.

Question 21

Describe object literal notation.

Answer 21

var object name = {property name: value of it, another property name: value of it}.

Question 22

How do you remove a property from an object?

Answer 22

Use delete keyword and the object name.property name or keyword delete object name[‘property name’].

Question 23

What are the two ways to get or update the value of a property?

Answer 23

Object name.property name = value that you want to update or object name[‘property name’] = value that you want to update.

Question 24

What are arrays used for?

Answer 24

It is used when you store a collection of variables of the same type.

Question 25

Describe array literal notation.

Answer 25

var array object name = [‘’, ‘’, ‘’ ];

Question 26

How are arrays different from “plain” objects?

Answer 26

Objects represent a special data type that is mutable and can be used to store a collection of data. On the other hand, arrays are a special type of variable that is also mutable and can also be used to store a list of values.

Question 27

What number represents the first index of an array?

Answer 27

0.

Question 28

What is the length property of an array?

Answer 28

The length property sets or returns the number of elements in that array.

Question 29

How do you calculate the last index of an array?

Answer 29

the length of the array - 1.

Question 30

What is a function in JavaScript?

Answer 30

It is a block of code also repeatable to perform a particular task or calculate a value.

Question 31

Describe the parts of a function definition.

Answer 31

function keyword, named function (optional), parameter (optional, but it should take some input and return output and there is some obvious relationship between them.) inside of the parenthesis, curly brace for the function code block.

Question 32

Describe the parts of a function call.

Answer 32

the function name, argument inside of the parenthesis.

Question 33

When comparing them side-by-side, what are the differences between a function call and a function definition?

Answer 33

A function definition’s meaning is to remember the method of it but stays still. On the other hand, a function call instructs JavaScript to execute the code of the function.

Question 34

What is the difference between a parameter and an argument?

Answer 34

The parameters are listed inside the parenthesis. The arguments are the values received by the function when it is invoked.

Question 35

Why are function parameters useful?

Answer 35

Because those are expected to be the same as variables except that the values of these variables are defined when we call the function.

Question 36

What two effects does a return statement have on the behavior of a function?

Answer 36

It ends the execution of a function and returns control to the calling function. Execution resumes in the calling function at the point immediately following the call. A return statement can return a value to the calling function.

Question 37

Why do we log things to the console?

Answer 37

It prints the output to the console, so we can see what is going on, and be able to fix the code if something is wrong.

Question 38

What is a method?

Answer 38

It is a function that is a property of an object.

Question 39

How is a method different from any other function?

Answer 39

A method is a function that belongs to an object.

Question 40

How do you remove the last element from an array?

Answer 40

Use array pop() method. name of array.pop();

Question 41

How do you round a number down to the nearest integer?

Answer 41

Use Math.floor() function.

Question 42

How do you generate a random number?

Answer 42

Use Math.random() function.

Question 43

How do you delete an element from an array?

Answer 43

Use splice() method, pop() method, or shift() method (removes the first array).

Question 44

How do you append an element to an array?

Answer 44

Use unshift() method to add a new element at the beginning, push() method to add a new element at the end, or name of array[index number].

Question 45

How do you break a string up into an array?

Answer 45

Use the split(‘ ‘) method.

Question 46

Do string methods change the original string? How would you check if you weren’t sure?

Answer 46

No. Use console.log() or go to read the documentation about it to check.

Question 47

Is the return value of a function or method useful in every situation?

Answer 47

No. Use when it’s needed.

Question 48

Give 6 examples of comparison operators.

Answer 48

Strict equal to (===), greater than (>), greater than or equal to (>=), less than or equal to (<=), less than (

Question 49

What data type do comparison expressions evaluate to?

Answer 49

Boolean: true or false.

Question 50

What is the purpose of an if statement?

Answer 50

To perform different actions based on different conditions. Use if statement to specify a code to be executed if a specified condition is true.

Question 51

Is else required in order to use an if statement?

Answer 51

No, it’s not required to write the else part for the if statement.

Question 52

Describe the syntax (structure) of an if statement.

Answer 52

Keyword if (variable name, comparison, value) { }.

Question 53

What are the three logical operators?

Answer 53

And (&&), or (||), not (!).

Question 54

How do you compare two different expressions in the same condition?

Answer 54

Using logical operators (&&, ||, !).

Question 55

What is the purpose of a loop?

Answer 55

It used to repeatedly run a block of code until a certain condition is met.

Question 56

What is the purpose of a condition expression in a loop?

Answer 56

It is an expression that is evaluated once before every iteration.

Question 57

What does “iteration” mean in the context of loops?

Answer 57

It describes going through a set of operations that deal with the code conditions (Each time the code is running).

Question 58

When does the condition expression of a while loop get evaluated?

Answer 58

When the while loop is created.

Question 59

When does the initialization expression of a for loop get evaluated?

Answer 59

Very first before anytime.

Question 60

When does the condition expression of a for loop get evaluated?

Answer 60

Right after the initialization.

Question 61

When does the final expression of a for loop get evaluated?

Answer 61

at the end of each loop iteration.

Question 62

Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

Answer 62

Break.

Question 63

What does the ++ increment operator do?

Answer 63

Added 1 to the value of the variable.

Question 64

How do you iterate through the keys of an object?

Answer 64

Use the for in loop.

Question 65

What are four components of “the Cascade”.

Answer 65

Importance, source order, inheritance, and specificity.

Question 66

What does the term “source order” mean with respect to CSS?

Answer 66

The lower line on your style sheet is more powerful than the higher.

Question 67

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

Answer 67

Inheritance property.

Question 68

List the three selector types in order of increasing specificity.

Answer 68

Type selectors, class selectors, id selectors.

Question 69

Why is using !important considered bad practice?

Answer 69

Because it overrides any other declarations when this is used. Therefore, it breaks the natural cascading of the stylesheet, which makes it more difficult to troubleshoot when debugging.

Question 70

Why do we log things to the console?

Answer 70

To see easily and directly the code whenever I check, understand, and fix it.

Question 71

What is a “model”?

Answer 71

It’s a representation of something else.

Question 72

Which “document” is being referred to in the phrase Document Object Model?

Answer 72

HTML.

Question 73

What is the word “object” referring to in the phrase Document Object Model?

Answer 73

It refers to the JavaScript data.

Question 74

What is a DOM Tree?

Answer 74

Elements that include other elements, such as child elements.

Question 75

Give two examples of document methods that retrieve a single element from the DOM.

Answer 75

document.querySelector and document.getElementByID.

Question 76

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 76

querySelectorAll.

Question 77

Why might you want to assign the return value of a DOM query to a variable?

Answer 77

If you are going to use that return value more than one time, it will help you to find it easily. Also, you don’t have to work again to get that return value.

Question 78

What console method allows you to inspect the properties of a DOM element object?

Answer 78

console.dir (directory).

Question 79

Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 79

Because of the source order.

Question 80

What does document.querySelector() take as its argument and what does it return?

Answer 80

It takes a string with the selector’s name (element, class, id, etc) and it returns their values.

Question 81

What does document.querySelectorAll() take as its argument and what does it return?

Answer 81

It takes a string with the selector’s name (element, class, id, etc) and it returns all of their values under the same name tag.

Question 82

What is the purpose of events and event handling?

Answer 82

To handle and verify inputs and actions (user input, user actions, and browser actions).

Question 83

What do [] square brackets mean in function and method syntax documentation?

Answer 83

It’s optional. But the type and listener must be there.

Question 84

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 84

EventTarget method addEventListener().

Question 85

What is a callback function?

Answer 85

It’s a function passed to another function as an argument.

Question 86

What object is passed into an event listener callback when the event fires?

Answer 86

The first argument, which is the event target.

Question 87

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

Answer 87

The target property of the event. Ask MDN.

Question 88

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick( ))

Answer 88

The first one is calling the function name handleClick means that function works when the click event is triggered. The second one, function name with parentheses means that it runs the code right away. It means, run this function when this page is loaded. However, in an event handler, it waits until the event triggers.

Question 89

What is the className property of element objects?

Answer 89

It gets and sets the value of the class attribute of the specified element.

Question 90

How do you update the CSS class attribute of an element using JavaScript?

Answer 90

Using the getAttribute method.

Question 91

What is the textContent property of element objects?

Answer 91

The textContent property of the Node interface represents the text content of the node and its descendants.

Question 92

How do you update the text within an element using JavaScript?

Answer 92

object name . textContent =

Question 93

Is the event parameter of an event listener callback always useful?

Answer 93

No, because the event listener is not always needed.

Question 94

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

Answer 94

More complicated. I have to keep track

Question 95

Why is storing information about a program in variable better than only storing it in the DOM?

Answer 95

Because it reduces the work if I set up the value of the thing to the variable.

Question 96

What does the event.preventDefault() method do?

Answer 96

It tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Question 97

What does submitting a form without event.preventDefault() do?

Answer 97

Refresh the page and refresh.

Question 98

What property of a form element object contains all of the form’s control.

Answer 98

Elements.

Question 99

What property of form a control object gets and sets its value?

Answer 99

Value property.

Question 100

What is one risk of writing a lot of code without checking to see if it works so far?

Answer 100

Hard to debug when an error occurs.

Question 101

What is an advantage of having your console open when writing a JavaScript program?

Answer 101

Checking and debugging very easily.

Question 102

Does the document.CreateElement() method insert a new element into the page?

Answer 102

No.

Question 103

How do you add an element as a child to another element?

Answer 103

appendChild() method. (ex: Parent.appendChild( ))

Question 104

What do you pass as the arguments to the element.setAttribute() method?

Answer 104

Attribute, and value of that attribute.

Question 105

What steps do you need to take in order to insert a new element into the page?

Answer 105

Create the element, add more attributes with setAttribute or textContent if needed, and choose the spot you want to insert the new element and use the appendChild() method to append it on there.

Question 106

What is the textContent property of an element object for?

Answer 106

Reading and writing.

Question 107

Name two ways to set the class attribute of a DOM element.

Answer 107

Use setAttribute() method or className as a property of the object.

Question 108

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

Answer 108

We can re-use it rather than work again and again to get that result.

Question 109

What is the event.target?

Answer 109

It is a reference to the object onto which the event was dispatched.

Question 110

Why is it possible to listen for events on one element that actually happen its descendent elements?

Answer 110

Because of the default document flow which is the event bubbling. The event bubbling is a type of event propagation when the event first triggers on the innermost target element, and then successively triggers on the parents of the target element in the same nesting hierarchy until it reaches the very outermost DOM element or document object.

Question 111

What DOM element property tells you what type of element it is?

Answer 111

event.target.tagName.

Question 112

What does the element.closest() method take as its argument and what does it return?

Answer 112

The argument is a selector and it returns itself or the nearest matching ancestor.

Question 113

How can you remove an element from the DOM?

Answer 113

Using the .remove() method.

Question 114

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?

Answer 114

Using dom event.delegation.

Question 115

What is the event.target?

Answer 115

The target property of the event interface is a reference to the object onto which the event was dispatched. It holds the event trigger.

Question 116

What is the affect of setting an element to display: none?

Answer 116

It makes it invisible and it takes off from the document.

Question 117

What does the element.matches() method take as an argument and what does it return?

Answer 117

It returns a Boolean value indicating whether an element is matched by a specific CSS selector or not.

Question 118

How can you retrieve the value of an element’s attribute?

Answer 118

Use getAttribute() method.

Question 119

At what steps of the solution would it be helpful to log things to the console?

Answer 119

Whenever I set up the new variable or after creating a loop or condition.

Question 120

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?

Answer 120

I have to do it manually for each thing. It means I have to write an eventListener for each of them.

Question 121

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?

Answer 121

I have to write so many conditional statements for each of them.

Question 122

What is JSON?

Answer 122

JavaScript Object Notation. It’s a standard text-based format for representing structured data based on JavaScript object syntax. This is commonly used for transmitting data in web applications.

Question 123

What are serialization and deserialization?

Answer 123

Serialization takes an in-memory data structure and converts it into a series of bytes that can be stored and transferred over the network. Deserialization takes a series of bytes and converts it to an in-memory data structure that can be consumed programmatically.

Question 124

Why are serialization and deserialization useful?

Answer 124

To save the state of an object in order to be able to recreate it when needed.

Question 125

How do you serialize a data structure into a JSON string using JavaScript?

Answer 125

Using the JSON.stringify() method.

Question 126

How do you deserialize a JSON string into a data structure using JavaScript?

Answer 126

Using the JSON.parse() method.

Question 127

How do you store data in localStorage?

Answer 127

Using the setItem() method.

Question 128

How do you retrieve data from localStorage?

Answer 128

Using the getItem() method.

Question 129

What data type can localStorage save in the browser?

Answer 129

Only strings.

Question 130

When does the ‘beforeunload’ event fire on the window object?

Answer 130

The event is fired when the window, the document, and its resources are about to be unloaded, like refresh or close the window.

Question 131

What is a method?

Answer 131

It’s a function that is a property of an object.

Question 132

How can you tell the difference between a method definition and a method call?

Answer 132

A method definition needs a function definition keyword with parameters followed by a function code block. On the other hand, a method call needs to put the property name of the object name with arguments.

Question 133

Describe method definition syntax (structure).

Answer 133

Put property name: function definition with parameter and opening curly brace for the function code block.

Question 134

Describe method call syntax (structure).

Answer 134

Put property name of the object name and put values in parentheses.

Question 135

How is a method different from any other function?

Answer 135

A function can pass the data that is operated and may return the data. The method operates the data contained in a class. In addition, a function can be called directly by its name because it lives on its own. On the other hand, a method is a function associated with an object property.

Question 136

What is the defining characteristic of Object-Oriented Programming?

Answer 136

It’s a programming paradigm based on the concept of objects that can contain data and behavior.

Question 137

What are the four “principles” of Object-Oriented Programming?

Answer 137

Abstraction, Encapsulation, Inheritance, Polymorphism.

Question 138

What is “abstraction”?

Answer 138

It’s one of the key concepts of OOP. The main goal is to handle complexity by hiding unnecessary details from the user.

Question 139

What does API stand for?

Answer 139

It’s the acronym Application Programming Interface, which is a software intermediary that allows two applications to talk to each other.

Question 140

What is the purpose of an API?

Answer 140

It simplifies programming by abstracting the underlying implementation and only exposing objects or actions the developer needs.

Question 141

What is “this” in JavaScript?

Answer 141

‘this’ references the current object. So, the left of the dot.

Question 142

What does it mean to say that this is an “implicit parameter”?

Answer 142

It’s an usable variable inside of a function even though it didn’t declare in that function.

Question 143

When is the value of “this” determined in a function; call time or definition time?

Answer 143

The value of this is determined at call time.

Question 144

Given the above character object, what is the result of the following code snippet? Why?
character.greet( );

Answer 144

It will get the value of the variable message which is It’s me, Mario!. Because that is a value of the greet property of the character object (left of the dot).

Question 145

Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello( );

Answer 145

It will get undefined because there is no function definition named hello.

Question 146

How can you tell what the value of this will be for a particular function or method definition?

Answer 146

I can’t

Question 147

How can you tell what the value of this is for a particular function or method call?

Answer 147

Look left of the dot.

Question 148

What kind of inheritance does the JavaScript programming language use?

Answer 148

Prototypal (prototype-based) inheritance.

Question 149

What is a prototype in JavaScript?

Answer 149

It’s an object that contains properties and methods that can be used by other objects.

Question 150

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?

Answer 150

Because of the prototype chain. It explains why different objects have properties and methods defined on other objects available to them.

Question 151

If an object does not have it’s own property or method by a given key, where does JavaScript look for it?

Answer 151

Look it up to the proto objects.