{Es6} 객체 지향에 대해서 알아보자. I

자바스크립트는 객체 지향 프로그래밍이다.

자바스크립트를 공부하다보면 한번 쯤은 객체 지향이라는 용어에 대해서 들어보셨을 겁니다. 객체 지향??? 용어가 너무 어렵나요??? 별거 없습니다. 객체 지향이란 그냥 '객체를 만든다' 라고 이해하시면 됩니다.

객체는 흔히 이런 중괄호{}에 둘러쌓인 자료들을 말하며 key와 value라는 값으로 구성되어 있는 것이 특징입니다. 또한, 자바스크립트에는 이런 객체를 만들 수 있는 방법이 몇 가지가 있는데, 오늘이 이 객체를 만드는 여러가지 방법에 대해서 알아보도록 하겠습니다.

용어 정리

프로퍼티(Property) - 객체 내부에 선언된 변수.
메소드(Method) - 객체 내부에 선언된 함수.
인스턴스(Instance) - 생성자 함수와 클래스를 통해 만들어진 객체.
상속(Inheritance) - 생성자 함수와 클래스의 속성을 인스턴스에게 물려주는 것.

객체 지향을 알아보기 전에 먼저 알아두면 좋은 몇 가지 용어에 대해서 먼저 정리하고 시작하겠습니다. 모르시는 분들은 참고하세요.

객체 리터럴(Object Literal)

예시1. 객체 리터럴 방식

	let 아이유 = {
    	name : '이지은',
        age : 30,
        singer : true,
        
        sayHi(){
        	console.log(`안녕하세요 ${this.name} 입니다.`)
        }
    }

객체 리터럴이란 '하나의 객체 묶음' 이라고 생각하시면 됩니다. 아이유라는 변수 안에 여러가지 변수들을 중괄호{}로 한데 묶어서 저장했습니다. 이 객체 리터럴 방식은 객체를 만드는 가장 일반적인 방법입니다.

Object() 내장함수

예시2. Object() 내장함수 방식

	let 아이유 = new Object();		// 비어있는 객체 생성

    아이유.name = '이지은';			// 요소들을 하나씩 추가
    아이유.age = 29;
    아이유.singer = true;
    아이유.sayHi = function(){
        console.log(`안녕하세요. ${this.name} 입니다.`);
    }

내장함수 Object()를 사용하는 방법입니다. 우선 new 라는 키워드를 사용해서 비어있는 객체를 하나 만들어주고 이 객체 안에 필요한 요소들을 하나씩 추가하는 방식입니다. 이런 방식으로도 객체를 만들 수 있습니다.

객체 리터럴 vs Object() 내장함수

그렇다면 위 두 가지 방식 중 어떤 방법을 사용하면 더 효율적일까요? 여러분들이 사용하기 나름이지만 저는 '리터럴 방식'을 더 권장하고 싶습니다.

일단 리터럴 방식은 직관적입니다. 모든 요소들을 하나의 괄호 안에 포함하기 때문에 코드를 알아보기 더 쉽습니다. Object() 내장함수 방식은 선언과 할당 부분이 나뉘어져 있기 때문에 상대적으로 직관성이 떨어집니다.

어렵고 복잡해 보이는 코드는 효율적이지 않습니다. 나 혼자서 개발을 한다면 상관없겠지만 일반적으로 다른 개발자들과 협업을 하는 경우가 대부분이기 때문에, 우리는 효율적이고 모두가 알아보기 쉬운 코드를 사용하는 것이 개발을 하는데 있어서 효율적입니다.

---

생성자 함수(Constructor)

예시3. 생성자 함수(Constructor) 방식

	function Frame(이름, 재료){ 	//생성자 함수 선언
      this.이름 = 이름;
      this.재료 = 재료;
    };

    let 붕어빵1 = new Frame("붕어싸만코1", "팥");
    let 붕어빵2 = new Frame("붕어싸만코2", "슈크림");
    let 붕어빵3 = new Frame("붕어싸만코3", "불닭");
	//생성자 함수로 만들어진 인스턴스

    console.log(붕어빵1, 붕어빵2, 붕어빵3);

쉽게 말해서 생성자 함수란 붕어빵틀과 같습니다. 틀안에 필요한 재료들을 넣어서 한번에 여러 개의 붕어빵을 찍어내는 것처럼 생성자 함수를 사용하면 한번에 여러 개의 객체를 찍어낼 수 있습니다. 하지만 이런 편리한 생성자 함수를 사용하려면 지켜야 할 두 가지 규칙이 있습니다.

1. 대문자 작명

자바스크립트 뿐만 아니라 프로그래밍에는 카멜케이스(camelcase)와 스네이크케이스(snake_case)라는 두 가지의 작명 방식이 있습니다. 변수나 함수를 선언할때 보통 위의 두 가지 방식 중 하나를 사용하며 첫글자는 보통 소문자로 시작하는 것이 일반적입니다. 하지만 생성자 함수의 경우 첫글자를 대문자로 표기해서 '이 함수는 생성자 함수다' 라고 알려주는 것이 개발자들간 정해진 약속입니다.

