[JavaScript] JavaScript 객체

https://tadaktadak-it.tistory.com/80?category=1024177 

[JavaScript] 객체와 상속, 프로토타입

1. 객체의 기본 및 구조

- 다양한 데이터를 가질 수 있는 key, value 형식의 property 여러 개를 가질 수 있는 데이터 집합

- 자바스크립트에서의 객체란 자바스크립트 그 자체라고 말해도 과언이 아님

- 추상적인 개념이 실체화 된 것

- 프로퍼티들로 이루어진 하나의 집합

• 프로퍼티(property) : key, value 한 쌍으로 이루어진 데이터
• 키(key) : 데이터를 구분하기 위한 문자열 키
• 값(value) : 문자, 숫자, 논리 등 모든 자료형의 데이터
• 객체의 기본 & 구조
  * 0개 이상의 프로퍼티(키 : 값)로 구성된 집합
  * 키는 기본적으로 문자열이므로 특수문자 또는 띄워쓰기 등 모든 문자가 가능
  * 그렇기 위해서는 ' 또는 "로 감싸서 사용해야함
  * 키로 값을 불러올 때는 객체명.키값으로 하거나 객체명[키값]으로 해야한다.
  * 만약 특수문자 또는 띄워쓰기가 포함된 키값이면 객체명[키값]으로 값을 불러올 수 있다.
  * 객체의 프로퍼티는 함수(function), 배열(Array) 가능
  * 프로퍼티 값이 함수인 경우를 메소드라고도 부름

<script>
    // 일반적인 변수 정의 및 사용
    var name="홍길동";
    console.log(name); // 홍길동

    // 객체 정의
    var person = {
        name: '홍길동',
        age: 23,
        's-type': '남',
        "birth day": "2000.01.01"   // 공백도 ' or " 로 감싸야 한다.
    }

    console.log(person.name); // 홍길동
    console.log(person.age);  // 23
    
    // 띄어쓰기나 - 가 있을 경우는 배열처럼 값을 불러올 수 있다.
    console.log(person['s-type']); // 남
    console.log(person['birth day']); // 2000.01.01

    console.log(person); // {name: '홍길동', age: 23, s-type: '남', birth day: '2000.01.01'}

    // 객체의 프로퍼티 함수(메소드)
    var student = {
        age: 20,
        score: [100,90,80],     // 배열도 가질 수 있다.
        print: function(name) {
            return `제 이름은 ${name}이고 ${this.age} 살 입니다. ${this.score}`;
        }
    }

    console.log(student.age); // 20
    console.log(student.score); // [100, 90, 80]
    console.log(student.print("홍길동")) // 제 이름은 홍길동이고 20 살 입니다. 100,90,80
</script>

2. 객체 생성 방법

• 객체 리터널 방법
  

  

• Object() 생성자 함수를 이용하는 방법
  

  

• 생성자 함수를 사용한 방식(객체지향 클래스 흉내내기)
  

  

<script>
    // 1. 객체 리터널 방식
    const person = {
        name: "홍길동",
        age: 10,
        print: function() {
            console.log("제 이름은 " + this.name + "이고 나이는 " + this.age + "입니다.");
        }
    }

    console.log("=== 1. 객체 리터널 방식 ===")
    person.print(); // 제 이름은 홍길동이고 나이는 10입니다.
    console.log(person); // {name: '홍길동', age: 10, print: ƒ}

    // 2. Object() 생성자 함수를 이용
    const teacher = new Object();

    // teacher 객체의 프로퍼티 정의(초기화)
    teacher.name = "김유신";
    teacher.age = 20;
    teacher.print = function() {
        console.log(`제 이름은 ${this.name}이고 나이는 ${this.age}입니다.`)
    }

    console.log("=== 2. Object() 생성자 함수를 이용 ===")
    teacher.print(); // 제 이름은 김유신이고 나이는 20입니다.
    console.log(teacher); // {name: '김유신', age: 20, print: ƒ}

    // 3. 생성자 함수를 사용한 방식(객체지향 클래스 흉내내기)
    function Student(name, age) {
        this.name = name;
        this.age = age;
        this.print = function() {
            console.log(`제 이름은 ${this.name}이고 나이는 ${this.age}입니다.`)
        }
    }
    
    console.log("=== 3. 생성자 함수를 사용한 방식(객체지향 클래스 흉내내기) ===")
    const st1 = new Student("이순신", 30);

    st1.print(); // 제 이름은 이순신이고 나이는 30입니다.
    console.log(st1); // Student {name: '이순신', age: 30, print: ƒ}

3. 객체에 프로퍼티 추가/삭제

const person = {
       name: "홍길동";
}

• 프로퍼티 추가
  person['age'] = 10;
  person['s-type'] = '여';
  person.title = '안녕하세요';
• 프로퍼티 삭제
  delete person['age'];
  delete person['name'];
  delete person.title;

<script>
    const person = {
        name: '홍길동',
        age: 10,
        print: function() {
            console.log(`제 이름은 ${this.name}이고 나이는 ${this.age} 입니다.`);
        }
    }

    // 프로퍼티 변수 추가 방식 1
    person.type = '남';
    console.log(person); // {name: '홍길동', age: 10, type: '남', print: ƒ}

    // 프로퍼티 변수 추가 방식 2
    person['birth'] = '2000.12.01';
    console.log(person); // {name: '홍길동', age: 10, type: '남', birth: '2000.12.01', print: ƒ}

    // 프로퍼티 메소드 추가
    person.title = function() {
        return '안녕하세요 반갑습니다.';
    }
    console.log(person); // {name: '홍길동', age: 10, type: '남', birth: '2000.12.01', print: ƒ, …}
    console.log(person.title()); // 안녕하세요 반갑습니다.

    // 프로퍼티 삭제
    delete person['type'];
    delete person.birth;
    console.log(person); // {name: '홍길동', age: 10, print: ƒ, title: ƒ}
    delete person.title;
    console.log(person); // {name: '홍길동', age: 10, print: ƒ}
</script>