위코드 사전 스터디를 듣고 쓰는 글입니다.
수업 내용을 참고/인용하여 작성했습니다.

지난 포스팅에 이어 객체를 다루는 방식 등에 대해 더 서술하겠습니다.
이런 '객체를 다룬다'는 방법에는 이런 것들이 있겠죠?

• 객체의 value값을 바꾼다
• 객체에 새 property를 추가한다
• 객체의 property 를 삭제한다

마구 다뤄지는 객체의 모습이다.

일단 임의의 객체를 하나 만들어보겠습니다.

let zoo = {
	lion : 5,
  	zebra : '얼룩말',
  	rabbit : ['토끼1','토끼2']
}

객체 property 추가하기

여기에 다른 프로퍼티를 추가해봅니다.

🔸 dot notation

zoo.dolphin = 2

🔸 bracket notation

zoo['dolphin'] = 2

진심 이게 끝인가요?
네 끝입니다.
중요한 것은 추가하려는 객체가 선택되고, 추가되는 key가 붙은 다음 값을 채워넣는 것입니다.

값이 빈 key를 추가하면 어떻게 될까요?

zoo.alien = null
console.log(zoo)
/*Object { 
alien: null
dolphin: 2
lion: 5
rabbit: Array [ "토끼1", "토끼2" ]
zebra: "얼룩말
}*/

그냥 null값을 가진 채로 추가됩니다.
이제 추가한 프로퍼티들을 다시 삭제해봅니다.

객체 property 삭제하기

참고로 객체의 key를 삭제한다는 건 property 그 자체를 삭제하는 것과 같습니다.
delete 명령어를 이용합니다.

🔸 dot notation

delete zoo.dolphin
delete zoo.alien

🔸 bracket notation

delete zoo['dolphin']
delete zoo['alien']

console.log(zoo)
/*
Object {
lion: 5
rabbit: Array [ "토끼1", "토끼2" ]
zebra: "얼룩말"
}
*/

다시 기존의 객체로 돌아왔습니다!

객체 value(값) 바꾸기

객체 zoo에서 lion key의 값인 5를 바꿔봅니다.

🔸 dot notation

zoo.lion = ['숫사자','암사자']

🔸 bracket notation

zoo['lion'] = ['숫사자','암사자']
/*
결과:
lion: Array [ "숫사자", "암사자" ]
rabbit: Array [ "토끼1", "토끼2" ]
zebra: "얼룩말"
*/

엄청 간단하네요.
그런데, 여기서 객체의 key의 이름을 바꾸고 싶을 땐 어떻게 하죠?

객체 Key의 이름 바꾸기

시도할 수 있는 루트는 두 가지입니다.

1. 수정하려는 객체를 삭제 후 똑같은 값을 새로 추가하거나
2. 값을 유지한 채로 key값만 바꾸거나

1번 방법

delete zoo['zebra']
zoo.lion = 'horse'

zebra에 할당된 값이 1개밖에 없다면 이렇게 간단하게 해결할 수 있겠지만, 할당된 값이 100개짜리 배열로 이루어졌다면 어떻게 될까요?

2번 방법

참고 블로그
map이라는 함수가 있습니다. filter처럼 사용 방식이 비슷하네요.

zoo.map(x => { //매개변수 x 가 있습니다.
  let y= {} //빈 오브젝트 y를 만들어줍니다.
  y['horse'] = x['zebra'] //오브젝트 y에 horse라는 속성은 매개변수로 받은 오브젝트 x의 zebra와 같아집니다.
return y;//오브젝트 y를 반환합니다.
})

그런데, 이 방법을 쓰려면 우리는 기존에 만들었던 객체를 '배열'의 형태로 바꿔야합니다.

let zoo = [{
	lion : 5,
  	zebra : '얼룩말',
  	rabbit : ['토끼1','토끼2']
}]

이렇게요!
왜냐하면 map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용하는 함수이기 때문입니다.

ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있습니다.
출처: https://7942yongdae.tistory.com/48

한마디로 객체에 직접 못 쓴다는 뜻입니다.
하나를 궁금해하다가 굉장히 딥한 영역으로 온 느낌입니다. map 함수에 대한 자세한 활용사례와 객체의 key를 변경하는 효율적인 방법에 대해선 더 공부해야겠네요!

마무리

그런데, 배열 안에 또 객체를 넣을 수도 있다는 건 생소하네요?
다음 포스팅에서 이렇게 복잡한 방식의 객체에 대해 더 써보겠습니다.

자꾸 쓰다보니 글이 길어지는데 울지말자