[JavaScript] 객체 / 2021.10.15

1. 객체 (object)

객체와 속성

객체는 실제로 존재하는 사물이다. 위 그림을 예로 들면 사람이 하나의 객체인 것이다. 그리고 그 사람의 이름이나 나이 같은 것을 속성이라고 한다.

 

배열또한 객체이다. 배열을 typeof로 실행해보면 object라는 문자열이 출력되는데 이때 출력한 object가 객체라는 의미이다.

배열도 객체

 

객체와 배열에 다른 점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다.

예시를 통해서 알아보자.

 

객체 예시

 

위 코드의 객체를 그림으로 나타내면 다음과 같다.

 

객체 그림

 

* 객체의 요소(속성)에 접근은 객체['Key'] 혹은 객체.key로 한다. 

코드를 실행해보면 객체의 속성이 출력되는것을 확인할 수 있다.

객체의 속성 출력

2. 속성과 메소드

배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다. 

객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다. 

예시를 통해서 알아보자.

 

메소드 속성 활용

 

pet이라는 객체를 선언하고 속성으로 name과 eat함수를 넣어주었다. 

eat함수를 살펴보면 매개변수 food를 받는다. alert함수에서는 자신이 가진 속성에 접근하기 위해서 this 키워드를 사용했다. (this.name)

콘솔 창을 확인해 보면 매개변수로 넘겨준 '밥'이 출력되는 것을 확인할 수 있다.

메소드 속성 활용 결과

* 메소드 eat을 eat(food) { } 형태로 간단하게 선언할 수도 있다.

3. 동적으로 객체 속성 추가/체거

객체를 생성한 이후에 속성을 추가하거나 제거할 수 있다.

 

(1) 객체 속성 추가하기

객체이름.Key = Value

 

예시를 통해서 알아보자.

먼저 human이라는 객체를 선언하고 그 뒤에 객체의 속성을 추가해주었다.

 

객체 속성 추가

 

콘솔 창을 실행해보면

객체에 속성이 추가된 것을 확인할 수 있다.

 

(2) 객체에 속성 제거하기

객체의 속성을 제거할 때는 delete 키워드를 사용한다.

delete 객체이름.속성

 

위의 코드에서 키 속성을 제거해보겠다.

 

객체 속성 제거

 

콘솔 창을 실행해보면

속성이 제거된 것을 확인할 수 있다.