[Vue.js] 카카오 지도 API 작업 중 Uncaught TypeError: Cannot set properties of undefined! (일반 함수를 화살표 함수로 변경)

1. this 문제로 발생한 오류

[그림 1] data에 접근하기 위해 this를 사용했는데 발생한 에러

 

2. 화살표 함수로 해결

Vue.js의 methods에 카카오맵을 초기화하기 위해 initMap 메서드를 선언했다. 그리고 해당 메서드 안에 funcClick 메서드를 선언했다. 그런데 funcClick 메서드 내에서 Vue.js의 data에 접근하기 위해 this를 사용했는데 [그림 1]과 같이 에러가 발생했다.

이 문제는 일반 함수를 화살표 함수로 변경하여 해결했다. methods 객체에서 initMap 메서드를 선언하고 그 메서드 내에서 일반 함수(function 사용)를 정의하면 해당 메서드에서의 this는 해당 메서드를 호출하는 initMap 객체를 가리킨다. 아래 코드를 보면 initMap 메서드 내에는 count 변수가 없다. 따라서 [그림 1]과 같은 오류가 발생하는 것이다(아래 코드는 설명을 위해 단순화한 것이다. 또한 일반 함수 코드에 옵셔널 체이닝(?)을 적용했다. 따라서 아래 코드는 [그림 1]과 같은 오류 메시지를 출력하지 않는다). 반면 화살표 함수는 자신이 선언된 렉시컬 환경의 this를 상속받기 때문에 data 객체에 접근할 수 있다.

 

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 일반 함수
      // this는 funcClick을 호출하는 initMap객체이다.
      function funcClick() {
        console.log(this?.count)
      }
      funcClick() // 출력 결과 : undefined
      
      // 화살표 함수
      // this는 arrowFuncClick의 외부 객체인 initMap의 this를 상속 받는다.
      // 따라서 data의 count에 접근할 수 있다.
      const arrowFuncClick = () => {
        console.log(this.count)
      }
      arrowFuncClick() // 출력 결과 : 0
    }
  }
}