명령형과 선언형 차이[이론]

1. 명령형 스타일에서 함수를 사용하는 경우

명령형 스타일은 **"어떻게 수행할지(how)"**를 세부적으로 명시합니다. 함수로 분리하여 코드를 더 읽기 쉽게 만들 수도 있지만, 여전히 실행 순서와 상태 관리를 명확히 드러냅니다.

예제

// 명령형: 함수로 분리
function calculateSum(numbers) {
  let sum = 0; // 상태를 명시적으로 관리
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i]; // 명령형 루프
  }
  return sum; // 최종 결과 반환
}

const numbers = [1, 2, 3, 4, 5];
const sum = calculateSum(numbers);
console.log(sum); // 출력: 15

특징

• 명령형 스타일은 반복문, 변수 업데이트와 같은 상태 변경을 직접 명시합니다.
• 함수로 분리했더라도 내부적으로 루프와 상태 변화가 명시적으로 나타나며, 이를 통해 결과를 계산합니다.
• 코드의 논리 흐름이 "각 단계별로 명확하게 보이는" 방식입니다.
• 명령형의 본질: "어떻게 동작할지"를 세부적으로 기술합니다.

---

2. 선언형 스타일

선언형 스타일은 **"무엇을 수행할지(what)"**에 초점을 맞춥니다. 내부의 반복이나 상태 관리는 추상화되어 있으며, 데이터 변환과 결과 생성에 집중합니다.

예제

// 선언형
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 출력: 15

특징

• 선언형 스타일은 루프와 상태 변경을 직접 명시하지 않습니다.
• 내부적으로 반복은 진행되지만, 이는 reduce 메서드 내부에 추상화되어 보이지 않습니다.
• 함수형 프로그래밍의 본질: 상태 관리보다는 데이터를 선언적으로 조작하는 데 초점을 맞춥니다.
• 코드가 짧고 간결하며, 의도를 바로 이해하기 쉽습니다. ("숫자를 모두 더한다"는 목표만 명확히 드러남)

---

3. 차이점 정리

특징 명령형 스타일 (함수 포함) 선언형 스타일

초점	"어떻게 수행할지" (상태 관리와 절차 중심)	"무엇을 수행할지" (목표와 데이터 변환 중심)
상태 관리	명시적 변수(예: sum)로 상태 변경	상태 변경 추상화 (reduce 내부에서 관리)
코드 가독성	논리 흐름은 명확하지만 더 장황할 수 있음	짧고 간결하며 목적이 더 명확함
유연성	로직이 명시적이므로 복잡한 요구사항을 쉽게 처리 가능	간단한 데이터 변환에는 적합하나 복잡한 로직은 어렵거나 비효율적
추상화 수준	낮음 (루프와 상태 변화가 보임)	높음 (루프와 상태 변화가 숨겨짐)

---

4. 더 복잡한 상황에서의 차이 예시

명령형 함수

function filterAndSum(numbers) {
  let filtered = [];
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) { // 짝수 필터링
      filtered.push(numbers[i]);
    }
  }

  let sum = 0;
  for (let i = 0; i < filtered.length; i++) {
    sum += filtered[i]; // 합산
  }

  return sum;
}

const numbers = [1, 2, 3, 4, 5, 6];
console.log(filterAndSum(numbers)); // 출력: 12

• 상태(filtered와 sum)를 명시적으로 선언하고, 여러 단계를 거쳐 값을 계산합니다.
• 필터링과 합산 과정이 분리되어 절차적 흐름을 보여줍니다.

---

선언형 함수

const numbers = [1, 2, 3, 4, 5, 6];

const sum = numbers
  .filter(num => num % 2 === 0) // 짝수 필터링
  .reduce((acc, curr) => acc + curr, 0); // 합산

console.log(sum); // 출력: 12

• 필터링과 합산 과정을 하나의 선언형 체이닝으로 표현합니다.
• 상태 관리를 직접하지 않고 데이터 흐름에만 집중합니다.

---

5. 결론

• 명령형 함수: "어떻게 이 작업을 할 것인지?"를 명확히 정의하며, 로직이 세부적으로 드러납니다. 복잡한 상태 관리가 필요하거나 디버깅이 중요한 경우 적합합니다.
• 선언형 스타일: "어떤 결과를 얻고 싶은가?"에 초점을 맞추며, 코드를 간결하고 읽기 쉽게 만듭니다. 데이터 흐름이 단순한 경우 적합합니다.