Safe Ways to Access Data on Objects

Cleverly avoid errors caused by null values ​​of JavaScript objects

In JavaScript, secure access to object data is crucial to ensure that applications can function properly even if the data is incomplete. The core is to avoid errors caused by null values.

Attention!

To better understand this article, you need to understand the concepts of truthy and falsy values ​​in JavaScript.

Case

When writing code, we often need to access data in objects. Suppose we have an employee object and need to get its status information.

If the status information exists, the status will be displayed; if it does not exist, "Internship" will be displayed.

The sample code is as follows:

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

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

Output result:

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

Problem and Solution 1

Now, we reduce the properties of the object:

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

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

Output result:

<code>undefined adalah pegawai undefined</code>

Although there is no error reported here, the data is displayed as undefined, which does not look pretty.

To solve this problem, we can add the if-else statement:

<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>

Output result:

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

We provide a default value for the data, if the data does not exist, the default value is used.

Additional Tips

To simplify the code, you can use the following method:

<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>

Problem and Solution 2

What happens if the object itself does not exist (as null)?

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

This will result in an error like this:

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

App crashed with error.

To solve this problem, we can use the following method:

<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>

In this way, no error will be reported, and the output result is:

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

Additional Tips

Similarly, to simplify the code, you can use the following:

<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>

or:

<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>

Summary

Through the above method, we can effectively avoid the object null value problem, especially when dealing with objects from external input (such as user input, database, third-party services, etc.).

Thank you for reading!

Welcome to discuss and communicate, and also welcome to make friends?

The above is the detailed content of Safe Ways to Access Data on Objects. For more information, please follow other related articles on the PHP Chinese website!