시작하기 전에
객체란 한 마디로 정의하면 '실제로 존재하는 사물'을 의미하고, '이름과 값으로 구성'된 속성을 가진 자바스크립트의 기본 데이터 타입으로 이야기할 수 있다.
객체
자바스크립트에서 여러 자료를 다룰 때는 객체(object)를 사용한다. 이전에 살펴보았던 배열(array)도 여러 자료를 다룰 수 있다. 그렇게 할 수 있었던 이유도 배열 또한 객체이기 때문이다.
const array = ['사과', '바나나', '망고', '딸기']배열에는 인덱스(index)와 요소(element)가 있다. 각각의 요소를 사용하려면 다음처럼 배열 이름 뒤에 인덱스로 접근한다.
array[0]
>사과
array[2]
>망고배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 비슷하다. 다른 점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(key)를 사용한다.
객체는 중괄호{...}로 생성하며, 다음과 같은 형태의 자료를 쉼표(,)로 연결해서 입력한다.
<script>
const product = {
제품명: '7D 건조 망고',
유형: '당절임',
성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
원산지: '필리핀'
}
</script>위에서 생성한 객체를 표로 나탄내면 다음과 같다.
| 키 | 속성 |
|---|---|
| 제품명 | 7D 건조 망고 |
| 유형 | 당절임 |
| 성분 | 망고, 설탕, 메타중아황산나트륨, 치자황색소 |
| 원산지 | 필리핀 |
다음과 같이 객체 뒤에 대괄호[...]를 사용하고 키를 입력하면 객체의 요소에 접근할 수 있다
product['제품명']
>'7D 건조 망고'
product['유형']
>'당절임'
product['성분']
>'망고, 설탕, 메타중아황산나트륨, 치자황색소'
product['원산지']
>'필리핀'객체는 위와 같이 대괄호를 사용하는 방법 이외에 온점(.)을 사용할 수도 있다.
product.제품명
product.유형
product.성분
product.원산지단, 식별자로 사용할 수 없는 단어를 키로 사용할 때는 키의 이름을 문자열로 사용해야하며, 그러한 키의 값에 접근할 때는 무조건 대괄호[...]를 사용해야 객체의 요소에 접근할 수 있다.
속성과 메소드
배열 내부에 있는 값을 요소라고 한다. 반면 객체 내부에 있는 값은 속성이라고 한다. 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다.
const object = {
number: 273,
string: '구름',
boolean: true,
array: [52, 273, 103, 32]
method: function () {}
}속성과 메소드 구분하기
객체의 속성 중 함수 자료형인 속성을 특별히 메소드(method)라고 부른다. 다음 코드에서 객체 person은 name 속성과 eat 속성을 가지고 있는데, eat 속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해내는 함수 자료형을 특별히 eat() 메소드라고 부른다.
<script>
const pet = {
name: '구름',
eat: function(food) {}
}
//메소드 호출하기
pet.eat()
</script>note) 기본적으로 화살표 함수는 메소드로 사용하지 않는다.
메소드 내부에서 this 키워드 사용하기
메소드 내에서 자기자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 한다. 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용한다.
<script>
// 변수를 선언한다.
const pet = {
name: '구름',
eat: function (food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
}
//메소드를 호출한다.
pet.eat('밥')
>구름은/는 밥을/를 먹습니다.
</script>동적으로 객체 속성 추가/제거
객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다.' 또는 '동적으로 속성을 제거한다'고 표현한다.
동적으로 객체 속성 추가하기
<script>
//객체를 선언한다.
const student = {}
student.이름 = '윤인성'
student.취미 = '악기'
student.장래희망 = '생명공학자'
//출력
console.log(JSON.stringify(student, null, 2))
> {
"이름": "윤인성",
"취미": "악기",
"장래희망": "생명공학자"
}
</script>동적으로 객체 속성 제거하기
객체의 속성을 제거할 때는 delete 키워드를 사용하고 형태는 다음과 같다.
delete 객체명.속성확인 문제
- 다음과 같은 대상을 자바스크립트 객체로 선언해주세요. 자료형은 알맞다고 생각하는 것(문자열, 숫자, 불 등)으로 지정해주세요.
| 속성 이름 | 속성 값 |
|---|---|
| name | 혼자 공부하는 파이선 |
| price | 18000 |
| publisher | 한빛미디어 |
{
name: "혼자 공부하는 파이썬",
price: 18000,
publisher: "한빛미디어"
}- 다음 중 객체에 동적으로 속성을 추가하는 문법을 고르세요.
1️⃣add 객체[속성] = 값
2️⃣객체.add('속성',값)
3️⃣객체[속성] = 값
4️⃣객체[속성]add값
답: 3번
- 다음 중 객체에 동적으로 속성을 제거하는 문법을 고르세요.
1️⃣delete 객체[속성]
2️⃣객체.delete('속성')
3️⃣delete 객체 from 속성
4️⃣delete 속성 from 객체
답: 1번
- 다음 코드에서 메소드라고 부를 수 있는 속성에 동그라미 표시하세요. 그리고 코드의 실행 결과를 예측해보세요.
답: print, 실행결과 => '빵는 스페인어로 pan입니다.
