[자바스크립트 js] 객체 만들기 / Object-Literal / Factory function / Constructor function

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 자바스크립트로 객체 만드는 법에 대해 공유 하려 합니다.

지금부터는 가독성을 위해 문어체를 사용하여 작성하겠습니다!

 

 

 

  Object-Literal

• 중괄호를 쓰고 프로퍼티와 메소드를 나열하는 것.
• 객체를 나타내는 문자열.

 

* 노란색 끼리는 같은 내용

const tooktak = {
    name: '뚝딱',
    birthdate: '1992-09-23',
    buy(item) {
     console.log(`${this.name} buys ${item.name}`);
    },
}

const item = {
   name: '맥북',
   price: 10000,
};

console.log(tooktak.name);
console.log(tooktak.birthdate);
tooktak.buy(item);


// 결과
// 뚝딱
// 1992-09-23
// 뚝딱 buy 맥북

 

 

 

  객체 생성1. Factory function

• 객체를 생성하는 방식.
• object literal로 객체를 생성하여리턴하는 방법.
• 공장에서 물건을 찍어내듯이 객체를 만들어낸다.

function createUser(name, birthdate) {
	const user = {
		name: name,
        birthdate: birthdatem
        buy(item) {
        	consoel.log(`${this.name} buys ${item.name}`);
        },
    };
    return user;
};


const item = {
	name: '맥북',
    price: 10000
};

conset user1 = createUser('뚝딱', '1992-09-23');
conset user1 = createUser('두올다', '1992-09-22');
conset user1 = createUser('도깨비', '1992-09-21');

console.log(user1.name);
console.log(user2.name);
console.log(user3.name);

user1.buy(item);
user2.buy(item);
user3.buy(item);



// 결과
// 뚝딱
// 두올다
// 도깨비
// 뚝딱 buys 맥북
// 두올다 buys 맥북
// 도깨비 buys 맥북

 

• 위 코드에서 name과 birthdate를 적는 방식을 아래 코드처럼 바꿀 수 있다.

function createUser(name, birthdate) {
	const user = {
		name,
        birthdate,
        buy(item) {
        	consoel.log(`${this.name} buys ${item.name}`);
        },
    };
    return user;
};


const item = {
	name: '맥북',
    price: 10000
};

conset user1 = createUser('뚝딱', '1992-09-23');
conset user1 = createUser('두올다', '1992-09-22');
conset user1 = createUser('도깨비', '1992-09-21');

console.log(user1.name);
console.log(user2.name);
console.log(user3.name);

user1.buy(item);
user2.buy(item);
user3.buy(item);



// 결과
// 뚝딱
// 두올다
// 도깨비
// 뚝딱 buys 맥북
// 두올다 buys 맥북
// 도깨비 buys 맥북

 

 

 

  객체 생성2. Constructor Function (생성자 함수)

• 객체를 생성하려면 new 키워드를 붙여서 호출해야 한다.
• 다른 일반 함수와 달리, 함수의 이름의 첫번째 알파벳을 대문자로 적는다. (관습)
• 객체를 생성하는 용도로 사용하는 constructor function을 정의하고, 그 안에서 this 키워드를 사용하여 생성될 객체의 프로퍼티와 메소드를 설정하는 방법.

// 객체를 생성할 수 있는 함수 Constructor function
function User(name, birthdate) {
	this.name = name;
    this.birthdate = birthdate;
    this.buy = funxtion (item) {
    	consol.log(`${this.name} buys ${item.name}`);
        // 여기서 this는 user1, user2, user3 = 각각의 객체
    };
}

const item = {
	nmae: '맥북',
    price: 10000
}

const user1 = new User('뚝딱', '1992-09-23');
const user2 = new User('두올다', '1992-09-22');
const user3 = new User('도깨비, '1992-09-21');

console.log(user1.name);
console.log(user1.name);
console.log(user3.name);
console.log(user1.birthdate);
user1.buy(item);


// 결과
// 뚝딱
// 두올다
// 도깨비
// 1992-09-23
// 뚝딱 buys 맥북

 

 

 

  객체 생성3. Class

• ES6에서 추가되었다.
• constructor function과 마찬가지로 new 키워드를 사용하여 객체를 생성한다.
• constructor 안에 프로퍼티를 쓰고, 메소드는 그 밖에 쓴다. (프로퍼티와 메소드를 분리)

class User {
	constructor(name, birthdate) {
    	this.name = name;
        this.birthdate = birthdate;
        // 여기서 this는 생성되는 객체
    }
    
    // 해당 객체의 메소드
    buy(item) {
    	console.log(`${this.name} buys ${item.name}`);
    }
}

const item = {
	nmae: '맥북',
    price: 10000
}

const user1 = new User('뚝딱', '1992-09-23');
const user2 = new User('두올다', '1992-09-22');
const user3 = new User('도깨비', '1992-09-21');

console.log(user1.name);
console.log(user1.name);
console.log(user3.name);
console.log(user1.birthdate);
user1.buy(item);


// 결과
// 뚝딱
// 두올다
// 도깨비
// 1992-09-23
// 뚝딱 buys 맥북