G Additional Questions
Last updated: 2021-03-30 18:26:07
G.1 Chapter 3
G.1.1 Modifying global variable
G.1.1.1 Question
How can a function influence the value of a global variable?
G.1.1.2 Answer
As discussed in Section 3.9, global variables can be accessed (and modified) from within a function. For example, the following function f
, when executed, modifies the global variable x
(initial value 100
) to a new value 200
, by multiplying it by 2
:
let x = 100;
function f() {
= x * 2;
x
}f(); // The value of 'x' is now 200
Hovever, changing a global variable is not recommended because it makes it difficult to keep track which parts of the code affect a given variable. The recommended approach is to make the function independent of the global environment, so that it gets all inputs through the parameters and affects the global environment through the returned values. For example, here is the recommended approach instead of the above example:
let x = 100;
function f(x) {
return x * 2;
}= f(x); // The value of 'x' is now 200 x
G.1.2 Inserting/removing array element
G.1.2.1 Question
How can we insert or remove an element into a specific position in an array?
G.1.2.2 Answer
Inserting a or removing an element at a specific position can be done with the .splice
method.
For example, the following expression inserts a new element into position 2
(the 0
means that no elements are deleted):
let fruits = ["Orange", "Banana", "Mango", "Apple"];
.splice(2, 0, "Pineapple");
fruits; // Returns ["Orange", "Banana", "Pineapple", "Mango", "Apple"] fruits
The following expression removes the element in position 2
(the 1
means “delete one element”):
let fruits = ["Orange", "Banana", "Mango", "Apple"];
.splice(2, 1);
fruits; // Returns ["Orange", "Banana", "Apple"] fruits
For more details and examples, see the .splice
method reference.
G.1.3 Object Oriented language
G.1.3.1 Question
Is JavaScript an Object Oriented programming language?
G.1.3.2 Answer
Yes, JavaScript is an Object Oriented language. JavaScript uses special functions called constructor functions to define and initialize objects and their features.
For example115:
function Person(name) {
this.name = name;
this.greeting = function() {
alert('Hi! I\'m ' + this.name + '.');
;
} }
The constructor function is JavaScript’s version of a class. Here is how we can create instances of the class Person
. The new
keyword is used to tell the browser we want to create a new object instance, followed by the function name with its required parameters contained in parentheses, and the result is stored in a variable. This is very similar to how a standard function is called:
let person1 = new Person("Bob");
let person2 = new Person("Sarah");
After the new objects have been created, the person1
and person2
variables contain the following objects:
{name: "Bob",
greeting: function() {
alert("Hi! I'm " + this.name + ".");
}
}
{name: "Sarah",
greeting: function() {
alert("Hi! I\'m " + this.name + ".");
} }
G.2 Chapter 4
G.2.1 Removing collection of HTML elements
G.2.1.1 Question
Consider example-04-03.html
(Figure 4.4). How can we remove all <li>
elements from the page?
G.2.1.2 Answer
First, we need to create an HTML collection object, which contains the references to all elements that we want to remove (Section 4.7.2):
let nodes = document.getElementsByTagName("li");
Second, we need to go over the elements in the collection nodes
, using a for
loop (Section 3.10.3), and remove them from the page:
for(let i = 0; i < nodes.length; i++) {
// nodes[i]. ...;
}
The first thing we might try to do is to use the method called .remove
, which removes an element from the DOM:
for(let i = 0; i < nodes.length; i++) {
.remove();
nodes[i] }
However, this only removes two out of four list items (Figure G.1)! (Can you guess why?)

FIGURE G.1: Using the .remove()
method to remove elements from the DOM.
The recommended approach, in this case, is to use the hidden
attribute instead. The hidden
attribute is a general HTML attribute that hides an HTML element from view, without removing it from the DOM. The following for
loop sets the hidden
attribute of all list items to true
, thus practically removing them from the page:
for(let i = 0; i < nodes.length; i++) {
.hidden = true;
nodes[i] }
The examples are from the Object-oriented JavaScript for beginners tutorial by Mozilla (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS).↩︎