[JavaScript] 객체

자바스크립트 객체

객체 Object

• 데이터를 구조화하고 관리, 복잡한 데이터 표현에 유용
• 키(key)와 값(value)으로 이루어진 속성의 집합
• 다양한 속성과 메서드를 포함 가능
• {} 를 사용하여 생성, 각 속성은 쉼표 , 로 구분됨
• 키(key)는 문자열, 심볼(symbol) 타입이어야 함
• 값(value)은 어떤 타입이어도 상관 없음

---

객체의 특징

1. 객체는 참조 타입
   변수에 객체를 할당하고, 변수는 객체의 메모리 주소를 참조
2. 객체는 동적
3. 객체는 프로토타입을 기반으로 상속 구현

---

객체 생성

대표적으로 객체 리터럴 {}를 사용하여 생성

const person = {
    name: "김박사",
    age: 25,
    job: "개발자"
};

---

객체 속성 접근

1. 점 표기법: 객체 이름 뒤에 점 .을 사용
   키가 유효한 식별자일 때

    객체명.key명
   

2. 대괄호 표기법: 객체 이름 뒤에 대괄호 []를 사용
   키가 유효한 식별자가 아니거나, 동적으로 키를 지정할 때

    객체명["key명"]
       
    const key = "key명";
    객체명[key]
   

---

객체 속성 추가 or 수정

• 객체는 동적으로 속성 추가, 수정, 삭제 가능

1. 속성 추가

    객체명.새로운 key명 = "새로운 value";
   

2. 속성 수정

    객체명.기존 key명 = "새로운 value";
   

3. 속성 삭제

    delete 객체명.삭제할 key명;
   

---

객체의 반복문

for … in 반복문 사용

for (let key in 객체명) {
    console.log(`${key}: ${객체명[key]}`);
}

---

객체의 종류

1. {}로 생성된 객체
2. 배열 (array): 순서가 있는 데이터 집합
3. 함수 (function)
4. 내장 객체: 자바스크립트에서 제공하는 객체
   • 예: Date, Math, json …

---

객체 비구조 할당

비구조 할당

• 객체 안의 값을 추출해서 변수 or 상수로 바로 선언 가능

1. 기본 비구조 할당

    const obj = {a: 1, b: 2};
       
    const {a, b} = obj;
    console.log(a);
    console.log(b);
   

2. 함수 사용 비구조 할당

    const obj = {a: 1, b: 2};
       
    function print({a, b}) {
    	console.log(a);
    	console.log(b);
    }
    print(obj)
   

---

Getter & Setter

JS의 Getter와 Setter

• 객체의 속성을 읽거나 설정 시, 특정 로직을 실행할 수 있는 기능
• 객체 내부에서, get과 set키워드를 사용해서 정의 가능
  • get: 속성을 호출할 때 실행됨
  • set: 속성 값을 변경할 때 실행됨

    const 객체명 = {
        key명: 값,  // 내부 변수 (_접두사 사용 추천)
      
        get 속성명() {
            return this.key명;
        },
      
        set 속성명(값) {
            this.key명 = 값;
        }
    };
      
    객체명.속성명        // getter 사용
    객체명.속성명 = "값" // setter 사용
  

---

[추가!] 자바스크립트 기타 메서드

performance.now()

• 밀리초 단위의 페이지 로드 이후 경과한 시간을 반환
• 코드를 특정한 시점으로부터 시간이 얼마나 경과했는지 확인 가능
  Performance: now() method - Web API | MDN
• 성능 분석, 애니메이션, 정밀 시간 측정에 사용

requestAnimationFrame(callback)

• 브라우저가 화면을 다시 그리기 직전에 callback 함수를 실행.
• 부드러운 애니메이션, 성능 최적화, 화면 업데이트 등에 사용.
  Window: requestAnimationFrame() method - Web API | MDN
• 애니메이션 타이밍 최적화용 API
• cancelAnimationFrame(id) 로 취소도 가능

---