### Async Get User Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Example of an asynchronous function to fetch user data. ```js async function getUser(id) { const user = await fetch(`/api/user/${id}`) return user } ``` -------------------------------- ### Reset Fruits Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Example of a function to reset the fruits variable to its initial value. ```js const initialFruits = 5 let fruits = initialFruits setFruits(10) console.log(fruits) // 10 function resetFruits() { fruits = initialFruits } resetFruits() console.log(fruits) // 5 ``` -------------------------------- ### Set Fruits Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Example of a function to set a new value for the fruits variable. Demonstrates declarative assignment. ```js let fruits = 0 function setFruits(nextFruits) { fruits = nextFruits } setFruits(5) console.log(fruits) // 5 ``` -------------------------------- ### Get Fruit Count Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Example of a simple getter function to retrieve the count of fruits. ```js function getFruitCount() { return this.fruits.length } ``` -------------------------------- ### Compose Page URL Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Example of a function that creates a new page URL string by combining page name and ID. ```js function composePageUrl(pageName, pageId) { return pageName.toLowerCase() + '-' + pageId } ``` -------------------------------- ### Decision Tree for get vs. fetch Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/05-naming-glossary.md Use 'get' for immediately available data (synchronous or cached) and 'fetch' for data from a remote source. ```text Is the data immediately available? ├─ Yes (synchronous/cached) → use "get" (getUser) └─ No → Is it from a remote source? ├─ Yes (API call) → use "fetch" (fetchPosts) └─ No (local async) → use "get" (getUser) or "fetch" ``` -------------------------------- ### Correct Example: Using Natural Prefixes Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/02-core-principles.md Employ natural English prefixes like 'has' to indicate presence, as in 'hasPagination'. This makes the intent clear and efficient, aligning with the S.I.D principles. ```javascript const hasPagination = postCount > 10 // ✓ Uses natural English prefix "has" // ✓ Clear intent: indicates presence of pagination feature // ✓ Efficient: single identifier communicates the complete concept ``` -------------------------------- ### Action Verbs for Naming Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/README.md Use these action verbs to describe the primary operation of a function. Examples show common use cases. ```text | Action | Use Case | Example | |---|---|---| | `get` | Retrieve data (sync or async) | `getUser()`, `getMessages()` | | `set` | Assign value | `setCount()`, `setName()` | | `reset` | Restore initial state | `resetForm()`, `resetCounter()` | | `remove` | Extract from collection | `removeItem()`, `removeFilter()` | | `delete` | Permanently erase | `deleteUser()`, `deletePost()` | | `compose` | Create by combining | `composeUrl()`, `composeConfig()` | | `handle` | Respond to event | `handleClick()`, `handleError()` | ``` -------------------------------- ### Correct Example: Using Natural Verbs Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/02-core-principles.md Utilize natural English verbs like 'paginate' with appropriate prefixes such as 'should' to convey intent, as in 'shouldPaginate'. This ensures clarity and adherence to S.I.D principles. ```javascript const shouldPaginate = postCount > 10 // ✓ Natural English word "paginate" // ✓ Clear intent with "should" prefix // ✓ Alternatives: all acceptable with S.I.D balance ``` -------------------------------- ### Handle Error Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/03-function-naming-pattern.md Use to indicate that the caller should handle the error. The function name follows the 'should' prefix, 'handle' action, and 'Error' high context. ```javascript // "You should handle the error" shouldHandleError(error) ``` -------------------------------- ### Common Use Cases for Handle Functions Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/03-function-naming-pattern.md Examples of `handle` functions used for event listeners, error callbacks, and lifecycle callbacks in various programming contexts. ```javascript // Event handlers form.addEventListener('submit', handleFormSubmit) button.addEventListener('click', handleButtonClick) input.addEventListener('change', handleInputChange) // Error callbacks promise.catch(handleError) request.onError(handleRequestError) // Lifecycle callbacks React.useEffect(() => handleComponentMount(), []) window.addEventListener('load', handlePageLoad) ``` -------------------------------- ### Asynchronous Get Function Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/03-function-naming-pattern.md Use `get` for asynchronous data fetching. The `await` keyword and context reveal that the function is async. ```javascript async function getUser(id) { const response = await fetch(`/api/users/${id}`) return response.json() } const user = await getUser(123) ``` -------------------------------- ### Get Multiple Users Functions Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/04-cardinality-conventions.md Use plural names for functions that return a collection of items. This includes direct database queries or filtered results. ```javascript function getAllUsers() { return database.find({}) // Returns user collection } ``` ```javascript function getActiveUsers(users) { return users.filter(u => u.isActive) // Returns filtered collection } ``` ```javascript function getUserFriends(userId) { return database.find({ friendOfId: userId }) // Returns collection } ``` -------------------------------- ### Short, Intuitive, and Descriptive Naming (S-I-D) Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Names should be short, intuitive, and descriptive. Avoid ambiguous names, unnatural terms, and made-up verbs. This example illustrates the S-I-D principle. ```javascript /* Bad */ const a = 5 // "a" could mean anything const isPaginatable = a > 10 // "Paginatable" sounds extremely unnatural const shouldPaginatize = a > 10 // Made up verbs are so much fun! /* Good */ const postCount = 5 const hasPagination = postCount > 10 const shouldPaginate = postCount > 10 // alternatively ``` -------------------------------- ### Remove Filter Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Example of a function to remove a specific filter from a collection of selected filters. ```js function removeFilter(filterName, filters) { return filters.filter((name) => name !== filterName) } const selectedFilters = ['price', 'availability', 'size'] removeFilter('price', selectedFilters) ``` -------------------------------- ### Validate Form Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/03-function-naming-pattern.md Use to indicate that the caller should validate the form. The function name follows the 'should' prefix, 'validate' action, and 'Form' high context. ```javascript // "You should validate the form" shouldValidateForm(form) ``` -------------------------------- ### Synchronous Get Function Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/03-function-naming-pattern.md Use `get` for synchronous retrieval of internal data. The function name does not indicate if it's async. ```javascript function getFruitCount() { return this.fruits.length } const count = getFruitCount() ``` -------------------------------- ### Consistent Naming Conventions Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md Choose and consistently apply a single naming convention (e.g., camelCase, PascalCase, snake_case). This snippet demonstrates good and bad examples of naming convention consistency. ```javascript /* Bad */ const page_count = 5 const shouldUpdate = true /* Good */ const pageCount = 5 const shouldUpdate = true /* Good as well */ const page_count = 5 const should_update = true ``` -------------------------------- ### Get Single User Functions Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/04-cardinality-conventions.md Use singular names for functions that return a single value or undefined. This applies whether fetching from a database or processing a collection. ```javascript function getFirstUser(users) { return users[0] // Returns single user or undefined } ``` ```javascript function getUserById(id) { return database.find({ id }).first() // Returns one user } ``` -------------------------------- ### Form Self-Validation Example Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/03-function-naming-pattern.md Use to indicate that the form should validate itself. The function name follows the 'should' prefix, 'Form' high context, and 'Validate' action. ```javascript // "The form should validate itself" shouldFormValidate(form) ``` -------------------------------- ### Compose Function to Create From Components Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/03-function-naming-pattern.md Use `compose` to create new data by combining or transforming existing data. This is distinct from `get` as it creates new data rather than retrieving existing. ```javascript function composePageUrl(pageName, pageId) { return pageName.toLowerCase() + '-' + pageId } const url = composePageUrl('About', 42) ``` -------------------------------- ### Correct Example: Descriptive Variable Name Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/_autodocs/02-core-principles.md Use descriptive names like 'postCount' that clearly indicate the variable's purpose. This name is short, intuitive, and descriptive, adhering to the S.I.D principles. ```javascript const postCount = 5 // ✓ Short: 9 characters // ✓ Intuitive: clearly refers to count of posts // ✓ Descriptive: specificity of "post" + "count" conveys purpose ``` -------------------------------- ### Reflect Expected Result in Names Source: https://github.com/kettanaito/naming-cheatsheet/blob/main/README.md A name should accurately reflect the expected outcome or state. This example demonstrates how to name a variable to clearly indicate its purpose in a conditional rendering scenario. ```jsx /* Bad */ const isEnabled = itemCount > 3 return