명령형 프로그래밍

컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다.
어떤 방법으로 하느냐에 포커싱
ex) 웹 페이지를 만들 때, 어느 DOM에 접근해서 그 DOM의 Text를 어떻게 바꾸고 그 DOM의 어느 속성이 어떤 값일 때는 이렇게 동작하게 해라 라는 식의 프로그래밍

function double(arr) {
  // 명령형
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(arr[i] * 2);
  }
  console.log(result);
}

어떻게 처리하는지에 대한 묘사
ex) for문을 돌면서 result 배열에 곱한 값들을 추가해라

선언형 프로그래밍

대표적인 선언형 프로그래밍: HTML, SQL
무엇을 나타내야하느냐에 포커싱
복잡한 화면을 그리는 코드를 짜지 않아도, 무엇을 그릴 것인가, 무엇을 표현할 것인가를 선언하는 것으로 화면을 그릴 수 있다.

function double(arr) {
  // 선언형
  console.log(arr.map((num) => num * 2));
}

무엇을 원하는지에 대한 묘사
ex) num에 2를 곱한 값을 원한다.

다른 예시

const cats = [
  {
    name: "gona",
    colors: ["black", "white"],
    age: 2,
    ear: "folded",
  },
  {
    name: "nona",
    colors: ["gray", "white"],
    age: 12,
    ear: "folded",
  },
  {
    name: "dona",
    colors: ["yellow", "white"],
    age: 7,
    ear: "unfolded",
  },
  {
    name: "lona",
    colors: ["pink", "white"],
    age: 5,
    ear: "unfolded",
  },
  {
    name: "mona",
    colors: ["black", "white"],
    age: 6,
    ear: "folded",
  },
];

... 필터링 함수


filterCats1(cats);
filterCats2(cats);

위와 같은 데이터가 있을 때,

명령형 프로그래밍의 코드

function filterCats1(cats) {
  const result = [];
  for (let i = 0; i < cats.length; i++) {
    if (cats[i].ear === "folded" && cats[i].colors.includes("black")) {
      result.push(cats[i].name);
    }
  }
  console.log(result); // [ 'gona', 'mona' ]
}

선언형 프로그래밍의 코드

function filterCats2(cats) {
  console.log( // [ 'gona', 'mona' ]
    cats
      .filter((cat) => cat.ear === "folded" && cat.colors.includes("black"))
      .map((cat) => cat.name)
  );
}

출처

프로그래머스 데브코스