Javascript Project 2024 - It's not a Javascript course, it's a coding test

Divided into 5 phases:

1. Mastering Clean Code using Javascript ES5 and ES6+
2. Knowing Development Techniques using Javascript ES5 and ES6+
3. Working with complex Objects, encounter techniques using Javascript ES5 and ES6+
4. Types of Functions and their use, better code organization and Cyclomatic Complexity
5. Functional Programming, discovering the engines of functional codes using Javascript ES5 and ES6+
6. JavaScript Array Methods(bonus)

Description of the phases:

WorkCleanCodeJS

- 1. Mastering Clean Code using Javascript ES5(https://www.geeksforgeeks.org/javascript-es5-js-2009/) and ES6+(https://www.geeksforgeeks.org/es6-tutorial/?ref=ml_lbp)

• 1.01 - Variables , Use meaningful and pronounceable variable names
• 1.02 - Variables , Use searchable names
• 1.03 - Variables , Use explanatory variables
• 1.04 - Avoid Mental Mapping
• 1.05 - Explicit is better than impli
• 1.06 - Don't add unneeded context
• 1.07 - Use default parameters instead of short circuiting or conditionals
• 1.08 - Functions - Function arguments (2 or fewer ideally)
• 1.09 - Functions should do one thing
• 1.10 - Function names should say what they do
• 1.11 - Functions should only be one level of abstraction
• 1.12 - Remove duplicate code
• 1.13 - Set default objects with Object.assign
• 1.14 - Don't use flags as function parameters
• 1.15 - Avoid Side Effects (part 1 and part 2)
• 1.16 - Favor functional programming over imperative programming
• 1.17 - Encapsulate conditionals
• 1.18 - Avoid negative conditionals
• 1.19 - Don't over-optimize
• 1.20 - Remove dead code
• 1.21 - Use getters and setters
• 1.22 - Make objects have private members
• 1.23 - Use consistent capitalization
• 1.24 - Comments
• 1.25 - Don't leave commented out code in your codebase
• 1.26 - Don't have journal comments
• 1.27 - Avoid positional markers

---

WorkJsSections

- 2. Knowing Development Techniques using Javascript ES5 and ES6+

• 2.01 - Using Spread Operator
• 2.02 - Check Time execute method
• 2.03 - Compare string for ordering
• 2.04 - Splitting a string into an array
• 2.05 - Substrings with slice
• 2.06 - Grouping multiple logic statements
• 2.07 - Seeting a default value for variable
• 2.08 - Referential Transparency
• 2.09 - Imperative, Declarative, Abstraction
• 2.10 - Replace switch case javascript

---

WorkJsObject

- 3. Working with complex Objects, encounter techniques using Javascript ES5 and ES6+

• 3.01 - Create Object Complexy
• 3.02 - Always decrease a long variable to a simple one
• 3.03 - This function load Filter Array Object
• 3.04 - Using Reduce in Array of Object
• 3.05 - Using Every in Array of Object
• 3.06 - Using Some in Array of Object
• 3.07 - Using Map in Array of Object
• 3.08 - JSON.parse
• 3.09 - JSON.stringify
• 3.10 - Differences between JSON and JavaScript
• 3.11 - Create new Array objects using method Functions (forEach, return)
• 3.12 - Using filters for Count Field Array Object example ( system equals 005 and have transactions)
• 3.13 - Using filters with predicates
• 3.14 - Create new Array of Object using Method Chain
• 3.15 - Sort Array of Object by Fileds
• 3.16 - GroupBy Array of Object by Fileds

---

WorkJSFunctions

- 4. Types of Functions and their use, better code organization and Cyclomatic Complexity

• 4.01 - Functions Declarations
• 4.02 - Expression Functions
• 4.03 - Arrow Functions
• 4.04 - Anonymous Functions
• 4.05 - Immediately Invoke Functions Expressions(IIFE)
• 4.06 - Named Function Expressions
• 4.07 - Generate Functions
• 4.08 - Higher-Order Functions
• 4.09 - One Linear
• 4.10 - Cyclomatic Complexity
  • 4.10.01 - Cyclomatic Complexity Refactory - Method
  • 4.10.02 - Cyclomatic Complexity Refactory - Method Chain

---

WorkJsProgrammingFunctional

- 5. Functional Programming, discovering the engines of functional codes using Javascript ES5 and ES6+

• 5.01 - Functional Programming Benefits
• 5.02 - Pure Function
• 5.03 - Impure Functions
• 5.04 - Immutability
• 5.05 - ForEach Function
• 5.06 - Times Function Definition
• 5.07 - Every Function Definition
• 5.08 - Some Function Definition
• 5.09 - Map Function Definition
• 5.10 - Recursion in Functional Programming
• 5.11 - Use currying
• 5.12 - Count, Max, Min, AVG using functions ES5, ES6+
• 5.13 - Call Json Server API by Github and file JSON Github

---

WorkJsArrayMethods

- 6. JavaScript Array Methods

• 6.01 - How Arrays Work in JavaScript
• 6.02 - How to Create an Array in JavaScript
• 6.03 - How to Access an Array's Elements
• 6.04 - The Array length Property
• 6.05 - How to Add Elements to an Array
• 6.06 - How to Remove an Element from an Array
• 6.07 - How To Check If a Variable is an Array
• 6.08 - How to Iterate or Loop Over an Array
• 6.09 - How to Convert an Array into a String
• 6.10 - How to Compare Two Arrays
• 6.11 - How to Copy an Array
• 6.12 - How to Merge Two Arrays as One
• 6.13 - How to Search an Array

WorkJsRefactoring

- 7. Define Functions Refactoring

• 7.01 - Define Functions Separeted Action using JavaScript

WorkJSCyclomaticComplexity

- 8. Cyclomatic Complexity

• 8.01 - Refactoring Cyclomatic Complexity JavaScript

WorkJsFetchApi

- 9. Call Api Using Fetch Javascript

• 9.01 - Call Api

---

JavaScript Refactoring Patterns

A collection of refactoring patterns for improving the design of existing JavaScript code.

This work is greatly motivated by, and many patterns are adapted from, Martin Fowler's excellent book Refactoring - Improving the design of existing code.

Overview of Refactoring Patterns

General Patterns

These refactorings are ported to JavaScript from Martin Fowler's book Refactoring - Improving the design of existing code. Although they are not JavaScript specific they are still great refactorings which can help to improve the design of JavaScript code.

Composing Methods

• Extract function/method
• Replace temp with query
• Introduce explaining variable
• Split temporary variable
• Remove assignments to parameters

JavaScript Patterns

These refactorings are JavaScript specific and should help to improve the design of your code. The refactorings are grouped by the ECMAScript version that implements the functionality that they depend on.

ECMAScript 5

• Replace for with forEach
• Replace aggregate property operations with reduce
• Replace direct array access element updates with map
• Replace context variable with bind/call/apply
• Extract Module

---

---

6 Refactoring Techniques🔥🔥

1. Composing Methods
2. Moving Features Between Objects
3. Organizing Data
4. Simplifying Conditional Expressions
5. Simplifying Method Calls
6. Dealing With Generalization

7 Sites to Learn Best Coding Practices 🔥🔥

1. Patterns Dev
2. Airbnb
3. Clean Code Javascript
4. System Design Primer
5. Refactoring Guru
6. refactoring Catalog
7. Documentations Languages

Playground Test Javascript

es5 play Validation

Playground CodePen

--

• What Is Quality and How Does It Relate to Refactoring?

  • There have been countless efforts to determine what makes for quality code.
  • Some are determined by collections of principles:
    • SOLID: Single responsibility, open/closed, Liskov substitution, interface segregation, and dependency inversion
    • DRY: Don’t repeat yourself
    • KISS: Keep it simple, stupid
    • GRASP: General responsibility assignment software patterns
    • YAGNI: Ya ain’t gonna need it

Books

Code That Fits in Your Head Heuristics for Software Engineering (Seemann, Mark)

JavaScript_in_the_Industry_How_professional_teams_want_you_to_write

Refactoring JavaScript turning bad code into good code (Burchard, Evan)

JavaScript Notes For Professionals

javascript Array Methods Ebook

50_shades_of_JavaScript_50_of_the_most_interesting_features_concepts

Eloquent_Javascript_A_Modern_Introduction_to_Programming_by_Marijn

Articles

Como-utilizar-terminal-integrado-visual-studio-code

Nodejs Debugging

Plays Improve Code Quality

javascript techniques for improving code Quality