앞서 반복문 ① 배열에서 배열이란 여러 변수를 한꺼번에 모아 사용하는 자료형이라고 했다.
이때 typeof 연산자를 이용해 배열의 자료형을 확인해보면 object, 즉 객체 자료형이 나온다.
즉 배열은 객체의 한 종류라는 것인데, 과연 객체란 무엇일까?
객체
객체는 키와 값으로 구성된 속성을 가지는 자료형으로,
중괄호를 사용해 생성하고 내부의 값을 쉼표로 구분한다.
이때 이 내부의 값을 속성이라 하고, 하나의 객체는 다양한 자료형의 속성을 가질 수 있다.
다음은 객체의 예시이다.
const book = {
name: '혼자 공부하는 자바스크립트',
author: '윤인성',
publisher: '한빛미디어'
}
속성
속성은 객체 내부의 값으로, 키와 값으로 구성된다.
속성 값에 접근하기
객체 내 속성 값에 접근하는 방법으로는 다음의 두 가지가 있다.
객체명.키
객체명['키']
<script>
const book = {
name: '혼자 공부하는 자바스크립트',
author: '윤인성',
publisher: '한빛미디어'
}
console.log(book.name)
console.log(book['author'])
</script>
혼자 공부하는 자바스크립트
윤인성
속성 추가하기
속성을 추가하려면 위의 방식으로 키를 지정하고 값을 입력하면 된다.
<script>
const book = {
name: '혼자 공부하는 자바스크립트',
author: '윤인성',
publisher: '한빛미디어'
}
book.page = 496
console.log(JSON.stringify(book, null, 2))
</script>
{
"name": "혼자 공부하는 자바스크립트",
"author": "윤인성",
"publisher": "한빛미디어",
"page": 496
}
속성 제거하기
속성을 제거하려면 위의 방식으로 키를 지정하고 그 앞에 delete 키워드를 입력하면 된다.
<script>
const book = {
name: '혼자 공부하는 자바스크립트',
author: '윤인성',
publisher: '한빛미디어'
}
delete book.publisher
console.log(JSON.stringify(book, null, 2))
</script>
{
"name": "혼자 공부하는 자바스크립트",
"author": "윤인성"
}
메소드
메소드는 속성 중에서도 함수 자료형을 가지는 속성을 뜻한다.
메소드를 정의하는 방법으로는 다음의 두 가지가 있다.
메소드명: function () {}
메소드명 () {}
const book = {
name: '혼자 공부하는 자바스크립트',
author: '윤인성',
publisher: '한빛미디어',
sold: function (customer) {
console.log(customer + '가 ' + this.name + '를 구매하였습니다.')
}
}
const book = {
name: '혼자 공부하는 자바스크립트',
author: '윤인성',
publisher: '한빛미디어',
sold (customer) {
console.log(customer + '가 ' + this.name + '를 구매하였습니다.')
}
}
더보기
메소드 내에서 자기 자신이 가진 속성에 접근하고자 할 경우에는 this 키워드를 사용한다. 이때 this 키워드는 객체 자신을 나타낸다.
이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다.
'Frontend > JavaScript' 카테고리의 다른 글
객체 ③ 객체와 배열 고급 (1) | 2024.09.30 |
---|---|
객체 ② 기본 자료형과 객체 자료형 (1) | 2024.09.27 |
함수 ② 함수 고급 (2) | 2024.09.22 |
함수 ① 함수 기본 (3) | 2024.09.17 |
반복문 ② 반복문 (1) | 2024.09.17 |