ESLint 규칙 - 함수 매개변수 재할당 금지

getFlexAlign함수에서 result 변수를 파라미터로 전달받고 특정 값을 재할당 해서 return 시키고자 했다.

function getFlexAlign(result: string, flexAlign: string) {
    result += flexAlign;
    return result;
}

...

let result = `
	flex-direction: ${direction};
`;

return getFlexAlign(
	result,
	`
		align-items: ${align[0]};
		justify-content: ${align[1]};
	`,
);

 

하지만 eslint error가 발생했는데 에러를 발생시킨 원인 아래와 같은 규칙 때문이다.

 

 

 

---

ESLint - 함수 매개 변수 재 할당 금지

https://runebook.dev/ko/docs/eslint/rules/no-param-reassign

 

함수 매개변수로 선언 된 변수에 대한 할당은 오해의 소지가 있으며

함수 매개 변수를 수정하면 arguments 객체도 변경되므로 혼란스러운 동작을 유발할 수 있다.

 

잘못된 코드의 예

function foo(bar) {
    bar = 13;
}

function foo(bar) {
    bar++;
}

function foo(bar) {
    for (bar in baz) {}
}

function foo(bar) {
    for (bar of baz) {}
}

 

올바른 코드의 예

function foo(bar) {
    var baz = bar;
}

 

---

 

 

 

따라서 매개변수를 새로운 변수에 복사하는 방식으로 수정했다.

// before
function getFlexAlign(result: string, flexAlign: string) {
    result += flexAlign;

    return css(result);
}


// after
function getFlexAlign(result: string, flexAlign: string) {
    let resultCopy = result;
    resultCopy += flexAlign;

    return css(resultCopy);
}

 

 

javascript문법 상 원시타입을 매개변수로 전달 받으면, 해당 인자(함수에서 정의된 값)는 다른 주소값으로 복사되기 때문에 새로운 변수에 복사해서 사용할 필요가 없다. (다만 객체 타입은 같은 주소값으로 복사되므로 새 변수에 복사해서 불변성을 지켜주는 것이 좋다.)

 

하지만 ESLint에서는 원시타입까지도 매개변수를 직접 쓰는 것을 지양하기 때문에 새로 복사해서 사용해야 한다는 것을  기억하자.