JavaScript - 객체

보윤이의 기술 블로그·2022년 2월 14일

1. 객체(Object)

자바스크립트 데이터 타입 중 하나로,
키(key)와 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합

  • 자바스크립트를 구성하는 거의 '모든 것'이 객체.
  • 배열(Array)과 마찬가지로, 여러 종류의 데이터를 묶음으로 관리하는 데이터 타입

2. 객체의 구성

const person = {
  name : '김보윤',
  location : {
    country:'대한민국',
    city:'서울'
  },
  mbti : 'ENFP',
  color : ['보라', '파랑']
}

console.log(person)
  • 객체는 0개 이상의 property로 구성된 집합
  • property는 키(key)와 값(value)으로 구성됨
  • 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있음
  • 객체를 생성할 때는 {} 안에 키(key)와 값(value)을 쌍으로 묶어서 만듦
    이때, key 값이 여러개일 경우엔 쉼표(,)로 구분

** 배열(Array)와 다른 점은, 순서가 중요하지 않다는 것!

  • 배열(Array): 순서를 가진다.
  • 객체(Object): 의미를 가진다. 호출할 시 순서가 뒤죽박죽 나오게 됨
    따라서, 객체에 저장된 데이터에 접근하기 위한 2가지 방법이 존재함

3. 객체에 접근하는 방법

3-1. Dot Notation

console.log(person.location)
console.log(person.color)
  • 이름 그대로, 점을 이용해서 접근하는 방법
  • 객체 이름에 점을 찍고 접근하고자 하는 key를 입력하여 value를 얻음
  • 프로퍼티 식별자는 오직 알파벳만 가능(_ & $ 포함)
  • 숫자로 시작할 수 없음
  • ex) person.location$
  • * 변수를 포함할 수 없음 *

3-2. Bracket Notation

console.log(person['location'])
console.log(person['color'])
  • 괄호를 이용해서 접근을 하는 방법
  • 대괄호 열어서 접근하고자 하는 key를 ''를 안에 입력하여 value를 얻음
  • 프로퍼티 식별자는 문자열 혹은 문자열을 참조하는 변수
  • 숫자로 시작할 수 있음
  • 공백 사용 가능
    ex) person['1location'], person['location 1']
  • * 변수를 포함할 수 있음 *

4. 객체 수정 / 추가, 삭제

4-1. 수정 / 추가

[수정]
- Dot Notation 

person.name = "보윤김"

- Bracket Notation

person['name'] = "Boyoon Kim"

[추가]
- Dot Notation 

person.blood = "A"

- Bracket Notation

person['height'] = "168"

4-2. 삭제

- Dot Notation 

delete person.blood

- Bracket Notation

delete person['height']
profile
어제보다 오늘 더 성장하는 프론트엔드 개발자

0개의 댓글