매개변수 재할당을 지양하자(no-param-reassign)

1. 매개변수(파라미터) 재할당을 지양해야 한다고?

• 우리는 함수에 인수를 전달하고, 전달한 매개변수값을 재할당할 수 있다.

function test(value) { // value 매개변수
  value = 13;          // 매개변수 재할당
  return value;
}
test(30);   // 인수 전달

🤔 하지만, 매개변수 재할당은 eslint 규칙(no-param-reassign)으로 존재할만큼 지양해야하는 방법인데 왜 그런걸까? 그 이유를 알아보자!

2. 재할당의 위험성

(1) 인수와 파리미터가 달라 의도와 다른 동작이 발생한다.

• 파라미터는 인수를 참조하는 구조이다.
• 참조한다는 건, 파라미터가 인수의 주소를 가리킨다는 말인데 만약 파라미터의 값을 변경하면 어떻게 될까?
• 우리는 sum()에 12, 13을 인자로 넘겼다.
• 의도대로라면 25가 리턴되어야 하는데, 실제로는 113이 리턴되었다;

function sum(v1, v2) {
  v1 = 100;
  return v1 + v2;
}

sum(12, 13);  // 113

왜 25가 아닌 113이 리턴되었을까?

• 함수 내부에서 파라미터를 변경하는 로직이 있어, 인수와 파리미터값이 달라지고 의도와 다른 결과값이 출력된 것이다ㅜ

(2) 파리미터 변경을 인지하지 못한다.

• 그럼, array 타입인 파리미터값을 변경하면 어떻게 될까?
• 파리미터값을 변경하기 전 후 인수와 파리미터를 비교해보았다.
• 비교 결과, 재할당 후에도 인수와 파라미터가 같다는 결과가 나온다!

function test(v) {
  console.log(arr === v);  // true
  v[1] = 100;
  console.log(arr === v);  // true
}

const arr = [22, 15];
test(arr);

파리미터 값을 변경했는데, 왜 인수와 파리미터가 같은걸까?

• 그 이유는 바로, 배열에서 인덱스로 값 변경시 배열의 주소값은 바뀌지 않기 때문이다.
• 이 경우, 파라미터와 인수값이 실제로는 다르지만 주소값상 같아 동일한 배열로 인식되는 현상이 발생한다ㅜ

🚫 이처럼 함수에서 매개변수 재할당을 사용하면 인수와 매개변수 값의 차이가 발생하거나, 주소값이 동일하여 변경점을 인지하지 못한다. 이는 연산과정에서 의도치 못한 오류를 발생시킬 수 있으므로 지양하는 게 좋다!