More info on conditional statements, functions.

Logic formulas vs data retrival.

Author: george-GPT

JavaScript-Quick-Reference.md

@@ -70,6 +70,7 @@ A comprehensive yet concise quick-reference and overview of JavaScript fundament
 - [9.4 Form Validation](#94-form-validation)
 - [9.5 Leveraging Randomness with Math.random()](#95-leveraging-randomness-with-mathrandom)
 - [9.6 Persisting Data with Web Storage](#96-persisting-data-with-web-storage)
+- [9.7 Coding Logic vs Data Retrieval & Execution](97-coding-logic-vs-data-retrival--execution)
 
 ## Tips and Best Practices
 
@@ -223,11 +224,11 @@ Examples illustrating syntax for variable declarations and data types.
 
 ## 3.1 FUNCTIONS
 
-Detailed exploration of functions in JavaScript, including parameters and advanced concepts.
+In JavaScript, functions are fundamental building blocks, acting as callable objects to perform tasks or return values. They enhance code organization, reusability, and testability. This section delves into functions, covering declarations, parameters, and advanced concepts.
 
 ### Function Declarations
 
-Standard way to define a function with parameters.
+Define functions using the `function` keyword, specifying parameters within parentheses.
 
 ```javascript
 function greet(name) {
@@ -238,9 +239,9 @@ console.log(greet('Alice'));
 
 Outputs "Hello, Alice!"
 
-### Function Parameters
+### Function Parameters and Arguments
 
-Functions can take parameters as input.
+Functions accept inputs called parameters, defined at declaration, and are placeholders for data passed during invocation, called arguments. Parameters are locally scoped within the function, allowing you to reference them even if they haven't been assigned outside. Additionally, you can reference external or existing parameters within the function body. Arguments, on the other hand, are the actual values passed to the function when it's called, allowing for dynamic operation based on the values provided.
 
 ```javascript
 function add(a, b) {
@@ -251,7 +252,7 @@ console.log(add(5, 3)); // Outputs 8
 
 ### Default Parameters (ES6)
 
-Assign default values to parameters.
+ES6 allows default values for parameters, used when no argument is provided for that parameter.
 
 ```javascript
 function say(message = 'Hi') {
@@ -263,7 +264,7 @@ function say(message = 'Hi') {
 
 ### Rest Parameters (ES6)
 
-Handle an indefinite number of parameters.
+Rest parameters syntax (...) enables functions to accept an indefinite number of arguments as an array.
 
 ```javascript
 function sumAll(...numbers) {
@@ -276,20 +277,41 @@ Outputs 6
 
 ### Arrow Functions (ES6)
 
-Concise way to write functions:
+Arrow functions offer a concise syntax for writing functions, useful for short operations and as function arguments.
 
-- (parameters) => expression
+```javascript
+const arrowFunction = (parameters) => expression;
+```
 
 ```javascript
-const multiply = (x, y) => x \* y;
-console.log(multiply(2, 3));
+// Traditional function expression
+function add(a, b) {
+  return a + b;
+}
+
+// Arrow function expression
+const addArrow = (a, b) => a + b;
+
+console.log(add(2, 3)); // Output: 5
+console.log(addArrow(2, 3)); // Output: 5
 ```
 
-Outputs 6
+In this example, the arrow function addArrow accomplishes the same thing but with a more concise syntax. It omits the function keyword and uses the => arrow syntax to define the function.
+
+### Function Expressions
+
+Function expressions assign an anonymous function to a variable. They offer flexibility, allowing functions to be defined and passed as data. Within these function expressions, parameters can refer to both existing variables and parameters that have not been previously declared or defined. This allows for dynamic behavior based on the values passed to the function when it's invoked.
+
+```javascript
+const square = function (x) {
+  return x * x;
+};
+console.log(square(4)); // Outputs 16
+```
 
 ### IIFE (Immediately Invoked Function Expression)
 
-Function that runs as soon as it is defined.
+IIFEs are functions that execute immediately upon definition, useful for initializing applications or namespaces.
 
 ```javascript
 (function () {
@@ -299,7 +321,7 @@ Function that runs as soon as it is defined.
 
 ### Higher-Order Functions
 
-Functions that take or return other functions.
+These functions accept or return other functions, facilitating abstraction and composition in programming.
 
 ```javascript
 function applyOperation(a, b, operation) {
@@ -371,6 +393,21 @@ for (const number of numbers) {
 }
 ```
 
+### Ternary Operator
+
+The ternary operator is a concise way to write conditional statements in JavaScript. It takes three operands: a condition, an expression to execute if the condition is true, and an expression to execute if the condition is false.
+
+```javascript
+condition ? expression1 : expression2;
+```
+
+```javascript
+const age = 20;
+const status = age >= 18 ? 'adult' : 'minor';
+
+console.log(status); // Outputs: 'adult' since age is greater than or equal to 18
+```
+
 ### Array.forEach()
 
 Executes a specified function for each element within an array. While it's not a traditional loop, it's closely related to the topic of array iteration.
@@ -425,18 +462,34 @@ if (condition1) {
 
 ### switch Statement
 
-Executes code based on the value of an expression.
+Switch statements provide a way to perform different actions based on different conditions. They allow you to evaluate an expression and execute code blocks based on the matching case. Switch statements offer a more concise alternative to multiple if...else statements when dealing with multiple conditions.
 
 ```javascript
 switch (expression) {
-  case x:
-    // Code for case x
+  case value1:
+    // Code block to execute if expression equals value1
+    break;
+  case value2:
+    // Code block to execute if expression equals value2
+    break;
+  // Additional cases as needed
+  default:
+  // Code block to execute if expression doesn't match any case
+}
+```
+
+```javascript
+const day = 'Monday';
+
+switch (day) {
+  case 'Monday':
+    console.log('Today is Monday');
     break;
-  case y:
-    // Code for case y
+  case 'Tuesday':
+    console.log('Today is Tuesday');
     break;
   default:
-  // Default code if none of the above cases are true
+    console.log("It's neither Monday nor Tuesday");
 }
 ```
 
@@ -2083,6 +2136,46 @@ Web Storage, encompassing both localStorage and sessionStorage, offers robust so
 
 ## [🔝 Back to Top](#top)
 
+## 9.7 Coding Logic vs Data Retrieval & Execution
+
+Understanding the distinction between coding logic and data retrieval & execution in JavaScript is crucial for effective programming.
+
+### Coding Logic
+
+Involves the core computational aspects such as algorithms, conditional statements, loops, and functions. It's about the internal logic that doesn't directly interact with the outside world (user interface, external APIs).
+
+- **Mathematical calculations:** Performing operations like addition, subtraction, multiplication, and division.
+- **String manipulation:** Operations like concatenation, slicing, or pattern matching.
+- **Conditional checks:** Making decisions based on certain conditions using if-else statements or switch cases.
+
+### Data Retrieval and Execution
+
+Focuses on interacting with external data sources (APIs, databases) and the user interface. It involves fetching, displaying, and reacting to data.
+Includes fetching API data, handling user inputs, updating the web page dynamically.
+
+- **Key Methods:** fetch(), .addEventListener(), .innerHTML, console.log, alert.
+
+### return
+
+Utilized within functions to output a value back to the caller. It serves as an internal mechanism for passing data between functions or parts of your code. The return statement does not produce any visible output in the user interface or console. It is purely for internal data flow within the application.
+
+```javascript
+function functionName(parameters) {
+  // Function body
+  // Compute value or perform operations
+
+  return value; // Value to be returned
+}
+```
+
+### When to use various methods of data execution
+
+- **console.log:** Outputs debugging information to the browser's console, external to application logic and UI.
+- **alert:** Displays a message to the user via a dialog box, directly interacting with the user, external to code logic.
+- **.innerHTML/.innerText:** Changes an element's HTML/Text content, directly modifying the web page's visible content.
+
+## [🔝 Back to Top](#top)
+
 ## 10.1 TIPS AND BEST PRACTICES
 
 Tips for cleaner, more efficient and maintainable JavaScript code.
@@ -2121,17 +2214,23 @@ Tips for cleaner, more efficient and maintainable JavaScript code.
 - Be mindful of loop performance when dealing with large data sets.
 - Use efficient loop constructs and consider optimizations like loop unrolling.
 
-### 8. Modular Code
+### 8. Strict Mode
+
+- Strict mode is a feature in JavaScript that introduces stricter rules for writing JavaScript code.
+- It helps to prevent common coding errors and makes it easier to write secure JavaScript.
+- To enable strict mode, add the text `'use strict';` at the beginning of a script or a function body
+
+### 9. Modular Code
 
 - Break down your code into reusable and modular components or functions.
 - Embrace the concept of modules and imports for better code organization.
 
-### 9. Testing
+### 10. Testing
 
 - Write unit tests to ensure the correctness of your code.
 - Explore testing frameworks like Jest, Mocha, or Jasmine.
 
-### 10. Stay Updated
+### 11. Stay Updated
 
 - Keep up with the latest developments in JavaScript and web technologies.
 - Follow industry best practices and consider performance optimizations.