JavaScript Academy · 강의

순수 함수와 부수 효과

예측 가능하고 테스트할 수 있는 함수를 작성합니다.

순수 함수와 부수 효과은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

함수를 순수하게 만드는 요소

순수 함수에는 두 가지 특성이 있습니다. 같은 입력이 주어지면 항상 같은 출력을 반환하고, 관찰 가능한 부수 효과를 일으키지 않습니다. 순수 함수는 예측하기 쉽고 테스트하기도 쉽습니다.

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
console.log(add(2, 3)); // always 5

결정적인 출력

순수성은 결정성을 의미합니다. 숨겨진 상태, 시간, 무작위성에 의존하지 않고 같은 인수가 항상 같은 결과로 이어져야 합니다.

function double(n) {
  return n * 2;
}
console.log(double(10)); // always 20

부수 효과란 무엇인가

부수 효과란 값을 반환하는 것 외에 함수가 하는 모든 일입니다. 로그 기록, 외부 상태 변경, 저장소에 쓰기, 네트워크 호출, 인수 변경 등이 이에 해당합니다.

let total = 0;
function impureAdd(n) {
  total += n;     // side effect: mutates outer state
  return total;
}
console.log(impureAdd(5));
console.log(impureAdd(5)); // 5 then 10, not pure

외부 상태에 의존하기

변경 가능한 외부 state를 읽는 것도 순수성을 깨뜨립니다. 인수가 그대로여도 출력이 달라지기 때문입니다.

let rate = 1.5;
function priceImpure(x) {
  return x * rate; // depends on outside variable
}
console.log(priceImpure(10)); // 15
rate = 2;
console.log(priceImpure(10)); // 20 - different result

순수하게 만들기

함수에 필요한 모든 것을 인수로 전달하세요. 그러면 결과가 입력에만 의존합니다.

function price(x, rate) {
  return x * rate;
}
console.log(price(10, 1.5)); // 15
console.log(price(10, 2));   // 20

인수 변경은 순수하지 않음

전달받은 객체나 배열을 변경하면 호출자가 관찰할 수 있는 부수 효과가 발생합니다. 순수 함수는 입력을 그대로 둡니다.

function impurePush(arr, x) {
  arr.push(x);   // mutates caller array
  return arr;
}
const a = [1, 2];
impurePush(a, 3);
console.log(a); // [1, 2, 3] - caller changed

새 값 반환하기

순수한 버전은 입력을 변경하는 대신 새 값을 만들어 반환합니다.

function pureAppend(arr, x) {
  return [...arr, x];
}
const a = [1, 2];
const b = pureAppend(a, 3);
console.log(a); // [1, 2] unchanged
console.log(b); // [1, 2, 3]

순수성이 유용한 이유

순수 함수는 테스트가 매우 쉽고(설정이나 모의 객체가 필요 없음), 메모이제이션하여 캐시하기 안전하며, 어떤 순서로든 또는 병렬로 실행해도 안전합니다. 따라서 코드를 국소적으로 추론할 수 있습니다.

function square(n) { return n * n; }
console.log([1, 2, 3].map(square)); // [1, 4, 9]

순수하지 않은 부분 격리하기

모든 부수 효과를 피할 수는 없습니다. 앱은 로그를 기록하고, 데이터를 가져오고, 화면에 표시해야 합니다. 부수 효과를 가장자리로 밀어내고 핵심 로직을 순수하게 유지하는 것이 목표입니다.

function computeTotal(items) {
  return items.reduce((s, i) => s + i.price, 0);
}
const total = computeTotal([{ price: 5 }, { price: 7 }]);
console.log(total); // 12 - pure core, log at the edge

참조 투명성

순수한 호출은 동작을 바꾸지 않고 그 결과로 대체할 수 있습니다. add(2, 3)은 어디서든 5와 서로 바꿔 사용할 수 있습니다. 이 특성을 참조 투명성이라고 합니다.

function add(a, b) { return a + b; }
const x = add(2, 3) + add(2, 3);
const y = 5 + 5;
console.log(x === y); // true

순수하지 않음을 알아채기

다음과 같은 단서를 살펴보세요. console, Math.random, Date.now, 외부 변수에 대한 할당, 인수 변경입니다. 이러한 요소가 하나라도 있으면 함수는 순수하지 않습니다.

function pureRoll(seed) {
  return (seed * 1103515245 + 12345) % 100;
}
console.log(pureRoll(42)); // deterministic, testable

빠른 확인

순수 함수 식별하기

복습

순수 함수는 결정적이며 부수 효과가 없습니다. 외부 변경, 입출력, 인수 변경을 일으키지 않습니다. 의존성을 인수로 전달하고 변경하는 대신 새 값을 반환하세요. 순수성은 테스트 가능성, 메모이제이션, 참조 투명성, 병렬 실행의 안전성을 제공합니다. 핵심 로직은 순수하게 유지하고 부수 효과는 가장자리로 밀어내세요.

자주 묻는 질문

“순수 함수와 부수 효과” 강의는 무료인가요?

네 — “순수 함수와 부수 효과” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“순수 함수와 부수 효과”에서 뭘 배우나요?

예측 가능하고 테스트할 수 있는 함수를 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“순수 함수와 부수 효과” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기