[JavaScript] 비구조화 할당, 전개 연산자, 깊은 복사

1. 비구조화 할당

배열의 비구조화 할당

배열의 비구조화 할당은 배열의 요소를 개별 변수로 쉽게 추출하거나, 나머지 요소를 새로운 배열로 저장할 수 있도록 도와줍니다.

// 기본적인 배열 비구조화 할당
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 [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 출력: 1 2 3

// 변수 교환
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y); // 출력: 2 1

객체의 비구조화 할당

객체의 비구조화 할당은 객체 속성을 개별 변수로 추출할 수 있게 해줍니다. 변수 이름 변경(맵핑)이나 기본값 설정도 가능합니다.

// 기본적인 객체 비구조화 할당
const person = { name: '홍길동', age: 30 };
const { name, age } = person;

console.log(name); // 출력: '홍길동'
console.log(age);  // 출력: 30

// 변수 이름 변경(맵핑)과 기본값 설정
const { name: personName, job = '개발자' } = person;
console.log(personName); // 출력: '홍길동'
console.log(job);        // 출력: '개발자'

중첩 객체 비구조화 할당

중첩된 객체의 속성을 추출할 때도 비구조화 할당을 활용할 수 있습니다.

const user = {
  id: 42,
  name: '이영희',
  address: {
    city: '서울',
    country: '대한민국'
  }
};

const { name, address: { city, country } } = user;

console.log(name);    // 출력: '이영희'
console.log(city);    // 출력: '서울'
console.log(country); // 출력: '대한민국'

함수에서 객체 비구조화 활용

함수 매개변수에서도 비구조화 할당을 사용하면 코드 가독성이 높아집니다.

function printPersonInfo({ name, age, job = '무직' }) {
  console.log(`이름: ${name}, 나이: ${age}, 직업: ${job}`);
}

const person = { name: '김철수', age: 25 };
printPersonInfo(person); // 출력: 이름: 김철수, 나이: 25, 직업: 무직

2. 전개 연산자 (Spread Operator)

전개 연산자는 배열이나 객체를 개별 요소로 펼치거나 복사하는 데 유용합니다.

배열에서의 사용

// 배열 복사와 결합
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // 출력: [1, 2, 3, 4, 5

객체에서의 사용

// 객체 복사와 속성 덮어쓰기
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, b: 3 };

console.log(obj2); // 출력: { a: 1, b: 3 }

함수 호출 시 사용

전개 연산자를 사용하면 배열을 함수의 개별 인자로 전달할 수 있습니다.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 출력: 10

3. 깊은 복사 (Deep Copy)

JSON 활용

JSON.stringify()와 JSON.parse()를 조합하여 객체나 배열의 깊은 복사를 수행할 수 있습니다.

// 객체 깊은 복사
const originalObj = { a: 1, b: { c: 2 } };
const deepCopyObj = JSON.parse(JSON.stringify(originalObj));

console.log(deepCopyObj); // 출력: { a: 1, b: { c: 2 } }
console.log(originalObj.b === deepCopyObj.b); // 출력: false

// 배열 깊은 복사
const originalArray = [1, [2, 3], { d: 4 }];
const deepCopyArray = JSON.parse(JSON.stringify(originalArray));

console.log(deepCopyArray); // 출력: [1, [2, 3], { d: 4 }]
console.log(originalArray[1] === deepCopyArray[1]); // 출력: false
console.log(originalArray[2] === deepCopyArray[2]); // 출력: false

주의:

• 이 방법은 undefined, 함수, Symbol 같은 데이터는 복사하지 못합니다.
• 순환 참조가 있는 객체는 에러를 발생시킬 수 있습니다.

JSON.stringify()와 JSON.parse()의 역할

JSON.stringify(originalObj)

• 객체를 JSON 문자열로 변환합니다.
• JSON 문자열은 단순 텍스트 형식이므로 객체의 구조를 표현하되, 참조를 끊어냅니다.

const originalObj = { a: 1, b: { c: 2 } };
const jsonString = JSON.stringify(originalObj);

console.log(jsonString); // 출력: '{"a":1,"b":{"c":2}}'

JSON.parse(jsonString)

• JSON 문자열을 다시 JavaScript 객체로 변환합니다.
• 이 과정에서 새로운 객체가 생성되며 원본 객체와 독립적인 새로운 데이터 구조를 갖게 됩니다.

const jsonString = '{"a":1,"b":{"c":2}}';
const newObject = JSON.parse(jsonString);

console.log(newObject); // 출력: { a: 1, b: { c: 2 } }