자바스크립트(Java Script) 12장 객체

12장 객체(Object)

 

 

 

const ironman = {
   name : 'tony',
   age : 37,
}

어떠한 것에 대한 정보들의 집합물을 하나도 묶은 것. 이를 객체라 한다.

객체는 위와 같이 표현한다.

 

 

각 내용물의 정의는

name/age : 키(Key)

tony/37 : 값(Value)

name : 'tony' / age : 37    :  Property (데이터가 저장된 속성값 집합체)

 

 

각 Property는 쉼표로 구분한다.

마지막 쉼표는 안적어도 상관은 없지만 있는 것이 수정/삭제/이동 시 용이하다.

 

 

 

---

 

 

 

객체의 접근/ 추가/ 삭제

 

접근

'.'과 '[  ]' 를 사용한다.

해당 구문으로 ironman이라는 객체에서 정보를 뽑아올 수 있다.

ironman.name // 'tony'
ironman['age'] // 37

 

 

 

 

 

추가

접근과 똑같이 '.'과 '[  ]' 를 사용한다.

해당 방식으로 ironman이라는 객체에 정보를 추가한다.

ironman.tall = 175 ;
ironman[gender] = 'male' ;

 

 

 

 

 

삭제

삭제하고 싶은 property의 앞에 delete를 붙인다.

delete ironman.age;

 

 

 

---

 

 

 

단축 property

const name : 'tony' ;
const age : 37 ;


1.
const ironman = {
   name : name ,
   age : age,
   gender : 'male',
}



2.
const ironman = {
   name, // name : name 와 같다
   age,  // age : age  와 같다
   gender : 'male',
}

맨 위와 같은 변수 선언이 되어 있을 때,

1번과 같은 함수를 2번처럼 단축해서 사용이 가능하다.

 

 

 

 

 

 

---

 

 

 

Property 존재 여부 확인

 

존재하지 않은 Property에 접근을 하게 된다면 에러가 나지 않고 undefined 값을 반환한다.

존재 여부를 확인하기 위해서는 아래처럼 'in' 연산자를 사용한다.

 

const ironman = {
   name : 'tony',
   age : 37,
}


ironman.weight;
// undefined


'age' in ironman
// true


'weight' in ironman
// false

 

 

 

 

 

접근인 '.' , '[   ]' 을 사용하지 않고 in을 사용하는 때?

=> 해당 property가 있는지 확실하게 확인하고 넣을 때 사용 (함수의 인자를 넣거나 API통신을 통해 데이터를 받을 때)

=> 그렇지 않으면 이상한 결과값을 내는 경우들이 있다.

위 예를 보면 Black의 age가 없음에도 성인이라고 출력을 하고 있다.

이는 분명 잘못된 결과다.

 

 

in을 이용해서 수정을 하자면

5줄처럼 user의 나이가 없다면 false 인데 그걸 강제로 true로 반환 시켜서

OR 연산자까지 사용하여 성인이 아니라는 결과로 무조건 빠지게 만든다.

 

 

 

---

 

 

 

for ... in 반복문

객체의 내용물을 반복으로 한번에 값을 얻어낼 수 있다.

 

 

위는 객체(Jack)의 Key 값을 for-in 문으로 얻어낸 결과.

 

 

 

 

 

위는 객체(Jack)의 Value를 for-in 문으로 얻어낸 결과.