function 리팩토링시 function expression 형식으로 리팩토링하면 동작이 안되나요?

미해결질문
이경민 프로필

App.vue 파일에서

methods: {
addOneItem(todoItem) {
const obj = { completed: false, item: todoItem };
localStorage.setItem(todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem(todoItem, index) {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
},
toggleOneItem(todoItem, index) {
this.todoItems[index].completed = !this.todoItems[index].completed;
// localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},
clearAllItems() {
localStorage.clear();
this.todoItems = [];
}
}

강의에서는 위와 같은 형식으로 리팩토링을 진행하셨는데

저는 처음에 아래와 같이 리팩토링을 해봤었습니다.

methods: {
addOneItem: (todoItem) => {
const obj = { completed: false, item: todoItem };
localStorage.setItem(todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem: (todoItem, index) => {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
},
toggleOneItem: (todoItem, index) => {
this.todoItems[index].completed = !this.todoItems[index].completed;
// localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},
clearAllItems: () => {
localStorage.clear();
this.todoItems = [];
}

하지만 에러가 나고 실행이 되지 않았습니다.

저는 두 방식이 같은것인줄 알았는데 뭔가 착각을 하고 있던것 같습니다. 혹시 두 방식이 어떤 차이점이 있는지 알려주실 수 있나요?

장기효(캡틴판교) 프로필
장기효(캡틴판교) 4달 전

안녕하세요 경민님, 좋은 질문이네요! ES5 이전 함수 선언 방식과 화살표 함수의 차이는 단순히 문법이 바뀌는 것 이외에 함수의 실행 컨텍스트도 변경됩니다. 실행 컨텍스트를 이해하는 가장 쉬운 방법은 화살표 함수로 변경하기 전과 후에 각각 this를 콘솔에 찍어보시면 알 수 있을 것 같아요. 정리하자면, 뷰 인스턴스 옵션 속성에는 화살표 함수를 직접 적용하시면 안됩니다. 각 옵션 속성의 내부에서 비동기 처리 로직을 구현하실 때 화살표 함수를 쓰시는 게 좋을 것 같아요 :)

강의 수강해주셔서 감사합니다.

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스