React나 Angular를 다루다 보면 Imperative Programming, Declarative Programming이란 단어를 많이 접하게 됩니다. 이 단어들에 대해 잘 이해하지 못한 상태로 개발을 하다 최근에서야 자세히 찾아봤습니다…
그래서 Imperative Programming과 Declarative Programming의 차이점을 코드 예시와 함께 설명해보려고 합니다.
Imperative Programming이란 간단히 정의하면 원하는 결과를 얻기 위해 ‘어떤’ 것을 ‘어떻게’ 수행할지를 특정하는 Programming 이라고 할 수 있고
Declarative Programming이란 원하는 결과를 얻기 위해 ‘어떤’ 것이 필요한지만 정의(‘어떻게’ 하는지는 신경쓰지 않고)하는 Programming 이라고 할 수 있습니다.
예시로 주어진 배열에서 홀수 숫자만 찾아내고 싶다고 할 때 Imperative Programming으로 할 때와 Declarative Programming으로 했을 때의 코드를 확인해 보겠습니다.
Imperative Programming으로 했을 때
const numbers = [1, 2, 3, 4, 5];let oddNumbers = [];for(let I = 0; I < numbers.length; I++) {
if (numbers[I] % 2 !== 0) {
oddNumbers.push(numbers[I]);
}
}console.log(oddNumbers); // [1, 3, 5]
Declarative Programming으로 했을 때
const oddNumbers = numbers.filter(num => num % 2 !== 0);console.log(oddNumbers); // [1, 3, 5]
예시 코드를 보시면 Imperative Programming으로 했을 때는 홀수 숫자들(원하는 결과)만 찾아내기 위해 for문을 이용하여 numbers 안의 각 원소들에 접근하여 각 원소가 홀수인지 아닌지 확인(결과를 얻기 위해 ‘어떻게’ 수행할지 정의)하여 홀수이면 oddNumbers 배열(결과를 얻기 위해 사용하는 ‘어떤’ 것) 안에 추가하고 있습니다.
Declarative Programming으로 했을 때는 Array의 filter 메소드를 사용하여 홀수 숫자들을 걸러내어(filter) 새로운 배열을 만들어 oddNumbers 변수 안에 담았습니다.
filter 메소드가 ‘어떻게’ 과정을 수행하는지는 모르지만 콜백 함수의 결과가 true인 ‘어떤’ 값들만 찾아내어 새로운 배열을 반환한다는걸 알 수 있습니다.
즉, Imperative Programming은 원하는 결과를 얻기 위해 필요한 도구와 수행할 과정을 하나하나 지시하는 것이고 Declarative Programming은 필요한 도구만 사용하여 원하는 결과 값을 얻는 방식이라고 할 수 있습니다.
코드를 보시면 아시겠지만 Imperative Programming 방식보다 Declarative Programming 방식으로 했을 때 훨씬 간결하고 읽기 편한 것을 알 수 있습니다.
물론 무조건적으로 좋다고 할 수는 없지만 선호할만한 방식이라고 생각합니다.
