명령형(Imperative) vs 선언형(Declarative) 프로그래밍

프론트엔드 개발을 시작할 때, “명령형과 선언형 프로그래밍”이라는 용어를 종종 듣게 됩니다.
이 글에서는 두 개념의 차이를 간단히 알아보고, 자바스크립트 예시를 통해 감을 잡아봅시다.

---

1. 개념 정리

• 명령형(Imperative) 프로그래밍
  “어떻게(How)” 동작할지를 직접 단계별로 지시하는 방식입니다.
  예를 들면, 배열을 순회하는 코드에서 반복문(for, while)을 돌고 if문으로 조건을 확인한 뒤, 일치하면 push로 새 배열에 넣는 식으로 모든 과정을 명시하는 스타일이죠.
• 선언형(Declarative) 프로그래밍
  “무엇을(What)” 만들고 싶은지를 의도 위주로 작성합니다.
  내부적으로 반복문이 어떻게 돌아가는지는 추상화하고, “이 조건에 맞는 결과가 필요하다”처럼 결과만 선언합니다. 예를 들어 Array.prototype.filter 같은 내장 함수를 활용해 “10보다 작은 숫자만 걸러내”라고 쓰면, 조건 외의 나머지 로직(반복, 조건체크, 새로운 배열 생성)은 숨겨집니다.

결국, 명령형은 직접 모든 로직 흐름을 통제하고, 선언형은 목표(결과)를 서술한 뒤 구체적인 실행 방법은 내부에서 알아서 처리하도록 맡긴다는 차이가 있습니다.

---

2. 자바스크립트 예제

예제 1) 배열 필터링

배열 numbers에서 10보다 작은 값을 추려내는 간단한 코드를 보겠습니다.

명령형 코드는 이렇게 작성할 수 있어요:

function filterLessThanTen(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < 10) {
      result.push(arr[i]);
    }
  }
  return result;
}

const numbers = [1, 30, 2, 7, 11, 25];
console.log(filterLessThanTen(numbers)); 
// 결과: [1, 2, 7]

• for 루프와 if 조건을 직접 작성해, “어떻게 순회하고, 언제 값을 넣을지”를 직접 지정합니다.

선언형 코드는 filter 메서드를 이용합니다:

function filterLessThanTen(arr) {
  return arr.filter(item => item < 10);
}

const numbers = [1, 30, 2, 7, 11, 25];
console.log(filterLessThanTen(numbers));
// 결과: [1, 2, 7]

• “10보다 작은 항목만 걸러내겠다”라는 의도를 한 줄로 명시해놓고, 구체적인 반복/조건 검사 로직은 filter가 대신 알아서 처리합니다.

예제 2) DOM 업데이트

간단히 문자열 배열을 HTML 리스트로 표시하는 방식을 비교해봅시다.

명령형 구현 (바닐라 JavaScript):

const fruits = ['Apple', 'Banana', 'Cherry'];
const listEl = document.createElement('ul');

fruits.forEach(fruit => {
  const li = document.createElement('li');
  li.textContent = fruit;
  listEl.appendChild(li);
});

document.getElementById('app').appendChild(listEl);

• DOM 요소를 일일이 만들고, 텍스트와 부모 요소를 설정하는 과정을 순서대로 명령합니다.

선언형 구현 (React):

function FruitList({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

// 사용 예
function App () {
 return <FruitList items={['Apple', 'Banana', 'Cherry']} />,
}

• “이 컴포넌트는 주어진 배열을 <ul> 안에서 <li>로 보여준다”라고 결과만 선언합니다. 실제 DOM 생성과 업데이트는 React 라이브러리가 내부적으로 처리해줍니다.

---

마무리

이전에는 React와 같은 라이브러리 없이 모든 내용을 일일이 구현해야 했다면, 이제는 React 같은 라이브러리를 통해 구현 원리보다는 무엇을 구현할지에 좀 더 집중할 수 있게 되었죠. 무엇보다도 이러한 선언형 구현을 통해 다수의 인원과 협업하는 환경에서 팀원들의 코드를 보다 쉽게 이해하고 유지보수할 수 있습니다.

코드도 어떻게 보면 하나의 언어로서 컴퓨터와 의사소통하고, 팀원들과 의사소통하는 커뮤니케이션의 요소라고 생각합니다. 선언형 프로그래밍을 통해 보다 원활한 커뮤니케이션을 지향할 수 있다고 생각합니다.