자바스크립트 OOP(Object-Oriented Programming)에 관련해서 이해한 학습내용 기록.

언어는 주체자(Object = 'variable or data')가 행동('method'= function)을 한다. 또는 주체자를 행동을 시켜라. 등의 문형으로 표현할 수 있다.
여기에서 주체자가 바로 자바스크립트 언어(OOP)의 'object'에 해당한다. 자바스크립트(프로그래밍언어)뿐만 아니라, 현실세계에서 존재하는 실체는 'object'라고 언어로써 표현할 수 있다.
그리고 이 'object'가 행동을 취하는 상태를 'method'라고 부르며, 이를 'function'으로 표현한다.

Property(속성: 명사)

Prototype(원형)

현실세계에서 존재하는 'object'의 생긴 그대로의 형체를 자바스크립트 언어에서도 'prototype'이라고 칭한다.

Class(고유명사)

영어에서 고유명사는 말그대로 고유할때, 즉 하나만 있을때를 표현하면서 철자의 첫알파벳은 대문자로 표현한다. 자바스크립트 언어 또한 고유명사가 있는데 이를 'class'라고 칭한다.

function Person(first, last, age, gender, interests) {
  this.name = {first, last};
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};

위의 코드를 우리의 언어로 읽어보면,

함수네집에  사람이 있는데 (사람의 성, 사람의 이름, 사람의 나이, 사람의 성별, 사람의 관심사)들을 {
이사람의 이름은 {이름, 성}으로 표기;//이름따로 성따로 표기가 가능하니, 세트로 묶어주기 위해 {}중괄호 안에 세트로 넣어준다.//세트는 괄호를 이용해서 표기한다라고 컴터에게 알려주었다. 그래서 세트를 묶는 객체는 {}안에 넣겠다 이렇게!! 
이사람의 나이는 나이라고 표기;
이사람의 성별은 성별이라고 표기;
이사람의 관심사는 관심사라고 표기;//이런식으로 간단히 컴터에게 저장하겠다는 형식으로 표기한다.
}

명사를 대신써주는 대명사 즉, 'this'는 가까이에 있는 것을 가리킬 때 쓰는 지시대명사 이므로, 그대로 가까이에 있는 명사를 지칭한다. 가까이에 있는 명사가 바로 'Person'이므로 'this'가 가리키는 것은 바로 'Person'이다. 그리고 'Person'을 고유명사로 표기하는 이유는 불변 즉, 흔들림 없이 변하지 않을것을 컴터에게 표현하기 위해서 고유명사로 표기한다.

method(메소드(동사))

자바스크립트 'method'는 명사 'object'가 움직이는 상태를 표현하는 함수표현이다.
'property'가 OOP의 명사에 해당한다면, 'method'는 OOP의 동사에 해당한다고 보면 이해가 쉬울듯 하다. 그리고 동사는 움직임을 나타내는 주체자가 있어야 하므로, 'property'와 함께 표현한다.

Person.prototype.greeting = function() {
alert ('Hi! I\'m'+ this.name.first + '.');
}

위의 표현을 우리의 언어로 옮기면,

사람이 본래 인사하기를 = 함수네 집에서() {
(안녕! 나는 나의 이름의 성에 '.'를 붙여서 표현해.);//결과창 => 안녕! 나는 oo라고 해.
}

또,

function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);
  
  this.subject = subject;
}

위의 코드를 우리언어로 옮기면,

함수네학교에 선생님이 계신데(선생님의 성, 선생님의 이름, 선생님의 나이, 선생님의 관심사, 선생님의 담당과목) 
{위의 선생님(Person)(선생님의 성, 선생님의 이름, 선생님의 성별, 선생님의 관심사들)등의 내용을 불러와라!!;

나의 담당과목은 과목이라고 표기한다고 알려주고;
}

명사는 소유격형태가 있는데, 명사의 소유격은 보통 단어's를 붙인다.
이처럼 자바스크립트에서 명사의 소유격은 '.'으로 표기한다라고 이해하면 쉬울듯 하다.

function doSomething(){}//함수로 어떤것을 해라.
doSomething.prototype.foo = "bar";//어떤것 원형의 '{foo'는 'bar'}이다.

console.log( doSomething.prototype);//어떤것 원형를 컴터에 표시해라!! => {foo: bar}

function doSomething(){}
doSomething.prototype.foo = "bar"; // 어떤것 원형의 'foo'는 'bar'이다.
var doSomeInstancing = new doSomething(); //어떤것에 새로운 어떤것을 새로 본뜨면,
doSomeInstancing.prop = "some value"; // 새로본뜬 어떤것의 속성은 'some value'이다.
console.log( doSomeInstancing );//새로본뜬 어떤것을 컴터에 표시해라!! {prop:'some value'}

create 생성하다

고유명사 'class'에 존속되는 객체들을 하나씩 붙어줄 수있는데 즉, 'Teacher'에 여러선생님들'Person'을 한명씩 뽑는다라고 이해하면 쉬울듯 하다. 이를 자바스크립트 언어로는 'create'로 생성한다.

Teacher.prototype = Object.create(Person.prototype);

위의 코드를 우리언어로 옮기면,

선생님 포지션에 = 선생님 한명을 데려온다.

그리고,

Object.defineProperty(Teacher.prototype, 'constructor', { 
    value: Teacher, 
    enumerable: false, 
    writable: true });

선생님 포지션에(선생님을 구조적으로 배치할건데, {
    포지션은 선생님,
    더 뽑거나 바뀔 수 있으니, 고정포지션은 아니고,
    선생님 포지션 자리에 가능하면 o.k!!});
    라고 정의할께!!

이렇게 선생님 한명을 뽑으면 컴터에게 아래와 같이 알려준다.

let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');

그리고 우리언어로 옮기면,

선생님 1번 = 새로운 선생님(성은 Dave이고, 이름은 Griffiths이고 나이는 31살이고, 성별은 남자이고, 관심사들은 [축구와 음식조리법이고], 담당과목은 수학이다);

자바스크립트 프로그래밍 언어를 처음 학습중인데다, 여러 일들을 함께하므로 학습에 시간할애를 효율적이고 능률적으로 하기위해 쉽게 이해할 수 있는 방법을 자꾸 모색중이다.
이렇게 내방식대로 이해하는 것도 괜찮을 듯하며, 또 학습에 더 흥미가 붙을 수 있을듯 하다.

좀더 자세한 내용에 대해, 앞으로 학습을 하면서 익혀나갈 것을 계획하며 글을 마무리한다.