꾸생의 블로그 :: 자바스크립트 선언형 vs 명령형

컴퓨터 프로그래밍 패러타임 중 선언형, 명령형 방식이 있다. 두 방식마다 문제를 해결하는 과정에서 어떤 부분에 집중을 하는지 차이가 존재하니 잘 알아두도록 하자

선언형(Declarative)

선언형은 무엇(What)을 하는지에 대한 명세를 코드로 작성한다. 그러므로 코드가 더 간결하고 가독성이 높아 재사용성이 증가한다. 대개 이 방식을 함수형 프로그래밍이라 부른다.

함수형 프로그래밍 예시


const numbers = [1, 2, 3, 4, 5];
const sumNumArr = (numArr) => numArr.reduce((acc, cur) => acc + cur, 0);

const res = sumNumArr(numbers)
console.log(res) // 15

위 코드에서 reduce()는 누산기 메서드로 모든 배열 요소를 순차적으로 돌면서 총 합을 구하는 코드다. 중요하게 볼 점은 sumNumArr 함수인데, 함수 명과 파라미터만 봐도 숫자 배열을 받아 합을 반환하는 기능일 것이라 예상 가능하다.

이렇게 단일 목적으로 입력받은 값을 통해 기능을 수행하고 결과를 반환하는 함수를 순수 함수라 한다.

선언형 프로그래밍 특징

처리 결과에만 집중하고 과정은 추상화시켜 노이즈를 제거한다.

명령형은 한 줄씩 이해하며 다음 로직이 어떤 결과를 발생시키는지 예측해야하는 반면 선언형은 코드만 보고도 어떤 일이 발생할지 예측 가능하다.

가독성 면에서 좋으며 예측이 쉽다.

명령형(Imperative)

명령형 프로그래밍은 어떻게(How) 해야 하는지에 대한 코드를 작성한다. 그러므로 코드가 복잡하고 가독성이 떨어져 유지보수가 어려울 수 있다. 이 방식에서는 특정한 문제를 해결하는 과정에서 명령문으로 이루어진 코드를 사용하여 문제를 해결하는 방식이다.

명령형 프로그래밍 예시


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

function sumAll (arr) {
	let sum = 0
	for (let i = 0; i < numbers.length; i++) {
	  sum += numbers[i];
	}
	return sum
}

sumAll(numbers)

위 코드는 sumAll() 함수에 숫자 배열 파라미터로 넘겨받아 합을 반환하는 코드다. 코드만 보면 어떤 인자를 받아 어떻게 처리하는지 로직까지 알 수 있다. 위에 선언형 함수 코드로 돌아가서, reducer() 에는 어떻게 총합을 구하는지 알고리즘이 명시되어있지 않다. 자바스크립트 내장함수로 추상화를 통해 reducer() 함수를 사용해서 어떤 결과가 도출되는지 예상만 될 뿐이다.

이렇게 말하니 선언형은 내부 로직을 알 수 없으니 안 좋다고 보일 수 있으나 본질은 HOW 보다 WHAT을 더 중요하게 생각하면서 나아가야 문제를 더욱 가독성 있고 효울적으로 전달할 수 있다는 의미다.

개인적으로 명령형(HOW)은 오목렌즈와 같은 시야로 보는 것이고, 선언형(WHAT)은 볼록렌즈의 시야로 보는 느낌이다