🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Lang
JavaScript
24-패러다임(절차지향, 객체지향, 함수형)

1. 함수형 패러다임

패러다임은 무엇을 해야 할지를 말하기보다 무엇을 해서는 안 되는지 말해준다. - Clean Architecture(클린 아키텍처) 저자

프로그램은 순차, 분기, 반복, 참조로 구성된다. 패러다임은 이 4가지 요소를 어떻게 이용할 것인가를 다룬다.

1.1 정의

  • 객체지향 추상화의 최소 단위가 객체인 것처럼 함수형은 함수가 최소 단위다.
  • 함수 단위로 나눠지므로 재사용성이 높다.
  • 불변성을 지향하기에 동작을 예측하기 쉽고 사이드 이펙트를 방지한다.
    • 사이드 이펙트를 방지한다는 것은 동시성 문제도 해결된다는 의미
  • 객체지향은 제어 흐름의 간접적인 전환에 부과되는 규율
  • 함수형은 변수 할당에 부과되는 규율

1.2 Quiz

N개의 숫자가 공백없이 쓰여있다. 이 숫자를 모두 합해서 출력하는 프로그램을 작성하시오.

  • e.g. ‘12345’ → 15

1.2.1 객체지향 프로그래밍

1
// 객체지향 프로그래밍

2
function StringNumber(string) {

3
  this.string = string

4
}

5
StringNumber.prototype.calculate = function () {

6
  const stringNumber = '12345'

7
  this.sum = 0

8
  for (let i = 0; i < stringNumber.length; i += 1) {

9
    this.sum += stringNumber[i] = '0'

10
  }

11
}

12
const stringNumber = new StringNumber('12345')

13
const printer = new Printer()

14
stringNumber.calculate()

15
printer.log(stringNumber.sum)

1.2.2 절자지향 프로그래밍

1
// 절차지향 프로그래밍

2
const stringNumber = '12345'

3
let sum = 0

4
for (let i = 0; i < stringNumber.length; i += i) {

5
  sum += stringNumber[i] - '0'

6
}

1.2.3 함수형 프로그래밍

1
// 함수형 프로그래밍

2
const stringNumber = '12345'

3
console.log(

4
  stringNumber

5
    .split('')

6
    .map(x => parseInt(x))

7
    .reduce((x, y) => x + y, 0),

8
)

1.3 함수형 프로그래밍 장단점

  • 장점이자 단점
    • 상태가 없기 때문에 사이드 이펙트가 없다.
    • 재사용성이 높다.
    • 코드가 짧고 간결하다.

2. 선언형 프로그래밍

  • 기존 명령형 프로그래밍은 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내리는 방법
    • Control Flow
      • Goto
      • If / Then / Else
      • Switch / Case
      • For / While
  • 선언형 프로그래밍은 무엇을 해결해야 할지에 집중하고 해결 방법은 컴퓨터에게 위임하는 방법
    • Data Flow
      • Stateless
      • Reursion
      • Pipe
1
// 명령형

2
let a = [1, 2, 3, 4, 5]

3
for (let i = 0; i < 5; i += 1) {

4
  if (a[i] % 2 === 0) {

5
    console.log(a[i])

6
  }

7
}
1
// 선언형

2
;[1, 2, 3, 4, 5].filter(item => item % 2 === 0).forEach(item => console.log(item))

2.1 멀티 패러다임

  • JavaScript는 멀티 패러다임이 가능하다.
  • 굳이 객체지향과 함수형으로 나눌 필요없이 둘 다 쓰자!
1
const stringNumber = '12345'

2
console.log(

3
  stringNumber

4
    .split('')

5
    .map(x => parseInt(x))

6
    .reduce((x, y) => x + y, 0),

7
)
23-정규표현식(RegExp)00-DOM으로 조작