JavaScript 객체 생성 방법 / Objects

객체(Object)

객체는 데이터를 key:value 한 쌍의 구조로 저장하는 방식입니다.
그래서 하나의 변수(식별자)에 여러 데이터들을 저장하고 관리할 수 있습니다.
 

객체

JavaScript에서의 거의 모든 것들은 객체입니다.
배열(Array), 함수(Function), 객체(Object), 날짜(Date), 정규표현식(Regular Express) 등등..
원시값을 제외한 모든 값들은 객체입니다.
 
물론 모든 객체들에 다루기는 것보다는 모듈의 기반이 되면서 ' key : value '의 한 쌍을 가지는 객체를 중심으로 살펴보겠습니다.

---

1. 객체 리터럴(Object Literals)

여러 가지 변수를 하나의 묶음으로 나타낼 때 객체를 사용합니다. 이러한 객체를 표현할 때, 중괄호 { }를 사용하여 나타내는 방식을 객체 리터럴이라고 합니다.
 

const student = {
//  key : value로 한 쌍을 이루는 구조
    grade : '4학년',
    name : 'Luca',
//  메소드(Method)도 추가 할 수 있습니다 !
    introduction(){
        console.log(`안녕하세요. 제 이름은 ${this.name}이며 ${this.grade}입니다.`);
    }
};

// 자기소개 Method 호출
student.introduction();

실행 결과

 

2. 생성자 패턴(Generator Pattern)

함수(function)를 정의하고, new 키워드로 함수를 호출하면 그 함수는 생성자 함수가 됩니다.!
생성자 함수로서 호출된 함수는, return이 없다면 암묵적인 return this로 인스턴스 객체를 return 시켜 줍니다!
 
생성자 함수나 클래스(Class)등 을 선언할 때는 이름을 Pascal Case형식으로 정의하는 것이 규칙인데요
Carmel Case(카멜 표기법)과 비슷하지만, 첫 단어의 첫 글자도 대문자로 표기하는 명명 규칙입니다.

function Student(grade, name){
    this.grade = grade
    this.name = name
    this.introduce = function(){
        console.log(`학년 : ${this.grade} 이름 : ${this.name}`)
    }
};

var luca = new Student('4학년','Luca');
console.log(luca);

실행 결과

 

3. 프로토타입(Prototype)을 이용한 객체

프로토타입을 이용해서 공통 메서드들을 프로토 타입에 정의할 수 있습니다.

function Student(grade, name){
    this.grade = grade;
    this.name = name;
}

Student.prototype.introduction = function(){
	console.log(`안녕하세요. 제 이름은 ${this.name}이며 ${this.grade}입니다.`);
}

const luca = new Student('4학년','Luca');
luca.introduction();

실행 결과

실행 결과나 코드들을 보시다시피 생성자 패턴과 굉장히 유사해 보이지만, 프로토 타입을 이용한 객체 생성은 메모리 효율적인 특징을 가지고 있습니다.
 

생성자 패턴과 프로토타입 패턴

생성자 패턴

• 생성자를 통해 만들어진 객체들이 여러 개가 있다면, 객체마다 introduction메서드를 가집니다.

프로토타입

• 객체들을 여러 개 생성하더라도, 같은 프로토타입을 공유하기 때문에, introduction메서드는 프로토타입에 하나만 존재합니다.

 
여러 객체들을 생성해도 객체들의 프로토타입은 Student.prototype으로 같으며,
프로토타입의 introduction 메서드를 재사용하게 되는 것이죠!
 
직접 비교해 볼까요? - (Chrome 브라우저의 개발자 도구 사용)

생성자 - 객체 내부에 메소드 보유

생성자 패턴을 통해 생성한 객체는 객체 내부에 메서드를 가지고 있습니다.
 

프로토타입 - 프로토타입에 메소드 보유

프로토타입을 이용한 객체는, 생성한 객체와 연결된 프로토타입 내부에 메소드를 가지고 있습니다.
 

4. Object.create

prototype 키워드를 직접적으로 이용하진 않지만, 프로토타입을 이용한 객체를 만들 때 사용할 수 있습니다.

const codeMethod = {
	introduction : function(){
    	console.log(`안녕하세요. 제 이름은 ${this.name}이며 ${this.grade}입니다.`);
    }
}

const luca = Object.create(codeMethod, {
	name : { value : 'Luca'},
	grade : { value : '4학년'}
});

luca.introduction();

실행 결과 - prototype을 이용한 객체 생성

 
create 메서드는 프로토타입 기반의 상속을 매끄럽게? 하기 위해서 탄생했다고 합니다.
class가 ES6에서 추가된 이후, extends를 통해 상속을 구현할 수 있어서 현재는 잘 쓰이지 않는다고 해요!
 

5. 클래스 패턴

ES6(2015)에서 자바스크립트에 클래스가 추가되었는데요.
Class 키워드를 이용해 클래스를 정의하고, new 키워드로 클래스를 호출하면 생성자(constructor)가 호출됩니다.
생성자는 인스턴스를 만들어 반환하며, 이 인스턴스가 객체입니다.
 
자바 스크립트 class 키워드는 내부적으로 프로토타입을 통해 구현되어 있습니다.

class Student{
	constructor(name, grade){
    	this.name = name;
        this.grade = grade;
    }
    introduction(){
    	console.log(`안녕하세요. 제 이름은 ${this.name}이며 ${this.grade}입니다.`);
    }
}

const luca = new Student('luca', '4학년');
luca.introduction();

실행 결과 - prototype이 사용된걸 볼 수 있다.

---

이렇게 다양한 방법으로 객체를 생성할 수 있습니다.
각 특성을 이해하고 적재적소에 잘 맞게 활용할 줄 안다면 너무 좋겠죠?
 
예를 들어,
일반화 없이 하나의 객체만을 생성해야 할 때.
생성자를 사용하기보다는, 한 번의 리터럴만을 사용하는 것이 가장 효율적이다.
 
Person 등의 일반화된 개념으로부터 인스턴스를 생성해야 한다면
class 키워드나 생성자 함수 + 프로토타입을 적극 이용하여 반복과 메모리 누수를 줄일 수 있을 겁니다!!

감사합니다 :)