Adding parent scope to anonymous function - JavaScript to Angular 2

Question

I am attempting to include an old JavaScript module within an Angular 2 project and I've hit a problem with accessing parent scope.

let testString = "Parent Scope Accessed!";

Object.keys(data).forEach((function(Key, Index) {
    if(filter.type == 'parameter') {
      Object.keys(dirArray).forEach(function(dirKey, dirIndex) {
        linkArray = dirArray[dirKey];
        if(filter.dir == 2) {  //Direction filter
          Object.keys(linkArray).forEach(function(linkKey, linkIndex) {
            if(filter.type != 'sub')) {
              dataObject = linkArray[linkKey];

              //ERROR with scoping occurs below.  Need to add parent scope.
              console.log(this.testString);
            }
          });
        }
      });
    }
}));

I've tried to do something like this:

let testString = "Parent Scope Accessed!";

Object.keys(data).forEach((function(Key, Index) => {
    if(filter.type == 'parameter') {
      Object.keys(dirArray).forEach(function(dirKey, dirIndex) => {
        linkArray = dirArray[dirKey];
        if(filter.dir == 2) {  //Direction filter
          Object.keys(linkArray).forEach(function(linkKey, linkIndex) => {
            if(filter.type != 'sub')) {
              dataObject = linkArray[linkKey];

              //ERROR with scoping occurs below.  Need to add parent scope.
              console.log(this.testString);
            }
          });
        }
      });
    }
}));

But that gives an entirely new set of issues, but at least the IDE indicates that the parent scope has been added. I assume I am not using the '=>' syntax correctly. Is there a better way to do this?

Answer 1

Drop the function word and just use the fat arrow, => , when defining a function

 let testString = "Parent Scope Accessed!";

Object.keys(data).forEach(((Key, Index)=> {
    if(filter.type == 'parameter') {
      Object.keys(dirArray).forEach((dirKey, dirIndex)=> {
        linkArray = dirArray[dirKey];
        if(filter.dir == 2) {  //Direction filter
          Object.keys(linkArray).forEach((linkKey, linkIndex)=> {
            if(filter.type != 'sub')) {
              dataObject = linkArray[linkKey];

              //ERROR with scoping occurs below.  Need to add parent scope.
              console.log(this.testString);
            }
          });
        }
      });
    }
}));

OR

Define the root this in a variable ( var that in this case):

var that = this;
let testString = "Parent Scope Accessed!";

Object.keys(data).forEach((function(Key, Index) => {
    if(filter.type == 'parameter') {
      Object.keys(dirArray).forEach(function(dirKey, dirIndex) => {
        linkArray = dirArray[dirKey];
        if(filter.dir == 2) {  //Direction filter
          Object.keys(linkArray).forEach(function(linkKey, linkIndex) => {
            if(filter.type != 'sub')) {
              dataObject = linkArray[linkKey];

              //ERROR with scoping occurs below.  Need to add parent scope.
              console.log(that.testString); //Use that instead of this here to refer to the parent scope
            }
          });
        }
      });
    }
}));