JavaScript Tutorial
  • 🍼Introduction
  • 🥛Hello Gamers
  • 🍯Variables
    • Action Game Example
  • 🌰Strings
    • RPG Example
  • 🍪Character Acces
    • Simulation Example
  • 🍩Plus (+) operator
    • Strategy Game Example
  • 🥜Functions
    • Adventure Game Example
  • 🍿Template strings
    • Strategy Game Example
  • 🍫Numbers
    • Sports Game Example
  • 🍬Converting Numbers to Strings
    • Fighting Game Example
  • 🍭Operations
    • FPS Game Example
  • 🍮Conditions
    • Platformer Game Example
  • 🎂Arrays
    • Puzzle Game Example
  • 🍰Objects
    • Racing Game Example
  • 🧁Arrow Functions
    • Rhythm Game Example
  • 🔌Shameless Plug
  • 🥧Implicit Return
    • Platform Game Example
  • 🍦String Methods
    • GRID Game Example
  • 🍨Object Literals
    • Board Game Example
  • 🍧DynamicProperty
    • Political Game Example
  • 🍡Reading Dynamic Property
    • Hide & Seek Game
  • 🥮Objects Continued
    • Medieval Game Example
  • 🥠Object Shorthands
    • Trivia Game example
  • 🔌Shameless Plug (again)
  • 🍥Destructuring & Concatenation
    • Dig a hole game example
  • 🍏Optional Chaining
    • Action Game Example
  • 🍐Nullish coalescing operator
    • Adventure Game Example
  • 🍊Refactoring If Conditions
    • Arcade Game Example
  • 🍋Implicit Conversion & Falcy Values
    • Strategy Game Example
  • 🍌Arrays of objects
    • Sports Game Example
  • 🍉Transforming Array of Objects
    • Fighters Game Example
  • 🍇Some important array methods
    • FPS Example
  • 🫐Reducing arrays of objects
    • Third Person Shooter Example
  • 🍓Try....catch
    • Platformer Example
  • 🍈Immutability
    • Puzzle game example
  • 🍒Creating new arrays or objects
    • Racing Game Example
  • 🔌Shameless Plug (again)
  • 🍑Immutable object operations
    • Basics
    • Rhythm Game Example
  • 🥭Classes
    • Basics
    • Platformer Game Example
  • 🍍Instance Method
    • Basics
    • Role-playing game example
  • 🥥Object Oriented Programming
    • Basics
    • Stealth Game Example
  • 🥝Getters & Setters
    • Basics
    • Survival Game Example
  • 🍅Static Methods & Chaining
    • Basics
    • Tactical Role Playing Game
  • 🍆Class Inheritance
    • Tower Defense Game Example
  • 🥑Use of Super
    • Vehicular Combat Game example
  • 🫒Public Class Field
    • MMORPG Example
  • 🥦Private class fields
    • Battle Royale Games Example
  • 🥬Aysnc/Await
    • Collectible Card Game example
    • Video Board game example
  • 🫑SetTimeout
    • Dice game example
  • 🥒Execution Order
    • Digital Collectible Card Game example
  • 🌶️The callback pattern
    • Life Simulation Game example
  • 🌽Promises
    • Music Game Example
  • 🥕Writing a function that returns a promise
    • Party game example
  • 🧄Introduction to JSON
    • Tile based game example
  • 🧅JSON.parse(string) / JSON.stringify(object)
    • Rhythm action game example
  • 🍠JSON Example for a game
    • Fetching JSON game data
  • 🥐Handling fetch errors
    • Fetch and HTTP Requests
  • 🥯ES Modules
    • Tower Defence Game Example
  • 🍞Default Export
    • Strategy Adventure Game Example
  • 🥖Fetch Wrapper
    • Strategy Role-playing game example
  • 🔌Final Shameless Plug
  • 🫓Lexical Scope and Arrow Functions
    • Vehicular Combat Game Example
  • 🥨Passing Functions
    • Vehicular simulation game example
  • 🥚Dynamic Imports
    • Video card game example
  • 🍠What is a closure
    • Video casino game example
  • 🎆Congratulations
Powered by GitBook
On this page
  1. Lexical Scope and Arrow Functions

Vehicular Combat Game Example

Here is an example of how you might use arrow functions in the context of a vehicular combat game:

const Vehicle = {
  health: 100,
  damage: 50,

  attack: function(target) {
    target.health -= this.damage;
    console.log(`${this.name} attacked ${target.name} for ${this.damage} damage. ${target.name}'s health is now ${target.health}.`);
  },

  repair: () => {
    this.health += 50;
    console.log(`${this.name} repaired for 50 health. ${this.name}'s health is now ${this.health}.`);
  }
};

const Tank = {
  name: 'Tank',
  health: 200
};

const Jeep = {
  name: 'Jeep',
  health: 100
};

Tank.attack(Jeep);  // Tank attack Jeep for 50 damage. Jeep's health is now 50.
Jeep.repair();  // Uncaught TypeError: Cannot read property 'name' of undefined

In this example, we have a Vehicle object with two methods: attack and repair. The attack method takes a target object and reduces its health by the damage amount. The repair method increases the health of the Vehicle object by 50.

We then create two objects based on the Vehicle object: Tank and Jeep. The Tank object has a name of "Tank" and a health of 200, while the Jeep object has a name of "Jeep" and a health of 100.

When we call the Tank.attack(Jeep) method, the Jeep object's health is reduced by 50, as expected. However, when we try to call the Jeep.repair() method, we get an error because the this value inside the repair method is undefined. This is because the repair method is an arrow function, which does not have its own this value. Instead, it inherits the this value from the enclosing scope, which in this case is the global scope. Since there is no name property in the global scope, we get an error when we try to access this.name.

If we had defined the repair method as a regular function, like this:

repair: function() {
  this.health += 50;
  console.log(`${this.name} repaired for 50 health. ${this.name}'s health is now ${this.health}.`);
}

Then the repair method would work as expected, because the this value inside the function would be the object that the function was called on (in this case, the Jeep object).

PreviousLexical Scope and Arrow FunctionsNextPassing Functions

Last updated 2 years ago

🫓