본문 바로가기
Frontend/JavaScript

객체 ① 객체 기본

by minhi 2024. 9. 22.

앞서 반복문 ① 배열에서 배열이란 여러 변수를 한꺼번에 모아 사용하는 자료형이라고 했다.

 

이때 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