The optional chaining operator in vanilla JS

Today, we’re going to look at the optional chaining operator (?.), and how you can use it to prevent errors when accessing nested objected properties.
Let’s dig in.
The challenge with nested or multidimensional objects If you attempt to get the property of an object that does not exist in a multidimensional object, the browser will throw an error.
For example, imagine you had a wizard object, with a collection of spells.


This content originally appeared on Go Make Things and was authored by Go Make Things

Today, we’re going to look at the optional chaining operator (?.), and how you can use it to prevent errors when accessing nested objected properties.

Let’s dig in.

The challenge with nested or multidimensional objects

If you attempt to get the property of an object that does not exist in a multidimensional object, the browser will throw an error.

For example, imagine you had a wizard object, with a collection of spells. Each one has a list of required materials, and the phrase you say to cast it.

let wizard = {
	name: 'Merlin',
	spells: {
		levitate: {
			materials: ['moss', 'a pinch of salt'],
			phrase: 'Levioso!'
		},
		summon: {
			materials: ['diamond dust', 'a drop of water'],
			phrase: 'Abracadabra!'
		}
	}
};

To get the phrase for the summon spell, you would do this.

// returns "Abracadabra!"
let summon = wizard.spells.summon.phrase;

But, if you try to get the phrase property for a spell that doesn’t exit, the browser will throw an error.

// throws an error
// Uncaught TypeError: Cannot read property 'phrase' of undefined
let teacups = wizard.spells.teacup.phrase;

The optional chaining operator

Optional chaining is a browser-native way to chain methods or properties, and conditionally continue down the chain only if the value is not null or undefined.

To use optional chaining, add a question mark (?) before the dot (.) in your chain.

// returns "Abracadabra!"
let summonOptional = wizard?.spells?.summon?.phrase;

// returns undefined but does not throw an error
let teacupsOptional = wizard?.spells?.teacup?.phrase;

Instead of throwing an error, you’ll get back undefined.

Here’s a demo.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2021-04-02T14:30:00+00:00) The optional chaining operator in vanilla JS. Retrieved from https://www.scien.cx/2021/04/02/the-optional-chaining-operator-in-vanilla-js/

MLA
" » The optional chaining operator in vanilla JS." Go Make Things | Sciencx - Friday April 2, 2021, https://www.scien.cx/2021/04/02/the-optional-chaining-operator-in-vanilla-js/
HARVARD
Go Make Things | Sciencx Friday April 2, 2021 » The optional chaining operator in vanilla JS., viewed ,<https://www.scien.cx/2021/04/02/the-optional-chaining-operator-in-vanilla-js/>
VANCOUVER
Go Make Things | Sciencx - » The optional chaining operator in vanilla JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/02/the-optional-chaining-operator-in-vanilla-js/
CHICAGO
" » The optional chaining operator in vanilla JS." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2021/04/02/the-optional-chaining-operator-in-vanilla-js/
IEEE
" » The optional chaining operator in vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/04/02/the-optional-chaining-operator-in-vanilla-js/. [Accessed: ]
rf:citation
» The optional chaining operator in vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2021/04/02/the-optional-chaining-operator-in-vanilla-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts