📌 명령형? 선언형?

명령형 프로그래밍

컴퓨터가 수행할 명령들을 순서대로 써 놓은 것.
어떻게 구현하는가를 디테일하게 기술하는 것에 집중되어 있다.

선언형 프로그래밍

무엇을 할 것인지에 집중되어 있다.
대표적인 선언형 프로그래밍은 HTML, SQL 등이 있다.

이해가 잘 안 되는군요...

예시 1. double함수 만들기

double by 명령형

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

• 어떻게 처리하는지에 대한 묘사가 중점적으로 이루어져 있다.
• 내가 코딩 테스트 풀 때 주로 이렇게 풂
• 만약, arr의 입력값의 타입을 숫자로만 한정하고 싶다면?

function double(arr){
        let res=[];
        for(let i=0; i<arr.length; i++){
            if(typeof.arr[i]==="number"){
                res.push(arr[i]*2);
            }
        }
        return res;
}

• 위와 같이 요구사항이 추가될수록 코드가 복잡해지고 유지보수가 힘들어진다.

double by 선언형

//선언형
function double(arr){
    return arr.map(number=>number*2);
}

• 무엇을 원하는지에 대한 묘사가 중점적으로 이루어져 있다.
• 만약, arr의 입력값의 타입을 숫자로만 한정하고 싶다면?

function double(arr){
    return arr.filter(param=>typeof param==="number")
              .map(number=>number*2);
}

• 유지보수가 쉬워지고 사용자가 다루기에도 직관적이다.
• filter, map과 같은 메서드는 명령형 방식이 추상화된 결과이다.
  => filter, map이 정확히 어떤 식으로 작동하는지 몰라도 됨!
• 선언형 프로그래밍적 사고를 함양해야 한다.

예시 2. 토글 버튼 만들기

화면에 버튼 3개 넣고 버튼을 클릭하면 삭선(취소선)이 그어지도록 만들기

토글버튼 by 명령형

• 버튼을 한 개 만들고 싶다!

const $button1 = document.createElement("button");
$button1.textContent = "Button1";

• 버튼 하나 더 만들고 싶은데?
  -ㅇㅋㅇㅋ

const $button1 = document.createElement("button");
$button1.textContent = "Button1";
const $button2 = document.createElement("button");
$button2.textContent = "Button2";

• 버튼을 화면에 출력하자

const toggleButton=($button)=>{
  //대충 버튼이 기본 상태면 삭선 긋고, 아니면 기본상태로 돌리는 로직
}

document.querySelector('#app').appendChild($button1);
document.querySelector('#app').appendChild($button2);
//...

• 이 방식은 버튼을 추가할 때마다 구문이 늘어나면서 코드가 복잡해지고, 기능이 추가될 시 여러 부분을 수정해야 하기 때문에 유지보수가 힘들다.
• 따라서 토글 버튼의 기능이나 동작 등을 하나로 묶어 독립적으로 돌아갈 수 있도록 추상화를 진행해야 한다.

토글버튼 by 선언형

function ToggleButton({ $target, text }) {
  const $button = document.createElement("button");
  // {...}
  $button.addEventListener("click", () => {
    //버튼 기본 상태에서 클릭하면 삭선, 삭선 상태면 기본상태로 변경하는 로직
  });

  this.render = () => {
    $button.textContent = text;
  };
  // {...}
  this.render();
}

const $app = document.querySelector("#app");

new ToggleButton({
  $target: $app,
  text: "Button1",
});

new ToggleButton({
  $target: $app,
  text: "Button2",
});

• 추상화를 통해 버튼의 추가가 되어도 더 많은 코드를 필요로 하지 않는다.
• 여러 기능을 추가할 땐 어떨까?
  ex) 3번 클릭할 때마다 alert띄우기, ToggleButton외에 5초 뒤에 자동 토글되는 버튼 만들기, ButtonGroup 만들기 등...
• 각 기능을 컴포넌트로 만들어 동작하게 하면 추후에 다른 기능을 추가하거나 수정할 때에 해당 기능만 손대면 끝나는 간단한 작업이 된다.
  AKA 유지보수 용이
• 또한, 내부에서 어떻게 동작하는지 알 필요 없이, 만들고 싶은 버튼(토글버튼/타이머버튼)만 new 로 생성해주면 새롭게 생기는 버튼들을 볼 수 있다.

---