<div id="readability-page-1" class="page"><div id="entry-view">
        
        <main>
          <div>
              <article id="mainContent">
                <div>
                  <p><a href="/m/category"><span>카테고리 없음</span></a></p><h3>typescript optional 오남용 금지</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2023. 3. 13. 15:50</span>
                </p>
                
            
                <div>
                                <p data-ke-size="size16">optional은 코딩에 있어서 굉장한 편리함을 줍니다</p>

<p data-ke-size="size16">그런데 가끔 optional을 굳이 사용하지 않아도 되는곳에도 optional을 오남용하는 곳을 볼수 있습니다</p>


<p data-ke-size="size16">뭐 이런 함수가 있다고 생각해봅시다</p>

<p data-ke-size="size16">세번째 매개변수인 date를 optional로 설정했습니다</p>

<pre id="code_1678426903262" data-ke-language="javascript" data-ke-type="codeblock"><code>function createTask(title: string, description: string, date?: Date) {
   ...
   const createdAt = date || new Date();
   ...
}

createTask("우유2개구입", "할인쿠폰 사용할것");</code></pre>

<p data-ke-size="size16">그리고 함수 내부코드에서는 date의 값이 있는지 없는지를 판별하여 없는 경우 현재시간을 사용하여 나머지 코드에서 활용합니다</p>

<p data-ke-size="size16">date를 optional로 꼭 해야만하나요?</p>

<p data-ke-size="size16">다른 방법은 없을까요?</p>

<p data-ke-size="size16">이렇게 해보면 어떨까요?</p>

<pre id="code_1678427043216" data-ke-language="javascript" data-ke-type="codeblock"><code>function createTask(title: string, description: string, date: Date = new Date()) {
   ...
   // 아무런 조치를 할필요없음
   ...
}

createTask("우유2개구입", "할인쿠폰 사용할것");</code></pre>

<p data-ke-size="size16">date 매개변수에 기본값으로 new Date()를 세팅하고</p>

<p data-ke-size="size16">optional 하지 않도록 변경했습니다</p>


<p data-ke-size="size16">코드가 좀 더 심플해집니다</p>

<p data-ke-size="size16">date가 undefined 인지 체크할필요가 없습니다</p>




<p data-ke-size="size16">또 다른 예를 들어볼까요</p>

<p data-ke-size="size16">배열을 인자중의 하나로 받는 함수가 있습니다</p>

<pre id="code_1678427247114" data-ke-language="javascript" data-ke-type="codeblock"><code>function createTask(title: string, description: string, subTasks?: string[]) {
   ...
}</code></pre>

<p data-ke-size="size16">여기서 subTasks 변수를 사용하는것은 좀 더 번거롭고 귀찮습니다</p>

<p data-ke-size="size16">subTasks 1개이상의 원소가 있는지 체크하려면 subTasks가 undefined인지 체크한다음에 length를 또한번 체크해야합니다</p>

<p data-ke-size="size16">optional의 불편함이죠</p>

<pre id="code_1678427383690" data-ke-language="javascript" data-ke-type="codeblock"><code>function createTask(title: string, description: string, subTasks: string[] = []) {
   ...
}</code></pre>


<p data-ke-size="size16">이렇게 바꿔보면 어떨까요?</p>

<p data-ke-size="size16">subTasks.length를 아무런 걱정없이 호출해도 됩니다</p>


            
            
                </div>
            

                
              </article>
              
                
              
              
              
              
              
                
              
            </div>
        </main>
        
      </div></div>

나를 찾는 아이

Kyoung min, Kim

optional은 코딩에 있어서 굉장한 편리함을 줍니다
 
그런데 가끔 optional을 굳이 사용하지 않아도 되는곳에도 optional을 오남용하는 곳을 볼수 있습니다
 
 
뭐 이런 함수가 있다고 생각해봅시다
 
세번째 매개변수인 date를 optional로 설정했습니다
 
function createTask(title: string, description: string, date?: Date) {
   ...
   const createdAt = date || new Date();
   ...
}
createTask("우유2개구입", "할인쿠폰 사용할것");
 
그리고 함수 내부코드에서는 date의 값이 있는지 없는지를 판별하여 없는 경우 현재시간을 사용하여 나머지 코드에서 활용합니다
 
date를 optional로 꼭 해야만하나요?
 
다른 방법은 없을까요?
 
이렇게 해보면 어떨까요?
 
function createTask(title: string, description: string, date: Date = new Date()) {
   ...
   // 아무런 조치를 할필요없음
   ...
}
createTask("우유2개구입", "할인쿠폰 사용할것");
 
date 매개변수에 기본값으로 new Date()를 세팅하고
 
optional 하지 않도록 변경했습니다
 
 
코드가 좀 더 심플해집니다
 
date가 undefined 인지 체크할필요가 없습니다
 
 
 
 
또 다른 예를 들어볼까요
 
배열을 인자중의 하나로 받는 함수가 있습니다
 
function createTask(title: string, description: string, subTasks?: string[]) {
   ...
}
 
여기서 subTasks 변수를 사용하는것은 좀 더 번거롭고 귀찮습니다
 
subTasks 1개이상의 원소가 있는지 체크하려면 subTasks가 undefined인지 체크한다음에 length를 또한번 체크해야합니다
 
optional의 불편함이죠
 
function createTask(title: string, description: string, subTasks: string[] = []) {
   ...
}
 
 
이렇게 바꿔보면 어떨까요?
 
subTasks.length를 아무런 걱정없이 호출해도 됩니다

typescript optional 오남용 금지

댓글