Push onto array with loop in Typescript

Question

I have the following code, which is the answer to my earlier question: Looping through 2d Typescript array and making new array from value at index if only it worked. I thought I would repost because otherwise the orig. post would get too complicated.

I don't understand why I can't seem to push to an array, or access the array outside the loop?

  this.days_in_month = [
    [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], 
  ];

  this.month_weekdays = [];
  this.days_in_month.forEach(function each(item) {
      // console.log(item);
      item.forEach(function each(value){
        // console.log(value);

        let thing: number = value;
          for(var i = 0; i < thing; i++) {
            let weekdays: string[] = [ 'M','T','W','T','F','S','S' ];
            let wkday: string = (weekdays[(i%7)]);
            this.month_weekdays.push(wkday);
          };
      });
  });

I think "this.month_weekdays.push(wkday);" should push the string wkday to the array month_weekdays, so that for every value in the array days_in_month it should loop through weekdays and assign the string at index i%7 to index i of month_weekdays

So for the first value in days_in_month month_weekdays should look like:

MTWTFSSMTWTFSSMTWTFSSMTWTFSSMTW

(And because December has 31 days this should also be the final value of month_weekdays)

gilamran · Accepted Answer · 2017-08-18 17:18:43Z

3

Works without the this:

const WEEK_DAYS: string[] = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
var days_in_month = [
  [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
  [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
  [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
  [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
];

let month_weekdays = [];
days_in_month.forEach(item => {
  item.forEach(value => {
    for (var i = 0; i < value; i++) {
      let wkday: string = WEEK_DAYS[(i % 7)];
      month_weekdays.push(wkday);
    };
  });
});

answered Aug 18, 2017 at 17:18

gilamran

7,3144 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

samAlvin · Accepted Answer · 2017-08-18 17:24:21Z

I think the problem occurs because you use function() {} syntax without binding the this. Therefore this.month_weekdays doesn't exactly got the correct month_weekdays. There are two options:

Changing your function to arrow syntax, or
Bind this in your function() {}

For option number one, your code will look like this:

this.days_in_month.forEach((item) => {
  // console.log(item);
  item.forEach((value) => {
    // console.log(value);

    let thing: number = value;
      for(var i = 0; i < thing; i++) {
        let weekdays: string[] = [ 'M','T','W','T','F','S','S' ];
        let wkday: string = (weekdays[(i%7)]);
        this.month_weekdays.push(wkday);
      };
  });

});

You should be able to access your month_weekdays outside the loop. What happen is that function() {} syntax have its own this, therefore you have to bind the this from the outer scope so that the function(){} refers the correct this. On the other hand, arrow syntax is a shorter syntax than the function(){} and does not bind its own this, arguments, super, or new.target; thus no binding of this is required.

For option number two, your code will look like this:

this.days_in_month.forEach(function(item) {
  // console.log(item);
  item.forEach(function(value) {
    // console.log(value);

    let thing: number = value;
      for(var i = 0; i < thing; i++) {
        let weekdays: string[] = [ 'M','T','W','T','F','S','S' ];
        let wkday: string = (weekdays[(i%7)]);
        this.month_weekdays.push(wkday);
      };
  }.bind(this));
}.bind(this));

This is awesome! I still don't understand what is going on with the arrow syntax tho?
@Davtho1983 function() {} syntax have its own this, therefore you have to bind the this from the outer scope so that the function(){} refers the correct this. While arrow syntax is a shorter syntax than the function(){} and does not bind its own this, arguments, super, or new.target; thus no binding of this required.. Reference about arrow syntax can be found here: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Push onto array with loop in Typescript

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related