코딩자율학습단 19기 | 15일차 학습일지 – 객체(Object) 기본, 속성 접근/수정, 참조

오늘 학습 정보

• 날짜/Day: 2026/01/30 (Day15)
• 교재 범위: ~ 11.2 객체 속성 다루기 (p.419~432)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 객체 리터럴(키-값)
• 핵심 키워드 2: 속성 접근(대괄호/마침표)
• 핵심 키워드 3: 참조 자료형(얕은 복사)

개념 정리

2-1) 객체(Object) 기본: “키(key) – 값(value)” 묶음 데이터

역할: 여러 값을 하나의 덩어리로 구조화(속성들의 집합)

핵심 포인트:

• 객체는 { }로 만들고, 속성은 key: value 형태로 가진다(값에는 배열/객체/함수도 가능)

짧은 예시(코드):

const person = {
   name: "Hong Gildong",
   age: 20,
   isAdult: true,
   likes: ["apple", "samsung"],
   printHello: function () { return "hello"; }
};

2-2) 객체 속성 접근: 대괄호([ ]) vs 마침표(.)

역할: 객체 안의 특정 속성값을 읽어오기

핵심 포인트:

• 대괄호 접근: obj[“key”] 처럼 문자열 키로 접근(공백 포함 키도 가능)
• 마침표 접근: obj.key 처럼 식별자 형태 키에 접근(따옴표 쓰면 문법 오류)
• 대괄호에서 따옴표를 빼면 “키 문자열”이 아니라 “변수”로 해석되어 에러가 날 수 있음

짧은 예시(코드):

const person = { name: "Hong Gildong", age: 20 };

// 대괄호(문자열 키)
console.log(person["name"]); // "Hong Gildong"

// 따옴표 없이 쓰면 변수로 해석 → ReferenceError 가능
// console.log(person[name]);

// 마침표(식별자 키)
console.log(person.age); // 20

// 공백 있는 키는 대괄호만 가능
const p2 = { "phone number": "010-000-0000" };
console.log(p2["phone number"]);

2-3) 속성값 변경/추가/삭제: “접근 후 할당 / delete”

역할: 객체 데이터를 업데이트(값 수정, 새 속성 추가, 속성 제거)

핵심 포인트:

• 변경: obj.key = newValue 또는 obj[“key”] = newValue
• 추가(동적 추가): 기존에 없던 키에 할당하면 새 속성이 생성됨
• 삭제(동적 삭제): delete obj.key 또는 delete obj[“key”]

짧은 예시(코드):

const person = { name: "Hong Gildong" };

// 값 변경
person.name = "Kim";

// 속성 추가
person.gender = "female";

// 속성 삭제
delete person.gender;

2-4) 객체 데이터 관리: 기본 자료형(깊은 복사) vs 참조 자료형(얕은 복사)

역할: “복사”가 실제로는 값 복사인지, 주소(참조) 복사인지 이해해서 버그를 예방

핵심 포인트:

• 기본 자료형은 값 자체가 복사되어 서로 독립(한쪽 변경이 다른 쪽에 영향 없음)
• 객체는 변수에 주소(참조) 가 저장되어, 대입하면 주소가 복사됨 → 같은 객체를 같이 바라봄(얕은 복사)
• const 객체는 “재할당”은 불가지만, “속성 변경”은 가능(변수가 들고 있는 참조 자체는 그대로이기 때 문)

짧은 예시(코드):

// 기본 자료형: 값 복사
let num = 10;
let copyNum = num;
num = 20;
console.log(num); // 20
console.log(copyNum); // 10

// 객체: 참조 복사(얕은 복사)
const person = { name: "Hong Gildong" };
const copyPerson = person;

person.name = "Hong";
console.log(person.name); // "Hong"
console.log(copyPerson.name); // "Hong" (같이 바뀜)

// const 재할당은 불가
// person = { name: "Sucoding" }; // TypeError

이슈 로그

• 대괄호 접근에서 따옴표를 빼면 “키”가 아니라 “변수”로 해석된다는 점이 헷갈렸음(공백 키/동적 키는 대괄호로 정리).

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」