What is difference general function and ramda function?

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent implements OnInit {
  data = [{
    key: "Reyes",
    val: 467
  }, {
    key: "Chu",
    val: 335
  }, {
    key: "Williams",
    val: 198
  }];

  customizeLegend2(point){
    console.log(this.data[0]);
  }

  customizeLegend = (point) => {
    console.log(this.data[0]);
  }

  constructor() {}

  ngOnInit(){}
}

In Angular project,

I call a method from the HTML code,
When calling ‘customizeLegend2’, an error occurs saying that ‘data’ is undefined,
but calling ‘customizeLegend’ will work.

I think this is the difference in the call time before and after data is defined, but I am wondering why this phenomenon occurs fundamentally. Help!

Source: Angular Questions