using this keyword in angular in nested functions

potentially invalid reference access to a class field via this of a nested function
this in nested function javascript

Hi I would know how can I use variables of the component in nested function.

Here's an example:

export class AppComponent implements OnInit {
  name = ['Angular 6','Angular5','Angular4','Angular2'];
  isexist: string[]=[];

ifExist(text){
  var that= this;
  console.log("first ",this);
  var test="test";
  let exist= this.name.map(function (elm){
    if(elm==text) {
      console.log(this);
      this.isexist.push(elm); // works with that.isexist.push(elm); 
      }
      })
}
ngOnInit() {
  this.ifExist('Angular 6');

}

Here's what I get in browser dev tool

first  AppComponent {name: Array(4), namev: "helo", isexist: Array(1)};
second undefined

I have some questions How can I access to isexist without using arrow funtion ? why the second this does not contain test element ?

try lambda here:

ifExist(text){
  var that= this;
  console.log("first ",this);
  var test="test";
  let exist= this.name.map((elm)=>{
    if(elm==text) {
      console.log(this);
      this.isexist.push(elm); // works with that.isexist.push(elm); 
      }
      })
}

Naming this in nested functions · GitHub, In general though, avoiding the situation (nested functions and frivolous use of this ) Giving style advice on naming nested this without a meaningful context isn't too I also wrote about the this keyword in jQuery and why it should be avoided: 

There's no reason at all to loop, as you're only checking if an array contains an element. You don't even return from map(). The other answers already explain your problem with this, and here's how you should refactor your code (rewrote to plain js to make it work in the snippet, but you get the idea):

class Foo {
  constructor() {
     this.name = ['Angular 6','Angular5','Angular4','Angular2'];
     this.isexist = [];
  }
  
  ifExist(text) {
    if (this.name.includes(text)) this.isexist.push(text);
  }
  
  runner() {
    this.ifExist('Angular 6');
    console.log(this.isexist);
  }
}


new Foo().runner()

Understanding this and .bind(), Even nested functions will still point to the parent object. The keyword often associated with context is this. Context. To better understand context, 

The reason why you cannot access to ifExists without using arrow functions is that this in an arrow function has the same value as the context in which the arrow function was created.

this in a normal anonymous function however, has the value of the context in which the normal function was called from ( In your case, the context and scope of normal function is only the inside of ifExists method.

The JavaScript “this” Keyword Deep Dive: Nested Functions, Learn how the JavaScript “this” keyword behaves inside of function declarations and expressions, even when nested 10-levels deep.

Python Nested Functions, To define an inner function in Python, we simply create a function inside another function using the Python's def keyword. Here is an example: def function1(): 

Accessing Private Functions in JavaScript: Nested Functions, In today's follow up, Rob shows how to fetch nested functions using an a function into an object constructor by placing the new keyword in 

JavaScript Function Closures, or global scope. Global variables can be made local (private) with closures. Nested functions have access to the scope "above" them. In this example, the 

Comments
  • Yes with arrow function that works ;) but I have mentioned it , how get the same result before => was out ?
  • that is because of a javascript concept called closures. In javascript each function is an object. before arrow in html 5 we had to use bind function. bind link
  • Read this github.com/getify/You-Dont-Know-JS/blob/master/…