📅 TIL #22

👉 절차형 프로그래밍 vs 선언형 프로그래밍

1.절차형 프로그래밍 (imperative programming)

원하는 작업을 “어떻게 할 것 인가”

절차형 프로그래밍은 어떻게 중점을 두고 프로그래밍을 할 것인지에 대해 중점을 두는 것을 말한다.

즉, 코드에 무엇을 어떻게 하고 싶은지 표현해야 한다! 코드를 보면서 이해해보자!

// 배열을 파라미터로 받고 각 요소들의 값에 2를 곱하는 함수
function getDoubledElements(arr) {
  let resultArr = [];

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

  return resultArr;
}

console.log([1, 2, 3]); // [2, 4, 6];

위 코드처럼 절차형 프로그래밍 방식은 반복문을 이용해 모든 요소에 한 번씩 접근을 해서

결과값을 반환하는 방법을 구현하고 있다.

2.선언형 프로그래밍 (declarative programming)

로직이 “무엇인지를” 표현식으로 나타낸다

내부적으로 코드를 어떻게 구현했는지, 데이터는 어떻게 흘러가는지 밝히지 않은 채 연산/ 작업을 표현하는 방식을 선언적 프로그래밍이라고 한다.

즉, 필요한 것에 대한 과정을 하나하나 구현하는 것 보다는 필요한 것이 어떤 것인지에 대해 중점을 두는 방식이다.

//배열을 파라미터로 받고 모든 요소들의 값에 2를 곱하는 함수
function getDoubledElement(arr) {
  const resultArr = arr.map(el => el * 2);

  return resultArr;
}

console.log([1, 2, 3]); // [2, 4, 6];

이 처럼 절차형 프로그래밍 방식이 추상화 된 것이라고 볼 수 있다. 선언형 프로그래밍은 map () 과 같이 어떻게

작동되는지 알 필요없이 무엇을 원하는지에 중점을 두는 방식이다.

하지만 어플리케이션의 복잡도가 높아질수록 코드의 유지보수성은 떨어지며 리팩토링하기가 매우 어려워진다.

또한 항상 같은 결과값을 기대할 수 없으므로 언제 어디서 에러가 나오는지 모르는 위험도 안고 가야한다!! 명심!

👉 고차함수 문제 getIndex(arr, num)

코플릿 13번

비교적 어려웠던 문제는 아니였지만 이 한 문제로 다양한 코드를 작성하게 된 계기가 있어서 적어보려고 한다!

• 문제 :

정수를 요소로 갖는 배열과 정수(num)를 입력받아 num을 배열에 추가하고 정렬한다고 가정할 경우, num의 인덱스를 리턴

• 주의사항 :

1. 반복문(for, while) 사용 금지
2. arr.sort , arr.indexOf 사용 금지
3. 빈 배열일 경우, 0을 리턴
4. num은 arr의 어떤 요소와도 같지 않다고 가정

• 입출력 예시

let output = getIndex([5, 4, 1, 3], 2);
console.log(output); // --> 1

output = getIndex([10, 5, 1, 3], 13);
console.log(output); // --> 4

• 수도코드

1. filter 함수를 사용해서 num 보다 작은 수만 가져온다.
2. num 보다 작은 수의 length 를 리턴 한다.

• code

//filter 사용
function getIndex(arr, num) {
  const result = arr.filter(el => el < num);

  return result.length;
}

나는 이런식으로 filter 를 사용해서 문제를 해결하였다. 하지만 reduce를 사용해서 풀 수도 있었고, reduce로도 구현을 해보았다.

//reduce 사용 1
function getIndex(arr, num) {
  arr.push(num);

  const result = arr.reduce((acc, cur) => {
    if (cur < num) {
      acc.push(cur);
      return acc;
    } else {
      return acc;
    }
  }, []);

  return result;
}

//reduce 사용 2
function getIndex(arr, num) {
  arr.push(num);

  return arr.reduce((acc, cur) => {
    if (cur < num) {
      acc++;
    }

    return acc;
  }, 0);
}

이미 문제를 해결했지만 reduce를 활용해서 한 번 더 풀어 본 이유는 reduce에 더 적응하기 위해서 였다.

오늘 고차함수, filter, map, reduce 에 대해서 많은 문제를 풀어보고 다루는 연습을 하였다!! :muscle:

👊 내일의 TIW(today I Will)

코플릿 알고리즘