📒 Javascript 데이터 #02 :)

4. 객체(Object)

📌 정적 메소드(Static)

: Object객체의 prototype 속성의 메소드가 아닌 메소드
: 직접적으로 사용할 수 없는 메소드!!!!
ex) {}.assign() -> 사용 못함

🔵 Object.assign()

• 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣는다. 그 후 대상 객체를 반환함.
• assign(대상객체, 하나 이상의 출처 객체)
  : 반환값 -> 대상객체!!!!

👾 #1

const target = { a:1, b:2 };
const source = { b: 4, c:5 };
const returnTarget = Object.assign(target, source);

console.log(target);
// Object { a: 1, b: 4, c: 5 }
console.log(returnTarget);
// Object { a: 1, b: 4, c: 5 }
console.log(target === returnTarget); // true

assign({}, 하나 이상의 출처 객체)
: 비어있는 객체에 두개의 객체를 삽입해, 두개의 객체를 합친 새로운 객체를 만듬!!

👾 #2

const source1 = { a:1, b:2 };
const source2 = { b: 4, c:5 };
const returnTarget = Object.assign({}, source1, source2);

console.log(returnTarget);
// Object {a: 1, b: 4, c: 5}

🔵 Object.keys(), Object.values(), Object.entries()

• Object.Keys(객체)
  : 객채의 key를 추출하여 새로운 배열 데이터로 반환함
• Object.values(객체)
  : 객채의 value를 추출하여 새로운 배열 데이터로 반환함
• Object.entries(객체)
  : 객채의 key,value를 추출하여 새로운 배열 데이터로 반환함

👾 #1

const user = {
  name: 'Zooyaho',
  age: 24,
  gender: 'female'
}

console.log(Object.keys(user)) // ['name', 'age', 'gender']

console.log(Object.values(user)) // ['Zooyaho', 24, 'female']

console.log(Object.entries(user)) // [['name','Zooyaho'],['age', 24],['gender','female']]

🔵 Object.fromEntries()

• Object.fromEntries(배열)
  : 객채의 key,value 배열을 객체로 반환함

👾 #1

const arr =
[
  ['name','Zooyaho'],
  ['age', 24],
  ['gender','female']
]

console.log(Object.fromEntries(arr));
// { name: 'Zooyaho', age: 24, gender: 'female'}

객체 데이터도 인덱싱방법을 제공함!!!!

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

const values = keys.map(key => user[key])
console.log(values)
// ['Zooyaho', 24, 'thisis@gmail.com']

5. 구조 분해 할당(Destructuring assignment) == 비구조화 할당

🔵 객체데이터에서의 구조 분해 할당

• 객체 데이터에서 내용을 구조분해해서 내가 원하는 속성들만 꺼내서 사용할 수있음.
• 객체의 속성이 많을 때 필요한 데이터만 꺼내어 사용할 수 있음.
• const { key1, key2, key3, ...} = 객체명
  -> ${객체명.key1} 아닌 ${key1}로 사용 가능 = 간편해짐.

👾 #1

const user = {
  name = 'Zooyaho',
  age: 85,
  email: 'thisis@gmail.com'
}

cost {name, age, email, address} = user

📎 별명 지정하여 사용
const { key1: nickname, key2, key3, ...} = 객체명
-> ${key1}이 아닌 지정한 변수 ${nickname}으로 사용 가능, key1는 사용 불가능(error)

📎 기본값 지정
const { key1 = 'zooyaho', key2, key3, ...} = 객체명
-> ${key1} 반환 시 undefined가 아닌 zooyaho로 반환 됨
-> 객체의 key1에 값이 지정되어 있으면 기본값은 무시됨.

🔵 배열데이터에서의 구조 분해 할당

• const [a, b, c, d] = 객체
  -> 인덱스 번호를 각각 a, b, c, d로 지정하여
  console.log(a,b,c,d)로 배열 값들을 출력함!
