<div id="readability-page-1" class="page"><div>
 <a href="/m/category/WEB2.0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D">WEB2.0/프로그래밍</a><h3>당신의 typescript 함수를 순수하게 만들어줄 readonly</h3>
 </div><cite>나를찾는아이</cite>
 2023. 3. 7. 15:13
 <div>
 Typescript는 여러분에게 컴파일 단에서 많은 타입 도움을 줍니다

특히나 이러한 도움은 휴먼에러를 방지하는데있어서 큰 도움이 됩니다


여러분이 소프트웨어 공학이나 개발서적들을 접하셨다면

함수를 순수하게 만드는것이 아주 중요한것을 알고 계실겁니다

순수함수라고 함은 함수가 계산의 역할만 하고 그 외의 역할은 하지 않는것입니다

이렇게 하는 이유는 코드베이스가 점점 커져갈때 순수하지 못한 함수로 인해서 예상치 못한 버그나 동작을 피할수 있도록 하기 위함입니다

단일책임원칙을 지킬수 있고

물론 테스트코드를 작성하는것도 쉬워지지요


A함수를 실행했을때는 A함수의 연산만을 필요로 한건데 A함수가 뜬금없이 B 변수값을 변경시킨다면 순수하지 못한 함수로서

좋지 않은 영향을 끼칩니다

이럴때 여러분이 사용하면 좋은 키워드가 readonly 입니다


샘플코드를 하나 만들어봤습니다

string의 배열을 받아 해당 배열과 동일한 원소 + "ㄷ" 원소를 추가로 가지고 있는 새로운 배열을 리턴하는 평범한 함수입니다
<pre id="code_1678074207735" data-ke-language="javascript" data-ke-type="codeblock"><code>function arraySample(stringArray : string[]) {
 stringArray.push("ㄹ");
 return [...stringArray, "ㄷ"];
}</code></pre>
그런데 만약 위의 코드처럼 매개변수로 전달받은 stringArray를 코드 중간에서 누군가가 수정을 했다고 해봅시다

이 함수는 더이상 순수하지 않습니다

<pre id="code_1678074532374" data-ke-language="javascript" data-ke-type="codeblock"><code>const originArray = ["ㄱ", "ㄴ"];

const newArray = arraySample(originArray);

console.log(newArray); // "ㄱ", "ㄴ", "ㄹ", "ㄷ"
console.log(originArray); // "ㄱ", "ㄴ", "ㄹ"</code></pre>

arraySample 함수를 실행시키는것으로 예상치 못했던 originArray의 값도 변경되었기 때문입니다

파라메터로 전달된 함수를 건드리지 않게 컴파일단에서 막을수 있는 방법이 없을까요?

입력값으로 들어온 파라메터를 변경할수 없도록 readonly 키워드를 사용할수 있습니다

<pre id="code_1678074425330" data-ke-language="javascript" data-ke-type="codeblock"><code>function arraySample(stringArray : readonly string[]) {
 stringArray.push("sample");
 return [...stringArray, "ㄷ"];
}</code></pre>

이렇게 작성할경우 컴파일단에서 arraySample 코드 내부에서 stringArray.push() 오류가 발생합니다

stringArray는 readonly 이기 때문에 변경을 할수 없습니다


이렇게 우리는 예상치못한 변경을 막아낼수 있습니다

 
 
 </div></div>

나를 찾는 아이

Kyoung min, Kim

Typescript는 여러분에게 컴파일 단에서 많은 타입 도움을 줍니다
 
특히나 이러한 도움은 휴먼에러를 방지하는데있어서 큰 도움이 됩니다
 
 
여러분이 소프트웨어 공학이나 개발서적들을 접하셨다면
 
함수를 순수하게 만드는것이 아주 중요한것을 알고 계실겁니다
 
순수함수라고 함은 함수가 계산의 역할만 하고 그 외의 역할은 하지 않는것입니다
 
이렇게 하는 이유는 코드베이스가 점점 커져갈때 순수하지 못한 함수로 인해서 예상치 못한 버그나 동작을 피할수 있도록 하기 위함입니다
 
단일책임원칙을 지킬수 있고
 
물론 테스트코드를 작성하는것도 쉬워지지요
 
 
A함수를 실행했을때는 A함수의 연산만을 필요로 한건데 A함수가 뜬금없이 B 변수값을 변경시킨다면 순수하지 못한 함수로서
 
좋지 않은 영향을 끼칩니다
 
이럴때 여러분이 사용하면 좋은 키워드가 readonly 입니다
 
 
샘플코드를 하나 만들어봤습니다
 
string의 배열을 받아 해당 배열과 동일한 원소 + "ㄷ" 원소를 추가로 가지고 있는 새로운 배열을 리턴하는 평범한 함수입니다
function arraySample(stringArray : string[]) {
  stringArray.push("ㄹ");
  return [...stringArray, "ㄷ"];
}
그런데 만약 위의 코드처럼 매개변수로 전달받은 stringArray를 코드 중간에서 누군가가 수정을 했다고 해봅시다
 
이 함수는 더이상 순수하지 않습니다
 
const originArray = ["ㄱ", "ㄴ"];
const newArray = arraySample(originArray);
console.log(newArray); // "ㄱ", "ㄴ", "ㄹ", "ㄷ"
console.log(originArray); // "ㄱ", "ㄴ", "ㄹ"
 
arraySample 함수를 실행시키는것으로 예상치 못했던 originArray의 값도 변경되었기 때문입니다
 
파라메터로 전달된 함수를 건드리지 않게 컴파일단에서 막을수 있는 방법이 없을까요?
 
입력값으로 들어온 파라메터를 변경할수 없도록 readonly 키워드를 사용할수 있습니다
 
function arraySample(stringArray : readonly string[]) {
  stringArray.push("sample");
  return [...stringArray, "ㄷ"];
}
 
이렇게 작성할경우 컴파일단에서 arraySample 코드 내부에서 stringArray.push() 오류가 발생합니다
 
stringArray는 readonly 이기 때문에 변경을 할수 없습니다
 
 
이렇게 우리는 예상치못한 변경을 막아낼수 있습니다

당신의 typescript 함수를 순수하게 만들어줄 readonly

댓글