why this.key is not working properly in javacript?

Question

let student = {

fname: "Carlos",
    lname: 'Dubón',
    sayHi(){
        alert(`Hi my name is ${this.fname}`);
    },
    sayBye: function() {
        alert(`Bye ${this.fname}`);
    },
    sayHiAgain: ()=> {
        alert(`Hi my name is ${this.fname}`);
    }
}

student.sayHiAgain();

I'm new to OOP in Javascript, I understand that the 3 ways in which I wrote a method work exactly the same.
student.sayHi(); works and shows up the alert => "Hi my name is Carlos"
but student.sayHiAgain(); shows up the alert => "Hi my name is undefined"
What am I missing?

Harben · Accepted Answer

When using arrow functions, it uses lexical scoping meaning that it refers to it's current scope and no further past that, i.e., binds to the inner-function and not to the object itself.

An arrow function expression is a syntactically compact alternative to
a regular function expression, although without its own bindings to
the this, arguments, super, or new.target keywords. Arrow function
expressions are ill suited as methods, and they cannot be used as
constructors.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Mario · Answer

Arrow functions have no “this”

Arrow functions are special: they don’t have their “own” this. If we
reference this from such a function, it’s taken from the outer
“normal” function.

student.sayHiAgain();

Arrow function expressions

why this.key is not working properly in javacript?

2 Answers

Add your own answers!

Related Questions

Bluehost hosted React pages not found

Change a view margins programmatically

Array of Objects in Angular Material Tree

Using checkpoints with snakemake gives each instance of a rule all input files

React returning view from switch statement

Python: Get value of env variable from a specific .env file

Python3: How to check for a string within a while loop that expects integers

AWS Cloudfront for subdomain

Find string then return different row value Python

Python dictionary only stores last values in new dictionary entries

sqoop split by option is giving error while using a derived column in the split by option

“Multipart/form-data” is not woking in React-redux form upload

DynamoDB single query to retrieve both public and private chat messages

React JS – route does not pick the required Component

Is it more efficent to assign a database query to a variable for a single view than to have multiple queries

These packages do not match the hashes from the requirements file

std::enable_if is generating error when used on functions of same name inside a template class

get character after space of array value on javascript

Inserting a period after each character in a loop

Writing python list to .txt file as a string without list formatting

Ask a Question