[JavaScript] 객체

객체(object)

• 관련된 데이터와 함수를 모아 놓은 집합
• 객체 내부에서는 데이터와 함수를 프로퍼티(속성)과 메서드(기능)라고 불림

객체지향 프로그래밍

• 실세계에 존재하고 인지하는 모든 것을 객체로 표현

• (참조)데이터 타입 중 하나, 다양한 값을 담을 수 있는 컨테이너

 

객체의 구조

 : 객체 지향 프로그램의 객체 - 고유한 특성과 동작을 가지는 것

• 특성 (속성, 프로퍼티) - 변수
  • 객체가 가진 데이터(값)
  • 객체를 구성하는 정보의 일부, 해당 객체의 상태를 나타냄
• 기능 (동작, 메서드) - 함수
  • 객체가 수행할 수 있는 행동이나 기능을 정의
  • 객체의 속성을 활용하거나 조작 가능

(기본 구조)
let objectName = {
  // 키1 : 값1,
  // 키2 : 값2,
  // 키3 : 값3,
  // ...

  // >> 값의 데이터 형식에는 제한 X (배열, 또 다른 객체, 함수 모두 사용 가능)
  // >> 키와 값을 하나의 쌍으로 나열, 각각의 쌍은 ,(콤마)로 구분
  // >> 각각의 멤버(키와 값)는 콜론(:)으로 분리

  // 값은 중복될 수 있으나, 키는 중복될 수 없음
}

 

객체 생성 방법

• 1) 리터럴 방식
  • 가장 간단하고 일반적인 객체 생성 방식
  • 중괄호 { }를 사용하여 객체를 선언하고 초기화 - 내부에 속성과 메서드 정의
• 2) 사용자 함수 사용 방식
  • new 키워드와 함께 '사용자 정의 생성자 함수' 를 사용하여 객체를 생성
  • 같은 형태(구조)의 객체를 여러 개 생성할 때 유용
  • 함수 내부에서는 this 키워드를 사용해 객체의 속성(프로퍼티) 정의
  • this 키워드의 경우
    : 해당 생성자 함수로 생성되는 객체 그 자체
    : 해당 함수로 생성되는 객체마다 this값이 달라짐

 

객체의 멤버 접근 방법

• 객체는 각 요소값에 대해 '키'로 접근
• 객체명.속성명(키)
• 객체명.메서드명(키)
• 주로 점표기법 사용

객체 속성(프로퍼티) 추가

• 객체명.속성명 = 값(데이터);

 

this 키워드

객체 : 지금 동작(호출)하고 있는 코드를 가지고 있는 객체를 가리킴

• 1. 전역 컨텍스트 : 전체 실행 상태
• 2. 함수 컨텍스트
  • 1) 일반 함수의 this : 전역 객체를 의미(전역 컨텍스트와 동일)
  • 2) 메서드로 쓰이는 함수 내부의 this : 객체의 메서드로 함수를 호출할 경우 this는 해당 메소드를 호출한 객체에 바인딩

객체 내부의 this

• 객체 내부에서 현재 쓰이는 객체를 가져오기 위해서 this값 활용 시 일정한 형태의 함수 사용을 권장
• 선언적 함수, 함수 표현식 등 function 키워드 사용

 

프로토타입(prototype)

• 객체의 원형(프로토타입)을 사용하여 새로운 객체를 생성
• 객체의 속성과 메서드 재사용 가능

프로토타입 기반 언어

• 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체 동작을 재사용하게 하는 로직
• 모든 객체들이 메서드와 속성을 상속받기 위한 템플릿(틀)으로써 프로토타입 객체를 가짐

 

생성자 함수를 사용한 객체 생성

• new 키워드를 사용하여 함수 호출
• 관례적으로 함수명을 UpperCamelCase 사용

클래스를 사용한 객체 생성 

• 새로운 객체를 생성하는 템플릿 역할

클래스의 생성자

• 클래스에서 객체를 생성하고 초기화하기 위한 '특별한 메서드'
• new 키워드로 클래스의 객체를 생설할 때 자동 호출
• 각 클래스는 하나의 constructor(생성자)만을 가짐

클래스의 메서드

• 클래스를 기반으로 생성된 객체가 공통적으로 가지는 함수
• 클래스 내부에서는 function 키워드 사용을 하지 않는다

 

객체의 참조 타입 이해

 

1. '원시' 타입 (기본 자료형)

 

2. '참조' 타입 (참조 자료형)

• 메모리에 저장된 객체의 주소를 저장 (변수에 주소값이 저장)

 

객체의 복사(깊은 복사 & 얕은 복사)

1. 얕은 복사

• 할당을 통한 복사
• 속성값이 원시 타입인 경우 그 값이 직접 복사
• 속성값이 참조 타입인 경우 해당 참조(메모리 주소)만 복사

let animal1 = {
  name: 'choco',  // 원시 타입 속성
  owner: {  // 참조 타입 속성
    name : '홍동현',
    job: 'developer'
  }
}

let animal2 = animal1;  // 동일한 객체를 참조

//? 복사된 객체의 값을 변경
animal2.name = '초코';
animal2.owner.name = '홍길동';

//? 원본 객체를 출력
console.log(animal1.name);	// 초코
console.log(animal1.owner.name);	// 홍길동

console.log(animal2);	// { name: '초코', owner: { name: '홍길동', job: 'developer' } }

2. 깊은 복사

• 원본 객체의 값은 완전히 복제하여 새로운 객체를 생성
• 원본 객체와 복사본이 서로 독립
• JSON.parse(JSON.stringfy(object))
  • JSON.parse(json) : JSON 문자열을 JS 객체로 변환 : 새로운 메모리 위치에 할당
  • JSON.stringfy(object) : 전달받은 객체를 JSON 문자열로 변환

let book1 = {
  title: '어린왕자',
  author: '생택쥐페리',
  publishYear: 2024
}

let book2 = JSON.parse(JSON.stringify(book1));

book2.title = 'little prince';
book2.publishYear = 2023

console.log(book1); // { title: '어린왕자', author: '생택쥐페리', publishYear: 2024 }
console.log(book2); // { title: 'little prince', author: '생택쥐페리', publishYear: 2023 }

 

객체의 속성 확인 연산자

• 속성이 객체에 존재하는지 확인을 위해 in 연산자를 사용
• 여부를 boolean 값으로 반환

// { title: 'little prince', author: '생택쥐페리', publishYear: 2023 }

console.log('title' in boo1); // true
console.log('author' in boo1);  // true
console.log('publishYear' in boo1);  // true
console.log('hello' in boo1); // false

// 속성 삭제
// : delete 연산자를 사용
// >> 속성 삭제 시 값이 자동 삭제

delete book1.author;
console.log('author' in book1); // false