10 Tips Menulis Code JavaScript yang Clean

Muhammad Afifudin

11 Aug 202107:35

Summary

TLDRIn this engaging video, the speaker, Awali, shares essential tips for writing clean JavaScript code. The script begins with an explanation of clean code, emphasizing its importance for readability and maintainability. Awali then presents ten practical tips, such as using English for variable naming, choosing verbs for functions, and plurals for arrays. The tips also cover avoiding ambiguous variable names, simplifying conditions, and ensuring functions have a single responsibility. The video aims to help developers write more understandable and error-free code, with a promise of more tips in a follow-up episode.

Takeaways

😀 Clean code is defined as code that is easy to understand and modify by others.
📝 Always use English for naming variables, even if the application is in another language.
🏷️ Use verbs for function names and nouns for variable names to improve clarity.
📚 Use plural forms for array variables to indicate that they contain multiple items.
🔄 When iterating over an array, use the singular form of the array's variable name for clarity.
🔑 Prefix boolean variables with 'is', 'can', or 'should' to make their purpose clear.
🔒 Store conditions in variables to simplify the code and make it more readable.
🚫 Avoid using 'not' in variable names as it can make reading the code more difficult.
📈 Use specific and explicit names for variables instead of generic terms like 'data'.
🔧 Functions should have a single responsibility to make the code easier to understand and maintain.
⚙️ Use JavaScript linters to catch and correct inconsistencies in your code, such as formatting errors.

Q & A

What is the definition of 'clean code' according to the video script?
-Clean code is defined as code that is easy to understand and modify, similar to how the quality of a sports car can be measured by the number of 'WTFs per minute' - if it's hard for others to understand, it might indicate poor code quality.
What is the first tip shared in the script for writing clean JavaScript code?
-The first tip is to always use English for naming variables, regardless of the application's language, to maintain code cleanliness.
Why should verbs be used for functions and nouns for variables according to the script?
-Using verbs for functions and nouns for variables helps to clearly distinguish between actions (functions) and data (variables), making the code more readable.
What is the recommendation for naming variables that represent arrays?
-The recommendation is to use plural forms for array variables to accurately represent that they contain multiple elements.
Why should the singular form of the variable name be used during iteration over an array?
-Using the singular form during iteration helps to clearly indicate the individual elements being processed within the array.
What is the purpose of using prefixes like 'is', 'can', or 'should' for boolean variables?
-These prefixes make the purpose of the boolean variable clearer and reduce ambiguity, making the code easier to understand.
Why should conditions be stored in variables?
-Storing conditions in variables makes the code more readable, as it allows others to understand the logic without having to parse complex conditional statements.
What is the advice against using the word 'data' when naming variables?
-The word 'data' is too generic, and it's advised to use more specific or explicit variable names to represent the actual data being stored.
What is the main reason for keeping functions focused on a single responsibility?
-Focusing functions on a single responsibility makes the code easier to understand, maintain, and debug.
Why is it important to use JavaScript linters?
-JavaScript linters help identify and correct inconsistencies and errors in the code, promoting a more consistent and clean coding style.
What does the script suggest for those who are not fluent in English when naming variables?
-The script suggests using tools like Google Translate to assist with naming variables in English, as it's important for code cleanliness.

Outlines

00:00

😀 Introduction to Clean Code in JavaScript

The speaker, Awali, begins by discussing the concept of clean code in JavaScript, emphasizing its importance for readability and maintainability. They introduce the idea that code quality can be measured by the number of 'WTFs per minute,' suggesting that clean code should be easily understandable by others. Awali references a popular job description that highlights the necessity of clean code for future modifications and feature additions. They also mention a quote from the internet that defines clean code as being easy to understand, modify, and maintain. The speaker then promises to share 10 tips to write clean JavaScript code.

05:02

📝 Tips for Writing Clean JavaScript Code

