Gapus Dev Blog

[자바스크립트] 객체 본문

프론트엔드/JavaScript

[자바스크립트] 객체

Gapus 2023. 1. 6. 18:54

객체란?

  • 객체는 다양한 데이터를 묶어 각 데이터를 키(key)와 값(value)으로 연결하여 구성한다.
  • 구성하는 방법은 { 키: 값 } 형식으로 구성하고 추가 데이터 있으면 콤마(,)로 묶어준다.
  • 여러 형식의 데이터를 저장할 때는 배열을 사용하는 것보단, 객체를 사용하는 것이 좋다.
// 기본 구성 방식

let data = {
	key: value,
    key: value,
};

// 여러 형식의 데이터를 객체로 가능
let info = {
	name: "가프스",
    age: 30,
    job: "개발자",
}

객체의 특징

// 객체 선언
let info = {
	name: "가프스",
    age: 30,
    job: "개발자",
}

// 값 꺼내기
info.name  // '가프스'
info['name'] // '가프스'

// 키와 값 삭제
delete info.age // 나이의 키와 값 삭제

info //{ name: '가프스', job: '개발자'}

객체와 배열 같이 사용

// 객체들을 배열에 담아서 선언하기
const info = [
    {
        name: "가프스",  // 1번째 객체
        age: 30,
        job: "개발자"
    },
    {
        name: "가트넷",  // 2번째 객체
        age: 25,
        job: "학생"
    },
    {
        name: "스넷",  // 3번째 객체
        age: 35,
        job: "기획자"
    }
]

// 위 객체들을 깔끔하게 한줄로 적기
const info = [
    { name: "가프스", age: 30, job: "개발자" },
    { name: "가트넷", age: 25, job: "학생" },
    { name: "스넷", age: 35, job: "기획자" }
]

// 배열안의 객체에서 뽑아내기
info[0].name     // 가프스
info[0].age      // 30
info[0].job   // 개발자

// 배열 안의 객체에서 원하는 객체(30살 이상)만 뽑아내기
info.filter((data) => (data.age >= 30))

    // classmates = [
    //    { name: "가프스", age: 30, job: "개발자" },
    //    { name: "스넷", age: 35, job: "기획자" },
    // ]