[ERR] Assignment to property of function parameter '??’

ERR

Assignment to property of function parameter '???'

WHEN

• todo 웹 페이지를 만들면서 문자열 배열이였던 데이터를 완료여부와 컨텐츠를 가진 객체 배열로 변경했다.

todoList : string[] = ['todo1', 'todo2', ...]
// 형태의 데이터를 아래와 같이 수정하였다.

todoList : { done: boolean; content: string }[] = [
    {
      done: false,
      content: 'todo1',
    },
    {
      done: true,
      content: 'todo2',
    },
  ];

//완료 여부를 done에 지정된 boolean 값으로 판단한다.

• 완료된 todo의 boolean 값을 아래와 같이 바꾸면서 에러가 발생했다.

const completeTodo = () => {
  todoList[idx].done = true
}

WHY

• ESLint 오류였으며, https://eslint.org/docs/rules/no-param-reassign 를 참조했다.
• 간단히 정리하자면 매개변수에 지정된 변수를 수정하는 경우 함수에 포함된 arguments 객체도 변경되기 때문이라고 한다.
• 매개변수가 참조형인 경우 인자와 같은 주소를 가지고 있기 때문에 원본을 직접 변경하기 때문이다.
• ESLint 룰에는 ‘함수 매개변수로 선언된 변수에 대한 할당은 오해의 소지가 있고 혼란스러운 동작을 유발할 수 있습니다’ 라고 한다.

SOLVE

• 해당 규칙을 비활성화 하거나, 다른 방법을 사용하는 것을 추천하는데 나는 Object.assign() 을 이용하여 바꾸어 주는 것으로 해결하였다.
  → 참고 : https://velog.io/@dregonc/매개변수로-받은-객체의-수정

const completeTodo = () => {
  Object.assign(todoList[idx], { done: true });
}

• 위 방법외에도 아래와 같이 해결하는 방법도 존재한다.

const completeTodo = () => {
	const todo = todoList[idx];
  todo.done = true;
}

• todo와 todoList[idx]는 같은 주소를 참조하지만, 아래의 방법처럼 매개변수로 받은 todoList[idx] 를 직접 수정하는 것이 아니라, 다른 곳에 할당하여 수정하는 되는 경우 arguments 객체를 변경시키지 않는다고 한다.
  → 참고 : https://stackoverflow.com/questions/35637770/how-to-avoid-no-param-reassign-when-setting-a-property-on-a-dom-object