매개변수로 받은 객체의 수정

const sample = [{name: "a", age: 22, role: "member", pay: 100},
		{name: "b", age: 25, role: "member", pay: 120},
                {name: "c", age: 30, role: "leader", pay: 130},
               ];
               
const result = sample.map(data => {
	data.role = "member2";
    return data;
);

위에 예제 코드는 map()에서 받는 매개변수의 속성을 수정하려는 코드이다.
언뜻 보기에 문제 없어 보인다. 실제로 동작도 의도한대로 동작하기도 한다.

하지만 다음과 같이 사용하는 것은 좋지 않은 방법이다. 의도치 않은 실수를 하게된다.
eslint에서는 다음과 같은 problem을 내뿜는다.

Assignment to property of function parameter 'data'

Assignment to property of function parameter

Disallow Reassignment of Function Parameters (no-param-reassign)
함수의 매개변수에 재선언을 하지 말라는 의미이다.

그 이유는 함수의 매개변수가 참조형인경우 같은 주소값을 가지고 있기때문에 참조형의 프로퍼티를 수정하면 원본이 변하게 된다.

const sample = [{name: "a", age: 22, role: "member", pay: 100},
		{name: "b", age: 25, role: "member", pay: 120},
                {name: "c", age: 30, role: "leader", pay: 130},
               ];
               
const result = sample.map(data => {
	data.role = "member2";
    	return data;
    }
);
console.log(sample);
console.log(result);

sample: 
[{ name: "a", age: 22, role: "member2", pay: 100 }, 
{ name: "b", age: 25, role: "member2", pay: 120 }, 
{ name: "c", age: 30, role: "member2", pay: 130 }]

result:
[{ name: "a", age: 22, role: "member2", pay: 100 }, 
{ name: "b", age: 25, role: "member2", pay: 120 }, 
{ name: "c", age: 30, role: "member2", pay: 130 }]

이는 개발자가 의도치 않은 side Effect를 만들 가능성을 높이게 된다.
따라서 다음과 같이 사용하는 것이 좋다.

const sample = [{name: "a", age: 22, role: "member", pay: 100},
		{name: "b", age: 25, role: "member", pay: 120},
                {name: "c", age: 30, role: "leader", pay: 130},
               ];
               
const result = sample.map(data => {
	const temp = data;
	temp.role = "member2";
    	return temp;
    }
);

Obejct.assign()의 사용

위의 방법도 좋지만 ES6의 Object.assign()을 사용하면 더 좋은 코드가 된다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

const sample = [{name: "a", age: 22, role: "member", pay: 100},
		{name: "b", age: 25, role: "member", pay: 120},
                {name: "c", age: 30, role: "leader", pay: 130},
               ];
               
const result = sample.map(data => {
	return Object.assign(data, { role: "member2" });
    }
);

2021.08.22 김승준