위코드 사전 스터디를 듣고 쓰는 글입니다.
수업 내용을 참고/인용하여 작성했습니다.
지난 포스팅에 이어 객체를 다루는 방식 등에 대해 더 서술하겠습니다.
이런 '객체를 다룬다'는 방법에는 이런 것들이 있겠죠?
- 객체의
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의 이름 바꾸기
시도할 수 있는 루트는 두 가지입니다.
- 수정하려는 객체를 삭제 후 똑같은 값을 새로 추가하거나
- 값을 유지한 채로
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를 변경하는 효율적인 방법에 대해선 더 공부해야겠네요!
마무리
그런데, 배열 안에 또 객체를 넣을 수도 있다는 건 생소하네요?
다음 포스팅에서 이렇게 복잡한 방식의 객체에 대해 더 써보겠습니다.
자꾸 쓰다보니 글이 길어지는데 울지말자
