Versions Compared

Version Old Version 11 New Version 12
Changes made by

Donatas Kartanovičius

Donatas Kartanovičius

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. this binding:

    • Regular: Has its own this context

    • Arrow: Inherits this from the enclosing scope

      Code Block
      languagejs
      const obj = {
    name: 'pfx',
    sayHiRegular: function() {
        console.log('Hi, ' + this.name);
    },
    sayHiArrow: () => {
        console.log('Hi, ' + this.name);
    }
};

obj.sayHiRegular(); // Outputs: Hi, pfx
obj.sayHiArrow();   // Outputs: Hi, undefined

  2. Arguments object:

    • Regular: Has arguments object

    • Arrow: Doesn't have arguments object

      Code Block
      languagejs
      function regularFunc() {
    console.log(arguments);
}

const arrowFunc = () => {
    console.log(arguments);
};

regularFunc(1, 2, 3); // Outputs: [1, 2, 3]
arrowFunc(1, 2, 3);   // Throws ReferenceError: arguments is not defined

  3. Use as methodsin objects:

    • Regular: Can be used as object methodsuse values from object using ‘this’ keyword

    • Arrow: Not suitable for object methods (due Can’t react values from the object as don’t have access to 'this' binding)

      Code Block
      languagejs
      function regularFunc()const regularObject = {
  name: 'Regular',
  console.log(arguments);
}

const arrowFunc = (greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const arrowObject = {
  name: 'Arrow',
  greet: () => {
    console.log(arguments`Hello, ${this.name}!`);
  }
};

regularFunc(1, 2, 3regularObject.greet(); // OutputsOutput: [1Hello, 2, 3]
arrowFunc(1, 2, 3);  Regular!
arrowObject.greet(); // Throws ReferenceErrorOutput: arguments is not definedHello, undefined!

  4. Function hoisting:

    • Regular: Can be hoisted

    • Arrow: Cannot be hoisted

      Code Block
      languagejs
      console.log(regularHoisted()); // Outputs: "I'm hoisted!"
function regularHoisted() {
    return "I'm hoisted!";
}

// Uncommenting the next line would throw a ReferenceError
console.log(arrowHoisted());
const arrowHoisted = () => "I'm not hoisted!";

  5. Constructors:

    • Regular: Can be used as constructors

    • Arrow: Cannot be used as constructors

      Code Block
      languagejs
      function RegularConstructor() {
    this.value = 42;
}
const regularInstance = new RegularConstructor();
console.log(regularInstance.value); // Outputs: 42

const ArrowConstructor = () => {
    this.value = 42;
};
// Uncommenting the next line would throw a TypeError
// const arrowInstance = new ArrowConstructor();

...