Front End 에서의 Clean Architecture 관련 글을 보던 중, Side Effect 에 대한 개념이 확실하지 않아서 관련 글을 정리해보려한다.
Side Effect
Side Effect 는 '부수 효과' 로 함수 내에서의 코드가 함수 외부에 영향을 미치는 경우 해당 함수는 Side Effect 가 있다고 한다.
Side Effect 는 의도하지 않은 결과를 의미한다.
예시로 foo 라는 전역변수를 bar 라는 함수가 수정하는 코드이다.
let foo = 'Hello World'
function bar(){
foo = 'hello';
}
bar() bar 함수를 호출하게 되면 bar 함수는 상위 스코프에 있는 foo 라는 전역변수를 변경하게 된다.
이처럼 함수 내에서의 코드가 함수 외부에 영향을 미치는 것을 Side Effect 라 하고, bar 함수는 Side Effect 를 발생시킨다고 할 수 있다.
Pure Function
Pure Function 은 '순수 함수' 로 오직 함수의 입력만이 함수의 출력 결과에 영향을 주는 함수를 말한다.
또한 Side Effect 역시 없어야 한다. 순수함수는 의도치 않은 결과를 만들면 안되기 때문에
순수함수는 Side Effect 를 줄이고 모듈화 수준을 높이는 함수형 프로그래밍에서 순수함수는 평가 시점이 무관하기 때문에 효율적인 로직을 구성할 수 있다.
function upper(str){
return str.toUpperCase(); // Immutable
}
upper('hello');위 예시는 순수 함수의 예시로 upper() 함수는 입력받은 str 의 원본을 바꾸지 않는 Immutable 한 속성이기 때문에 순수함수라고 할 수 있다.
추가로 fetch API 를 사용하여 AJAX 요청을 하는 함수는 순수함수가 아니다.
fetch api 는 실행할 때마다 네트워크 상황, 서버 상태 등에 따라 응답이 달라지기 때문에 결과가 다르다.
요청할 때마다 응답 상태코드가 200, 400 등으로 달라질 수 있고 res 에 대한 데이터 결과값도 달라질 수 있기 때문이다.
