Javascript - 자바스크립트를 통해 배우는 순수 함수의 개념

프로그래밍/자바스크립트
2021. 11. 2.

순수 함수(Pure Function)란 무엇일까요? 순수 함수에 대한 정의를 내리자면 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)입니다. 함수라면 당연한 거 아니냐 라고 생각하실 수 있지만 가장 기초적이면서 지키기 어려운 개발이 순수 함수를 만들고 그 함수들을 조합해 확장성, 재사용성을 높이는 코드를 작성하는 것입니다.

오늘은 자바스크립트를 통해 함수형 프로그래밍을 하는데에 있어 쉽지만 지키기는 순수 함수에 대해 이야기해볼까 합니다. 막상 내일 책상 앞에서는 일정에 쫓겨 잊겠지만, 적어도 오늘보다는 멋진 프로그래밍을 할 수 있기를 바라보면서 말이죠

순수 함수의 정의 - Pure Function

순수 함수의 정의는 서문에서 말한 것과 같이 동일한 매개변수가 주어지면 항상 동일한 결과를 반환하는 함수를 말합니다. 한 가지 설명을 덧붙여 설명하자면 부수 효과(Side Effect)가 없어야 합니다. 즉 순수 함수의 정의를 통해 다음과 같이 순수 함수의 조건을 말할 수 있습니다.

- 동일한 매개변수가 주어지면 항상 결과를 반환해야한다.
- 원래 목적과 다른 효과를 만들지 말아야한다.

코드를 통해 위해서 정의한 조건들을 구체적으로 살펴보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>순수 함수</title>
</head>
<body>
<script>

// 순수 함수란?
// 외부에 영향을 주거나 받지 않고 동일한 인자를 전달하면 항상 같은 결과를 반환하는 함수

function addition(number1, number2) {
  return number1 + number2;
};

console.log(addition(1, 1)); // 2
console.log(addition(1, 1)); // 2
console.log(addition(1, 1)); // 2
console.log(addition(1, 1)); // 2

</script>
</body>
</html>

addition()이라는 함수는 앞서 정의한 순수 함수의 조건과 같이 항상 동일한 결과를 반환하고 부수 효과를 만들어내지 않습니다. 이렇게 본다면 순수 함수는 만들기가 매우 쉬워 보입니다. 그렇다면 순수하지 않은 함수는 어떤 함수를 말하는 걸까요?

순수하지 않은 함수

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>순수하지 않은 함수</title>
</head>
<body>
<script>

let otherNumber = 10;

function addition(number1, number2) {
  return number1 + number2 + otherNumber;
};

console.log(addition(1, 1)); // 12
console.log(addition(1, 1)); // 12

otherNumber = 20;

console.log(addition(1, 1)); // 22
console.log(addition(1, 1)); // 22

</script>
</body>
</html>

이번에 정의한 addition()는 외부에 정의된 변수에 의해 반환하는 결과 값이 달라집니다. 이전에 정의한 addition()과는 다르게 함수 바깥에 설정된 환경에 따라 결과 값이 달라지기 때문에 순수하지 않은 함수라고 결론을 내릴 수 있습니다. 한 가지 다른 예를 들어본다면 이런 코드를 만들어 볼 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>순수하지 않은 함수</title>
</head>
<body>
<script>

let otherNumber = 0;

function addition(number1, number2) {
  otherNumber += number1 + number2;
  return number1 + number2 + otherNumber;
};

console.log(addition(1, 1)); // 4
console.log(addition(1, 1)); // 6

</script>
</body>
</html>

여기서 정의한 addition()은 또 다른 형태의 순수하지 않은 함수입니다. 외부에 영향을 받는 동시에 영향을 끼치고 있는 형태로 만들었습니다. otherNumber 변수는 addition()이 호출되면 계속 수정되고, 반환 값에 포함되어 addition()이 항상 다른 결과를 반환하도록 합니다.

그렇다면 순수 함수는 옳고 순수하지 않은 함수는 옳지 않다고 정의하면 되는 걸까요? "그렇다"라고 정의를 내릴 수 있다면 좋겠지만 순수 함수만을 이용해서 프로그래밍을 하는 것은 말이 쉬울 뿐이지 많은 생각과 노력을 요구합니다. 그리고 누가 이것만이 옳다고 결론을 내릴 수 있을까요? 결과는 같을지언정 목표에 도달하는 방법은 사람의 수만큼 다양합니다.

주저리주저리 글이 길어졌지만, 지금 이야기하고 싶은 부분은 순수 함수와 순수하지 않은 함수에 대한 정의입니다. 순수 함수 조건을 만족시키면 순수 함수 그렇지 않으면 순수하지 않은 함수입니다. 그뿐이에요. 그렇다면 왜 굳이 순수 함수와 그렇지 않은 함수를 이분법적으로 나누어서 말하려는 걸까요?

순수 함수(Pure Function)가 가지는 장점

예제 코드를 통해서 순수 함수와 순수하지 않은 함수가 가지는 차이점을 알아보았습니다. 그렇다면 순수 함수가 순수하지 않은 함수에 비해 무엇이 좋다고 이야기할 수 있을까요? 사용자가 요구한 기능을 빠듯한 개발 일정에 맞추어 만들기 위해서 순수하지 않은 함수를 쓰는 게 쉽고 편리한데 어떤 이유 때문에 순수한 함수를 만들고 사용해야 하는 걸까요?

- 순수 함수는 실행 시점이 중요하지 않다.

순수 함수가 가지는 가장 큰 매력은 바로 실행되는 시점과 상관없이 항상 동일한 결과를 만들어내는 것입니다. 예제 코드를 통해 보여드린 순수 함수는 누가 언제 실행시키든 항상 동일한 기능을 수행합니다. 다르게 말하면 멀티스레드 환경에서든 비동기적인 상황에서든 언제나 안전하게 믿고 사용할 수 있습니다. 반면 순수하지 않은 함수는 어떤가요? 외부에 정의되어 있는 요소에 따라 결과가 판이하게 바뀌기 때문에 어떤 결과를 만들어 낼지 예측이 불가능합니다.

- 순수 함수는 조합성을 높여준다.

순수 함수는 예측이 가능한 결과를 반환하기 때문에 다른 순수 함수들과 조합해서 사용하기가 용이합니다. 즉 재사용성이 좋다고 말할 수 있고 대체적으로 하나의 기능에 충실하기 때문에 응집도가 매우 높아 유지보수가 편리한 부분도 있습니다.

저작자표시 비영리 변경금지

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

Javascript - 실시간으로 위치를 확인하는 Geolocation의 사용 방법을 알아보자 (2)	2021.12.17
Javascript - 스크립트 코드를 실행시키는 eval() 사용 방법을 알아보자 (0)	2021.12.15
Javascript - Promise를 사용해서 Callback hell을 벗어나자 (0)	2021.10.07
Javascript - 배열의 요소를 다룰 때 index 대신 at()을 사용해보자 (3)	2021.09.30
Javascript - HTTP 쿠키의 정의와 사용하는 방법 with js-cookie (3)	2021.08.19

개발자 일지