JavaScript 에서는 함수형프로그래밍이 대세다? (함수형 vs 객체지향)

 

Why?

 💬 요즘엔 주로 javascript 를 활용하여 개발을 하고 공부를 하고 협업을 하다보니 같은 언어인데도 사람마다 정말 다양한 코드 스타일로 작업을 한다고 느낀다. 보통은 주로 활용하는 라이브러리나 프레임워크가 코드스타일에 영향을 많이 주는 것 같은데, 나의 회사의 경우 프레임워크 없이 프론트엔드 개발을 하고 있어 더욱 멤버들의 자유도가 높다.

그래서 문득 '어떤 이유와 의도로 지금의 방식으로 프로그래밍을 하고있는 것일까?' 라는 생각, '과연 그 방법은 내가 개발하고자 하는 서비스에 최적화되어있을까?' 라는 생각이 들어 함수형과 객체지향에 대해서 간단히 정리를 해 보았다. 그리고 동료들도 다들 어떤 이유로 본인의 스타일을 만들었고 유지하게 되었는지가 궁금해서 이야기를 나눠보았다.

 

 

1. 객체지향형 vs 함수형

• 함수형 프로그래밍 - Functional programming (FP)
• 객체지향 프로그래밍 - Object oriented programming (OOP)

함수형 프로그래밍(FP)은 프로그래밍 패러다임 중 하나이고, 객체 지향 프로그래밍 (OOP)도 프로그래밍 패러다임 중 하나이다. 둘 다 개발 방식의 차이일 뿐 '어떤게 더 낫다'라는 명확한 기준이 있는 것이 아니기 때문에, 본인이 개발하는 서비스와 때에 맞게 잘 활용하는 것이 좋은 선택이라고 볼 수 있다. 

 

 

 

1) 객체지향 (OOP: Object Oriented Programming)

 프로그래밍하려는 대상을 하나의 객체(사물)로 정의하는 설계 방법으로 객체의 관점에서 구조를 만들고 사용하는 방법이다. 객체를 구조화한다는 말은 단순한 자료 구조(변수)를 넘어서 기능(메서드)을 포함한 형태로 객체를 사용하는 것을 의미한다. 객체지향을 지원하는 언어는 여러 가지가 있지만 대표적인 언어로는 Java, C# 가 있다.

 

객체지향방식으로 js 개발을 했을때 나타나는 가장 큰 특징은 객체 내부에 상태변수와 메소드를 가지고 있고, 그들끼리 긴밀한 관계를 맺을 수 있다. 그리고 클래스로 만들어진 인스턴스마다 다른 상태값을 가지고 있기 때문에, 같은 인자값에 대해 다른 결과값이 리턴될 수 있다.

 

function Car() {
  this.power = false;
  this.position = 0;
}

Car.prototype.start = function() {
  this.power = true;
  console.log('자동차 시동');
}

Car.prototype.moveTo = function(position) {
  console.log(`자동차 이동 = 현재 위치: {${this.position}}`);

  if (!this.power) {
    console.log('자동차의 시동이 꺼져있습니다.');
    return;
  }

  this.position = position;
  console.log(`자동차 이동 = 이동 위치: {${this.position}}`);
}

const car = new Car();
car.start();
car.moveTo(10);

 

 

2) 함수형 (FP: Functional Programming)

 프로그래밍하려는 문제를 함수들의 정의와 조합을 통해서 해결하는 프로그래밍 방법이다. 정확히는 함수의 개념을 최우선적으로 사용해서 모든 문제를 해결하는 프로그래밍 기법으로, 장점은 언제든 결과가 동일한 함수를 사용할 수 있고 그 함수를 이용해 조합성을 높일 수 있다는 점이다.

 

함수형의 경우 전달받은 인자값을 중심으로 결과값을 반환하는 간결한 방식으로, 데이터를 함수 내부에서 따로 저장하거나 하지 않는다. 그리고 한 번에 하나의 작업만 수행하는 함수들의 조합으로 로직을 처리한다.

 

function start(car) {
  car.power = true;
  console.log('자동차 시동');
}

function moveTo(car, position) {
  console.log(`자동차 이동 = 현재 위치: {${car.position}}`);

  if (!car.power) {
    console.log('자동차의 시동이 꺼져있습니다.');
    return;
  }

  car.position += position;
  console.log(`자동차 이동 = 이동 위치: {${car.position}}`);
}

const car = { power: false, position: 0 };
start(car);
moveTo(car, 10);

 

 

 

결국 차이는? 설계의 관점이다!

객체지향은 "객체" 중심의 설계를 하는 반면 함수형은 "함수" 중심의 설계를 한다.

// 객체지향 프로그래밍
bus.start();
bus.moveTo(10);

