Javascript

Destructuring(구조 분할)

• 디스트럭쳐링은 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해준다. (Easily extract array elements or object properties and store them in variables.

스프레드는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 또는 내가 사용하는 어떤 것에 전달한다.
디스트럭쳐링은 single element나 propertiy를 하나만 가져와서 변수에 저장한다.

ex) Array Destructuring

[a, b] = ['Hello', 'Yerim']
console.log(a) //Hello
console.log(b) //Yerim

const numbers = [1, 2, 3]; 
// 이 배열에서 1, 3를 가져오고 싶다면 왼쪽에 배열구문을 사용, 변수 이름을 선택하고 numbers배열에 할당.
[num1, , num3] = numbers;
console.log(num1, num3); // 1, 3

ex) Object Destructuring

{name} = { name: 'Yerim', age: 25}
console.log(name) //Yerim
console.log(age) //undefined

---

참조형 자료 타입

numer, string, boolean 등은 기본형 자료타입이고, 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다.
객체와 배열은 참조형 자료 타입이다.

// name property를 갖는 객제 person 생성
const person = {
  name: 'Yerim'
};

// person을 value로 할당한 secondPerson 생성.
const secondPerson = person;

// person과 같은 값을 출력, but 객체 person을 복사한 것은 아님.
// 포인터가 복사된 것임.
console.log(secondPerson); // [object Object] {name: 'Yerim'}

person.name = 'meme';

console.log(seconPerson); // [object Object] {name: 'meme'} 
// secondPerson을 출력했는데도 meme로 바뀌어 있음.

위의 이유는 단지 포인터를 복사했고, person이 가리키는 메모리에 있는 동일한 객체를 가리키기 때문이다.
때문에 person.name을 변경하면 자동적으로 secondPerson의 이름도 바뀐다.
배열의 경우도 마찬가지이다.

이 것은 리액트에서 매우 중요하다.
만약 객체 or 배열을 이렇게 복사한다면,
1. 한 앱에 있는 주소에서 객체를 조작할 수도 있고
2. 실수로 앱의 다른 주소에 있는 같은 객체를 다르게 사용하도록 조작할 수도 있다.

그래서 변경할 수 없는 방법으로 복사하는 법이 있다.
그 방법은 아래와 같다.

const person = {
  name: 'Yerim'
};

const secondPerson = {
  ...person // person 객체를 생성하고, property를 spread함.
};

person.name = 'meme';

console.log(seconPerson); // [object Object] {name: 'Yerim'}

위와 같은 방법은 객체로부터 프로퍼티와 프로퍼티의 값을 가져와서 새로 생성한 객체에 추가하는데, 중괄호를 써서 생성할 수 있다.
그런 다음 실행하면 여전히 object와 Yerim이 출력된다.
이름을 meme로 바꿨지만, 포인터가 아닌 진짜 복사본을 생성했기 때문.

정리

• 객체와 배열은 참조형 자료 타입이다.
• 객체와 배열을 재할당한다면, 값이 아닌 포인터를 복사하는 것이다.
  * 진짜 복사하고 싶다면, 새로운 객체를 생성해서 전체 객체를 복사하는 것이 아니라 프로퍼티를 복사해야 한다.