[JavaScript]명령형 프로그래밍, 선언적 프로그래밍

프로그래밍 패러다임은 프로그램 개발 방법론을 의미합니다.

그림에서 확인할 수 있듯이 현재까지 수많은 프로그래밍 패러다임이 탄생했으며, 지금도 다양한 연구를 통해 새로운 패러다임을 만들어 나가고 있습니다.

개발자는 본인이 사용하는 프로그래밍 언어와 해당 언어의 패러다임을 이해하여 올바른 프로그램을 개발하는 자세를 갖추어야 합니다.

 

수많은 패러다임이 존재하지만, 이번 포스팅에서는 선언적 프로그래밍(declarative programming)과 명령형 프로그래밍(imperative programming)에 대해 설명을 합니다.

---

선언적 프로그래밍

목표를 달성하기 위해 과정보다는 필요한 기술을 우선 중점으로 프로그래밍을 하는 스타일입니다.

함수형 프로그래밍은 선언적 프로그래밍에 포함됩니다. 즉, 선언적 프로그래밍이 함수형 프로그래밍보다 폭넓은 개념이라고 할 수 있습니다.

 

명령형 프로그래밍

목표를 달성하기 위한 과정에 중점을 두는 프로그래밍 스타일입니다.

---

코드로 비교하기

아래 문자열에서 모든 공백을 언더바( _ )로 변경하는 코드를 선언적 프로그래밍과 명령형 프로그래밍으로 작성해봅니다.

var sampleString = '광고 많이 클릭해주세요.';

 

명령형 프로그래밍으로 작성하기

var sampleString = '광고 많이 클릭해주세요.';
var replaceString = '';

for (var loop = 0; loop < sampleString.length; loop++) {
  // 공백일 경우
  if (sampleString[loop] === ' ') {
    replaceString += '_';
  }
  // 공백이 아닐 경우
  else {
    replaceString += sampleString[loop];
  }
}

console.log('sampleString : ' + sampleString);
console.log('replaceString : ' + replaceString);

결과

문자열의 길이만큼 루프를 실행하여 공백을 만나면 '_'를 대입합니다.

이러한 방식은 타인이 보았을 때, 로직을 한 눈에 파악할 수 없으며, 코드가 길어질수록 주석 문을 통해 설명을 많이 작성해야 하는 문제가 발생합니다.

 

선언적 프로그래밍으로 작성하기

var sampleString = '광고 많이 클릭해주세요.';
var replaceString = sampleString.replace(/ /g, '_');

console.log('sampleString : ' + sampleString);
console.log('replaceString : ' + replaceString);

결과

replace 함수를 사용해서 모든 공백을 언더바로 변경합니다. 타인이 보았을 때, replace함수가 어떻게 동작하는지 몰라도 'replace함수가 공백을 언더바로 변경 하구나'라고 추론할 수 있습니다. 실제로 replace함수가 작업을 처리하는 방법은 추상화로 감춰집니다.

추상화
복잡한 부분은 감추며, 핵심적인 기능 또는 기술만 간추려 내는 것 입니다.
복잡한 부분 = replace함수의 동작 방식
핵심적인 기능 또는 기술 = replace함수의 사용 방식

선언적 프로그래밍 방식으로 작성한 코드는 명령형 프로그래밍 방식으로 작성한 코드보다 더 간결하며 한 눈에 파악이 가능합니다.

---

React와 연관지어 생각하기

'좋아요' 버튼을 클릭했을 경우 배경색이 회색이면 푸른색으로 변경되고 회색이면 푸른색으로 변경되는 코드를 JQuery와 React로 코드를 작성해봅니다.

 

JQuery에서 명시적으로 작성한 코드

JQuery로 작성한 코드는 버튼을 클릭하면 현재 화면의 상태를 체크 후 배경색을 변경합니다. 처리해야 하는 로직이 길어질수록 코드가 복잡해지고 기능이 추가되는 경우 대규모로 수정을 해야 하는 경우가 발생합니다.

// '좋아요'를 클릭했다.
if( user.likes() ) {
    // 현재 푸른색일 경우
    if( hasBlue() ) {
        // 푸른색 -> 회색
        removeBlue();
        addGrey();
    } 
    // 현재 푸른색이 아닐 경우
    else {
        // 회색 -> 푸른색
        removeGrey();
        addBlue();
    }
}

 

React 컴포넌트를 사용하여 선언적으로 작성한 코드

React로 작성한 코드는 좋아요 상태에 따라서 다른 컴포넌트를 호출하면 됩니다.

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

React를 사용한 적이 없더라도 현재 상태(this.state.liked)에 따라서 호출하는 컴포넌트가 다르다는 것을 추론할 수 있습니다.