[JavaScript] 객체

객체(object)란?

- 실생활에서 우리가 인식할 수 있는 사물

- 프로퍼티와 메소드를 가짐

 

 

자바스크립트 객체

- 자바스크립트의 기본 타입 = 객체

- 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합

const cat = "나비"; // 일반적인 변수의 선언

// 객체도 많은 값을 가지는 변수의 하나임.
const kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };

cat          // 나비
kitty.name   // 나비

- 숫자, 문자열, Boolean, undefined 타입을 제외한 모든 것이 객체

- 하지만 숫자, 문자열, Boolean과 같은 원시 타입은 값이 정해진 객체로 취급 => 객체로서의 특징을 가짐

 

 

객체의 프로퍼티 참조

객체이름.프로퍼티이름
객체이름["프로퍼티이름"]

 

 

객체의 메소드 참조

객체이름.메소드이름()

- 메소드 이름 뒤에 괄호 ( ) 가 없으면 프로퍼티 그 자체를 참조 => 해당 메소드의 정의 그 자체가 반환

const person = {
    name: "홍길동",
    birthday: "030219",
    pId: "1234567",
    fullId: function() {
        return this.birthday + this.pId;
    }
};

person.fullId() // 0302191234567
person.fullId;  // function () { return this.birthday + this.pId; }

 

 

객체의 생성

1. 리터럴 표기(literal notation)를 이용한 방법
2. 생성자 함수(constructor function)를 이용한 방법
3. Object.create() 메소드를 이용한 방법

 

- 생성되어 메모리에 대입된 객체 = 인스턴스(instance)

 

 

1. 리터럴 표기(literal notation)를 이용한 방법

const 객체이름 = {
    프로퍼티1이름 : 프로퍼티1의값,
    프로퍼티2이름 : 프로퍼티2의값,
    ...
};

- 각 프로퍼티의 이름과 값을 콜론(:)으로 연결 & 쉼표(,)로 구분

- 프로퍼티의 이름으로 식별자나 문자열 사용 가능 ex) name

const kitty = {
    name: "나비",
    family: "코리안 숏 헤어",
    age: 1,
    weight: 0.1
};

 

 

2. 생성자 함수(constructor function)를 이용한 방법

- new 연산자를 이용해 생성하고 초기화

- 사용되는 메소드는 생성자(constructor) => 새롭게 생성되는 객체의 초기화 역할

const day = new Date(); // new 연산자를 사용하여 Date 타입의 객체를 생성함.
console.log(day.getFullYear());	// 올해 년도

- 사용자가 직접 작성하여 사용하기도 가능

 

 

3. Object.create() 메소드를 이용한 방법

- 지정된 프로토타입 객체와 프로퍼티를 가지고 새로운 객체 생성

- 사용자가 프로토타입 객체를 직접 명시할 수 있으므로 유용함

Object.create(프로토타입객체[, 새로운객체의프로퍼티1, 새로운객체의프로퍼티2, ...]);

- 첫 번째 인수로 프로토타입으로 사용할 객체 전달

- 두 번째 인수로 새로운 객체에 추가할 프로퍼티 정보 전달

const obj = Object.create(null, {             // null 프로토타입을 사용하여 새로운 객체를 만들고
    x: { value: 100, enumerable: true },    // x좌표를 나타내는 열거할 수 있는 프로퍼티와
    y: { value: 200, enumerable: true }     // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가함.
});
obj.x;                      // x좌표
obj.y;                      // y좌표 
Object.getPrototypeOf(obj); // 객체의 프로토타입을 반환해 줌.

 

 

 

 

 

http://tcpschool.com/javascript/js_object_concept

코딩교육 티씨피스쿨