Module 1.1: ES6+ Essentials - The JavaScript Foundation for React

// ❌ Traditional Function (ES5)
function add(a, b) {
  return a + b;
}
// ✅ Arrow Function (ES6+)
const add = (a, b) => {
  return a + b;
};
// ✅ Implicit return (when there's only one expression)
const add = (a, b) => a + b;
// ✅ Single parameter (parentheses are optional)
const square = (x) => x * x;
// ✅ No parameters
const greet = () => 'Hello, World!';

// Regular Function - `this` depends on the function's call context
const user = {
  name: 'Alice',
  greet: function () {
    console.log(`Hello, ${this.name}`);
  },
};
user.greet(); // "Hello, Alice"
 
// Arrow Function - `this` inherits from the parent scope
const user2 = {
  name: 'Bob',
  greet: () => {
    console.log(`Hello, ${this.name}`); // `this` is NOT user2
  },
};
user2.greet(); // "Hello, undefined"

const user = { name: 'Alice', age: 25, email: 'alice@example.com' };
 
// ❌ Traditional Approach
const name = user.name;
const age = user.age;
 
// ✅ Object Destructuring
const { name, age, email } = user;
 
// ✅ Renaming Variables (Aliasing)
const { name: userName } = user;
console.log(userName); // "Alice"
 
// ✅ Default Values
const { country = 'Vietnam' } = user;
console.log(country); // "Vietnam"
 
// ✅ Nested Destructuring
const company = {
  name: 'TechCorp',
  address: { city: 'Ho Chi Minh', district: 'District 1' },
};
const {
  address: { city },
} = company;
console.log(city); // "Ho Chi Minh"

const colors = ['red', 'green', 'blue'];
 
// ✅ Array Destructuring
const [first, second, third] = colors;
console.log(first); // "red"
 
// ✅ Skipping Elements
const [, , third] = colors;
console.log(third); // "blue"
 
// ✅ Rest pattern
const [first, ...rest] = colors;
console.log(rest); // ["green", "blue"]
 
// ✅ Swapping Values
let a = 1,
  b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

// Destructuring in parameters
const displayUser = ({ name, age }) => {
  console.log(`${name} is ${age} years old`);
};
 
displayUser({ name: 'Alice', age: 25 });
// Output: "Alice is 25 years old"

// === ARRAY SPREAD ===
const original = [1, 2, 3];
const copy = [...original]; // Copy an array
const merged = [...arr1, ...arr2]; // Merge arrays
const withNew = [...original, 4]; // Add an element
 
// === OBJECT SPREAD ===
const user = { name: 'Alice', age: 25 };
const userCopy = { ...user }; // Copy an object
 
// Merge objects (properties from later objects override earlier ones)
const defaults = { theme: 'light', language: 'en' };
const userPrefs = { theme: 'dark' };
const settings = { ...defaults, ...userPrefs };
// { theme: "dark", language: "en" }
 
// Update property (immutably)
const updatedUser = { ...user, age: 26 };
// { name: "Alice", age: 26 }

// Rest in function parameters
const sum = (...numbers) => {
  return numbers.reduce((acc, curr) => acc + curr, 0);
};
console.log(sum(1, 2, 3, 4)); // 10
 
// Rest in destructuring
const [first, ...remaining] = [1, 2, 3, 4, 5];
console.log(remaining); // [3, 4, 5]
 
const { name, ...otherInfo } = { name: 'Alice', age: 25, email: 'a@b.com' };
console.log(otherInfo); // { age: 25, email: "a@b.com" }

const name = 'Alice';
const age = 25;
 
// ❌ String Concatenation
const message = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
 
// ✅ Template Literals
const message = `Hello, my name is ${name} and I am ${age} years old.`;
 
// ✅ Multi-line strings
const html = `
  <div class="card">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`;
 
// ✅ Expressions
const total = `Total: $${(100 * 1.1).toFixed(2)}`; // "Total: $110.00"
 
// ✅ Ternary operators
const status = `User is ${age >= 18 ? 'adult' : 'minor'}`;

const user = {
  name: 'Alice',
  address: {
    city: 'Ho Chi Minh',
  },
  // No `company` property
};
 
// ❌ Crashes if not checked
const companyName = user.company.name; // TypeError!
 
// ✅ Optional Chaining
const street = user?.address?.street; // undefined (no crash)
const companyName = user?.company?.name; // undefined (no crash)
const city = user?.address?.city; // "Ho Chi Minh"
 
// ✅ With Array access
const users = [{ name: 'Alice' }];
const thirdUser = users?.[2]?.name; // undefined
 
// ✅ With Function calls
const name = user.getName?.(); // undefined if method doesn't exist

// ❌ The Problem with || (which treats 0, "", and false as falsy)
const count = 0;
const displayCount = count || 10; // 10 (UNEXPECTED!)
 
// ✅ Nullish Coalescing (only checks for null/undefined)
const displayCount = count ?? 10; // 0 (CORRECT!)
 
// Comparison
const value1 = null ?? 'default'; // "default"
const value2 = undefined ?? 'default'; // "default"
const value3 = false ?? 'default'; // false
const value4 = 0 ?? 'default'; // 0
const value5 = '' ?? 'default'; // ""

const user = {
  settings: {
    notifications: 0, // 0 is a valid value (notifications off)
  },
};
 
// ❌ Incorrect Logic
const notifications = user?.settings?.notifications || 5; // 5 (Wrong!)
 
// ✅ Correct Logic
const notifications = user?.settings?.notifications ?? 5; // 0 (Correct!)