IT Study./혼공JS
6장. 객체 - 1
impnem
2022. 6. 13. 23:13
혼공JS 6장 - 1
06-1 객체의 기본
- 객체(object)는 한 마디로 정의하면 '실제로 존재하는 사물'을 의미하고 '이름(name)'과 '값(value)'으로 구성된 속성(property)을 가진 자바스크립트의 기본 데이터 타입으로 이야기할 수 있다.
<객체>
- 자바스크립트에서 여러 자료를 다룰 때는 객체(object)를 사용한다.
- 이전에 살펴보았던 배열(array)도 여러 자료를 다룰 수 있다. 그렇게 할 수 있던 이유는 배열도 객체이기 때문이다.
- 배열을 typeof로 실행해보면 어떤 자료형이 나올까?
- 이때 출력한 object가 바로 객체(object)이다.
- 객체를 살펴보기 전에 배열과 관련된 기본적인 내용을 복습하자.
<script>
const array = ['사과', '바나나', '망고', '딸기']
</script>- 배열에는 인덱스(index)와 요소(element)가 있다.
- 각각의 요소를 사용하려면 다음처럼 배열 이름 뒤에 인덱스로 접근한다.
array[0] // 사과
array[2] // 망고- 배열의 인덱스와 요소는 아래와 같이 표로 나타낼 수 있다.
| 인덱스 | 요소 |
| 0 | 사과 |
| 1 | 바나나 |
| 2 | 망고 |
| 3 | 딸기 |
- 배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 비슷하다.
- 다른 점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(key)를 사용한다.
- 객체는 중괄호{...}로 생성하며, 아래와 같은 형태의 자료를 쉼표(,)로 연결해서 입력한다.
키: 값- 객체를 선언해보자.
<script>
const product = {
제품명: '7D 건조 망고', // 키와 값 뒤에 쉼표(,)를 넣어 구분한다.
유형: '당절임',
성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
원산지: '필리핀'
}
</script>- 위에서 생성한 객체를 표로 나타내면 아래와 같다.
| 키 | 속성 |
| 제품명 | 7D 건조 망고 |
| 유형 | 당절임 |
| 성분 | 망고, 설탕, 메타중아황산나트륨, 치자황색소 |
| 원산지 | 필리핀 |
- 배열과 비슷하다는 것을 알 수 있으며, 객체의 요소에 접근하는 것도 배열과 비슷하다.
- 아래와 같이 객체 뒤에 대괄호[...]를 사용하고 키를 입력하면 객체의 요소에 접근할 수 있다.
product['제품명'] // '7D 건조 망고'
product['유형'] // '당절임'
product['성분'] // '망고, 설탕, 메타중아황산나트륨, 치자황색소'
product['원산지'] // '필리핀'- 객체는 위 방법 이외에 온점(.)을 사용할 수도 있다.
product.제품명 // '7D 건조 망고'
product.유형 // '당절임'
product.성분 // '망고, 설탕, 메타중아황산나트륨, 치자황색소'
product.원산지 // '필리핀'
<속성과 메소드>
- 배열 내부에 있는 값을 요소(element)라고 한다.
- 반면 객체 내부에 있는 값은 속성(property)이라고 한다.
- 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다.
const object = {
number: 273,
string: '구름',
boolean: true,
array: [52, 273, 103, 32],
method: function () { }
}
속성과 메소드 구분하기
- 객체의 속성 중 함수 자료형인 속성을 메소드(method)라고 부른다.
<script>
const pet = {
name: '구름',
eat: function (food) { }
}
// 메소드를 호출합니다.
pet.eat()
</script>
메소드 내부에서 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>- 실행 결과는 아래와 같다.
- 예제에서 JSON.stringify() 메소드를 사용했는데 일단 객체를 콘솔 출력에서 쉽게 볼 수 있는 방법이라고 기억하라.
동적으로 객체 속성 제거하기
- 객체의 속성을 제거할 때는 delete 키워드를 사용하고 형태는 아래와 같다.
delete 객체.속성- delete를 사용한 예제를 살펴보자.
<script>
// 객체를 선언합니다.
const student = {}
student.이름 = '윤인성'
student.취미 = '악기'
student.장래희망 = '생명공학자'
// 객체의 속성을 제거합니다.
delete student.장래희망
// 출력합니다.
console.log(JSON.stringify(student, null, 2))
</script>- 실행 결과는 아래와 같다.
- '장래희망'이라는 속성이 제거된 것을 확인할 수 있다.
<메소드 간단 선언 구문>
- function () { } 형태로 메소드를 선언할 수 있다고 배웠다.
- 최신 버전의 자바스크립트에서는 메소드를 조금 더 쉽게 선언할 수 있는 전용 구문이 있다.
<script>
// 변수를 선언합니다.
const pet = {
name: '구름',
eat (food) {
alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
}
}
// 메소드를 호출합니다.
pet.eat('밥')
</script>- 실행 결과는 아래와 같다.
화살표 함수를 사용한 메소드
- function () { } 형태로 선언하는 익명 함수와 () => { } 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다르다.
<script>
// 변수를 선언합니다.
const test = {
a: function () { // 익명 함수로 선언
console.log(this)
},
b: () => { // 화살표 함수로 선언
console.log(this)
}
}
// 메소드를 호출합니다.
test.a()
test.b()
</script>- 실행 결과는 아래와 같다.
- 익명 함수의 this는 현재 코드에서 test 객체를 출력한다.
- 화살표 함수의 this는 window 객체를 출력한다. (간단하게 설명하고자 그런 것이고 상황에 따라 다른 객체를 나타낼 수 있다.)
- 이처럼 메소드 내부에서 this 키워드를 사용할 때 의미가 달라지므로 화살표 함수를 메소드로 사용하지 않는 편이다.
- 저자 유튜브 강의 보기
- 33강 - 객체 기본 : https://www.youtube.com/watch?v=QtDrQ1JMjZM
- 34강 - 객체 속성 추가와 제거 : https://www.youtube.com/watch?v=vEG4DY-TlC8
해당 글은 [혼자 공부하는 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.