• 이름이 아닌 순서대로 구조 분해를 함!!

👾 #1

const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits 
console.log(a,b,c,d) // Apple Banana Cherry undefined

📎 특정 인덱스번호만 구조 분해할 경우

• 1인덱스만 비구조화 할당을 하려면 명시하지 않고 쉼표만 작성함!

👾 #2

const [, b] = fruits
console.log(b) // Banana

6. 전개 연산자(Spread) ...

• 하나의 배열데이터를 쉼표로 구분하는 각각의 아이템으로 전개해서 출력함

👾 #1

const fruits = {'Apple', 'Banana', 'Cherry'}
console.log(...fruits) // Appple Banana Cherry

function toObjsct(a,b,c) {
  return {
    a:a,
    b:b,
    c:c
  }
}
console.log(toObjsect(...fruits)) 
// {a: 'Apple', b:'Banana', c:'Cherry'}

📎 매개변수에서 전개연산자 사용하기

• rest parameter: 나머지의 모든 인수를 다 받아내는 역할
• 배열의 나머지 item을 넣은 인수는 배열을 반환함.

👾 #2

const fruits = {'Apple', 'Banana', 'Cherry', 'Orange'}

function toObjsct(a,b,...c) {
  return {
    a:a,
    b:b,
    c:c
  }
}
console.log(toObjsect(...fruits)) 
// {a: 'Apple', b:'Banana', c:Array(2)}

/* 축약형 */
// 1. 속성의 이름와 데이터의 이름이 같으면 축약가능
function toObject(a, b, ...c) {
return { a, b, c }
}
// 2. 화살표 함수
const toObject = (a, b, ...c) => ({ a, b, c })
// {}는 함수의 범위를 나타내는 단순한 블록의 의미로 해석되기 때문에 ()을 붙여야 객체데이터를 반환함!!!

7. 데이터 불변성(Immutability)

• 원시 데이터: String, Number, Boolean, undefined, null
• 참조형 데이터: Object, Array, Function
• 원시데이터는 불변성, 참조형은 가변성을 띈다.

📎 원시 데이터

👾 #1

let a = 1
let b = 4
b = a
console.log(a === b) // true

👉🏻 b의 값인 1을 새로운 메모리를 생성해서 할당한 것이 아니라 기존에 있던 1의 메모리로 변경된 것이다. b는 값을 변경한것이 아닌 데이터의 주소값이 변경된 것이다.

📎 참조형 데이터

👾 #2

let a = { k:1 }
let b = { k:1 }
console.log( a === b) // false - 다른 메모리 할당

b = a
console.log( a === b) // true - 같은 메모리 할당

let c = b
console.log( a === c) // true
a.k = 9
console.log( a === c) // true
console.log(a,b,c) // {k:9}{k:9}{k:9}

8. 얕은 복사와 깊은 복사

🔵 얕은 복사(shallow copy)

👾 #1

const user = {
  name = 'Zooyaho',
  age: 85,
  emails: ['thisis@gmail.com']
}
// 얕은 복사
const copyUser = {...user}
// const copyUser = Object.assign({}, user) 
console.log(copyUser === user) // false

// emails은 같은 메모리 주소를 공유하고 있음
user.emails.push('zoo@naver.com')
console.log(copyUser.emails === user.emails) // true

👉 얕은 복사는 참조형 데이터까지 복사가 되지 않음.

🔵 깊은 복사(deep copy)

• lodash 패키지를 사용하여 깊은복사 진행 가능
• cloneDeep() 메소드 사용(_.cloneDeep(객체) : 객체 반환)

👾 #2

const user = {
  name = 'Zooyaho',
  age: 85,
  emails: ['thisis@gmail.com']
}
// 깊은 복사
const copyUser = _.cloneDeep(user)
console.log(copyUser === user) // false

// emails은 같은 메모리 주소를 공유하고 있지 않음
user.emails.push('zoo@naver.com')
console.log(copyUser.emails === user.emails) // false