4.9 Window & This¶

The Window Object¶

Task 1: Write an alert with your name in JavaScript.

alert("Nawras");

Task 2: Re-do task 1 using window.alert().

window.alert("Nawras")

Task 3: log window in the console.

console.log(window);

The result is: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

Task 4: What is the type of window? Hint: use typeof window.

console.log(typeof window);

The result is: object

Task 5: Represent a web page object in JavaScript. The web page has a title of "Window Object", and a description of "What is the window object? and what does it represent?". Display this object in the console.

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(webPage);

The result is: {title: "Window Object", description: "What is the window object? and what does it represent?"}

Task 6: Refer to task 5; Log window.webPage in the console, what is the result?

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(window.webPage);

The result is: {title: "Window Object", description: "What is the window object? and what does it represent?"}

Task 7: Refer to task 5; Is webPage a property of the window object?

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(window.hasOwnProperty("webPage"));

The result is: true

Task 8: Store "Only knowledge can free and save us, but with knowledge must go virtue." in a variable, and log it in the console.

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(myWord);

The result is: Only knowledge can free and save us, but with knowledge must go virtue.

Task 9: Refer to task 8; Log window.myWord in the console, what is the result?

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(window.myWord);

The result is: Only knowledge can free and save us, but with knowledge must go virtue.

Task 10: Refer to task 8; Is myWord a property of the window object?

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(window.hasOwnProperty("myWord"));

The result is: true

Task 11: Create a function expression that returns true. Log the result in the console.

var returnsTrue = () => true;

console.log(returnsTrue());

The result is: true

Task 12: Refer to task 11; Log window.returnsTrue in the console, what is the result?

var returnsTrue = () => true;

console.log(window.returnsTrue());

The result is: true

Task 13: Refer to task 11; Is returnsTrue a property of the window object?

var returnsTrue = () => true;

console.log(window.hasOwnProperty("returnsTrue"));

The result is: true

This Keyword¶

Global Context¶

Task 14: You have the object below, what is the result of this.obj.

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(this.webPage);

This result is: {title: "Window Object", description: "What is the window object? and what does it represent?"}

Task 15: You have the variable below, what is the result of this.variable.

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(this.myWord);

This result is: Only knowledge can free and save us, but with knowledge must go virtue.

Task 16: You have the function below, what is the result of this.func.

var returnsTrue = () => true;

console.log(this.returnsTrue());

This result is: true

Task 17: What is the result of window === this?

console.log(window === this);

The result is: true

Function Context¶

Task 18: Create a regular function that returns this keyword.

function returnsThis(){
  return this;
}

console.log(returnsThis());

The result is: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

Task 19: Check the following code.

var a = "I'm in the global scope";

function returnsA(){
  var a = "I'm in the local scope";
  return this.a;
}

console.log(returnsA());

The result is: I'm in the global scope

Objects¶

Task 20: Represent a laptop object in JavaScript. This laptop has an Intel i5 processor, 2GB RAM, 4GB additional RAM, and 0.5TB storage.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4
};

console.log(laptop);

This result is: {processor: "i5", ram: 2, storage: "0.5TB", additionalRAM: 4}

Task 21: Re-create the object created in task 20, and add totalRAM property. Its value is the result of adding additionalRAM to ram.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: ram + additionalRAM
};

console.log(laptop);

This result is: Uncaught ReferenceError: ram is not defined

ram is actually window.ram, and there is no global called ram in our program; that is why we got an error.

Task 22: Use this.ram and this.additionalRAM instead of ram and additionalRAM, respectively.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: this.ram + this.additionalRAM
};

console.log(laptop.totalRAM);

This result is: NaN

this.ram and this.additionalRAM are not defined in the global scope, hence both this.ram and this.additionalRAM are undefined.

undefined + undefined evaluates to NaN.

Task 23: Check the code below.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: function(){
    return this.ram + this.additionalRAM;
  }
};

console.log(laptop.totalRAM());

The result is: 6

totalRAM is an object method because its value is a function.

In task 23; this refers to laptop object itself.

Task 24: Re-do task 23; return this from totalRAM function.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: function(){
    return this;
  }
};

console.log(laptop.totalRAM());

The result is: {processor: "i5", ram: 2, storage: "0.5TB", additionalRAM: 4, totalRAM: ƒ}