JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result">0</div>

<button id="btn1" type="button" data-value="2">2씩 더하기</button>
<button id="btn2" type="button" data-value="2">2씩 빼기</button>

JavaScript

function counter (startNum) {
  // value - 계산 된 값을 가지는 변수
  // 이 값을 내부 함수들이 계속 참조하기 때문에 사용 후에도 없어지지 않음
  var value = startNum || 0;
  
  // _plus - 더하기를 계산하는 내부 함수
  function _plus(num) {
    value+= num;
    return value;
  }
  // _minus - 빼기를 계산하는 내부 함수
  function _minus(num) {
  	value-= num;
    return value;
  }
  
  // 함수 실행 시 객체를 반환
  return {
    // plus - 함수 _plus를 실행 후 반환 사용은 counter.plus의 형태로
    plus: function(num) {
      return _plus(num);
    },
    // minus - 함수 _plus를 실행 후 반환 사용은 counter.plus의 형태로
    minus: function(num) {
      return _minus(num);
    }
  }
}

// count - return 값을 사용하기 위해 함수를 실행하여 할당
var count = counter(0);
// elements
var resultEl = document.getElementById('result');
var btnEl1 = document.getElementById('btn1');
var btnEl2 = document.getElementById('btn2');

// 버튼 이벤트 바인딩
btnEl1.addEventListener('click', function(){
  var value = parseInt(this.getAttribute('data-value'));
  var sum = count.plus(value);
  
  resultEl.textContent = sum;
});
btnEl2.addEventListener('click', function(){
  var value = parseInt(this.getAttribute('data-value'));
  var sum = count.minus(value);
  
  resultEl.textContent = sum;
});

// count의 구조를 참고
console.log(count)