[Javascript] 14. 객체 Object

객체

Dog
Name : Coco
Age : 7

여기 귀여운 강아지가 있다.
이름은 coco고 나이는 7살이다.

이 정보로 객체를 만들어 보려고 한다.

객체 만들기

<script>
const dog = {
	name : 'coco',
	age : 7,
}
</script>

나는 객체를 만들었다.
객체는 {}를 작성하고 키(key)와 값(value)으로 구성된 property가 들어간다.

각 property는 ,로 구성한다.
마지막 ,는 없어도 되지만 있을 때 편집하기에 용이하다.

객체 접근, 추가, 삭제

<script>
//객체
const dog = {
	name : 'coco',
	age : 7,
}
-------------------
//접근
dog.name //'coco'
dog['age'] //7

//추가
dog.gender = 'female';
dog['hairColor'] = 'gray and white';

//삭제
delete dog.hairColor;
</script>

객체에 접근하고 싶을 때는 .을 사용하면 된다.
[]도 사용할 수 있다.

추가와 삭제도 가능하다. 추가할 때도 .이나 []를 이용할 수 있다.
삭제는 delete 키워드를 사용하면 된다. 삭제하고 싶은 property 앞에 붙여주면 된다.

객체 단축

단축 property를 활용하면 보다 간단하게 디테일을 작성할 수 있다.

<script>
//객체 단축
const name = 'Eden';
const age = 20;
-----------------
const me = {
	name, //name : name
    age, //age : age
    gender : 'female',
}
</script>

property 존재 여부 확인

만약 존재하지 않는 프로퍼티에 접근하면 어떻게 될까?

<script>
const me = {
	name : 'Eden',
    age : 20,
}
------------------------
me.birthDay; //undefined

'birthDay' in me;
//false

'age' in me;
//true
</script>

에러가 발생하지 않고 undefined가 나온다.

이때, in연산자를 사용하면 프로퍼티가 있는지 확인할 수 있다.
그냥 .이나 []를 이용하면 되지만 어떤 값이 나올지 확신할 수 없을 때에 in을 사용하면 된다. 함수 인자로 받거나 API통신을 통해 데이터를 받아올 때 등등.

for..in 반복문

for in 반복문을 사용하면 객체를 순회하면서 값을 얻을 수 있다.
for in문은 for문 보다 간단하다.

<script>
for(let key in me){
	console.log(key)
    console.log(me[key])
}
</script>

한 번 자세히 다뤄보도록 하자.

<script>
const Eden = {
	name : 'Eden',
    age : 20,
};

for(x in Eden) {
	console.log(x)
}//"name" "age"
-------------------
const Eden = {
	name : 'Eden',
    age : 20,
};

for(x in Eden) {
	console.log(Eden['x']);
}//"Eden" 20
</script>

이후에도 이어지는 공부에서도 계속 객체의 상세한 내용들을 다뤄야한다! 빡공 열공!