What is Destructuring in JavaScript?

const colors = ['red', 'green', 'blue'];

// Basic
const [first, second, third] = colors;
console.log(first); // 'red'

// Skip elements
const [, , blue] = colors;
console.log(blue); // 'blue'

// Rest pattern
const [head, ...tail] = colors;
console.log(tail); // ['green', 'blue']

// Default values
const [a, b, c, d = 'yellow'] = colors;
console.log(d); // 'yellow'

const user = { name: 'John', age: 30, city: 'NYC' };

// Basic
const { name, age } = user;
console.log(name); // 'John'

// Renaming
const { name: userName } = user;
console.log(userName); // 'John'

// Default values
const { country = 'USA' } = user;
console.log(country); // 'USA'

// Nested
const data = { user: { name: 'Jane' } };
const { user: { name: n } } = data;
console.log(n); // 'Jane'

function greet({ name, age = 25 }) {
  console.log(`${name} is ${age}`);
}

greet({ name: 'John' }); // 'John is 25'