자바스크립트 객체(Object), 진짜 쉽게 이해하기!

 

자바스크립트 객체는 현실 세계의 사물이나 개념을 코드로 표현할 때 꼭 필요한 기능이에요.

속성과 동작을 키-값 쌍으로 저장하며, 데이터를 구조화하고 다루는 데 핵심적인 역할을 하죠.

 

이번 글에서는 객체의 개념부터 생성, 접근, 조작 방법까지 예시와 함께 하나씩 쉽게 풀어볼게요!

 

 

 

 

---

객체란 무엇인가요?

객체(Object)는 '이름(key)'과 '값(value)'의 쌍으로 이루어진 데이터 구조예요.

예를 들어 사람이라는 개념을 코드로 표현하면 이렇게 만들 수 있겠죠?

let person = {
  name: "Phantom",
  age: 30,
  isDeveloper: treu
};

이처럼 객체는 여러 정보를 하나의 덩어리로 묶을 수 있어서 복잡한 데이터를 표현할 때 아주 유용해요.

 

객체를 만드는 방법

1. 리터럴 문법

가장 자주 쓰이는 방식이에요.

let car = {
  barand: "Hyundai",
  model: "Avante"
};

2. new Object() 문법

조금 더 긴 방식이지만 원리는 같아요.

let car = new Object();
car.brand = "Hyundai";
car.model = "Avante";

참고로 JS엔진은 내부적으로 리터럴도 결국 new Object()로 처리한답니다.

 

 

---

객체 속성 접근하기

1. 점 표기법

console.log(person.name); // "Phantom"

 

2. 대괄호 표기법

console.log(person["age"]); // 30

 

대괄호 표기법은 변수를 이용해 키를 동적으로 접근할 때 유용해요!

let key = "isDeveloper";
console.log(person[key]); // true

 

속성 추가와 삭제

person.city = "Seoul"; // 속성 추가
delete person.age; // 속성 삭제

 

객체는 꽤 유연해서 실행 도중에도 속성을 자유롭게 넣고 뺄 수 있어요.

 

---

숫자도 키가 될 수 있나요?

객체의 키는 항상 문자열로 처리됩니다

let obj = {
  1: "one";
};


console.log(obj["1"]); // "one"
console.log(obj[1]); // "one"

 

보시는 것처럼 숫자든 문자열이든 내부적으로는 같은 키로 취급돼요.

 

객체의 특징 한눈에 보기!!

• 키는 유일해야 해요. 값은 어떤 자료형이든 가능해요.
• 객체는 기본적으로 순서를 보장하지 않지만, 키가 숫자인 경우 일정한 순서로 정렬돼요.
• 배열은 숫자 인덱스를 사용하지만, 객체는 이름(문자열)을 키로 사용해 값을 꺼내요.

 

마지막으로 위에 언급한 특징 중 키값이 숫자인 경우 정렬되는 예시를 보고 마무리할게요!

 

let obj = {
  10: "ten",
  2: "two",
  30: "thirty",
  name: "Phantom"
}

 

위 객체를 출력하게 되면 다음 순서대로 나옵니다!

 

console.log(obj);

{2: 'two', 10: 'ten', 30: 'thirty', name: 'Alice'}

 

• 숫자처럼 보이는 키(2,10,30)는 오름차순 정렬이 되고,
• 그 외 키(name)는 작성한 순서대로 출력

 

 

자바스크립트 객체는 복잡한 데이터를 관리하고 표현하는데 꼭  필요한 도구예요. 오늘 배운 내용을 잘 익혀두면

함수, 클래스, API 다룰 때도 훨씬 수월해지겠죠??