Side Effect

보통 side effect(부작용)가 있다라는건 부정적인 의미로 사용된다.
프로그래밍에서 side effect(부작용)은 주된 효과 외에 추가적으로 발생하는 효과라고 할 수 있다.

이 말이 무슨 말이냐...
좀 더 풀어서 이해해 보자면 부작용은 "부수 효과" 라고도 할 수 있다. 주요한 효과에 따라서 발생하는 효과라고 할 수 있다. 감기약을 예로 들 수 있는데 감기약의 주된 효과 는 감기를 낫게하는 것. 그러나 감기약을 먹고 졸음이 오는 것은 부작용 이라고 한다. 이렇게 부정적일 수도있는 결과를 유발하는 경우가 많아 부정적인 뉘앙스가 있지만 부작용의 용어 자체만으로는 그저 "주요한 효과 외에 부수적으로 발생하는 효과" 라는 말이다.

Side Effect 예시

• 순수 함수

const sum = (x) => {
  return x + 1;
};

위 sum 함수는 x라는 input을 받아서 x+1이라는 output을 산출하는 함수다. 이런 sum함수는 input을 받아서 output을 내는 행위 외에 다른 행위를 하지 않으므로 side effect가 발생하지 않는 "순수 함수" 라고 한다.

• side effect함수

const num = 1;

const sum = (x) => {
  return x + num;
};

순수 함수와는 다르게 외부의 값인 num을 읽어오고 있다. 이처럼 함수가 내부의 값(local state)를 제외한 나머지 값(non local state)들을 읽어올 때 side effect가 있다고 말한다.

• 외부 상태 변경

const printNum = (x) => {
  console.log(x);
};

const changeTitle = (newTitle) => {
  const title = document.getElementById('title');

  title.innerText = newTitle;
};

흔하게 생각하는 외부의 값은 변수만을 생각하기 쉽다. 그러나 DOM을 조작하고, console에 특정문자를 출력하느 행위 또한 함수 외부에 존재하는 DOM과 console의 상태를 변형시키는 것이기에 side effect가 발생한다고 할 수 있다.

정리

위 내용들을 정리 하자면
프로그래밍에서 side effect란?
"외부의 값을 읽어오는 행위"
"외부의 값을 변경하는 행위"
라고 할 수 있다.