The array is filled with values, however, there seems to be an issue preventing their access. What could possibly be causing this obstacle

Question

The array is filled with values, however, there seems to be an issue preventing their access. What could possibly be causing this obstacle

After receiving two string values through a callback function, let's call them a and b, I attempt to store them in an array. However, when I check the array using console.log, it only displays the values if I expand the array by clicking on the arrow symbol. Additionally, when I try to access the values by index, it shows up as undefined. It seems like there might be an issue with the function call?

funcOuter() {
    let newList =[];
    this.calledFunc(function (param) {
        newList.push(param);
    });
    console.log(newList[1]);
}

Current Output:

undefined

Expected Output:

123.234.556

javascript angular typescript

Answer 1

Answer №1

When using Angular 2+, incorporating a callback function can be a viable solution to certain challenges.

class AchievementComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  async outerFunction() {
    let newList =[];
    const param = await this.innerFunction();
    newList.push(param);
  }

  innerFunction() {
    return new Promise((resolve, reject)=>{
      this.calledFunction((param)=>{
         resolve(param);
      })
    })
  }

}

Answer 2

When using Angular 2+, incorporating a callback function can be a viable solution to certain challenges.

class AchievementComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  async outerFunction() {
    let newList =[];
    const param = await this.innerFunction();
    newList.push(param);
  }

  innerFunction() {
    return new Promise((resolve, reject)=>{
      this.calledFunction((param)=>{
         resolve(param);
      })
    })
  }

}

Answer 3

Answer №2

It's crucial to visualize the execution of the code:

Stack S

Heap H

Queue Q

When your funcOuter is executed, it goes on the S stack

Along with the assignment, function call, and log:

S: funcOuter, let newList =[];

Assignment is carried out ...

S: funcOuter, this.calledFunc(callback);

The function is executed ...

S: funcOuter, this.calledFunc(callback);, calledFunc inner block

Inner block and async tasks are completed

S: funcOuter, console.log(newList[1]),

Q: possible async calls

The log statement is executed:

S: funcOuter,

Q: possible async calls

The outer function is completed:

S:

Q: possible async calls

The stack is filled from the queue:

S: callback,

Q: possibly more async calls

The push operation is executed:

S: callback, push

And so on ;) Event Loop

Therefore, modify your code to:

funcOuter() {
    let newList =[];
    this.calledFunc(function (param) {
        newList.push(param);
        newList[1] && console.log(newList[1]);
    });

}

This should give you the expected outcomes.

Answer 4

It's crucial to visualize the execution of the code:

Stack S

Heap H

Queue Q

When your funcOuter is executed, it goes on the S stack

Along with the assignment, function call, and log:

S: funcOuter, let newList =[];

Assignment is carried out ...

S: funcOuter, this.calledFunc(callback);

The function is executed ...

S: funcOuter, this.calledFunc(callback);, calledFunc inner block

Inner block and async tasks are completed

S: funcOuter, console.log(newList[1]),

Q: possible async calls

The log statement is executed:

S: funcOuter,

Q: possible async calls

The outer function is completed:

S:

Q: possible async calls

The stack is filled from the queue:

S: callback,

Q: possibly more async calls

The push operation is executed:

S: callback, push

And so on ;) Event Loop

Therefore, modify your code to:

funcOuter() {
    let newList =[];
    this.calledFunc(function (param) {
        newList.push(param);
        newList[1] && console.log(newList[1]);
    });

}

This should give you the expected outcomes.

The array is filled with values, however, there seems to be an issue preventing their access. What could possibly be causing this obstacle

Answer №1

Answer №2

Similar questions

PHP file secured to only accept variables posted from HTML form

Prevent clicking through slides on React by disabling the Swiper feature

Exploring the power of AngularJS in manipulating Google Maps polygons with the help of ng-repeat

The console experienced a forced reflow when a tooltip appeared on the slider handle while executing JavaScript

I'm stumped trying to understand why I keep getting this syntax error. Any thoughts on how to fix it?

Error: The function of forEach is not applicable to todoList

Ways to identify modifications from a BehaviorSubject and automatically trigger a response according to the updated value

"Enhancing Collaboration with NextJs Multi-Zones' Unified Header

Reasons for aligning inline elements with input boxes

What is the best way to initiate a Post/Get Request to NodeJS without causing a page refresh?

Utilizing local images in Angular with route navigation

Having trouble getting code hints to function properly with the official TypeScript plugin on Sublime Text 3

Incorporating database coordinates into Marker React Leaflet: A Step-by-Step Guide

Properly segmenting sections into components in Angular

Exploring the Integration of the pg Node Package with Angular

The Power of jQuery's .ajax() Utility

successful callback after passport registration

Encountering 404 Error in Production with NextJS Dynamic Routes

Maximizing the potential of $urlRouterProvider.otherwise in angular js

Wordpress team exhibition