프로그래밍 작명방법???

카멜케이스(camelcase) 표기법

카멜케이스란 첫번째 단어 이후 이어지는 각 단어의 첫 글자를 대문자로 쓰는 방법입니다. 모양이 낙타를 닮았다고 해서 camel(낙타) case(표기법) 으로 불려집니다.

	let camelCase = '카멜케이스';

스네이크케이스(snakecase) 표기법

스네이크케이스는 단어와 단어사이에 '_' 를 추가하여 구분하는 방법입니다. 단어 사이에 뱀이 있다고 해서 snake(뱀) case(표기법)으로 불려집니다.

	let snake_case = '스네이크케이스';

2. new 키워드 사용

생성자 함수를 통해서 객체를 만들면 반드시 new라는 키워드를 같이 사용해야합니다. 만약 new라는 키워드를 사용하지 않는다면 undefined라는 값이 출력됩니다.

---

Prototype을 사용한 특수한 방법

위에서 생성자 함수를 사용하면 여러 개의 객체를 찍어내는 것이 가능하다고 했습니다.
하지만 이런 생성자 함수 방식으로 객체를 만들면 메모리의 저장 공간이 남아나질 않습니다.

따라서 이런 메모리의 부담을 조금 덜어 줄 수 있는 좋은 방법이 있는데 바로 프로토타입(Prototype)입니다. 프로토타입이란, 생성자 함수 내에 존재하는 일종의 비밀 공간입니다.

예시4. 프로토타입(Prototype) 만들기.

	function Frame(이름, 재료){ 
        this.이름 = 이름;
        this.재료 = 재료;
    };

    Frame.prototype.price = 500;

    let 붕어빵1 = new Frame("붕어싸만코1", "팥");
    
    console.log(붕어빵1.price); 		//500

생성자 함수에 프로토타입을 사용해서 price라는 항목을 하나 추가해줬더니 인스턴스에서 price를 확인할 수 있게 되었습니다. 신기하네요??? 생성자 함수 내부가 아닌 외부에서 프로토타입으로 요소를 추가했는데 이 요소가 인스턴스에 그대로 반영이 되었다니!

이것 뿐만이 아닙니다. 이제 Frame이라는 생성자 함수를 통해 만들어진 모든 인스턴스들은 자동으로 price라는 항목을 모두 갖고있습니다. 또한 프로토타입을 활용하면 객체가 저장되는 메모리의 공간을 대폭 줄일 수 있다는 이점이 있습니다.

상속(inheritance)

이런 기능을 정확하게 객체 지향 용어로 정리하자면 상속(inheritance)이라고 합니다. '부모가 자식에게 재산을 상속해준다' 라는 말처럼 생성자 함수는 인스턴스에게 속성(프로퍼티)을 상속해 줄 수 있습니다.

정리하자면, 지금까지 우리가 생성자 함수를 통해 인스턴스를 만든 과정이 상속입니다. 프로토타입이라는 비밀공간을 활용하는 것 역시도 상속입니다. 다만 차이점이라면 생성자 함수는 인스턴스에게 속성을 '직접' 상속하는 것이고 프로토타입은 부모(생성자 함수)만 그 속성을 가지고 있고 자식(인스턴스)들은 그 속성을 '참조' 하는 것입니다.

이 상속이라는 기능은 곳 자바스크립트의 알고리즘이라고도 할 수 있습니다.

그림 설명()

자식에게 물어서 없다면 그 위의 부모에게 물어보는 과정을 거쳐 한 단계씩 위로 올라가면서 검사를 하는 것입니다. 우리가 찾고자 하는 결과가 나올때 까지요.

---

정리

객체 리터럴(Object literal)
1. 중괄호{}로 된 하나의 객체 묶음.
2. key와 value 값으로 구성되어 있음.
3. 객체 내부의 변수를 프로퍼티(Property), 객체 내부의 함수를 메소드(Method)라고 함.

생성자 함수(Constructor)
1. 한 번에 여러 개의 객체를 찍어낼 수 있는 일종의 붕어빵틀.
2. 대문자 작명으로 생성자 함수를 선언함.
3. new라는 키워드를 활용해 인스턴스를 생성함.
4. 생성자 함수를 통한 상속은 인스턴스들이 속성을 '직접' 가지고 있음.

프로토타입(Prototype)
1. 생성자 함수 내부의 비밀공간.
2. 메모리의 공간을 대폭 줄일 수 있다는 이점.
3. 프로토타입을 활용한 상속은 생성자 '함수만' 그 속성을 가지고 있고 인스턴스들은 참조만 함.

다음 글에서 이어집니다.