자바스크립트 데이터 - Javascript Data

Object Method

Object.assign()

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);
const newObject = Object.assign({}, target, source);


console.log(target); // expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget === target); // true
console.log(newObject === target);      // false

source 매개변수의 출처 객체 속성을 target 객체 속성에 복사해 반환하고, 같은 key값인 경우 덮어씁니다.
이때 복사된 객체 데이터는 메모리주소도 같은 주소를 바라보고 있기 때문에 비교연산자에서 === 할시 true로 나오게 된다.
속성은 같지만 새로운 주소의 객체를 만들고 싶다면, target 자리에 중괄호{}를 넣어주고, source 객체들을 뒤에 넣어주면 된다.

 

Object.keys()

const evan = {
  name : 'Jeongmin',
  age : 24,
  email: 'clcl6084@gmail.com'
}

const keys = Object.keys(evan);
console.log(keys);

console.log(evan['email'])

const values = keys.map(key => evan[key])
console.log(values);

keys 메소드는 객체의 key값들을 반복문과 같은 순서로 순회하여, 배열로 변환합니다. 그를 이용해서 객체 안에 value값들을
map을 이용해서 전부 출력할 수 있도록 해보았습니다. 

 

---

구조 분해 할당 (Destructuring Assignment)

const evan = {
  name : 'Jeongmin',
  age : 24,
  email: 'clcl6084@gmail.com',
  // address: 'cheonan'
}
const {name:jm, age, email, address = "Seoul"} = evan

console.log(`사용자의 이름은 ${jm}입니다.`) // Jeongmin
console.log(address);                 // Seoul

위에 코드를 보면 evan이라는 객체를 만들어 놨고 속성으로는 총 4개가 있고 address가 주석처리되어 있다. 
밑에 구조분해를 하여 내가 원하는 속성 key값만 꺼내어 변수처럼 사용할 수 있게 구조 분해하여 변수처럼 사용을 하고, 
address 같은 경우는 주석처리하여 원래는 undefined 가 나와야 정상이지만, 구조 분해할때 기본값을 지정할 수 있으며,
속성 key값의 이름을 jm을 넣어준거 처럼 다른 변수로 할당해서 사용도 가능하다.

 

 const game = ['leagueOfLegend', 'counterStrike', 'Valorant'];

 const [a,b,c,d] = game
 console.log(a,b,c,d); // leagueOfLegend counterStrike Valorant undefined
 const [,e] = game
 console.log(e);       // counterStrike

배열또한 구조 분해하여 변수로 할당하여 속성 Key값을 사용가능한데, 객체와는 달리 key값이 아닌 서로 할당이 되기때문에
주의가 필요하고, 특정 인덱스만 필요로한다면  콤마를 사용하여 해당 인덱스 전 요소를 채워주어야 한다. 

---

얕은 복사(Shallow Copy)  &  깊은 복사(Deep Copy)

 const evan = {
  name : 'Jeongmin',
  age : 24,
  email: 'clcl6084@gmail.com'
}
const newEvan = evan;
console.log(evan === newEvan);                   // true

const shallowEvan = Object.assign({}, evan);
const shallowEvan2 = {...evan};

console.log(evan === shallowEvan);               // false
console.log(evan === shallowEvan2);              // false

참조형 데이터를 옮길수 단순히 newEvan 변수처럼 할당을 하게되면 속성값은 다 잘 전달되지만, 메모리 주소또한 같아져서 

evan을 수정하면 그 값이 그대로 newEvan 속성에도 그대로 전달되어버린다. 이때 다른 얕은 복사를 사용하여 메모리 주소가 아닌 

데이터 안에있는 속성값만 즉 표면적인 데이터만 복사하면 해결되는데, 두가지만 뽑아보자면 여기서는 객체를 다루니까

     - Object.assign()을 통한 방법

- 전개 연산자를 사용하는 방법

const min = {
  name : 'Jeongmin',
  age : 26,
  email: ['min@gmail.com']
}

const shallowMin = {...min};
min.email.push('jeong@naver.com');
console.log(min.email === shallowMin.email); // true

const deepMin = _.cloneDeep(min);
min.email.push('Lee@Yahoo.com');
console.log(min.email === deepMin.email);    // false
console.log(min);
console.log(deepMin);

위 코드는 참조형 데이터안에 참조형 데이터가 있는 경우이다. 이런 경우에는 깊은  복사를 하는게 좋은데, 이유는 min이라는 객체를 

shallowMin이라는 변수에 얕은 복사를 해주고 나서 먼저 min 객체를 보면 email 키와 배열이 값으로 할당되어있다. 

min.email이라는 키값에 새로운 이메일을 push해준다. 그렇게 되면 shallowMin.email의 배열도 똑같이 push된다.

 

이런 문제로 deepcopy 해줘야하는데 자바스크립트로는 구현이 어려워 보통 lodash 라는 라이브러리를 가져와서 메소드를 사용한다.

그렇게 되면 이제 완전히 다른 메모리주소로 별개의 객체가 된다.