17-18일차 JavaScript Data(2)

JavaScript의 Data(2)

1. 객체(object)

Object.assgin(target, sourse)

열거할 수 있는 하나 이상의 출처 객체로 부터 대상 객체로 속성을복사할 때 사용한다.
하나 이상의 출처 객체 : source, 대상 객체 : target, 반환 값 : 대상 객체
assgin() : Object라는 javascript의 전역객체에 prototype으로 만들어진 메소드가 아니기 때문에 Object(전역객체)와 함께 써야한다.
이를 정적 메소드(static method) : prototype이 없는 메소드라 한다.

const userAge = {
  // key: value
  name: 'Hun',
  age: 27
};

const userEmail = {
  name: 'Hun',
  email: 'rk645046@gami.com'
};

const target = Object.assign(userAge, userEmail)
const target2 = Object.assign({}, userEmail)
console.log(target);  // {name: "Hun", age: 27, email: "rk645046@gmail.com"}
console.log(target2);  // {name: "Hun", age: 27}
console.log(userAge); // {name: "Hun", age: 27, email: "rk645046@gmail.com"}
console.log(target === userAge);  // true
console.log(target2 === userAge);  // false

Object.keys()

key들만 추출하여 새로운 배열 데이터를 만든다.

const user = {
  name: 'Hun',
  age: 27,
  email: "rk645046@gmail.com"
}

const keys = Object.keys(user)
console.log(keys) // ['name', 'age', 'email']

console.log(user['email']); // rk645046@gmail.com

const values = keys.map(key => user[key]);  // name, age, email value를 찾아 값을 반환(callback)
console.log(values);  //  ["Hun", 27, "rk645046@gmail.com"]

2. 구조 분해 할당

구조 분해 할당 (Destructurting assignment)은 배열이나 객체의 속성을 해체하여 그 값을 개별의 변수에 담을 수 있게 하는 표현식이다.

아래의 예제를 보면서 확인해 보자!

const user = {
  name: 'Hun',
  age: 27,
  email: "rk645046@gmail.com",
  address: 'KOREA'
}
const { name: hun, age, address='USA'} = user
// E.g, user.address
// 데이터의 이름을 변수로 활용하기 싫다면 위의 name처럼 다른 변수를 사용하면 된다. 단, 꼭 명시를 해줘야 한다!

console.log(`사용자의 이름은 ${hun}입니다.`);  // 사용자의 이름은 Hun입니다. 
console.log(`${hun}이 나이는 ${age}세 입니다.`);  // Hun의 나이는 27세입니다.
console.log(`${hun}의 이메일 주소는 ${user.email}입니다.`); // Hun의 이메일 주소는 rk645046@gamil.com입니다.
// console.log(address); // 선언 하지 않은 경우 undefined
console.log(address); // KOREA

// 배열
const fruits = ['Apple', 'Banana', 'Cherry'];
const [a, b, c, d] = fruits;

console.log(a, b, c, d);  // Appe Banana Cherry undefined, 순서대로 출력이 된다.

// 특정 배열의 item만 출력
// const [, b] = fruitsBanana;
// console.log(b);

3. 전개 연산자

전개 연산자는 ... 을 사용한다.
아래의 예시를 보자!

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'];
console.log(fruits);

// 전개 연산자 : ...를 사용!
console.log(...fruits);  // console.log('Apple', 'Banana', 'Cherry', 'Orange')

function toObject(a, b, ...c) {  // 매개변수에도 전개연산자 사용가능하다. 이것을 나머지 매개변수 rest parameter라 부른다
  return {
    a: a,
    b: b,
    c: c
  }
}

// 위를 화살표 함수로 표현
// function toObject (a, b, ...c) => ({a, b, c}); 


console.log(toObject(...fruits));
// {a: "Apple", b:"Banana", c: Array(2) 0: "cherry" 1: "Orange"}

