on
JavaScript의 불변성 — 개체 및 배열
JavaScript의 불변성 — 개체 및 배열
반응형
불변의 물체란 무엇인가?
위의 정의는 꽤 간단하지만, 자세히 설명하겠습니다. 개체를 만든 후에는 개체의 속성을 변경할 수 없습니다. 기본적으로 업데이트할 수 없는 읽기 전용 개체를 만듭니다.
불변성을 사용해야 하는 이유는 무엇입니까?
불변의 디자인을 활용하는 것은 다음과 같은 많은 이점을 제공할 수 있다.
나사산 안전
더 쉬운 디버깅
유지 관리 가능한 코드 추가
스레드 안전과 관련하여 여러 스레드가 액세스하는 개체에 돌연변이를 만들면 예기치 않은 결과가 발생할 수 있습니다. 사이트를 방문한 사용자 수를 계산하는 카운터가 있는 경우 각 카운트가 올바르게 기록되었는지 확인해야 합니다. 카운터를 직접 업데이트할 경우 동시성 오류로 인해 보기가 누락될 수 있으며 카운트가 잘못될 수 있습니다. 불변 카운터가 있는 경우 정확한 값을 얻기 위해 매번 새 버전이 작성됩니다.
디버깅의 경우 특정 위치에서 개체의 상태(값이 있는 속성)를 볼 수 있는 기능이 있으면 혼동을 줄일 수 있습니다. 성을 업데이트해야 하는 사용자가 있는 경우, 불변성 없이 업데이트 후 이전 성을 추적할 수 없습니다. 불변성을 사용하면 업데이트 전의 개체와 업데이트 이름을 바꾼 새 개체에 대한 기록이 나타납니다.
불변성은 일반적인 코딩 관행이며 산업 전반에 걸쳐 사용됩니다. 불변의 설계 패턴을 적용함으로써 다른 개발자는 여러분의 코드와 여러분이 달성하고자 하는 바를 더 쉽게 이해할 수 있어야 합니다.
JavaScript의 예 — 개체
이제 불변의 개체가 무엇이고 왜 그것들을 사용하는지에 대해 설명했으므로, 돌연변이 대 불변의 디자인 패턴을 사용한 코드의 몇 가지 예를 살펴보도록 하겠습니다.
Person object가 있다고 가정해 봅시다. 사용자 개체에는 이름과 성이라는 두 가지 속성이 있습니다.
const person = { firstName: 'Jane', lastName: 'Smith' }
제인이 막 결혼했는데, 그녀의 성을 남편의 성으로 바꾸고 싶어한다고 상상해 보세요. 그래서 스미스 대신에, 그녀의 성은 이제 도 가 될 것이다. 먼저 개체 변이를 통해 우리가 어떻게 할 것인지, 그 다음에 불변의 디자인 패턴 사용법을 알아보겠습니다.
개체 돌연변이
간단한 자바스크립트로 이 사람의 성을 쉽게 업데이트할 수 있습니다. 우리는 단순히 개인에게 새로운 값을 할당하고 결과를 기록할 수 있다.
person.lastName = 'Doe' // Mutation // Logging her new last name console.log(person.lastName) // 'Doe'
좋아! 하지만 그녀의 이전 성은 어때? 개체를 직접 돌연변이했기 때문에 이 값에 더 이상 액세스할 수 없습니다. 만약 우리가 그녀의 예전 성을 가진 다른 기록을 갱신해야 한다면 이것은 악몽이 될 수 있다.
불변패턴 및 ES6 확산 구문 사용
사용자 개체를 직접 돌연변이하는 대신 업데이트된 성을 가진 복사본을 만듭니다.
// Create a copy of the original object with the updated last name const updatedPerson = { ...person, // Copy values from original object lastName: 'Doe' }
이 구문에 익숙하지 않다면, 제가 설명해 드리겠습니다. ES6에서는 스프레드 연산자를 사용하여 개체에서 속성을 추출하고 새 개체로 복사할 수 있습니다. 이 경우 기본적으로 모든 속성을 개인에서 업데이트된 개인 개체로 복사합니다. 이제 스프레드 아래에는 성(성)을 새 값에 포함시켜 사람( Smith )으로부터 복사된 값을 Doe 로 덮어씁니다.
조금 혼란스럽겠지만, 일단 연습해 보면 말이 되니까 날 믿어. 이제, 이 불변의 구조로, 다시 디버그를 시도해보자.
console.log(person.lastName); // 'Smith' console.log(updatedPerson.lastName); // 'Doe'
대단해! 이제 제인에 대한 감사 기록과 그녀의 성을 업데이트했습니다. 이 값을 검색하거나 액세스해야 하는 경우 오래된 개체가 여전히 메모리에 남아 있습니다.
JavaScript의 예 — 배열
이전 섹션에서 많은 항목을 다루었기 때문에 이 섹션은 좀 더 간략하게 설명하겠습니다. 우리가 일련의 성을 가지고 있고, 결혼 후에 제인의 성을 업데이트해야 한다고 가정해 봅시다.
const lastNames = ['Johnson', 'Smith', 'Kennedy']
배열 돌연변이
어레이의 두 번째 항목을 Doe 로 업데이트하려면 어레이 돌연변이를 통해 이렇게 해야 합니다.
lastNames[1] = 'Doe' // Mutation console.log(lastNames) // ['Johnson', 'Doe', 'Kennedy']
이제 어레이가 업데이트되면 이전과 마찬가지로 성 목록이 어떻게 생겼는지 기록이 손실됩니다.
불변패턴 및 ES6 확산 구문 사용
이번에는 어레이를 직접 돌연변이하는 대신 어레이의 복사본을 만든 다음 개체를 업데이트해 보겠습니다.
const newLastNames = [...lastNames] // Create a copy of the array newLastNames[1] = 'Doe' console.log(lastNames) // ['Johnson', 'Smith', 'Kennedy'] console.log(newLastNames) // ['Johnson', 'Doe', 'Kennedy']
이 예에서는 스프레드 구문을 사용하여 다시 한 번 새 배열을 만들어 모든 배열 요소의 복사본을 만들고 새 배열에 배치했습니다. 이 작업이 완료되면 원래 배열을 변경하지 않고 새 개체의 값을 업데이트할 수 있습니다. 다시 한 번 알 수 있듯이, 개체의 업데이트 기록을 유지할 수 있으며 동시성 문제에 부딪히지 않을 것입니다.
ES6 스프레드 구문을 사용한 주의사항
ES6 스프레드 구문은 훌륭하지만 단점이 있습니다. 즉, 얕은 복사만 수행할 뿐입니다. 즉, 한 층 아래의 개체만 복제할 수 있습니다. 따라서 속성을 가진 개체가 다른 개체인 경우 중첩된 속성에 대한 스프레드 구문을 사용하여 해당 속성을 변경할 수 없도록 해야 합니다. 이는 개체 배열에서도 마찬가지입니다.
여기 얕은 베끼기와 깊은 베끼기를 설명하는 훌륭한 기사가 있다.
마무리 멘트
불변의 디자인 패턴을 구현하는 것이 강력하지만 항상 완벽한 해결책은 아닙니다. 기술의 모든 것과 마찬가지로, 여러분은 절충점을 따져보고 여러분에게 맞는 올바른 솔루션을 선택해야 합니다. 불변성은 몇 줄의 코드를 더 추가하지만, 노련한 프로그래머로서 장기적으로 사용할 가치가 있다고 장담할 수 있습니다. 저는 항상 신봉자는 아니었지만, 이 패턴을 받아들여 제 코드에 통합했습니다.
React와 Redux는 불변성 활용의 주요 지지자이므로 이 기사에서는 React에서 코딩을 시작하는 경우 무엇을 볼 수 있는지와 그 이유를 간략히 살펴봅니다.
언제나 그렇듯이, 이 글이 마음에 드신다면 박수를 치시고 따라해주세요, 행복한 코딩!
일반 영어로 더 많은 내용을 제공합니다.이오
from http://it-ground.tistory.com/198 by ccl(A) rewrite - 2021-09-22 22:27:21