카테고리 없음

js 객체

tp134679 2024. 11. 25. 00:40

<목차>

1. 객체 의 타입과 성질 배열과의 차이 

2. 객체 의 속성 추가와 덮어쓰기

3. 객체 안의 객체

3.2 객체안의 객체를 복사

 

1. 객체 의 타입과 성질 배열과의 차이

객체는 변수하나에 여러가지 데이터를 담고 싶을 때 사용 합니다. 

배열은 [] 대괄호 안에 하나의 변수에 여러 요소를 관리 하기 위해 쓰였으나

 

room 이라는 변수에 a , b , c 가 존제함

 

객채는 {} 중괄호 를 사용하여  하나의 변수에 그 변수의 여러가지 정보를 저장하기 위해 사용합니다.

여기서 neme 를 준 부분 (변수에 속성을 준부분) 을 키(ket) 라고 하며 "a씨" (값을 받은부분을) 밸류(value)

라고 칭합니다. 

room2 에 a씨가 있는데 성별과 나이 의 정보가 들어가있음

 

호출시 . 을 사용하여 ket 값을 호출가능 하지만 (" ")안에 있는 문자열이  ket 값일경우  [] 를 사용해서 호출합니다.

 

 

변수값 안의 함수도 . 을 사용하여 선택이 가능하며 () 를 사용해서 인자값도 넣을 수 있다.

 

함수를 객체로 넣어서 인자값을 주고 호출함

 

 

 

 

2. 객체 의 속성 추가와 덮어쓰기

배열의 속성추가와 비슷하게 객체도 추가가 가능하다.

 

 

속성의 추가 . 을 사용하여 객체를 추가함. 

 

 

 

 

 

객체 복사의 경우 객체 문법인 {} 중괄호 를 사용한다.

... 얕은 복사를  사용하여 그룹을 복사 하여 person 의 객체를 복사하여 각각 다른 ket를 추가함

 

 

객체 덮어쓰기

해당 2개의 객체가 있을때

clone 이라는 변수로 두 객체를 복사하면 

firstname 과 secondname , name 은 합쳐져서 출력 각각 출력 되지만 age 는 49 하나로 덮어 씌워져있는 것을 알 수있다. person2(person 보다 후에 선언됬기에 49 가 나옴 )

 

 

객체를 추가하여 객체를 복사도 가능하다. 그러나 이미 있는 ket 값일경우 덮어 쓰워지게 된다.

객체에 성별을 추가해서 복제함

 

객체에 나이와 이름을 추가해서 복제 했으나 덮어쓰워짐.

3. 객체 안의 객체

객체 안에서도 객체를 ket 값으로 줄 수있다.

해당 변수를 보면 obj2 에 name 과 age 2개의 ket 값이 있지만 name 의 value 값에 객체를 넣어서 obj2 안에 name 안에  first Name 이라는 객체를 만들고 firstName 과 secondName 의 ket 값에 각각 ㅇ 과 ㅣ 를 부여하였습니다.

해당 변수를 log 해보면 

age 와 name(tirstname,secondname)이 확인됨

 

name 안에 변수도 호출가능한데 css의 직계 자식 호출하는것처럼 . 을 사용해서 호출한다. 

.을 붙여서 직계자식처럼 그 밑에있는 볼륨 값을 호출함  

 

객체 안의 객체 를 복사

객체 안의 객체를  얕은 복사할 경우 첫번째 자식들만 복사를 하여 불변하는 특성을 가지지만 그 밑의 자식은 

공유되는 값을 가집니다.

해당 결과 출력시  clone 에 age 50을 줬으니 당연히 obj3 의 age에는 영향을 안가는 불변하는 모습을 보이지만 

clone 안에 name 안에 있는 firstName 에게 박 이라는 성을 부여한다면 값은 어떻게 될까? 

clone만 박 이라는 성을 부여했는데 둘다 바뀐것을 알 수 있었다.  

얕은 복사는 첫번쨰의 자식을 복사하여 새로히 영역을 만들지만 그 밑의 자식일경우 공유되는 코드를 나눠가지기 떄문에 이어지는 것을 알 수 있다.

해당 그림처럼 obj3 의 첫번째 자식을 복사했지만 직계 자식은 공유되는 영역을 사용하기에 할당가능.