logo

Photo: AI Generated by @luasenvy © CC BY 4.0

정직한 함수, 사이드 이펙트, 상태 변경 그리고 이벤트 전파

Chapter 20

#33가지 자바스크립트 컨셉

87 조회

0 추천

1,519 단어

8분 예상

2024. 08. 19. 게시

2025. 08. 20. 수정

luasenvy 작성

CC BY-SA 4.0 국제규약

Pure Function

직역하자면 순수 함수로 표현할 수 있으나 어감이 이상해서 정직한 함수라고 의역했다. 정함수라고 하면 딱 좋을 것 같았지만 수학쪽에서 이미 사용하고 있는 명칭과 중복되어 마땅치는 않았다. 의미적으로 해석하여 결정함수라고 이야기할 수도 있겠지만 Pure라는 단어와는 거리가 있어보인다. 많은 곳에서 직역한 "순수 함수" 라고 사용하기는 하지만 이 문서에서는 최대한 명칭에 대해서는 언급하지 않고 Pure Function 원어 그대로 사용하는 것이 좋아 보인다.

function multipy(x: number): number {
  return x + 5;
}

예를 들어 위 함수는 입력값 x에 따라서 결과값이 정해진다. 입력값이 2면 항상 7이 출력될 것이다. 이렇게 Pure Function은 x라는 입력에는 항상 y라는 값이 나오는 함수를 말한다. 조금 더 풀자면 입력에 따라 결과값이 정해진 함수라고도 할 수 있다.

async function pure() {
  return fetch('some/api/call');
}

그렇다면 위 함수는 Pure Function 인가? 출력과 동작에 대해서만 본다면 그렇다고 착각할 수 있겠지만 API 서버가 어느날 갑자기 오류를 뱉어낼 수도 있고 URL이 변경되어 더 이상 유효하지 않을 수 있다. Pure Function은 이런 외부적인 요인side effect에서도 자유로워야 한다. 언제나 x가 입력되면 y가 출력된다는 보장이 있어야 비로소 Pure Function이라고 할 수 있다.

외부의 영향을 받지 않게 하기 위해서 함수는 자체적으로 모든 기능을 포함해야 하고 이는 필연적으로 폐쇄성을 높인다. 이로 인하여 가독성, 테스트 용이성, 병렬 실행 적합성, 모듈 재사용성, 참조 투명성들을 확보할 수 있다. 모든 함수들이 입력에 의해 결정된 값을 출력하고 외부요인을 배제할 수 있기 때문이다.

그러나, 모든 함수들을 Pure Function으로 작성하기에는 현실적으로 불가능하다. 모든 것이 폐쇄적이고 외부영향을 주거나 받을 수 없기 때문에 눈에 띄는 효과를 만들어낼 수 없을 것이기 때문이다.

그럼에도 Pure Function은 함수형 프로그래밍에서 가장 기본이 되는 개념이다. 외부와의 상호작용을 최소화하고 보다 더 간결하면서 예측가능한 함수를 작성하는 것이 바람직하다. 당장 휴가를 가고 싶다면 다른 사람이 보더라도 쉽게 파악할 수 있어야 한다.

상태 변경

  • 값이 바뀌면 Side Effect의 원인이 된다.
  • 값이 바뀌면 마지막 값 밖에 모른다.
  • 값이 바뀌는 것을 예측할 수 없다.

이 챕터는 값의 변경에 대한 이야기다. 위 세가지 항목을 중심으로 덮어두고 바꿔쓰면 폐가망신을 못 면한다는 이야기이다. 어찌보면 당연한 이야기인데 값을 바꾸지 않을 거면 뭐하러 프로그램을 만드냐고 반문할 수 있겠지만 습관이나 관례에 대한 이야기이니 한 번 읽어보고 자신이 선호하는 방식을 이어나가는 것이 좋다고 생각한다.

지금은 TypeScript와 같은 좋은 도구들을 사용하기 때문에 조금 생소한 이야기일 수도 있겠지만 JavaScript 자체는 정해진 자료형이 없다. 시작할 때 var a = 1 이라고 했다가 끝날 때 쯤에 몰래 a = '속았지 요놈아' 라고 해도 전혀 문제가 없다. 물론, 변수 a를 재할당하여 사용하는 것은 메모리를 재사용한다는 이야기며 이것은 분명 성능에 도움이 되며 이러한 기법을 중요시 해야하는 다양한 분야의 프로그램이 있는 것도 사실이다. 그렇다. 이 이야기는 프론트엔드에 대한 이야기이며 그렇기에 논조가 더 강한 것이다.

우리는 21세기를 살고 있다. 메모리는 저렴하며 프론트엔드의 작은 부분들에서 어떤 객체가 복사되는지 따위는 중요치 않고 가비지 컬렉터가 자동으로 구동되어 메모리 누수 걱정은 잊은지 오래됐다. 이 배경을 바탕으로 값value지향 프로그래밍을 해야 한다는 주장이다.

값의 변형으로 인해 변수는 가치value를 잃고 그저 메모리 주소를 나타내는 지시자로 전락했다는 것이 골자이다. 이를 타파하기 위해 오래된 관습을 버리고 값을 한 번 지정하면 그대로 쓰라는 말이다. 자꾸 주물럭 거려서 복잡하게 만들지 말고 객체면 새로 복사해서 쓰고 변수면 하나 더 할당하라는 이야기다. 더 쉽게 이야기 해서 선언하면 바꾸지 말라는 말이다. 어차피 지구상에 메모리가 넘쳐나니까 말이다.

Rich Hickey의 강연을 소개하면서 이 챕터는 마무리 짓도록 하자.

이벤트 전파

Event Propagation

Event Propagation 저작자: luasenvy
이 저작물은 "CC BY 4.0 국제규약" 라이선스로 배포되었습니다.

CC BY 4.0 국제규약

HTML에서의 이벤트 전파는 캡쳐링과 버블링 두 단계로 나뉜다. 하나의 요소에 대한 이벤트가 발생하면 HTML 최상위 부터 해당하는 요소까지 순차적으로 캡쳐링 이벤트가 발생한다. 그리고 요소부터 다시 최상위까지 순서대로 버블링 이벤트가 발생한다.

33가지 자바스크립트 컨셉 시리즈