[부스트캠프 9기 챌린지] 학습 정리 - 08일차

안녕하세요!

오늘은 함수형 프로그래밍에 대해 학습해보았습니다.

추가적으로 오늘도 Typescript를 사용해봐서 TypeScript환경에서 jest를 사용하여 테스팅 횐경을 구축하는 방법도 정리해보겠습니다.

---

함수형 프로그래밍

프로그램을 함수들의 연속으로 구성하는것. 상태 변화와 부작용을 최소화하는 것을 목표로 하기 위해 불변성을 지키고 순수함수를 쓰는 등 여러 규칙을 지키는 프로그래밍

 

함수형 프로그래밍을 하기 위해서는 불변성, 순수함수, 클로저와 같은 개념에 대해 알아봐야합니다.

순수함수란?

동일한 입력에는 항상 동일한 출력이 나오도록 보장된 함수입니다.

순수함수는 외부 상태를 변경하지 않고, 함수 외부의 상태를 읽거나 쓰지 않아야 합니다.

예시

• 비순수함수

let count = 0;

function increment() {
    count += 1;
    return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 <- 동일하지 않은 출력값이 나옴

• 순수함수

function add(a, b) {
    return a + b;
}

console.log(add(2, 3)); // 5
console.log(add(2, 3)); // 5 <- 동일한 출력값이 나옴

 

순수함수를 잘 구성하기 위해선 불변성이란 성질을 잘 지켜서 만드는 것이 중요합니다. 그럼 여기서!

불변성이란?

불변성은 객체나 배열 등 데이터가 생성된 후에 변경되지 않도록 하는 특성입니다. 

함수가 원본 데이터에 변경을 주진 않고, 함수가 변경한 데이터는 꼭 새롭게 선언해서 사용해주어야 합니다.

순수함수의 외부 상태를 변경하지 않는 특징에 부합하기 위해 사용됩니다.

예시

• 비불변성

let num = 100;

function add(n) {
    num += n
    return num;
}

const addedNum = add(10);

console.log(num);       // 110
console.log(addedNum);  // 110

 

위 비순수함수 예시와 비슷한데, addedNum이란 변수로 add()함수가 적용된 수를 새로 변수로 할당하였습니다.

그러나 불변성 법칙이 적용되지 않아 원본 변수인 num에도 변형을 줘 num과 addedNum이 같이 10이 증가된 값으로 나왔습니다.

• 불변성

let num = 100;

function add(n) {
    return num + n;
}

const addedNum = add(10);

console.log(num);       // 100
console.log(addedNum);  // 110

 

위 함수에서 불변성을 지키도록 수정한 결과입니다.

add() 함수는 num에 인자값 n을 더한 결과값을 return하도록 변경하였습니다.

이를 통해 원본 변수 num의 값은 변화가 없어서 원본인 num과 add()를 적용한 addedNum의 값이 다르게 되었습니다.

즉, 원본값이 변하지 않게 불변성이 지켜지게 되었습니다.

클로저란?

클로저는 함수가 선언될 당시의 렉시컬 환경을 기억하고, 그 환경에 접근할 수 있게 하는 기능입니다.

렉시컬 환경이란?

변수가 어디에서 선언되었고, 어떤 범위 내에서 접근 가능한지에 대한 환경

 

이해가 잘 안될테니 예제로 이해해봅시다.

예시

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    }
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

 

createCounter() 안에는 count라는 변수가 0으로 선언되어있습니다. 그리고 함수를 반환합니다.

그리고 createCounter()라는 함수의 반환값을 counter라는 변수로 선언했습니다. 이렇게 되면! counter()를 실행하면 createCounter()가 반환한 결과를 return하겠죠?

여기서 주목할 것은 출력값이 첫번째는 1, 두번째는 2, 세번째는 3이 나온다는 점입니다!

 

여기서 바로 렉시컬 환경에 대해 이해할 수 있습니다.

counter()가 각개로 실행되더라도 모두 공유되는 count값을 가지게 되어 실행할수록 1씩 증가가 되는 것을 보실 수 있습니다.

이렇게 선언된 변수, 함수 등등의 환경을 렉시컬 환경이라고 하고, 클로저 함수인 createCounter()는 이 환경을 기억해서 자신을 사용하는 모든 녀석들에게 이 환경을 공유되게 하는 함수입니다,

 

이렇게 된다면 createCounter()는 외부의 값을 변경하는 것도 아니면서 상태를 저장해서 쓸 수 있으니 함수형 프로그래밍에서 자주 쓰입니다.

고차함수란?

고차함수란 함수를 인자로 받거나, 함수를 반환하는 함수를 뜻합니다. 둘 다 하거나, 둘 중 하나만 해도 됩니다!

예시를 들자면 바로 위에 예시로 든 클로저 함수도 고차함수이겠네요! 저 함수는 함수를 반환해서 고차함수가 된 case입니다.

추가적으로 인자값으로 함수를 받는 예시도 보여드리겠습니다.

function repeat(n, action) {
    for (let i = 0; i < n; i++) {
        action(i);
    }
}

repeat(3, console.log); // 0, 1, 2

 

action에 console.log라는 함수가 들어갔고, repeat() 안에선 인자로 받은 이 함수를 실행하도록 하였습니다.

 

추가적으로 고차함수의 대표적인 예시로는 map, filter, reduce등이 있습니다.

이 함수들도 생각해보면 인자값으로 화살표 함수 형태로 받고 있기 때문에 고차함수에 들어갑니다.

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((x) => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

---

TypeScript에서 Jest로 테스팅 환경 구축하기

6일차에는 TypeScript를 적용하는 방법에 대해 배웠는데, 이 환경에서 Jest를 통해 테스팅 환경을 구축하기 위해선 추가적인 작업이 더 필요하여 정리해봤습니다.

설치

npm install --save-dev jest ts-jest @types/jest

TypeScript에서 jest를 사용하기 위해선 그냥 jest만 설치하는 것이 아닌 ts-jest 와 @types/jest도 설치해 주어야 합니다.

jest.config.js 설정

루트 디렉토리에 jest.config.js 라는 파일을 만들고 아래와 같이 설정합니다.

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/*.test.ts'],
};

해당 예시는 루트 디렉토리 안의 test.ts로 끝나는 파일을 테스트 파일로 인식하는 것이므로, 만일 테스트 파일의 경로나 형식을 바꾸고 싶다면 testMatch에 항목을 추가하거나 변경하면 됩니다.