// 함수형 프로그래밍
start(bus);
moveTo(bus, 10);

 

 나는 사실 개인적으로 자바로 개발을 입문했기때문에 '객체지향적인 사고'가 익숙했고, Javascript 를 잘 활용하는 방법에 대해서 처음 고민했을때도 es6 문법에서 나온 클래스를 잘 활용하여 명령형으로 기능을 구성하는게 좋다고 생각을 했었다. 

 

하지만 그렇게 자바스크립트를 만나고 아주 당황했다. 객체 지향의 관점에서 class는 어디 있지? interface는 어디 있지?  private, protected가 없으면 캡슐화는 어떻게 하지? 등. 그리고 가장 간단하게 객체지향 방식으로 구현한 코드를 동작시키다가 마주한 문제는 'this' 를 바인딩하여 활용하는 데에서 오는 문제였다. this 는 선언된 시점이 아닌, 호출된 순간의 환경에 따라 다른 값이 할당되기 때문에 호출되는 과정중에 상태의 변화가 생기면 결과 값이 다르게 나타났다.

 

그렇게 해당 기능의 구현방식에 대한 문제점을 느껴 함수형 컴포넌트로 리팩토링을 해보았다. 전달받은 인자값(props) 이 this 처럼 호출 시점과 상관없이 바뀔일이 없기 때문에 컴포넌트의 버그도 발생하지 않았고, 무엇보다 클래스형 보다 작성할 코드량이 확 줄고 가독성도 좋아졌다. 사실 해보면서 직접 느낀게 가장 크긴 했지만, JS 라는 언어의 특성과 탄생배경을 완전히 이해하지 않고 'java의 방식대로 문법만 바꾸면 되는거 아닌가' 라고 생각해서 익숙한 구조를 사용했던 것을 반성하게 되었다. 그리고 js 의 탄생 배경부터 다시 알아보았다.

 

 

 

 

2. Javascript 의 탄생비화

 자바스크립트도 객체지향의 패러다임이 가장 핫한 시기에 만들어진 언어니 객체지향의 영향을 받지 않을 수 없었다고 한다. 웹 브라우저에서는 처음부터 복잡한 언어를 만들 생각이 없었고, 그저 아주 간단하고 작은 형태의 스크립트 언어면 될 거라고 생각을 했다고 한다. Javascript를 창시한 Brendan Eich는 언어를 개발할 당시 유행하던 객체지향에 한계를 느끼고 LISP, scheme 등 함수형 프로그래밍에 관심을 가지고 있었기에, 함수형 프로그래밍의 형태로 언어를 만들고 싶어 했다고 한다. 그래서 복잡한 class나 설계, 추상화나 다형성 등을 만들고 싶지 않았지만, 당시 가장 인기가 있었던 Java 개발자들을 끌어들이고 싶었기 때문에 Java의 문법과 패러다임은 최대한 유지를 해보고자 노력했고 class가 없는 함수형 언어를 기반으로 하지만, 객체 지향 프로그래밍 맛을 느낄 수 있는 둘의 혼종의 형태로 세상에 나오게 되었다고 한다.

 

 결론적으로는 Javascript는 객체지향과 함수형의 2가지 관점을 모두 가지고 있는 언어기에 이러한 밸런스를 잡는 것이 중요하다. 데이터와 메소드를 기반으로 작은 문제를 독립적으로 해결할 수 있는 작은 프로그램을 만들어 코드의 재사용을 높이고, 개발과 유지보수를 편하게 할 수 있다는 간결한 문법의 장점은 취하고, 객체를 연결하는 과정에서 과도하게 객체지향을 통해 만들어진 복잡한 구조를 만들지 않도록 지양하고, 적절한 선 안에서 함수형 프로그래밍이 가지고 있는 장점과 결합하는 것이 현대 Javascript에서 객체지향 프로그래밍을 잘한다라고 볼 수 있다.

 

 

3. 다른 동료들은 어떻게 생각할까?

 문득 다른 동료들은 어떤 생각을 갖고있는지 궁금해서, 팀 톡에서 관련 주제로 이야기를 나눠보자고 제안했는데, 7명의 동료들이 함께 열띈 토론을 진행하게 되었고, 정말 많은 의견교류가 오갔다.

그리고 실제 팀원들의 사례중 어떤 기능과 어떤 구현부에서 함수형/객체지향이 잘 맞는다고 생각하고 잘 안맞는다고 생각이 들었는지도 공유할 수 있는 기회가 되었다. 요즘 특히나 js 작업 빈도가 높아져서 어느 때에 어떤 방식을 써야하는지 혼자 생각하고 구현하며 시행착오를 겪곤했는데, 그 날 공유된 팀원들의 방식도 적용해봐야겠다.

 

 

 

 

 

 

 

참고: https://yozm.wishket.com/magazine/detail/1396/