[JavaScript] 객체 리터럴

HyeonE·2025년 4월 15일

JS

목록 보기
7/17
post-thumbnail

JavaScript 객체(Object) 정리

📌 객체란?

JavaScript에는 총 8개의 자료형이 있습니다. 이 중 7개는 하나의 데이터만 담을 수 있는 원시형(primitive type)이고,
나머지 하나인 객체(object)여러 개의 데이터를 key-value 형태로 저장할 수 있는 비원시형(non-primitive type)입니다.

객체는 key: value 형태의 property(속성)를 가지며, 다음과 같은 방법으로 생성할 수 있습니다.



✅ 객체 생성 방법

let user = new Object(); // 객체 생성자 문법
let user1 = {}; // 객체 리터럴 문법 (가장 일반적)
let john = {
  name: "John",
  age: 30,
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

✅ 빈 객체

let empty = {};
console.log(typeof empty); // 'object'

✅ 키와 값 (Property)

let foo = {
  "": "a",
};
console.log(foo[""]); // 'a'

let obj = {
  0: "test",
};
console.log(obj[0]); // 'test'

✅ 객체 비교

  • 객체는 참조형 타입이기 때문에 동일한 프로퍼티를 가진 객체여도 다르게 인식됩니다.
let person1 = { name: "Kim" };
let person2 = { name: "Kim" };

console.log(person1 == person2); // false (주소값이 다름)
console.log(person1.name == person2.name); // true (값 비교)

✅ 프로퍼티 존재 확인: in 연산자

let user2 = {
  name: "John",
  age: 30,
};

console.log("age" in user2); // true
console.log("age2" in user2); // false

✅ 동적 프로퍼티 추가 및 삭제

let person = { name: "Kim" };

// 프로퍼티 추가
person.age = 30;
console.log(person.age); // 30

// 프로퍼티 삭제
delete person.age;
console.log(person.age); // undefined

✅ 얕은 복사 vs 깊은 복사

  • 얕은 복사 (shallow copy): 객체의 한 단계까지만 복사됨
  • 깊은 복사 (deep copy): 중첩된 객체까지 모두 재귀적으로 복사됨
  • 변경 불가능한 객체를 만들기 위해선 깊은 복사가 필요합니다.
// 예시 (얕은 복사)
let a = { a: 1 };
a.b = 10;
a = { b: 10 }; // 이전 객체는 사라지고 새로운 객체로 재할당됨

✅ 객체 프로퍼티 축약 표현

let name = "John";
let age = 30;

let user = { name, age }; // { name: "John", age: 30 }
profile
프론트엔드 개발자가 되고싶은 대학생

0개의 댓글