[사전스터디 Week4] JavaScript(3), 객체

박성수·2022년 8월 29일
0

1. 객체란 무엇인가?

객체란 0개 이상의 프로퍼티로 구성된 집합이며, key와 value로 구성된다. 원하는 key에 value를 할당 할 수 있다.
객체는 배열과는 다르게 중괄호 {...}로 감싸져 있다. 객체는 다음처럼 생겼다.

여기서 name, age, bloodType은 각각 key에 해당하고 key에 해당하는 각각의 value는 "seongsu", 26, "O"에 해당한다.

2. 객체의 값에 접근하는 방법.

(1) 브라켓 노테이션 (대괄호 표기법)

대괄호로 원하는 Key의 값을 불러올 수 있다.
객체명['원하는 key']로 불러올 수 있다. 여기서 중요한 것은 대괄호를 쓸 때는 꼭 원하는 key에 ''혹은 ""로 감싸줘야 한다.

변수 명으로 불러 올 수도 있는데 그럴 때는 대괄호 안에 따옴표를 쓰지 않고 사용한다.

변수를 선언하고 변수에 내가 원하는 key값을 저장한다.
대괄호를 열고 변수명을 적어 주면 변수에 선언된 원하는 key값의 value를 다음과 같이 가져온다.

(2) 닷 노테이션 (마침표 표기법)

객체명.원하는key값으로 원하는 key에 접근할 수 있다.

닷 노테이션에서 기억해야할 점은 객체의 key값이 자바스크립트에서 유효한 이름이 아니라면 사용할 수 없다는 점이다. 예를들면 key값에 하이푼이나 띄어쓰기가 포함될 수 있는데(이경우 key값은 선언 당시에 ''혹은 ""로 감싸져야한다.) 그러면 닷 노테이션에서는 사용할 수 없다.

mySelf.name에서는 정상적으로 접근한 것을 알 수 있다.
blood-Type을 불러올 때는 브라켓노테이션을 활용했을 땐 정상적으로 접근, 닷 노테이션을 사용한 경우에는 오류가 난 것을 확인했다.

3. 객체의 값을 추가, 수정, 삭제하는 방법.

(1) 객체의 값을 추가

존재하지 않는 프로퍼티에 값을 할당하면 객체에 추가된다.

다음과 같이 존재하지 않는 hobby를 불러와 값을 할당하니 hobby가 meSelf에 추가되었다.

(2) 객체의 값을 수정

이미 존재하는 프로퍼티에 값을 할당하면 새로 할당된 값으로 수정된다.
name을 불러와 "Parkseongsu"로 할당하니 name의 value가 수정되었다.

(3) 객체의 값을 삭제

delete연산자를 통해 원하는 프로퍼티를 삭제가능하다.

4. 객체와 배열이 섞이 복잡한 객체를 만들어서 접근하는 방법

(1) 객체 안의 배열에 접근하는 방법


다음과 같은 배열이 있다. 배열안에 type,list프로퍼티를 가진 객체가 있고 list는 또 다시 배열로 구성되어있다.
배열은 배열의 접근법인 대괄호를 열고 그 안의 내가 원하는 요소의 인덱스를 넣어주고, 객체는 똑같이 브라켓 혹은 닷 노테이션을 활용해서 접근할 수 있다.
내가 만약 tulip의 값에 접근하고 싶다면

다음과 같이 표현할 수 있다. 위의 것은 브라켓 노테이션을 활용한 것이고, 밑의 것은 닷노테이션을 활용한 것이다.

둘다 정상적으로 출력되었다.

(2) 객체 안의 객체에 접근하는 방법


다음과 같은 객체가 있다. myStorage는 car라는 key값과 car의 value로 inside와 outside라는 객체를 갖고 있다.
여기서 각각 브라켓노테이션과 닷 노테이션을 활용해서 crumbs와 jack에 접근해보겠다.

다음과 같이 입력하면 각각 jack과 crumbs를 출력한 것을 확인할 수 있다.

5. 배열의 타입이 객체인 이유.

자바스크립트는 객체기반의 프로그래밍 언어로써, 구성된 모든 것들이 객체이다.
객체타입은 원시타입과 대조되는 데이터타입으로 원시타입은 변경이 불가능한 값이지만, 객체타입은 변경이 가능한 값이다.
배열은 한 번 입력되면 변경할 수 없는 값이 아닌 계속 바뀌고 값을 추가하므로 객체타입의 값이다.

profile
Front-end Developer

0개의 댓글