순수함수란? 순수함수 불변성 사이드이펙트

😎 순수함수란?

✅ 순수함수 특징

• 사이드 이펙트가 없어야 한다. (외부의 상태를 변경하지 않아야 한다.)
• 동일한 값이 주어질 경우 항상 리턴 값이 같아야 한다.

 

✅ 순수함수 예시

1. 순수함수

const one = 1
const two = 2

function sum(a, b){
    return a + b;
}
sum(one, two) // 3

sum 함수는 외부 상태를 변경하지 않고, 같은 값에 대해 항상 같은 값을 리턴하므로

순수함수이다.

 

2. 순수함수가 아닌 것 (비순수함수)

const arr = [1, 2]

function add(arr, value){
	return arr.push(value)
}
add(arr, 3) 
arr // [1, 2, 3]

add 함수는 전달 받은 값 arr에 value를 push 하면서

외부 값인 arr의 상태를 변경하고(사이드이펙트), 항상 다른 값을 리턴하므로

순수함수가 아니다.

 

✅ 순수함수와 불변성

순수함수는 불변성을 지키기 위해 사용한다.

함수형 프로그래밍의 특징 중 하나가 순수함수를 사용하는 것이고 이것은 리액트가 지향하는 방식이다.

예를 들어서 리액트는 상태관리라는 것을 한다.

state와 setState를 통해 이전 값과 바뀔 값을 비교한 후 바뀐 값을 리턴한다.

변화가 필요한 값만을 리턴한다는 뜻이다.

만약 변화가 필요한 값 말고도 외부의 값을 변경한다거나

변화가 필요한 값이 예상치 못한 값으로 리턴이 된다면 개발은 엉망이 될 것이다.

즉 순수함수는 예상치 못한 상황을 만들지 않기 때문에 신뢰할 수 있는 함수가 되며

이것은 함수로 이루어진 함수형 프로그래밍 방식에서 꼭 필요한 개념이다.

 

✅ 불변성 예시

1. 불변성을 지키지 않은 예시

const arr = [1, 2]

function add(arr, value){
	return arr.push(value)
}
add(arr, 3) 
arr // [1, 2, 3]

원본 arr의 값이 변경되었으므로 불변성을 지키지 않았다.

 

2. 불변성을 지킨 예시

const arr = [1, 2]

function add(arr, value){
	const newArr = arr.map((arr)=> arr)
	newArr.push(value)
	return newArr
}
add(arr, 3) // [1, 2, 3]
arr // [1, 2]

새로운 객체를 복사해서 사용하였으므로 원본 arr의 값은 그대로 유지되었기 때문에 불변성이 유지 되었다.

 

불변성의 진짜 의미는 '메모리 영역의 값'을 변경하지 않는 것을 말한다.

 

 

✅ 순수함수 장단점

순수함수 장점

예측 가능하다.
외부의 값을 변경 시키지 않고, 같은 전달에 대해 같은 값을 반환하기 때문에 예측이 가능하다.

순수 함수는 실행 시점이 중요하지 않다.
실행되는 시점과 상관없이 항상 동일한 결과를 반환하기 때문에 실행 시점은 중요하지 않다.

재사용성이 좋다.
하나의 기능에 충실하기 때문에 조합 및 재사용성이 좋다.

 

순수함수 단점

개발 난이도가 높다.
순수함수의 특징을 지켜가며 개발해야 하므로 난이도가 올라간다.

 

 

❗ 정리

• 순수함수는 함수형 프로그래밍에서 불변성을 위해 꼭 필요한 개념이다.
• 불변성이란 '메모리 영역의 값'이 변하지 않는 것이다.
• 리액트는 불변성을 지키므로써 효율적인 상태 업데이트를 한다.
• 순수함수와 불변성은 개발 구조를 단순화 시켜 예측이 가능해진다.