As mentioned in one of my previous blogpost’s ‘Sitecore JSS: Exploring the SitecoreContext Object’, coming from a background in back-end development (mostly doing .NET/C# development), I can certainly say that doing headless Sitecore development has a learning curve, especially when it comes to using new front-end frameworks like React and Next.js, as well as the Sitecore JavaScript Services (JSS) framework.
In this general blogpost, I’ll explain to previous Sitecore .NET/C# oriented devs what JavaScript Object destructuring is.
In JavaScript, destructuring is a syntax that allows you to easily extract values from arrays or objects and assign them to variables. This can make your code more concise and easier to read, especially when working with complex data structures.
Let’s have a look at the previous ‘ContentBlock’ example where we used the ‘useSitecoreContext’ hook:
Now let’s apply destructuring to it (as you can see it will result in a minor difference), here is an example of destructuring with the ‘useSitecoreContext’ hook:
In this example, the ‘useSitecoreContext’ hook is used to retrieve the context object, which contains information about the current Sitecore context. The sitecoreContext property is then destructured from the context object and assigned to a variable of the same name (line 23/24). This allows the code within the component to reference the sitecoreContext object directly, without having to access it through the context object (line 32-34).
And here’s the output of the same component, but then with ‘destructuring’ applied.
Now this example was a really tiny change in terms of conciseness, but with when having complex data structures it can certainly, as said before, make your code more concise, shorter and easier to read. And that’s JavaScript Object Destructuring explained in combination with Sitecore JSS (even though it’s got nothing to do with JSS).
Happy Sitecore-ing!
–Robbert
