<aside> ✅ ScandiPWA follows a strict JavaScript style guide for maintainability and consistency

</aside>

Code style recommendations in ScandiPWA consist of two main categories: functional programming, which is enforced to make the codebase easier to maintain, and ScandiPWA best practices, which have been implemented to guarantee that code is extensible, both by overriding the theme and writing plugins.

We strongly recommend you use ESlint to check your code style. This article was written to help you understand the code style rules we enforce and write better code.https://www.notion.so/scandiweb/What-is-the-directory-structure-793001824a7f4e4cbb5beeccfc40ffee

Writing Maintainable Code

Keep Functions Short

Functions should do only one thing, and do it well. If you notice that a function has become longer than necessary, consider breaking it up into parts. Not only will this make your codebase easier to navigate and manage, but it will also make your theme easier to extend via plugins and theme overrides.

This is especially relevant when writing functions that return JSX. Breaking them down into multiple functions can reduce nesting, improve readability, and make them easier to extend.

<aside> 🚨 Avoid writing long functions such as this:

• Example of a long function

Issues:

• Code is harder to understand and navigate
• Re-ordering or re-using sub-components requires a lot of changes </aside>

<aside> ✅ Instead, try breaking your code into smaller functions:

• Example of recommended function

Advantages:

• Each function has a clear responsibility and is easy to change
• The structure of the resulting JSX is more clear
• The component is more extensible via plugins and overrides </aside>

Separate Concerns

Containers should be responsible for business logic, and components should be responsible for presentation logic. Making this distinction will make it easier to structure your code.

Use Destructuring

Destructuring enables you to "unpack" certain values from an object such as the state or props.

const { product: { name, sku } = {} } = this.props;
// you can now use name instead of this.props.product.name
// and sku instead of this.props.product.sku

// if this.props.product is undefined, it will get the default value {}.
// name and sku will be undefined, which you can easily check...
// but at least the page won't crash for accessing the property of an
// undefined value

ScandiPWA prefers destructuring all required variables at the beginning of a function over direct field access, as it offers several benefits:

• More concise code with reduced repetition if the same value is used multiple times
• Ability to provide default values
• By moving destructuring to the first line of each function, the dependencies of that function are clear

Use Meaningful Names

To make code easier to understand, avoid generic names such as x or abbreviations such as prdct. Give meaningful names that describe what the variable/function/class is for.

Avoid Magic Numbers

<aside> 🚨 It can be tempting to pass a hard-coded literal value to a function:

CSS.setVariable(
    this.draggableRef,
    'animation-speed',
    `${ Math.abs(distance * 300) }ms`
);

However, the purpose of the number 300 is not clear, and might confuse a developer looking at this for the first time.

</aside>

<aside> ✅ Instead, consider creating a constant to describe the meaning of the value:

//component/Slider/Slider.component.js (simplified excerpt)

export const ANIMATION_DURATION = 300;

CSS.setVariable(
    this.draggableRef,
    'animation-speed',
    `${ Math.abs(distance * ANIMATION_DURATION) }ms`
);

Advantages:

• The intention of the code is clear, and the math makes sense
• ANIMATION_DURATION can be easily reused if needed
• The duration can be adjusted without worrying about breaking something

Better yet, use a .config.js file for that( How to create a .config.js file?).

</aside>

Functional Programming

Functional programming aims to make code easier to reason about and maintain by avoiding mutable values. It can make your codebase easier to navigate as well as more concise and elegant.

Avoid using let, prefer using const

Use const for every variable and do not reassign values.

<aside> 🚨 Avoid let and reassignments:

let price = 4.5;
price = '$' + price;
price = `This product costs ${ price }.`

Potential problems that can occur as the codebase grows and price is used more times:

• price can have multiple meanings; a developer looking at line 1 might miss the reassignment and assume price is a number
• The type of price can change and can get hard to guess
• Any code needing the original value of the price can't get it </aside>

<aside> ✅ Instead prefer:

const price = 4.5;
const formattedPrice = '$' + price;
const message = `This product costs ${ formattedPrice }.`

Benefits:

• You are forced to give a meaningful name to each variable, making your intentions clear
• The values are immutable and easier to reason about
• Any previous value can be re-used if necessary </aside>

Avoid Loops

In functional programming, loops are discouraged in favor of iterative functions that signal intent better. In addition, they are often elegant and concise.

If you need to iterate over the array to produce a single value, such as the sum, maximum value, or even an object containing some of the array's values, you can use reduce.

<aside> 🚨 Avoid using a loop to combine the array's elements:

const items = [2, 4, 24, 42];
let sum = 0;
for (let i = 0; i < items.length; i++) {
    sum += items[i];
}

</aside>

<aside> ✅ It is preferable to use reduce.:

const items = [2, 4, 24, 42];
const sum = items.reduce((sum, item) => sum + item);

Advantages:

• More concise and elegant
• Avoids an imperative loop and a mutable value

If you see this for the first time, it might seem counter-intuitive. Perhaps MDN's docs will help!

</aside>

If you need to transform the values of the array into different values, use map

<aside> 🚨 Avoid using a loop to transform an array:

const items = [2, 4, 24, 42];
const newItems = []
for (let i = 0; i < items.length; i++) {
    newItems.push(`Item ID: ${ items[i] }`);
}

</aside>

<aside> ✅ Instead, use map:

const items = [2, 4, 24, 42];
const newItems = items.map(item => `Item ID: ${ item }`);

Advantages:

• More concise and elegant
• Intentions are clear - this is a typical use of map </aside>

In general, you should be able to write code in JavaScript without needing to use loops at all. Following this practice will result in cleaner and more maintainable code.

Working with Arrays

For code to be easier to reason about, you should avoid mutating arrays. Instead, it is preferred to create new arrays with the values you want. This will often be more concise, and make the data flow easier to follow. In addition, it is consistent with how React and Redux handle state - instead of giving you access to modify the state directly, you are expected to provide new values for the state.

MDN Web Docs is a great reference resource for JavaScript. Here you can find a summary of how array functions can be used to write functional-programming-style code, with links to the MDN documentation.

Creating a new array by transforming each item

map: calls the function for each value and returns the array of results

<aside> ➡️ map is often used in JSX when you need to render an array of items. You can "map" or transform the array into an array of react elements by calling map with a function that accepts each item and returns JSX. Example:

// component/ProductCustomizableOptions/ProductCustomizableOptions.component.js (excerpt)        

return options.map((option, key) => (
	<ProductCustomizableOption
	  option={ option }
	  key={ key }
	/>
));

</aside>

Reducing the array to 1 value

reduce: combines all elements into 1 new value, according to the specified reducing function

some: returns true if and only if the specified function returns true for at least 1 element in the array

every: returns true if and only if the specified function returns true for all elements

Copying part of the array

select * from customer_address_entity_text order by entity_id desc ;

select * from customer_address_entity_text order by entity_id desc ;

select * from customer_address_entity_text order by entity_id desc ;