비구조화할당, 스프레드 연산자

비구조할당

1) 객체 비구조화 할당

const person = {
  name: "John Doe",
  age: 30,
  address: {
    city: "Seoul",
    country: "South Korea",
  },
};

// 객체 비구조화 할당을 사용하여 person 객체의 속성을 변수에 할당합니다.
const { name, age } = person;

// 변수 사용
console.log(name); // "John Doe"
console.log(age); // 30

// 객체 안의 객체 비구조화 할당
const { address: { city } } = person;

// 변수 사용
console.log(city); // "Seoul"

// 별칭 사용
const { name: firstName } = person;

// 변수 사용
console.log(firstName); // "John Doe"

// 기본값 설정
const { age: personAge = 20 } = person;

// 변수 사용
console.log(personAge); // 30

// 남은 속성을 하나의 변수에 할당
const { name, age, ...rest } = person;

// 변수 사용
console.log(rest); // { address: { city: 'Seoul', country: 'South Korea' } }

 

2) 배열 비구조화 할당

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

// 배열 비구조화 할당을 사용하여 배열의 요소를 변수에 할당합니다.
const [first, second, ...rest] = numbers;

// 변수 사용
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// 값 건너뛰기
const [first, , third] = numbers;

// 변수 사용
console.log(first); // 1
console.log(third); // 3

// 기본값 설정
const [firstNumber = 100, secondNumber] = numbers;

// 변수 사용
console.log(firstNumber); // 1
console.log(secondNumber); // 2

 

 

 

스프레드 연산자

1) 배열 병합

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

// 스프레드 연산자를 사용하여 두 배열을 병합합니다.
const numbers = [...numbers1, ...numbers2];

// 변수 사용
console.log(numbers); // [1, 2, 3, 4, 5, 6]

2) 배열 복사

const numbers = [1, 2, 3];

// 스프레드 연산자를 사용하여 배열을 복사합니다.
const copiedNumbers = [...numbers];

// 변수 사용
console.log(copiedNumbers); // [1, 2, 3]

3) 객체 확장

const person1 = {
  name: "John Doe",
};

const person2 = {
  age: 30,
};

// 스프레드 연산자를 사용하여 두 객체를 합쳐 새로운 객체를 만듭니다.
const person = { ...person1, ...person2 };

// 변수 사용
console.log(person); // { name: 'John Doe', age: 30 }