JavaScriptのオブジェクトパターンマッチング：構造的マッチングの深掘り

            
const person = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'London',
    country: 'UK'
  }
};

const { name, age } = person; // Extract name and age
console.log(name); // Output: Alice
console.log(age); // Output: 30

const { address: { city, country } } = person; // Deep destructuring
console.log(city); // Output: London
console.log(country); // Output: UK

const { name: personName, age: personAge } = person; // Assign to different variable names
console.log(personName); // Output: Alice
console.log(personAge); // Output: 30

            

              
                Copy
              
            
          

            
const numbers = [1, 2, 3, 4, 5];

const [first, second] = numbers; // Extract the first two elements
console.log(first); // Output: 1
console.log(second); // Output: 2

const [head, ...tail] = numbers; // Extract the first element and the rest
console.log(head); // Output: 1
console.log(tail); // Output: [2, 3, 4, 5]

const [, , third] = numbers; // Extract the third element (skip the first two)
console.log(third); // Output: 3

            

              
                Copy
              
            
          

            
function processOrder(order) {
  if (order && order.status === 'pending') {
    const { orderId, customerId, items } = order;
    console.log(`Processing pending order ${orderId} for customer ${customerId}`);
    // Perform pending order processing logic
  } else if (order && order.status === 'shipped') {
    const { orderId, trackingNumber } = order;
    console.log(`Order ${orderId} shipped with tracking number ${trackingNumber}`);
    // Perform shipped order processing logic
  } else {
    console.log('Unknown order status');
  }
}

const pendingOrder = { orderId: 123, customerId: 456, items: ['item1', 'item2'], status: 'pending' };
const shippedOrder = { orderId: 789, trackingNumber: 'ABC123XYZ', status: 'shipped' };

processOrder(pendingOrder); // Output: Processing pending order 123 for customer 456
processOrder(shippedOrder); // Output: Order 789 shipped with tracking number ABC123XYZ
processOrder({ status: 'unknown' }); // Output: Unknown order status

            

              
                Copy
              
            
          

            
const config = {
  apiEndpoint: 'https://api.example.com'
  // port is missing
};

const { apiEndpoint, port = 8080 } = config;

console.log(apiEndpoint); // Output: https://api.example.com
console.log(port); // Output: 8080 (default value)

            

              
                Copy
              
            
          

            
const user = {
  id: 123,
  username: 'johndoe'
};

const key = 'username';

const { [key]: userName } = user;

console.log(userName); // Output: johndoe

            

              
                Copy
              
            
          

            
const product = {
  id: 'prod123',
  name: 'Laptop',
  price: 1200,
  manufacturer: 'Dell',
  color: 'Silver'
};

const { id, name, ...details } = product;

console.log(id); // Output: prod123
console.log(name); // Output: Laptop
console.log(details); // Output: { price: 1200, manufacturer: 'Dell', color: 'Silver' }

            

              
                Copy
              
            
          

            
const employee = {
  employeeId: 'E001',
  name: 'Bob Smith',
  address: {
    street: '123 Main St',
    city: 'Anytown',
    country: 'USA'
  },
  contact: {
    email: 'bob.smith@example.com'
  }
};

const {
  employeeId,
  name: employeeName,
  address: {
    city: employeeCity = 'Unknown City', // Default value if city is missing
    country
  },
  contact: {
    email: employeeEmail
  } = {} // Default value if contact is missing
} = employee;

console.log(employeeId); // Output: E001
console.log(employeeName); // Output: Bob Smith
console.log(employeeCity); // Output: Anytown
console.log(country); // Output: USA
console.log(employeeEmail); // Output: bob.smith@example.com

            

              
                Copy
              
            
          

            
// Assume this is the response from an API endpoint
const apiResponse = {
  data: {
    userId: 'user123',
    userName: 'Carlos Silva',
    userEmail: 'carlos.silva@example.com',
    profile: {
      location: 'Sao Paulo, Brazil',
      interests: ['football', 'music']
    }
  },
  status: 200
};

const { data: { userId, userName, userEmail, profile: { location, interests } } } = apiResponse;

console.log(userId); // Output: user123
console.log(userName); // Output: Carlos Silva
console.log(location); // Output: Sao Paulo, Brazil
console.log(interests); // Output: ['football', 'music']

            

              
                Copy
              
            
          

            
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

// With more complex actions involving payloads, destructuring becomes more beneficial

function userReducer(state = { user: null, loading: false }, action) {
    switch (action.type) {
        case 'FETCH_USER_REQUEST':
            return { ...state, loading: true };
        case 'FETCH_USER_SUCCESS':
            const { user } = action.payload; // Destructure the payload
            return { ...state, user, loading: false };
        case 'FETCH_USER_FAILURE':
            return { ...state, loading: false, error: action.payload.error };
        default:
            return state;
    }
}

            

              
                Copy
              
            
          

            
function UserProfile({ name, age, location }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Location: {location}</p>
    </div>
  );
}

// Example usage:
const user = { name: 'Maria Rodriguez', age: 28, location: 'Buenos Aires, Argentina' };
<UserProfile name={user.name} age={user.age} location={user.location} />  // verbose
<UserProfile {...user} /> // streamlined, passing all user properties as props

            

              
                Copy
              
            
          

            
const defaultConfig = {
    apiURL: 'https://default.api.com',
    timeout: 5000,
    debugMode: false
};

function initializeApp(userConfig) {
    const { apiURL, timeout = defaultConfig.timeout, debugMode = defaultConfig.debugMode } = { ...defaultConfig, ...userConfig };

    console.log(`API URL: ${apiURL}`);
    console.log(`Timeout: ${timeout}`);
    console.log(`Debug Mode: ${debugMode}`);
}

initializeApp({ apiURL: 'https://custom.api.com' });
// Output:
// API URL: https://custom.api.com
// Timeout: 5000
// Debug Mode: false

            

              
                Copy