4. 데이터 불변성 (Immutability)

데이터는 크게 2가지로 분류한다.

1. 원시형 데이터(js에서 사용할 수 있는 기본 data) : String, Number, undefined, null
   데이터가 변하지 않는 성질을 가지고 있다!

예시를 보면서 이 데이터 불변성에 관하여 이해를 해보자!

// 메모리 주소 그림
// -------------------------------------------------
// |1:          |2:          |3:          |4:
// -------------------------------------------------

// 1. 원시형 데이터
let a = 1;  // 메모리 주소 1번
let b = 4;  // 메모리 주소 2번
console.log(a, b, a === b); // 1 4 false
b = a;  // a의 메모리 주소(1번)를 바라보게 된다.
console.log(a, b, a === b); // 1 1 true
a = 7;      // 메모리 주소 3번
console.log(a, b, a === b); // 7 1 false
let c = 1;  // 기존 메모리 주소 1번(메모리에 1이 존재하기 때문에)
console.log(b, c, b === c); // 1 1 true

2. 참조형 데이터 : Object, Array, Function
   똑같이 생겨도 서로 같은 데이터가 아닐 수 있다! 이를 가변성을 가지고 있다고 표현한다.

// 메모리 주소 그림
// -------------------------------------------------
// |1:          |2:          |3:          |4:
// -------------------------------------------------

// 2. 참조형 데이터
let d= { k: 1 };  // 메모리 주소 1
let e= { k: 1 };  // 메모리 주소 2
console.log(d, e, d === e); // {k: 1} {k: 1} false
d.k = 7;
e = d;
console.log(d, e, d === e); // {k:7} {k:7} true
d.k = 2;
console.log(d, e, d === e); // {k:2} {k:2} true, 의도치 않게 값이 바뀐다, 서로 같은 메모리 주소를 바라보고 있기 때문에
let f = e;
console.log(d, e, f, d === f);  // {k:2} {k:2} {k:2} true
d.k = 9;
console.log(d, e, f,  d === f); // {k:9} {k:9} {k:9} true

5. 얕은 복사와 깊은 복사

각 복사의 개념에 대하여 알아보자.

1. 얕은 복사(Shallow copy) : 주소값을 복사, 같은 메모리를 바라보게 된다.

const user = {
  name: 'Hun',
  age: 27,
  emails: ['rk645046@gmail.com']
}
const copyUser = user;
console.log(copyUser === user); // true

user.age = 22;
console.log('user: ', user);  // user: {name: 'Hun',age: 22,email: Array(1)}
// 바라보고 있는 메모리 주소가 같기 때문에 같은 데이터를 수정하게 되는 꼴이 된다.
console.log('copyUser: ', copyUser); // copyUser: {name: 'Hun',age: 22,emails: Array(1)}


// 이를 해결하기 위해 const copyUser = Object.assign({}, user);
// 또는 전개연산자를 사용하여 const copyUser = {...user};
// console.log(copyUser === user); // false

console.log('copyUser: ', copyUser);  // copyUser: {name: 'Hun',age: 27,emails: Array(1)} 


console.log('------')
console.log('------')

// 배열은 참조형 데이터이며 이를 복사처리를 하지 않았기 때문에 같은 메모리 주소만 공유
user.emails.push('toffg6450@naver.com')
console.log(user.emails === copyUser.emails);  // true, {name: 'Hun',age: 27,emails: Array(2)} 

2. 깊은 복사(Deep copy) : lodash를 이용, 내부의 새로운 참조형인 객체 데이터 까지 복사하여 새로운 메모리에 할당한다.

import _ from 'lodash'

const user = {
  name: 'Hun',
  age: 27,
  emails: ['rk645046@gmail.com']
}


const copyUser = _.cloneDeep(user);  // 깊은 복제 생성
console.log(copyUser === user);  // false
console.log(user.emails === copyUser.emails);  // false, Array(1)유지