JavaScript Level up - ch.5 JS 데이터 (5) ~ (9)

5. 객체

• Object.assign
  열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용
  정적메소드, 특정 객체에 사용 못하고 전역 객체인 Object에만 사용

 const userAge {
 	name: 'dongdu',
    age: 22,
 }
 const userEmail {
 	name: 'dongdu',
    email: '4012popo@naver.com'
 }
 
const target = Object.assign(userAge, userEmail)
console.log(target)
console.log(userAge)
console.log(target === userAge) // true 같은 곳을 바라보고 있기 때문

const a = {k: 20}
const b = {k: 20}
console.log(a === b) // false 다른 곳을 바라보고 있기 때문

=> 참조하는 것

새로운 객체를 만들 때는?

const target = Object.assign({}, userAge, userEmail)

=> 비어있는 객체 활용

• Object.keys
  객체 안에 있는 키들만 추출해서 새로운 배열을 반환

const user {
 	name: 'dongdu',
    age: 22,
    email: '4012popo@naver.com'
 }
 
 const keys = Object.keys(user)
 console.log(keys) // ['name', 'age', 'email'] 출력

6. 구조 분해 할당( = 비구조화 할당)

구조 분해하여 사용할 데이터만 가져올 수 있음
없는 데이터에 기본값 지정 가능 => 데이터가 원래 있으면 무시됨
다른 이름으로 변경도 가능
음,,,,,,,,,,,,잘 모르겠음,,,,,,,,,,,

const user = {
	name: 'dongdu',
    age: 22,
    email: '4012popo@naver.com'
}
const { name: dongdu, age, email, address = 'korea' } = user

console.log(${name})
console.log(${age})
console.log(${email})
console.log(address)

7. 전개 연산자

...이렇게 마침표 세 개 사용!
전개하는 연산자

const abc = ['a', 'b', 'c']

console.log(abc)
console.log(...abc)
//console.log('a', 'b', 'c')와 같이 출력됨

• 응용

const abc = ['aa', 'bb', 'cc', 'dd']

function toObject(a, b, ...c) { // c에 나머지가 모두 들어감
	return {
    	a: a,
        b: b,
        c: c,
    }
}

console.log(toObject(...abc))

• 함수 축약 참고
  

8. 불변성

두 가지의 데이터 타입

• 원시 데이터
  String, Number, Boolean, undefined, null
• 참조형 데이터
  Object, Array, Function

원시데이터의 데이터 불변성

새로운 원시데이터를 할당하였을 때 그 원시데이터가 기존 메모리에 있다면 기존에 존재하는 메모리 주소를 같이 보게 한다.

let a = 1;
let b = 2;

console.log(a === b) // false 출력

=> a와 b는 서로 다른 메모리 주소를 바라보고 있기 때문에 같지 않은 것

a = b
console.log(a === b) // true 출력

=> a와 b는 둘 다 같은 메모리 주소를 바라보고 있기 때문에 같은 것

let c = 1;
console.log(a === c) // treu 출력

=> c는 a와 같은 메모리 주소를 바라봄

참조형 데이터의 메모리 가변성

참조형 데이터는 같은 값을 할당한다고 해서 같은 메모리를 보게 하지 않는다.
이는 참조형 데이터의 메모리 가변성이라고 한다.

let a = {k : 1}
let b = {k : 1}

console.log(a === b) // false 출력

9. 얕은 복사와 깊은 복사

참조형 데이터를 수정할 때 메모리 가변성 때문에 문제가 생길 수 있다.
같은 메모리를 바라보고 있는 참조형 데이터를 수정하면 의도하지 않은 다른 데이터까지 수정이 되는 경우이다.
이때 얕은 복사를 사용하면 문제업뜸

얕은 복사

• assign 사용 얕은 복사
  

• 전개 연산자 사용 얕은 복사
  

깊은 복사

자바스크립트로 깊은 복사하기는 쪼끔 힘들어유

• lodash 사용