JavaScript의 순수 함수

순수 기능이란 무엇입니까?

함수가 순수 함수가 되기 위한 2가지 간단한 규칙이 있습니다.

1. There will be always the same output for the same input.
2. There will be no side effects.

코드를 봅시다.

const add = (a,b) => a + b;

add(1,2); // 3

여기서 add 함수는 순수 함수입니다.
이 함수는 2개의 인수 a 및 b를 사용하고 항상 a + b 인 인수에 대해 동일한 결과를 제공하기 때문입니다.

다른 코드를 보자.

let user = {
    firstName: "Michael",
    lastName: "Jackson",
    gender: "M"
}

function getFullName(user) {
    return `${user.firstName} ${user.lastName}`;
}
console.log(getFullName(user)); // Michael Jackson 

코드 조각에서 getFullName는 getFullName 상태를 변경하지 않기 때문에 순수 함수입니다.

불순 함수는 무엇입니까?

1. Create/update database.
2. http/s call.
3. Change the file system.
4. Mutate the state.
etc

Math.random();

Math.random()는 항상 다른 출력을 반환하기 때문에 불순한 함수입니다.
console.log는 순수 함수이며 모든 입력에 대해 정의되지 않음을 반환합니다.

번호console.log는 부작용이 있기 때문에 순수 기능이 아니며, console.log는 다른 공유 환경을 사용하여 콘솔에 로그인합니다.

const add = function (a,b){
    console.log("added");
    return a + b;
} 

add(1,2); // 3

위의 코드 스니펫에서 동일한 입력에 대해 동일한 출력을 얻고 있으며 console.log가 출력에 영향을 미치지 않으며 순수 함수가 아님을 알 수 있습니다. add 함수에는 부작용이 있기 때문입니다.

let user = {
    firstName: "Michael",
    lastName: "Jackson",
    gender: "M"
}

function getFullName(user) {
    user.firstName = user.gender === "M" ? `Mr. ${user.firstName}`: `Mrs. ${user.firstName}`;
    return `${user.firstName} ${user.lastName}`;
}
console.log(getFullName(user)); // Mr. Michael Jackson 

여기 코드 조각getFullName에서 getFullName가 상태를 변경하기 때문에 불순한 함수가 있습니다. 함수 정의 내에서 객체 속성에 값을 할당합니다.

순수 대 불순

불순한 함수는 외부 상태를 변경합니다.

let cart = {
    items: [{
        name: "X",
        price: 10,
        quantity: 1
    }]
}

function addItem(cart){
    let newCart = {...cart}
    newCart.items.push({
        name: "Y",
        price: 5,
        quantity: 2
    });
    return newCart;
}
console.log(cart); // {items: Array(1)}

let newCart = addItem(cart); // changing state

console.log(cart); // {items: Array(2)}
console.log(newCart); // {items: Array(2)}

순수 함수는 외부 상태를 변경하지 않습니다. 약간의 변경으로 위의 함수를 순수하게 만들 수 있습니다.

let cart = {
    items: [{
        name: "X",
        price: 10,
        quantity: 1
    }]
}

function deepClone(value){
  return JSON.parse(JSON.stringify(value)); // for example purpose
}

function addItem(cart){
    let newCart = deepClone(cart);
    newCart.items.push({
        name: "Y",
        price: 5,
        quantity: 2
    });
    return newCart;
}
console.log(cart); // {items: Array(1)}

let newCart = addItem(cart); // changing state

console.log(cart); // {items: Array(1)}
console.log(newCart); // {items: Array(2)}

우리가 볼 수 있는 스니펫에서 순수 함수는 장바구니를 변경하지 않고 대신 장바구니를 복사하여 반환 값으로 보냅니다. 이로 인해 원래 카드는 변경되지 않습니다.

react, redux를 사용한다면 순수 함수를 사용하는 것을 볼 수 있을 것입니다.

Pure function can be easily predicted, it is convenient to test. Pure function makes state management easier.