명령형 프로그래밍 vs 선언형 프로그래밍

명령형 프로그래밍

무엇을 어떻게 할 것이다.

코드로 원하는 결과물을 얻기 위한 과정에 집중한다.

선언형 프로그래밍

무엇을 할 것이다.

원하는 결과물을 얻기 위한 과정 하나하나보다는 필요한 것들을 기술하는 데 중점을 둔다.

 

level 1에서 바닐라 자바스크립트로 애플리케이션을 만들었을 때는 주로 명령형 프로그래밍을 한 것 같다. 모든 코드는 '어떤 상황에서 어떻게 작동해라!'라는 의도를 가지고 작성되었으니 말이다.

 

아무래도 초심자의 입장에서는 알고리즘을 하나하나 머릿속에서 떠올리며 그 과정을 코드로 작성하다 보니 명령형 코드로 작성하게 되는 것 같다. 그러다가 여러 함수나 메서드를 알게 되면서 지금까지의 코드를 선언형으로 바꿀 수 있다는 것을 알 수 있는 것 같다.

명령형

let string = 'THis is the midday show with Cheryl Waters';
let urlFriendly = "";

for(let i = 0 ; i < string.length ; i++){
    if(string[i] === " "){
        urlFriendly += "-";
    }else{
        urlFriendly += string[i];
    }
}

console.log(urlFriendly);

선언형

const string = 'This is the midday show with Cheryl Waters';
const urlFriendly = string.replace(/ /g, '-');

console.log(urlFriendly);

 

명령형 프로그래밍은 string이 사이사이 공백에 하이픈을 넣기 위한 방법을 하나하나 나열하고 있다.

 

반면, 선언형 프로그래밍은 replace()라는 내장 메서드를 통해 공백 자리에 하이픈을 넣겠다고 한 번에 기술한다. 공백 자리에 하이픈을 넣는 방법은 replace() 라는 메소드 안에 서술되어 있기 때문에, 우리는 치환하는 구체적인 절차보다는 추상화된 메서드만을 사용하여 원하는 결과를 얻을 수 있다.

 

선언형 프로그래밍은, 어떤 일이 발생해야 하는지에 대해서만 알려주고 어떻게 해당 일이 발생하는지 방법에 대한 기술은 추상화 아랫단으로 감춘다.

 

이렇게 보니 선언형 프로그래밍에 대해 다음과 같이 정리할 수 있었다.

1. 선언형 프로그래밍은 원하는 결과물에만 집중하고, 그 과정에 대해서는 추상화를 통해 깊게 알려하지 않는다.
2. 명령형 프로그래밍보다 한눈에 코드가 더 잘 읽힌다. 명령형 프로그래밍의 경우 인간 컴파일러 마냥 한 줄 한 줄 코드를 읽어나가면서 앞으로 어떤 일이 발생할지에 대해 예측한다. 반면 선언형 프로그래밍의 경우 방법은 잘 모르겠지만 어떤 일이 발생할 지 한 순간에 예측 가능하다.
3. 즉, 선언적 프로그래밍이 더 읽기 쉽고 예측이 쉽다.

리액트 JSX

리액트의 JSX는 비 선언적인 부분의 캡슐화를 통해, 명령형 프로그래밍적인 부분을 선언형 프로그래밍적으로 바꾼다.

 

++ 추가)

이 글을 작성할 당시 JSX가 왜 선언형인지 이해하지 못했다. 그런데 이제는 조금 이해한 것 같아서 추가로 글을 써본다. JSX의 문법 자체가 선언형 프로그래밍이라기보다는, JSX를 통해서 우리는 컴포넌트를 표현하고 이 컴포넌트를 사용하는 쪽에서는 <ReviewPage /> 이렇게 쓰게 된다. 

그렇다면 코드를 읽는 개발자는 return 부분을 쭉 보면서 '아 ReviewPage 컴포넌트의 내부 로직을 자세히는 모르겠지만, Review와 관련된 페이지구나!'라고 이해할 수 있다. 이런 점에서 JSX는 선언형 프로그래밍이라고 할 수 있지 않을까?

 

 

출처

• https://boxfoxs.tistory.com/430
• https://velog.io/@hyun_sang/명령형-프로그래밍과-선언적-프로그래밍-비교