Javascript 객체 만들기

목차

1. 객체를 만드는 방법

2. 객체 리터럴

3. 생성자 함수

4. Class 문법

---

1. 객체를 만드는 방법

 

 

객체를 만드는 방법에는 크게 세 가지가 있다.

 

1. 객체 리터럴
2. 생성자 함수
3. Class 문법

 

 

---

2. 객체 리터럴

 

 

가장 기본적인 방법으로, 객체를 중괄호를 이용해 직접 객체를 선언해 값을 넣어주는 방법이다.

 

let obj = { 키: 값, 키: 값, ... }

 

하지만, 비슷한 객체를 여러가지 만들어야할 때는 일일이 만들수가 있을까?

 

만들수는 있지만 단순 노동업무를 하는 것은 비효율적이므로,

 

이에 따라 생성자 함수라는 것이 나오게 되었다.

 

 

---

3. 생성자 함수

 

 

생성자 함수는 일반 함수와 특별한 기술의 차이는 없다.

다만, 아래의 두 관례를 따를뿐이다.

 

1. 함수명의 첫 글자는 대문자로 시작해야한다.
2. 반드시 new 연산자를 붙여 실행해야한다.

 

예시(Sample)

function Person(name, age) {
    this.name = name
    this.age = age
}

let person = new Person("char1ey", 29)

console.log(person.name)
console.log(person.age)
console.log(person)

// char1ey
// 29
// Person { name: 'char1ey', age: 29 }

 

 

어떻게 객체가 생기는 건지 원리를 한번 알아보자.

 

1. 빈 객체를 만들어 this에 할당한다.
2. 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다.
3. this를 반환한다.

 

이를 코드로 표현해보면 다음과 같다.

 

 

function Person(name, age) {
	let this = {} // this라는 빈객체를 만들어 준다.
    
    this.name = name
    this.age = age
    
    return this // 값을 넣은 this를 반환한다.
}

let person = new Person("char1ey", 29)

 

 

메서드 생성 방법

 

 

생성자 함수를 사용하면 매개변수를 이용해서 객체의 내부를 자유롭게 구성할 수 있다.

 

위에서는 this를 이용하여 프로퍼티를 더해주는 예시만 살펴봤는데,

 

프로퍼티 뿐만 아니라 메서드도 추가할 수 있다.

 

 

예시(Sample)

function Person(name, age) {
    this.name = name
    this.age = age

    this.call = function () {
        console.log(`Hello, ${this.name}!`)
    }
}

let person = new Person("char1ey", 29)

person.call() // Hello, char1ey!

 

 

---

4. Class 문법

 

 

위의 생성자 함수와 마찬가지로 new를 이용해서 객체를 만드는 방법이다.

 

class [Class 이름] {
    constructor(){
    // 생성할 객체의 본문
    }
    
    // 생성할 메서드
    method(){...}
    method(){...}
    ...
}

 

 

클래스를 선언하고, new를 이용해 클래스를 호출하면 기입한 코드를 바탕으로 객체가 만들어진다.

 

constructor 함수 내부의 코드는 객체의 기본 구조를 설정해주고,

 

아래의 method들은 생성된 객체에서 메서드로 사용이 가능하다.

 

 

 

예시(Sample)

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    call(){
        return this.name
    }
}

let person = new Person("char1ey", 29)

console.log(person) // Person { name: 'char1ey', age: 29 }
console.log(person.call()) // char1ey

 

생성자 함수와 마찬가지로 객체가 생성되고, 메서드도 잘 실행되는 것을 볼 수 있다.

 

주의할 점은 문법이 살짝 다르다는 점이다.

 

클래스는 중요한 부분이므로 나중에 따로 학습하도록 하자.