JS

[JS] 자바스크립트 객체형 이해하기

coco030030 2025. 4. 2. 10:42

클로드3.7추론모델 작성

자바스크립트 객체형 이해하기: 실생활 관점에서

왜 객체를 배워야 할까요?

객체는 관련된 정보를 하나로 묶어서 관리하는 방법입니다. 실생활로 예를 들면:

📱 스마트폰
- 모델명: "갤럭시"
- 색상: "검정"
- 가격: 100만원
- 메모리: 128GB

이런 정보를 개별 변수로 저장한다면:

var phoneModel = "갤럭시";
var phoneColor = "검정";
var phonePrice = 1000000;
var phoneMemory = 128;

너무 번거롭죠? 객체를 사용하면 관련 정보를 깔끔하게 하나로 묶을 수 있습니다:

var myPhone = { 
  model: "갤럭시", 
  color: "검정", 
  price: 1000000, 
  memory: 128 
};

코드 분석: 두 가지 객체 만드는 방법

방법 1: 중괄호로 바로 만들기 (객체 리터럴)

var myCar01 = { model: "BMW", color: "gray", speed: 150 };

이것은 마치 "자동차 정보가 담긴 상자를 한번에 만들기"와 같습니다.

방법 2: 빈 객체 만든 후 채우기

var myCar02 = new Object();  // 빈 상자 준비

myCar02['model'] = "benz";   // 상자에 "model"이라는 라벨 붙인 칸에 "benz" 넣기
myCar02['color'] = "blue";   // 상자에 "color"라는 라벨 붙인 칸에 "blue" 넣기
myCar02['speed'] = 100;      // 상자에 "speed"라는 라벨 붙인 칸에 100 넣기

객체에서 정보 꺼내기: 두 가지 방법

방법 1: 점(.) 사용하기

document.write(myCar01.model + "<br>");  // "BMW" 출력

방법 2: 대괄호([]) 사용하기

document.write(myCar02['model'] + "<br>");  // "benz" 출력

처음부터 코드 작성하는 법

  1. 객체 만들기:
  2. var 변수이름 = { 속성이름: 값, 속성이름: 값, ... };
  3. 객체에서 값 불러오기:
  4. 변수이름.속성이름 또는 변수이름['속성이름']

실생활 활용 예시

// 학생 정보 관리
var student = {
  name: "홍길동",
  age: 20,
  grade: "A",
  subjects: ["수학", "영어", "과학"]
};

// 쇼핑몰 상품 정보
var product = {
  name: "노트북",
  price: 1200000,
  brand: "삼성",
  inStock: true
};

정리: 객체를 배우는 이유

  1. 관련 데이터를 체계적으로 관리할 수 있습니다
  2. 웹사이트에서 사용자 정보, 상품 정보 등을 다룰 때 필수적입니다
  3. 자바스크립트의 거의 모든 고급 기능은 객체를 기반으로 합니다