[javascript] 객체 3 / 객체 수정, 객체 추가

객체 수정

• 객체 프로퍼티: 객체의 속성을 의미, 키(key)와 값(value)의 쌍으로 구성
• 이미 존재하는 프로퍼티는 새 값으로 덮어쓰기 하면 됨
• 수정도 점/대괄호 표기법 둘 다 가능.
• 없는 프로퍼티를 수정하려고 하면 자동으로 추가

---

객체 수정 방법

1. 점 표기법(dot notation)

• 가장 직관적이고 자주 쓰이는 방법
• 키 이름이 문자열 규칙에 맞는 경우에 사용 가능
  (공백, 숫자로 시작, 특수문자 X)

// [문법]
객체이름.키명 = 새로운값;

 

const user = { name: "철수", age: 20 };

user.name = "영희";   // name 프로퍼티 값 수정
user.age = 21;        // age 프로퍼티 값 수정

console.log(user);
// { name: "영희", age: 21 }

---

2. 대괄호 표기법(bracket notation)

• 키 이름에 공백, 특수문자, 숫자로 시작하는 경우 사용
• 변수로 키를 동적으로 받아서 수정할 때 유용

// [문법]
객체명["키명"] = 새로운값;

const user = { "phone number": "010-1111-2222" };

// 수정
user["phone number"] = "010-3333-4444";

// 동적 키
const key = "nickname";
user[key] = "철수짱";

console.log(user);
// { "phone number": "010-3333-4444", nickname: "철수짱" }

---

3. 여러 프로퍼티 한 번에 수정

(1) Object.assign

• 기존 객체를 직접 수정
• 여러 프로퍼티를 한 번에 수정할 때 편리

// [문법]
Object.assign(객체이름, { 키1: 새값1, 키2: 새값2 });

const user = { name: "철수", age: 20 };
Object.assign(user, { name: "영희", age: 22 });

console.log(user);
// { name: "영희", age: 22 }

---

(2) 스프레드 연산자

• 원본 객체를 유지하고 새 객체를 생성
• 리액트 같은 불변성을 지켜야 하는 환경에서 자주 사용

// [문법]
const 새객체 = { ...기존객체, 키: 새값 };

const user = { name: "철수", age: 20 };
const newUser = { ...user, age: 21 };

console.log(newUser);
// { name: "철수", age: 21 }

 

---

4. 동적 키 수정

• 변수로 키를 받아 수정 가능

const key = "email";
const user = { email: "old@example.com" };

user[key] = "new@example.com";

console.log(user);
// { email: "new@example.com" }

---

객체 추가

• 객체는 동적(dynamic) 구조라서 필요할 때 새로운 프로퍼티를 넣을 수 있음
• 수정과 거의 비슷하지만, 기존에 없는 키를 새로 만드는 것이라는 점이 차이

---

객체 추가 방법

1. 점 표기법(dot notation)

• 가장 직관적이고 자주 쓰임
• 키 이름이 문자 규칙을 지킨 경우 사용 가능
  (공백, 숫자로 시작, 특수문자 X)

// [문법]
객체이름.새로운키 = 값;

const user = { name: "철수" };

// 새로운 프로퍼티 추가
user.age = 20;
user.city = "서울";

console.log(user);
// { name: "철수", age: 20, city: "서울" }

---

2. 대괄호 표기법(bracket notation)

• 공백, 특수문자, 숫자로 시작하는 키도 추가 가능
• 변수로 동적 키를 받아서 추가할 때 유용

// [문법]
객체이름["새로운키"] = 값;

 

const user = { name: "철수" };

// 공백 포함 키
user["phone number"] = "010-1234-5678";

// 동적 키
const key = "nickname";
user[key] = "철수짱";

console.log(user);
// { name: "철수", "phone number": "010-1234-5678", nickname: "철수짱" }

---

3. 여러 프로퍼티 한 번에 추가

(1) Object.assign

• 기존 객체를 직접 수정
• 여러 프로퍼티를 한 번에 추가할 때 편리

// [문법]
Object.assign(객체이름, { 새로운키: 값, 또다른키: 값 });

const user = { name: "철수" };
Object.assign(user, { age: 20, city: "서울" });

console.log(user);
// { name: "철수", age: 20, city: "서울" }

---

(2) 스프레드 연산자

• 원본 객체를 유지하고 새 객체를 생성
• 리액트 같은 불변성을 지켜야 하는 환경에서 자주 사용

// [문법]
const 새객체 = { ...기존객체, 키: 새값 };

const user = { name: "철수", age: 20 };
const newUser = { ...user, age: 21 };

console.log(newUser);
// { name: "철수", age: 21 }

---

객체 수정/추가 시 주의사항

• 이미 존재하는 키에 값을 넣으면 → 수정됨
• 존재하지 않는 키에 값을 넣으면 → 자동으로 추가됨
• 객체는 참조 타입이므로, 다른 변수에 할당된 객체도 동시에 값이 바뀜
• 불변성을 유지해야 하는 상황에서는 Object.assign이나 스프레드 연산자로 새 객체를 만들어 수정

// 객체 수정 시
const a = { x: 1 };
const b = a;
b.x = 2;
console.log(a.x); // 2

// 객체 추가 시
const a = { x: 1 };
const b = a;
b.y = 2;
console.log(a); // { x: 1, y: 2 }