[JS] 순수함수(Pure Function)

순수함수

함수형 프로그래밍 패러다임의 한 부분이며, 두 가지 규칙을 가진다.

 

 

 

1. 같은 입력값이 주어졌을 때, 언제나 같은 결괏값을 리턴한다.

const add = (x,y) => x + y;
console.log(add(10,20)); // 30

 

 

 

2. 사이드 이펙트를 만들지 않는다.

const z = 1;
const sum = (x,y) => x + y + z;
console.log(sum(10,20));

사이드 이펙트는 없지만, 이렇게 함수 밖의 스코프에 접근하는 것도 이 함수를 inpure함수로 만든다.

 

 

 

 

 

inpure 함수의 예

예시 1

let x = 0;
const numberUp = () => x += 1;
console.log(numberUp()); // 1
console.log(x); // 1

외부에서 선언된 변수가 변경되었다. 즉 사이드 이펙트가 발생했다.

 

let x = 0;
const pureNumberUp = (num) => num += 1;
console.log(pureNumberUp(x)); // 1
console.log(x); // 0

순수함수로 변경했다. x의 값은 그대로이다.

 

 

 

 

예시 2

const alphabetArray = ['A', 'B'];
const addItemToArray = (originalArray, newItem) => {
	originalArray.push(newItem);
	return originalArray;
}

console.log(addItemToArray(alphabetArray, 'C')); // [‘A’, ‘B’, ‘C’]
console.log(alphabetArray); // [‘A’, ‘B’, ‘C’]

원본 배열까지 같이 변경되었다. 사이드 이펙트의 발생!

 

const alphabetArray = ['A','B'];
const pureAddItemToArray = (originalArray, newItem) => {
	return [...originalArray, newItem]
}

console.log(pureAddItemToArray(alphabetArray, 'C')); //  [‘A’, ‘B’, ‘C’]
console.log(alphabetArray); // [‘A’, ‘B’]

얕은 복사를 통해 배열을 복사 후 return 한다. 이렇게 하면 원본 배열의 변경이 발생하지 않는다.

 

 

 

 

 

순수함수를 사용하는 이유

1. 클린 코드를 위해서

2. 테스트를 쉽게 하기 위해서

3. 디버그를 쉽게 하기 위해서

4. 독립적인 코드를 위해서

 

 

 

 

 

순수함수를 사용하면

특정 함수가 다른 함수에 미치는 예기치 못한 영향을 최소화하고, 함수를 만들고 실행할 때 어떤 결괏값을 리턴할지 예측할 수 있다.

 

프로젝트를 생성하기 위해 inpure 함수도 당연히 필요하나, pure 함수로 처리할 수 있는 부분은 최대한 pure 함수로 만들어서 사용하는 것이 좋다.