본문 바로가기
Front-End/JavaScript

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

by 연제원 2021. 1. 8.

아직은 완벽한 개념을 이해하기 힘들어 간략하게만 정리해보려 한다.

사이트에서 설명을 잘해주는데 익숙하지가 않아 어렵게만 느껴진다 ㅠㅠ

이 사이트를 잘 번역해준 블로그를 많이 참고했다!(거의 복붙했다..)

“You know, imperative programming is like how you do something, and declarative programming is more like what you do, or something.

직역을 해보자면 명령형(imperative) 프로그래밍은 무엇을 어떻게 할 것인가에 가깝고, 선언형(declarative) 프로그래밍은 무엇을 할 것인가에 가깝다고 한다. 


배우고 있는 자바스크립트 배열 예제를 통해 명령형 프로그래밍 방식과 선언형 프로그래밍 방식에 대해 알아보자.

다음은 명령형 프로그래밍 방식으로 짠 코드들이다.

// 배열을 파라미터로 받고 각 요소들의 값에 2를 곱하는 함수
function double (arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(arr[i] * 2);
  }
  return results;
}
// 배열을 파라미터로 받고 각 요소들을 합한 값을 반환하는 함수
function add (arr) {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result += arr[i];
  }
  return result;
}

위 2가지 예시의 공통점이 무엇인지 살펴보면 실제로 필수 요소가 무엇인지 더 잘 식별할 수 있다.

1.  두 예시 모두 "어떻게"를 설명하고 있다. 무슨말인가 하니, 배열을 반복하는 기능을 수행하는 방법에 대한 단계를 설명하고 있다.
2. 두 예시 모두 "상태"의 일부를 변경하고 있다. ('상태' : 기본적으로 메모리에 저장된 것에 대한 정보, 변수와 비슷)  전부 result라는 변수를 만든 다음 계속 수정하고 있다.

 

이를 선언형 프로그래밍 방식으로 바꿔보자. 즉 위의 두 예시들은 "어떻게"가 아닌 "무엇"이 일어나는지를 설명해야 한다.

function double (arr) {
  return arr.map((item) => item *2)
}
function add (arr) [
  return arr.reduce((prev, current) => prev + current, 0)
}

각각 자바스크립트에 기본으로 내장된 map 과 reduce 메서드를 활용했다. 이는 명령형 방식이 추상화된 것이다.

쉽게 풀어보자면 둘 다 어떤식으로 진행되는지는 알 바 없고, 오직 "무엇"이 이루어지기를 원하는지를 설명한다.

이를 통해 생산성의 향상을 얻을 수 있다!

'Front-End > JavaScript' 카테고리의 다른 글

this  (0) 2021.01.12
ES6 문법  (0) 2021.01.09
고차 함수_3 (feat. 추상화)  (0) 2021.01.08
고차 함수_2 (feat. 내장 고차 함수 filter, map)  (0) 2021.01.08
고차 함수_1 (feat. 일급 객체, 호이스팅)  (0) 2021.01.08

댓글