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 = x * 2;
}
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;
}
x = f(x);  // The value of 'x' is now 200

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"];
fruits.splice(2, 0, "Pineapple");  
fruits;  // Returns ["Orange", "Banana", "Pineapple", "Mango", "Apple"]

The following expression removes the element in position 2 (the 1 means “delete one element”):

let fruits = ["Orange", "Banana", "Mango", "Apple"];
fruits.splice(2, 1);  
fruits;  // Returns ["Orange", "Banana", "Apple"]

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++) {
  nodes[i].remove();
}

However, this only removes two out of four list items (Figure G.1)! (Can you guess why?)

Using the `.remove()` method to remove elements from the DOM.

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++) {
  nodes[i].hidden = true;
}

  1. 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).↩︎