Arrow Function this prints var but does not print let variable

Question

I have this code

var key = "outer value";
let obj = {
  key:"obj value",
  func:()=> this.key,
}

console.log(obj.func());

But when the var is changed to let, the result is undefined. Please guide.

Does this answer your question? [Self-references in object literals / initializers](https://stackoverflow.com/questions/4616202/self-references-in-object-literals-initializers) — Tasos, Jun 01 '22 at 11:42
In the above code, `this` in your arrow function refers to the global object (if being run in non-strcit mode). In the browser, `this` refers to the `window`, so you are accessinng `window.key`. When you define a variable with `var` in the global scope, it gets added to the `window` object , so `var key = ...` allows you to access the value using `window.key`, when you use `let` though, the variable name doesn't get added to `window` as a property. — Nick Parsons, Jun 01 '22 at 11:46
Please have a look at this [what-is-the-scope-of-variables-in-javascript](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — RenaudC5, Jun 01 '22 at 11:46
@NickParsons then where does `let key="outer value";` get added if not window? — Abhijeet, Jun 01 '22 at 13:27
@Abhijeet internally it gets added to something called a "declarative environment record" which is part of the global envrionment/scope, but there are is no JS APIs or objects that allow you to access those bindings like you can with `window`. You can see more info [here](https://stackoverflow.com/a/28776236/5648954) — Nick Parsons, Jun 01 '22 at 13:31

Shubham Sogi · Answer 1 · 2022-06-01T11:52:43.537

0

let key = "outer value";
let obj = {
  key:"obj value",
  func:()=> key,
}

console.log(obj.func()); //--> Outer Value


var key = "outer value";
let obj = {
  key:"obj value",
  func:()=> key,
}

console.log(obj.func()); //--> Outer Value

The answer would be same even if this keyword is not used

var key = "outer value";
let obj = {
  key:"obj value",
  func:()=> key,
}

console.log(obj.func());

edited Jun 01 '22 at 11:52

answered Jun 01 '22 at 11:50

Shubham Sogi

81
7

In OP's code, the result is different when `var` is changed to `let`, but in this code it will be the same. So they're not the same... – Nick Parsons Jun 01 '22 at 11:50

score 0 · Accepted Answer · answered Jun 01 '22 at 12:02

An arrow function does not have its on this, It always uses parent this

Your code works because the key is global scope(this)

let key = "outer value";
let obj = {
  key:"obj value",
  func:()=> key,
}
console.log(obj.func());

This will not work because key is local scope not inside this

function test() {
  var key = "outer value";
  let obj = {
    key: "obj value",
    func: () => this.key,
  };

  console.log(obj.func()); // undefined
}
test();

This Will work

function test() {
  this.key = "outer value";
  let obj = {
    key: "obj value",
    func: () => this.key,
  };

  console.log(obj.func()); // outer value
}
test();

Arrow Function this prints var but does not print let variable

2 Answers2