[Javascript] 명령형 vs 선언형 프로그래밍

Imperative Programming VS Declarative Programming

 

 

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

 

리액트와 Javascript를 접하다보면 명령형 프로그래밍과 선언형 프로그래밍을 만나게 된다. 프로그래밍 하는 방식에도 차이가 있나 싶을 때 쯤, 리액트의 장점 중 하나가 선언형 프로그래밍이라는 말까지 듣게 되고, 혼란이 생긴다. 위키백과를 찾아봐도 혼란만 가중된다. 도대체 두 프로그래밍의 차이는 뭘까?

 

위키백과에서는 명령형 프로그래밍과 선언형 프로그래밍의 차이를 애매모호하게 설명해놓고 있다.

 

명령형 프로그래밍은 무엇을 어떻게 할 것인지에 집중한다.
선언형 프로그래밍은 무엇을 할 것인지에 집중한다.

 

개발자 입장에서 볼 때 명령형 프로그래밍과 선언형 프로그래밍을 이해하는 것은 코드를 작성하는 스타일의 차이 보다는 사용하는 프레임워크에 좌지우지 된다.

 

실생활에서 명령형 프로그래밍과 선언형 프로그래밍을 구분해보자.

 

집으로 돌아오는 길 이미 많은 차가 주차되어 있고, 주차할 자리를 매의 눈으로 찾아야 한다. 이 때 주차하는 과정을 프로그래밍 한다면 두가지 선택지가 있다. 

① 앞으로 100m 직진 후 좌회전, 우회전, 우회전, 40m 전진 후 3번 슬롯에 주차.

② A주차장 3번째 1열에 주차한다.

 

프로그램의 결과는 '주차'를 하는 것이다. 어떻게 주차를 하는지 보다 주차를 할 것에 집중하는 방식이 선언형 프로그래밍인 반면, 어떻게 주차를 하는지에 대한 설명이 명령형 프로그래밍이다.

 

 

선언형 VS 명령형 소스 코드로 이해하기

 

모든 배열의 요소를 제곱한 배열을 리턴하려고 한다. 이를 소스코드로 구현하면 명령형 프로그래밍은 배열의 요소를 제곱하는 로직이 주를 차지할 것이고, 선언형 프로그래밍은 제곱한 배열을 리턴하는데 집중한다.

 

먼저 명령형 프로그래밍은 배열을 순회하면서 제곱한 요소를 추출하고 새로운 배열에 한요소씩 담아서 리턴하는 로직으로 구현할 수 있다. 

function doubleMul(arr){
	let resultArr = [];
	for(let i=0; i<arr.length; i++){
    	resultArr.push(arr[i]*arr[i]);
    }
    
    return resultArr;
}

 

반면 선언형 프로그래밍은 Javascript의 배열 내장 함수인 map() 메소드를 사용해서 간단하게 위와 같은 로직을 구성할 수 있다.

function doubleMul(arr){
	let resultArr = arr.map((item)=>{return item*item})
    
    return resultArr;
}

 

여기서 선언형 프로그래밍은 무엇을 할 것인지에 대해 집중한다. 반면 명령형 프로그래밍은 어떻게 하는지에 집중하고 있다. 만약 Javascript 언어가 익숙한 사람이라면 선언형 프로그래밍이 코드의 본 목적을 확인하는데 훨씬 유용하다.

 

선언형 프로그래밍의 장점

 

HTML의 소스도 이와 같은 맥락으로 이해할 수 있다. 복잡한 HTML 소스와 CSS가 엉켜있는 소스는 명령형 프로그래밍이다. 무엇보다 어떻게 소스를 구현하는지에 집중하고 있기 때문이다.

 

하지만 리액트의 경우 복잡한 소스코드를 컴포넌트화 시키고, 어떤 화면과 기능을 구현할 것인지에 더욱 집중하고 있기 때문에 새로운 패러다임으로 주목받고 있는 것이다.

 

선언형 프로그래밍은 소스코드의 가독성과 안정성을 높인다. 상태를 변경할 수 없게 되고, 한눈에 소스코드가 목적하는 바를 바로 알아차릴 수 있기 때문에 유지보수성이 높아진다. 또한 한번 작성한 선언형 프로그램은 다른 곳에서 재사용하기도 유용하다.

 

 

 

[Javascript] Function arguments 속성이란?