[JavaScript] Core: Object

🍁Object

---

자바스크립트에 클래스는 없는 대신에 내장 객체를 제공한다고 했다.

 

이건 클래스가 아닌가요?

class Test {
    
}

아닙니다. 이건 클래스의 껍데기를 가진 다른 것이에요.

 

내장 객체

• new Array()
• new Date()
• Math.메소드()
• 기타 등등..

내장 객체에는 Array, Date, Math, Object 등이 있다.

 

BOM 객체

• window
• document
• form
• text
• button
• 기타 등등..

 

DOM 객체

• element
• attribute
• text
• comment
• 기타 등등..

DOM 객체는 노드들을 의미한다.

 

위의 객체들은 이미 타입이 정의되어 있어서 개발자가 가져다 쓰는 것들이다.

그러나 개발을 하다 보면 개발자가 스스로 타입을 정의해야 하는 일이 생긴다. 이럴 때 사용하는 것이 사용자 정의 객체이다.

 

🍂사용자 정의 객체

자바스크립트에는 클래스가 없기 때문에 원하는 형태의 객체 생성이 불가능하다.

사용자 정의 객체가 원하는 형태의 객체를 만들 수 있게 해 준다.

 

사용자 정의 객체의 특징

1. Object 내장 객체를 사용한다.

const obj1 = new Object();

2. {} 객체 리터럴 표기법을 사용한다.

const obj2 = {};

 

사용자 정의 객체 생성

class User {
    public String name;
    public int age;
    public String address;
}

User isaac = new User();

isaac.name = 'isaac';
isaac.age = 20;
isaac.address = "서울시 강남구";

위 코드는 자바에서 클래스를 구현하는 방법이다.

이를 자바스크립트에서 구현해 보도록 하자.

 

const 선언 (클래스 생성)

const isaac = new Object();

먼저 const로 상수를 선언하고, 이를 클래스라고 생각해 보자.

하지만 이 클래스 안에는 name, age, address라는 멤버가 없다는 문제가 있다.

 

객체의 프로퍼티 (멤버 생성)

isaac.name = 'Isaac';
isaac.age = 20;
isaac.address = '서울시 강남구';

console.log(isaac.name);
console.log(isaac.age);
console.log(isaac.address);

이를 객체의 프로퍼티(Property)라고 부른다.

자바스크립트의 모든 객체는 프로퍼티를 자유롭게 추가하고 삭제할 수 있다.

이게 자바스크립트에서 객체를 추가해서 멤버를 추가하는 방법이다.

 

프로퍼티를 넣는 방법

isaac.tel = '010-1234-5678'; //멤버처럼 표현
isaac['tel'] = '010-1234-5678'; //key값처럼 표현

멤버(프로퍼티)를 넣는 다른 방법이 존재한다.

위의 설명에서 사용한 것처럼 프로퍼티를 멤버처럼 표현하는 방법도 있지만, map에서 사용하는 것처럼 key값 형태로도 표현이 가능하다.

let key = 'tel';
isaac[key] = '010-1234-5678';

//isaac-primary-phone = '010-1234-5678';
isaac[primary-phone] = '010-1234-5678';

평상시에는 멤버처럼 표현하면 되고, 위와 같은 상황에서는 key값 형태로 표현하는 게 좋다.

 

정리

• JavaScript 객체 만들기

1. 빈 객체를 만든다.

const object = new Object();

2. 원하는 프로퍼티를 추가한다.

obj.name = '';

 

하나의 코드로 객체를 선언하고 프로퍼티를 넣는 표현

//const park = {}; //new Object();
//park.name = '박필견'
//park.age = 40;
//park.address = '평양';

const park = {
    name: '박필견',
    age: 40,
    address: '평양'
};

console.log(park);

위와 같이 객체를 생성하고 동시에 프로퍼티를 넣을 수 있다.

 

객체 안에 또 다른 객체 넣는 표현

1번째 표현

const address = {
    si: '인천시',
    gu: '계양구',
    dong: '박촌동'
}
const Eom = {
    name: '엄석대',
    age: 30,
    //address: '인천시 계양구 박촌동'
    address: address //객체 안에 또 다른 객체
}

 

2번째 표현

const Eom = {
    name: '엄석대',
    age: 30,
    //address: '인천시 계양구 박촌동'
    address: {
        si: '인천시',
        gu: '계양구',
        dong: '박촌동'
    } //객체 안에 또 다른 객체
}

 

객체 안에 메서드를 넣는 표현

const ha = {
    name: '하후돈',
    age: 3,
    hello: m1
}

function m1() {
    alert('안녕하세요');
}

객체 안에 변수만 만들 수 있는 게 아니라 메소드도 만들 수 있다.