<div id="readability-page-1" class="page"><div id="post-body-3301943517993076996" itemprop="articleBody">
    <p>개발을 하다 보면 종종 <code>undefined</code> 에러가 발생합니다.</p>
    <p><strong>TypeError: Cannot read properties of undefined</strong><br>이 에러는 <code>undefined</code> 객체의 속성이나 메서드에 접근할 때 발생합니다. 이런 에러를 방지할 수 있는 몇 가지 방법을 소개합니다.</p>
    
    <h3>1. <code>if</code>문으로 <code>undefined</code> 체크</h3>
    <p>가장 많이 사용하는 방법 중 하나입니다. 특히 초보 개발자라면 한 번쯤 사용해봤을 것입니다.</p>
    <pre><code>if (obj == undefined) {
    // 데이터 처리...
}</code></pre>
    <p>나쁜 방법은 아니지만, 객체가 많고 복잡한 로직일 경우 코드를 더 복잡하게 만들 수 있습니다.</p>
    
    <h3>2. <code>try { } catch { }</code> 문 사용</h3>
    <p>객체 처리 문장을 <code>try { } catch { }</code>로 에러 처리를 할 수 있습니다. 에러가 나더라도 <code>catch</code> 문에서 처리할 수 있지만, 에러를 허용하는 방식이기 때문에 추천하지 않습니다.</p>
    <pre><code>try {
    console.log(obj.property);
} catch (error) {
    console.error("에러 발생! : ", error);
}</code></pre>
    
    <h3>3. Optional Chaining 사용</h3>
    <p>ES2020에 도입된 <strong>Optional Chaining 연산자</strong> <code>?.</code>를 사용하면, <code>undefined</code>나 <code>null</code>인 객체에 안전하게 접근할 수 있습니다.</p>
    <pre><code>console.log(obj?.property);</code></pre>
    
    <h3>4. OR 연산자를 이용한 기본값 설정</h3>
    <p>객체가 <code>null</code>일 경우 기본값을 설정하여 에러를 방지할 수 있습니다. <code>||</code> 연산자를 사용하여 쉽게 작성할 수 있습니다.</p>
    <pre><code>A || B</code></pre>
    <p>A가 Falsy면 B가 반환됩니다. Falsy 값에는 <code>null</code>, <code>undefined</code>, <code>NaN</code> 등이 포함됩니다. 다음과 같이 사용할 수 있습니다.</p>
    <pre><code>let obj = xFunction() || {};
console.log(obj.property);</code></pre>
    
    <h3>5. 함수를 이용하는 방법</h3>
    <p>검증 함수를 사용하는 방법입니다. 예를 들어, <code>ifnull</code>, <code>nvl</code>, <code>isnull</code> 같은 함수로 매개변수가 <code>null</code>인지 확인하고 처리할 수 있습니다.</p>
    <pre><code>let obj = gf_nvl(val, "");
function gf_nvl(val, defaultVal) {
    return val || defaultVal;
}</code></pre>

    <p>위 방법들을 적절히 사용하여 짜증나는 <code>undefined</code> 에러를 방지합시다!<br> <strong>- 끝 -</strong></p>
</div></div>

항동킴 Blog

개발을 하다 보면 종종 undefined 에러가 발생합니다.
TypeError: Cannot read properties of undefined
이 에러는 undefined 객체의 속성이나 메서드에 접근할 때 발생합니다. 이런 에러를 방지할 수 있는 몇 가지 방법을 소개합니다.
1. if문으로 undefined 체크
가장 많이 사용하는 방법 중 하나입니다. 특히 초보 개발자라면 한 번쯤 사용해봤을 것입니다.
if (obj == undefined) {
    // 데이터 처리...
}
나쁜 방법은 아니지만, 객체가 많고 복잡한 로직일 경우 코드를 더 복잡하게 만들 수 있습니다.
2. try { } catch { } 문 사용
객체 처리 문장을 try { } catch { }로 에러 처리를 할 수 있습니다. 에러가 나더라도 catch 문에서 처리할 수 있지만, 에러를 허용하는 방식이기 때문에 추천하지 않습니다.
try {
    console.log(obj.property);
} catch (error) {
    console.error("에러 발생! : ", error);
}
3. Optional Chaining 사용
ES2020에 도입된 Optional Chaining 연산자 ?.를 사용하면, undefined나 null인 객체에 안전하게 접근할 수 있습니다.
console.log(obj?.property);
4. OR 연산자를 이용한 기본값 설정
객체가 null일 경우 기본값을 설정하여 에러를 방지할 수 있습니다. || 연산자를 사용하여 쉽게 작성할 수 있습니다.
A || B
A가 Falsy면 B가 반환됩니다. Falsy 값에는 null, undefined, NaN 등이 포함됩니다. 다음과 같이 사용할 수 있습니다.
let obj = xFunction() || {};
console.log(obj.property);
5. 함수를 이용하는 방법
검증 함수를 사용하는 방법입니다. 예를 들어, ifnull, nvl, isnull 같은 함수로 매개변수가 null인지 확인하고 처리할 수 있습니다.
let obj = gf_nvl(val, "");
function gf_nvl(val, defaultVal) {
    return val || defaultVal;
}
위 방법들을 적절히 사용하여 짜증나는 undefined 에러를 방지합시다!
 - 끝 -

[javascript] TypeError: Cannot read properties of undefined 오류를 해결하자!

댓글