데이터 - 3

객체

앞서 데이터-1 에서 말했듯이 자료형에는 원시형과 객체로 나뉩니다.
이것을 데이터 관점에서보면 원시 타입(Primitive Type) 과 참조 타입(ReferenceType)
으로 구분할수 있습니다.

원시 타입은 숫자(Number), 불린(Boolean), null, undefined, 문자열(String) 등이 존재하고
참조 타입은 객체 즉 순서의 컬렉션인 배열 과 1급 객체인 함수 도 객체에 포함됩니다.
그럼 정확히 무엇이 다른지 알아보겠습니다.

차이점

원시 타입 은 서로 구조가 같으면 동일하다고 봅니다.

const a = 1
const b = 1
console.log(a===b);     //true

하지만 참조 타입은 그렇지 않죠. 구조가 똑같아도 다를수 있습니다.

let a = {nmu:1}
let b = {num:1}
console.log(a===b);    // false

객체 에서는 어떠한 값을 선언할때 메모리주소 를 생성하고 그것을 참조합니다.
즉 a 와 b 는 따로 선언되었기 때문에 다른 주소를 참조 하는것입니다.
이번에는 c 를 선언한뒤 a를 할당해 보겠습니다.

let a = {nmu:1}
let b = {num:1}
let c = a
console.log(c===a);  // true

c 에 a를 할당했기때문에 둘은 서로 같은 메모리를 참조합니다. 즉 공유 한다고 볼수도 있습니다.

let a = {num:1}
let b = {num:1}
let c = a
console.log(c===a);  // true
c.num = 5;
console.log(c);     // {num: 5}
console.log(a);     // {num: 5}

c를 바꾸면 a 또한 바뀝니다. 즉 원시타입은 메모리 상에서 변하지 않는 불변성을 가지고 있고
참조 타입은 서로 같은 메모리주소를 참조하면 바뀔수 있는 가변성을 가지고 있습니다.

Object.assign(target,source,source1...)

객체를 복사 해주는 정적 메서드 입니다. 객체들을 합쳐 하나의 객체로 만들어 주죠.

방법은 간단합니다. source 에 있는 속성들을 차례대로 target 에 복사 합니다.
만약 키 값이 중복되있으면 source 의 값으로 덮어 쓰죠

const target = {a:1,b:2}
const source = {b:3,c:4}      // b 가 중복되어 있음

const result = Object.assign(target,source);
console.log(target);          //   {a: 1, b: 3, c: 4}   
console.log(result);          //   {a: 1, b: 3, c: 4}  
console.log(target===result); //   true 

Object.assign 은 복사가 끝난 target 을 반환합니다. 그것을 reslult에 할당하기 때문에
서로 같은 주소를 참조합니다.

만약 서로다른 주소를 참조하고 싶으면 target 부분에 빈 객체를 생성하면 됩니다.

const target = {a:1,b:2}
const source = {b:3,c:4}      // b 가 중복되어 있음

const result = Object.assign({},target,source);
console.log(target);          //   {a: 1, b: 3, c: 4}   
console.log(result);          //   {a: 1, b: 3, c: 4}  
console.log(target===result); //   false  서로 다른 메모리 참조

객체에서 프로퍼티 추출

객체에서 키와 값을 추출하려면 다양한 방법이 있습니다.
Object.keys 를 사용하면 키값을 반환합니다.

const user = {
  name: 'Elon',
  age: 20,
  address: 'USA'
}
const keys =Object.keys(user)   
console.log(keys);             // ["name", "age", "address"]

Object.values 를 사용하면 values를 반환합니다.

const user = {
  name: 'Elon',
  age: 20,
  address: 'USA'
}
const keys =Object.values(user)
console.log(keys);             // ["Elon", 20, "USA"]

만약 Object.keys 를 사용해서 키의 배열을 가진 변수가 있다면
map 을 사용해서 values 를 받을수도 있습니다.

const user = {
  name: 'Elon',
  age: 20,
  address: 'USA'
}
const keys =Object.keys(user)    // ["name", "age", "address"] 키값
const values=keys.map(key => user[key]) // user['키값'] 반환
console.log(values);            //  ["Elon", 20, "USA"]

구조 분해 할당

구조 분해 할당(destructuring assignment) 은 객체나 배열을 해체해
변수에 대입하는 방법입니다. 즉 키값을 변수로 만들수 있습니다.

const user = {
  name: 'Elon',
  age: 20,
  address: 'USA',
  company: 'Tesla'
}
const {name, age,address, company} = user;    // 
console.log(name);      // Elon
console.log(age);       // 20
console.log(address);   // address   
console.log(company);   // Tesla

위와 같이 객체가 아닌 배열일땐 어떨까요?

const fruits = ['딸기','바나나','사과'];
const [a,b,c,d] = fruits;
console.log(a,b,c,d);       // 딸기 바나나 사과 undefined

배열은 키값이 아닌 인덱스 기준이기때문에 원하는 값을 적어줍니다.
만약 바나나 만 필요한 경우에는 쉼표를 적고 바나나를 추출합니다.

const fruits = ['딸기','바나나','사과'];
const [,b,,] = fruits;
console.log(b);            // 바나나

전개연산자

spread 는 말 그대로 퍼뜨린다란 뜻으로 상속과 비슷한 개념입니다. 객체와 배열 모두 사용가능합니다.

const frutis = ['사과','딸기','바나나']
const animal = [...frutis,'강아지']
console.log(animal); // ["사과", "딸기", "바나나", "강아지"]

spread 와 rest 는 ... 동일한 문법입니다. 그것이 어디에 쓰이냐 따라 다릅니다.

const user = {
  name: 'Elon',
  age: 20,
  address: 'USA',
  company: 'Tesla'
}
const {name,...rest} = user
console.log(rest);              // {age: 20, address: "USA", company: "Tesla"}

인자의 수는 많은데 매개변수의 자리가 적을 경우 ... 문법을 사용하면 됩니다.

얕은복사

앞서 봤듯 Object.assign(target,source,source1...)에서 target 부분에 빈 객체를 넣어주면
서로다른 객체가 됩니다 , 전개연산자 또한 동일합니다.

const user = {
  name: 'Elon',
  age: 20,
  address: 'USA',
  company: 'Tesla'
}

const copy = {...user}
console.log(copy);        // {name: "Elon", age: 20, address: "USA", company: "Tesla"}

전개 연산자와 Object.assign 메서드를 통해 복사가 가능합니다. 복사 하려는 객체 안에는 키와 값 으로 정돈되있다면 말이죠. 문제는 객체안에 객체가 존재하면 그 값은 복사되지 않습니다.
이럴땐 재귀적 함수를 통해 모두 복사하거나 lodash 라이브러리의 도움을 받을수 있습니다.

또 객체의 모든것을 복사하는것을 깊은복사 라고 합니다.