상세 컨텐츠

본문 제목

Side Effect (부수 효과)와 Pure Function(순수 함수)

Web/React

by Yongari 2023. 1. 9. 15:52

본문

 

Side Effect 부수효과

 

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 합니다.

즉 Side Effect라는 말을 할 때는 "의도하지 않은 결과"를 의미합니다. 의도하지 않게 외부변수를 참조하거나 외부변수를 변경하는 모든 종류의 코드를 의미합니다. 

 

다음은 전역 변수 foo를 bar라는 함수가 수정하는 예제입니다. Side Effect의 예시로 보면 될 것 같습니다.

let foo = 'hello'

function bar(){

foo='world';

}


bar() // bar는 side effect를 발생시킵니다.

 

 

Pure Function (순수 함수)

순수함수는 무엇일까요? 순수함수란 오직 함수의 입력만이 함수의 출력 결과에 영향을 주는 함수를 말합니다.   그리고  Side Effect도 없어야 합니다. 왜냐하면 순수함수는 의도하지 않는 결과를 만들면 안되기 떄문입니다. 


그렇다면 순수함수는 왜 공부해야할까요?? 사이드 이펙트를 줄이고 모듈화 수준을 높이는 함수형 프로그래밍에서 순수함수는 평가 시점이 무관하다는 특징 때문에 효율적인 로직을 구성할 수 있습니다. 그래서 함수형 프로그래밍을 위해서 순수함수의 개념을 배워야 합니다. 

 

다음과 같은 코드가 순수함수의 예시입니다.

function upper(str){
return str.toUpperCase(); 
//toUpperCase 메소드는 원본을 수정하지 않습니다. (Immutable)


upper('hello');

 

 

Math.random()은 순수함수가 아니다. 왜??

 

Math.random()은 아무런 인자를 입력하지 않았음에도 함수를 호출할 때마다  결과가 매번 달라집니다.

그래서 순수함수가 아닙니다. 만약 순수함수가 되려면 아무런 인자를 입력하지 않아도 출력 결과는 매번 똑같아야 하는거죠.

 

Math.random()의 결과는 다음과 같습니다. 

Math.random();
0.07967273312798584

Math.random();
0.08614769407005318

Math.random();
0.9263392609067878

Math.random();
0.9795463094099406

Math.random();
0.7978819439429943

Math.random();
0.5609384445047261

 

 

 

fetch API를 이용해서 AJAX 요청을 한다고 가정할 경우 이 함수는 순수함수가 아니다. 왜??

 

왜냐하면 fetch api는 실행할 때마다 네트워크의 상황과 서버상태에 따라 응답코드가 달라지기 때문에 예측불가능합니다. 

예를들어 fetch api를 이용해서 서버에 ajax를 요청할 때마다 응답 상태코드가 200, 404, 302 등 달라질 수도 있고 리스폰스에 대한 결과도 계속 달라질수도 있기 때문에 그렇습니다.

 

 

 

 

 

 

 

'Web > React' 카테고리의 다른 글

리덕스의 3가지 규칙  (0) 2023.01.22
리덕스에서 사용하는 키워드  (0) 2023.01.22
React - Effect Hook -(1) 기본  (0) 2023.01.09
React - 배열 메소드 map을 이용한 반복  (0) 2023.01.01
React - JSX란?  (0) 2022.12.20

관련글 더보기