In the second paragraph, the speaker continues with the first five tips for writing clean JavaScript code. These include using English for variable naming, using verbs for functions and nouns for variables, utilizing plural forms for array variables, and using singular forms when iterating over arrays. The speaker also advises the use of prefixes like 'is', 'can', or 'should' for boolean variables to make their purpose clear and reduce ambiguity. They stress the importance of variable naming, stating that it should answer questions about the variable's purpose and functionality without needing comments. The paragraph concludes with a final tip.

Mindmap

Keywords

💡Clean Code

Clean code refers to a style of writing code that is easy to understand, maintain, and modify. In the video, the concept is introduced by comparing it to the quality of a sports car, which can be measured by the number of 'WTFs per minute'. The video emphasizes that clean code should be easily understandable by others, which is a key aspect of writing maintainable and readable JavaScript code.

💡Variable Naming

Variable naming is a fundamental aspect of programming that affects code readability. The video script stresses the importance of using English for variable names, even if the application is in another language, to maintain code cleanliness. Examples from the script include using verbs for functions (e.g., 'get', 'delete') and nouns for variables, which helps in conveying the purpose of the variable or function clearly.

💡Verbs for Functions

The use of verbs in function names is a practice that helps to describe the action performed by the function. In the script, it's suggested to use action words like 'get', 'head', 'delete', and 'validated' to name functions, which makes it clear what the function does, contributing to the overall clarity of the code.

💡Nouns for Variables

Nouns should be used for variable names to represent data entities. The video mentions using singular or plural forms of nouns for variables, which helps in identifying the type of data the variable holds. For example, using 'user' or 'users' instead of generic terms like 'data' makes the code more descriptive and easier to understand.

💡Plurals for Arrays

When naming variables that represent arrays, the script suggests using plural forms to indicate that the variable contains multiple items. This is exemplified in the script by contrasting a singular form like 'user' with the correct plural form 'users', which holds a collection of user objects, enhancing the code's readability.

💡Singular Form in Iterations

During iterations over arrays, the script advises using the singular form of the array's name for the iteration variable. This practice helps in making the code more readable and intuitive, as it clearly indicates that the iteration is over individual elements of the array, as shown in the script with examples like 'user' instead of a generic term like 'item'.

💡Prefixes for Boolean Variables

Boolean variables often represent true or false conditions. The video suggests using prefixes like 'is', 'can', 'should' to clearly indicate the purpose of the boolean variable. For instance, changing a variable name from 'expired' to 'isExpired' makes it immediately clear what the variable represents, reducing ambiguity.

💡Positive Naming Convention

The script emphasizes the importance of using positive naming conventions for variables, meaning avoiding double negatives in variable names. Positive naming makes the code easier to read and understand at a glance. For example, 'isNotExpired' is less clear than 'isActive', which is a positive and straightforward naming approach.

💡Avoid Generic Variable Names

The video advises against using overly generic names like 'data' for variables, as they do not convey specific information about the content they hold. Instead, specific and explicit variable names should be used, such as 'studentData' or 'teacherData', which provides clear context about the data being stored or manipulated.

💡Single Responsibility Principle

This principle in software development suggests that a function should have only one reason to change, meaning it should perform a single task. The script illustrates this by showing an example of a function that does too much and then breaking it down into smaller, more focused functions, each with a specific responsibility, which leads to cleaner and more maintainable code.

💡JavaScript Linters

JavaScript linters are tools that analyze code for potential errors and enforce style consistency. The video mentions using linters to catch errors and correct inconsistencies in code, such as improper spacing or punctuation. The script refers to a linter named 'ESLint', which helps maintain a clean and consistent codebase.

Highlights

The concept of clean code is introduced as code that is easy to understand and maintain.

Clean code is defined by the ability to be easily understood by others, reducing the 'WTF per minute' count.

The importance of using English for variable naming, regardless of the application's language.

Using verbs for function names and nouns for variable names to improve code readability.

Recommendation to use plural forms for array variables to reflect their content.

Using the singular form of array variable names during iteration for clarity.

Adding prefixes like 'is', 'can', or 'should' to variable names for better clarity.