JavaScript 7일차 정리 [ 오브젝트 ]

오브젝트

 

 

여러 종류의 값을 담을 때 사용 ( 이름있는 값의 집합이라고도 한다 )

 

기존에 배웠던 자바스크립트에서의 저장 방식은 2가지 였다.

변수와 배열

 

변수 : 값 하나만을 저장할 수 있는 저장공간.

 

배열 : 같은 종류의 값을 저장할 수 있는 순서가 있는 값의 목록.

변수의 생성
let a = 1;

배열의 생성
let arr = [1, 2, 3];

오브젝트의 생성
let book = {
    title : "자바의정석",
    author : "남궁성",
    price : 32000,
    soldOut : false,
    stock : 5
};

오브젝트의 속성 출력
console.log(book.title); // 자바의정석

변수와 배열 저장공간에 대한 그림예시

 

오브젝트 저장공간에 대한 그림예시

 

오브젝트의 생성 및 출력결과

 

코드에서도 보이는 것과 같이

제목 : "자바의정석" (문자형)

저자 : "남궁성" (문자형)

가격 : 32000 (숫자)

판매완료여부 : false (논리형)

재고수량 : (숫자형)

 

이처럼 같은 데이터 타입이 아닌 값을 저장할 때는 오브젝트를 사용하는 것이 편리하다

 

 

상위 오브젝트 안에 오브젝트 생성

 

 

오브젝트 안에 오브젝트를 생성할 수도 있다

let customer = {
    name : "홍길동",
    age : 50,
    tel : "010-1234-7890",

    car : {
        company : "현대자동차",
        model : "제네시스",
        year : 2023,
        price : 8700
    }
}

customer 라는 오브젝트 안에 car 오브젝트도 생성해서 연관된 오브젝트들끼리 묶을 수도 있다.

 

기존에 오브젝트 안에 있는 속성들을 출력하기 위해서는

console.log(오브젝트명.속성명); 로 출력을 했다.

 

상위 오브젝트안에 있는 오브젝트 속성을 출력하기 위해서는 이렇게 하면된다.

상위 오브젝트 안에 있는 오브젝트 속성 출력
console.log(customer.car.year);	// 2023

상위오브젝트에 대한 코드와 출력결과

 

 

배열에 값을 추가할때 처음에 빈 배열로 생성을 해서 하나씩 값을 추가하는 경우도 있었다.

오브젝트도 동일하게 할 수 있다. 빈 오브젝트에서 속성값을 하나씩 추가해서 오브젝트를 형성할 수 있다.

 

 

오브젝트의 속성 값을 추가하는 예시 및 출력결과

 

 

위 코드를 보면 처음에 빈 오브젝트였던 score가 

score.name , score.kor, score.math 등으로 속성과 그에 해당하는 값들을 추가받는 것을 알 수 있다.

 

 

 

여러개의 오브젝트를 하나의 배열로 만들기도 가능하다

let books = [
    {
        title : "트렌드 코리아 2024",
        author : "김난도",
        price : 18000,
        discountRate : 0.1
    },
    {
        title : "퓨처 셀프",
        author : "벤저민 하디",
        price : 18000,
        discountRate : 0.2
    },
    {
        title : "도시와 그 불확실한 벽",
        author : "무라카미 하루키",
        price : 17000,
        discountRate : 0.15
    }
];

 

let book = [  ]; 배열 리터럴로 배열을 선언하고 그 안에 { } 오브젝트 리터럴을 사용 및 오브젝트 선언하여 
배열 안에 오브젝트를 생성할 수 있다.

 

오브젝트 배열에 대한 그림예시

 

오브젝트 배열 코드 및 출력결과