변경 불가능한 데이터 구조를 원하는 이유는 무엇입니까?

불변 데이터 구조는 기능적인 방식으로 코딩을 시도할 때 필수적이며 JavaScript 자체는 이를 지원하지 않습니다. 다행스럽게도 TypeScript에서 제공하는 유형 시스템을 활용하여 배열 및 객체와 같이 자주 사용되는 데이터 구조에 이러한 불변성 규칙을 적용할 수 있습니다.
나는 최근에야 이 기능에 대해 알게 되었고 다른 사람들도 놓쳤을 수도 있다고 생각하여 이 짧은 블로그 게시물을 작성하여 적어도 두 사람에게 유용한 정보를 제공하기를 바랍니다!

배열

일부 정수로 채워진 배열을 초기화하는 일반적인 방법입니다.

const xs = [1, 2, 3, 4, 5]

이것의 문제는 재할당을 방지하기 위해 const를 사용하더라도 원하는 대로 배열을 변경할 수 있다는 것입니다.

xs[1] = 100
console.log(xs) -> [1, 100, 3, 4, 5]

x에 ReadOnlyArray 유형을 지정하면 운 좋게도 이 문제를 해결할 수 있습니다.

const xs: ReadOnlyArray<number> = [1, 2, 3, 4, 5]

이제 배열을 변경할 수 없습니다!

xs[1] = 100
console.log(xs) -> error TS2542: Index signature in type 'readonly number[]' only permits reading.

이것은 아주 굉장합니다. 변경할 수 없는 데이터 구조를 적용하면 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다. 이것에 놀라고 변경할 수없는 이러한 데이터 구조로 무엇을 할 수 있다고 생각한다면 걱정하지 마십시오!. 값을 수정하지 않고 대신 새 값을 반환하는 모든 기능적 기술을 계속 사용할 수 있습니다.

예

const biggerXs = xs.map(x => x * 100)
const largestInXs = xs.reduce((acc, x) => x > acc ? x : acc)
const evenOnly = xs.filter(x => x % == 0)

사물

우리는 객체로 비슷한 일을 할 수 있습니다.

사용자 개체를 초기화하는 일반적인 방법입니다.

const user = {
    firstname: 'foo',
    lastname: 'bar',
    age: 69,
}

이러한 상황에서 컴파일러는 무료로 유형을 유추할 수 있기 때문에 유형이나 인터페이스를 정의하지 않았습니다. 이것을 불변으로 만들려면 실제로 유형에 대한 인터페이스를 정의해야 합니다.

사용자 개체를 초기화하는 불변의 방법._

interface Iuser {
    readonly firstname: string
    readonly lastname: string
    readonly age: number
}
const user: Iuser = {
    firstname: 'foo',
    lastname: 'bar',
    age: 69,
}

사용자의 필드를 수정하려고 하면 배열에서 이전과 유사한 컴파일러 오류가 발생합니다.

user.firstname = 'bar' -> error TS2540: Cannot assign to 'email' because it is a read-only property.

이제 사용자를 업데이트하려면 몇 가지 기능적 기술이 다시 필요합니다...

const incUserAge = (user: Iuser): Iuser => ({ ...user, age: user.age + 1 })

const birthdayBoy = incUserAge(user) -> { firstname: 'foo', lastname: 'var', age: 70 }

이것이 제가 이 블로그 게시물에서 공유하고 싶은 전부입니다. 도움이 되셨기를 바랍니다. 앞으로 FP와 관련된 더 많은 내용을 게시할 예정이므로 흥미롭게 들리면 팔로우하는 것이 좋습니다. ;-).
내 website 에서 내가 작성한 다른 블로그 게시물을 찾을 수 있습니다.