객체의 데이터에 접근하는 안전한 방법

JavaScript 객체의 null 값으로 인한 오류를 현명하게 피하세요

JavaScript에서는 데이터가 불완전하더라도 애플리케이션이 제대로 작동할 수 있도록 하려면 객체 데이터에 대한 보안 액세스가 중요합니다. 핵심은 null 값으로 인한 오류를 방지하는 것입니다.

주의!

이 글을 더 잘 이해하려면 JavaScript의 참값과 거짓값의 개념을 이해해야 합니다.

사례

코드를 작성할 때 객체의 데이터에 액세스해야 하는 경우가 많습니다. 직원 개체가 있고 해당 개체의 상태 정보를 가져와야 한다고 가정해 보겠습니다.

현황 정보가 있으면 해당 현황이 표시되고, 존재하지 않으면 '인턴십'이 표시됩니다.

샘플 코드는 다음과 같습니다.

<code class="language-javascript">const pegawai = {
  nama: 'Alex Under',
  status: 'tetap',
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

출력 결과:

<code>Alex Under adalah pegawai tetap</code>

문제 및 해결방안 1

이제 객체의 속성을 줄입니다.

<code class="language-javascript">const pegawai = {
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

출력 결과:

<code>undefined adalah pegawai undefined</code>

여기서 보고된 오류는 없지만 데이터가 undefined으로 표시되어 보기에 좋지 않습니다.

이 문제를 해결하려면 if-else 문을 추가하면 됩니다.

<code class="language-javascript">const pegawai = {
};

if (!pegawai.nama) {
  pegawai.nama = 'Seorang Pegawai';
}

if (!pegawai.status) {
  pegawai.status = 'magang';
}

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

출력 결과:

<code>Seorang Pegawai adalah pegawai magang</code>

데이터에 대한 기본값을 제공하며, 데이터가 존재하지 않는 경우 기본값이 사용됩니다.

추가 팁

코드를 단순화하려면 다음 방법을 사용할 수 있습니다.

<code class="language-javascript">const pegawai = {
};

pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

문제 및 해결방안 2

(null처럼) 개체 자체가 존재하지 않으면 어떻게 되나요?

<code class="language-javascript">const pegawai = null;
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

이렇게 하면 다음과 같은 오류가 발생합니다.

<code>Uncaught TypeError: Cannot read properties of null (reading 'nama')</code>

오류로 인해 앱이 다운되었습니다.

이 문제를 해결하려면 다음 방법을 사용할 수 있습니다.

<code class="language-javascript">const pegawai = null;
const pegawaiSafe = pegawai || {};

if (!pegawaiSafe.nama) {
  pegawaiSafe.nama = 'Seorang Pegawai';
}

if (!pegawaiSafe.status) {
  pegawaiSafe.status = 'magang';
}

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>

이렇게 하면 오류가 보고되지 않으며 출력 결과는 다음과 같습니다.

<code>Seorang Pegawai adalah pegawai magang</code>

추가 팁

마찬가지로 코드를 단순화하려면 다음을 사용할 수 있습니다.

<code class="language-javascript">const pegawai = null;

const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>

또는:

<code class="language-javascript">const pegawai = null;

const pegawaiSafe = pegawai || {};
pegawaiSafe.nama = pegawaiSafe.nama || 'Seorang Pegawai';
pegawaiSafe.status = pegawaiSafe.status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>

요약

위 방법을 통해 특히 외부 입력(예: 사용자 입력, 데이터베이스, 타사 서비스 등)의 개체를 처리할 때 개체 null 값 문제를 효과적으로 피할 수 있습니다.

읽어주셔서 감사합니다!

토론과 소통을 환영하며 친구를 사귀는 것도 환영합니다.

위 내용은 객체의 데이터에 접근하는 안전한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!