배열아 꼼짝 마라! - readonly 타입 사용하기

자바스크립트는 정말 다양한 배열 조작 메서드를 제공하는데요, 메서드의 동작을 구분하는 여러 기준 중 하나는 바로 “원본 배열을 변경하느냐” 일 것입니다.

// 1. 원본 배열은 변경되지 않는 예시
const frontEnd = ["react.js"]
const backEnd = ["node.js"]
const fullstack = frontEnd.concat(backEnd)

// frontEnd, backEnd 원본 배열의 값은 이전과 동일합니다.
console.log(fullstack) // ["react.js", "node.js"]

// 2. 원본 배열이 변경되는 예시
let techStack = ["react.js"]
teckStack.push("node.js")

// techStack 원본 배열에 새로운 문자열이 추가됩니다.
console.log(techStack) // ["react.js", "node.js"]

물론 push(), pop(), shift(), unshift() 외의 대부분의 메서드는 원본 배열을 변경하지 않지만, 어떤 메서드가 배열을 변경하지 않는지 외우고 다니기는 쉽지 않습니다.

그럼 배열이 수정되지 않음(불변성)을 보장하려면 어떻게 해야 할까요?

상수 배열?

먼저 배열을 const 키워드로 정의하는 방법을 떠올리실 수도 있습니다.
위에서 원본 배열이 변경되는 예시를 const 키워드를 사용해 고쳐 볼까요?

// 상수 배열을 변경하는 예시
const techStack = ["react.js"]
teckStack.push("node.js")

// const 키워드로 배열을 정의했지만, 여전히 원본 배열이 변경되는 모습입니다.
console.log(techStack) // ["react.js", "node.js"]

이런! const 키워드를 사용했음에도 배열이 수정된 모습입니다.

const techStack = ["react.js"]
// Success, 배열에 새로운 프로퍼티가 추가되고 있지만, 값이 변수에 재할당되고 있지는 않음.
teckStack.push("node.js") 

// Error, 새로운 객체를 기존의 teckStack 변수에 재할당하려 하고 있음!
techStack = ["MySql"]

이는 const 키워드가 값을 변경하지 못하도록 하는 것이 아니라 변수가 차지한 메모리 주소에 새로운 값이 할당되는 것을 막기 때문인데요, 따라서 const 키워드로 배열을 선언하는 것만으론 불변성을 보장하기 어려워 보입니다.

readonly 타입

배열의 불변성을 보장하기 위해, 타입스크립트에서는 readonly 타입을 활용할 수 있습니다.

const originArray:string[] = ["react.js", "node.js"] 
originArray.push("MySql")

console.log(originArray) // ["react.js", "node.js", "MySql"]

readonly 타입은 개발자가 배열을 수정하는 메서드를 사용하려 하면 붉은 줄로 오류를 표시하는데요, 한번 코드를 통해 확인해보도록 하겠습니다.

먼저 문자열 타입의 프로퍼티를 갖도록 정의한 배열의 선언입니다.

readonly 를 사용하지 않았을 때는 프로퍼티의 타입만을 검사할 수 있습니다.

하지만 readonly 타입을 추가하는 순간, 타입스크립트는 배열의 타입과 불변성을 함께 검사하게 되어 원본 배열을 수정하는 push 메서드에 불만을 표시하는 모습입니다.

이뿐만 아니라 에디터에서 인텔리센스를 실행하면, 원본 배열을 수정하지 않는 메서드 목록이 출력되는 것을 확인할 수 있습니다.

이처럼 readonly 타입은 단순히 해당 배열이 불변임을 표시하는 것을 넘어, 개발자들이 원본 배열을 수정하는 메서드를 사용할 경우 오류를 출력한다는 사실을 알 수 있었습니다! 😆