2023.12.29 TIL Javascript #object #객체 메소드 #객체비교 #객체병합

객체

특징

- key : value 형식

- 장점: 하나의 변수에 여러 값을 넣을 수 있음!

 

객체 메소드 (객체가 가진 여러가지 기능)

1. Object.keys() 

- 객체의 key 값을 가져오겠다!

let person = {

    name : "홍길동",

    age :30,

    gender : "남자"

};

 

let keys_array = Object.keys(person)

=> keys_array라는 변수에 person이라는 객체의 key값들을 배열 형태로 담겠다.

- 주의! Object 의 O는 대문자

- 변수의 이름은 아무거나해도 되지만 Object.keys() 는 정해져 있는 형식

  (첨에 변수 이름도 keys라고 해서 헷갈렸음ㅎㅎ)

console.log(keys_array);

=> ['name', 'age', 'gender']

 

2. Object.values()

 

- 객체의 value 값을 가져오겠다!

let values_array = Object.values(person);

=> values_array라는 변수에 person이라는 객체의 value 값들을 배열 형태로 담겠다.

console.log(values_array);

=> [ '홍길동', 30, '남자' ]

 

3. Object.entries()

- key와 value를 묶어서 만든 배열 들의 배열!

let entries_array = Object.entries(person);

=> entries_array 라는 변수에 person의 key와 value 값들을 묶은 것들로 새로운 배열을 만든 것을 담겠다!

console.log(entries_array);

=>  [ ['name', '홍길동'], [ 'age', 30], ['gender', '남자] ]

 

4. Object.assign(a , b)

- 객체 복사

 

(1) 복사한 객체를 넣을 새로운 객체 선언

let newPerson = {};  

 

(2) Object.assign( a =어디다 복사할래? , b = 뭘 복사할래?)

Object.assign(newPerson, person);

=> newPerson에다가 person이라는 객체를 복사할래

console.log( newPerson );

=> { name : '홍길동' , age : 30 , gender : '남자' } 

 

근데 만약! 복사를 하고 싶긴한데 person이라는 객체의 value 값 중 age를 30이 아닌 31로 하고 싶으면 어케?

Object.assign( newPerson, person, {age:31} );

=> newPerson 이라는 새로운 애한테, person 복사할 건데, age라는 key 값의 value 값만 31로 바꿀거야.

 

 

객체 비교

let person1 = {

    name : "홍길동",

    age :30,

    gender : "남자"

};

-  person1 이라는 객체는 이렇게 생겼어.

let person2 = {

    name : "홍길동",

    age :30,

    gender : "남자"

};

- person2 라는 객체는 이렇게 생겼어

 

엇? 두 객체가 똑같네?

console.log(person1 === person2);

=> false

 

엥?? 왜??

 

- 객체라는 애는 크기가 상당해서 -> 메모리에 저장할 때 별도의 공간에 저장

  so, person1 이 가지는 값 그 안의 "값 자체" 가 아니라 별도 공간에 대한 "주소"

        person2 도 마찬가지로 갖는 값이 별도 공간에 대한 "또 다른 주소" 이기 때문에 

둘 . 이 . 다 . 름!!

- 하지만 string 이었으면 두 값이 같음

  왜?  string은 "값 자체"를 저장하기 때

 

아 근데 person1 이랑 person2 랑 둘이 너무 비슷하잖아 그냥 같은 걸로 하고 싶어! 방법이 없을까?

 

console.log(JSON.stringify(person1) === JSON.stringify(person2));

=> true

- stringify : 문자열화 한다.

 즉, 저 객체들을 문자열화 한다는 건데, 말했듯이 문자열이 되는 순간, "주소"가 아닌 "값 자체" 로 저장되기 때문에 둘이 같아짐

 

객체 병합

let person1 = {

    name : "홍길동",

    age :30,

};  

let person2 = {

    gender : "남자"

};

 

- person1 이라는 객체에는 gender 값이 없고, person2 라는 객체에는 gender 값 밖에 없네?

 

  둘이 합치고 싶어!!

  ... : spread oprator

=> 중괄호를 다 풀어헤쳐주는 메소드

let perfectMan = {...person1};

=> person1 이라는 애의 중괄호를 다 풀어헤쳐서 perfectMan 이라는 변수에 넣어줘! 

 

이 상태에서 

console.log(perfectMan);

하면 => { name : '홍길동' , age : 30 }

 

그렇기 때문에

만약 

let perfectMan = {...person1, ...person2};

이렇게 새로 선언하고

console.log('perfectMan =>', perfectMan);

이렇게 하면~

=> 짠 { name : '홍길동' , age : 30 , gender : '남자' }

 

---

느낀 점

본격적으로 Javascript 문법을 배우기 시작한 날! 

엄청 뭘 많이 배우기는 했는데,, 이해는 되는데,,

과연 실전에서 쓰였을 때 내가 읽을 수 있을지...ㅠㅠ

 

그래도 나만 어려운 줄 알았는데 같이 어려운 거라 심적으로 좀 안심이 되었고, 서로 어디어디 공부하고 있다고 얘기하니까 지칠만 하면 동기부여도 되고 위안도 되고 좋은 것 같다.   

 

오후 9시에 끝나야 되는데 왜 맨날 11시를 넘기는지ㅠ 배우는 속도가 너무 느리다.

그래도 내 것이 되는 게 중요하니까 뭐 ㄱㅊㄱㅊ! 

그래서 하루 끝 다 지친다음에 TIL를 쓰다보니 디자인이고 뭐고 신경도 못 쓰고 그냥 씀ㅠ

나중에 수정해야지^^;;