[Following Opentutorials] JavaScript Object-Oriented Programming_02~04

JavaScript Object-Oriented Programming

Opentutorials course link: https://opentutorials.org/module/4047/24604

02. Use Cases of Objects 

2-1. Example: Math.

Even before we understood it, we were already using it naturally. The most representative object is the MATH object.

built_in.js )

console.log("Math.PI : ", Math.PI);
console.log("Math.random() : ", Math.random());
console.log("Math.floor(3.9) : ", Math.floor(3.9));

Execution result )

2-2. Building it ourselves _MyMath.

An object (MyMath) is related variables (PI) and functions (random, floor) that share the same purpose, grouped together into a single MyMath object, with a name assigned to those elements.

built_in.js )

// random()는 함수
// Math.random()에서의 random()는 메소드 

var MyMath={
    PI:Math.PI,
    random:function(){
        return Math.random();
    },
    floor:function(val){
        return Math.floor(val);
    }
}
console.log("MyMath.PI : ", MyMath.PI);
console.log("MyMath.random : ", MyMath.random);
console.log("MyMath.floor : ", MyMath.floor(3.9));

Execution result )

03. this

"this" — the pronoun that refers to itself 

this.js)

//#this 사용 전 1
var kimA ={
    name:"kimA",
    first:10,
    second:20,
    sum:function(f,s){
        return f+s;
    }
}
console.log(kimA.name, " : ", kimA.sum(kimA.first,kimA.second)); 
// -> 내부에 정보가 있음에도 매번 접근을해서 기입을 해야한다 

//#this 사용 전 2
var kimB ={
    name:"kimB",
    first:10,
    second:20,
    sum:function(){
        return kimB.first+kimB.second; 
        // -> 내부의 정보를 바로 활용하고 있지만, 객체의 이름이 변경될 때마다 수정이 필요하다 
    }
}
console.log(kimB.name, " : ",kimB.sum()); 

//#this 사용 후 
var kimC ={
    name:"kimC",
    first:10,
    second:20,
    sum:function(){
        return this.first+this.second; 
        // -> 내부의 정보를 바로 활용하고 있지만, 객체의 이름이 변경되더라도 값에 영향을 주지 않는다. 
    }
}
console.log(kimC.name, " : ",kimC.sum())

Execution result)

04. Object Factory 

4-1. Discovering our next learning goal through an example

objectFactory.js)  - basic example

var kim ={
    name:"kim",
    first:10,
    second:20,
    sum:function(){
        return this.first+this.second; 
    }
}
var lee ={
    name:"lee",
    first:10,
    second:20,
    sum:function(){
        return this.first+this.second; 
    }
}
console.log(kim.name, " 's sum : ",kim.sum())
console.log(lee.name, " 's sum : ",lee.sum())

objectFactory.js)  - Example: recognizing the need for a way to create and manage objects in bulk, instead of by hand 

When the elements (variables, functions, etc.) inside the kim object grow, all elements of similar objects like lee... must also be updated

var kim ={
    name:"kim",
    first:10,
    second:20,
    third:30, // 새로 추가된 변수 
    sum:function(){ // 새로 추가된 변수로 인해 변경된 함수 
        return this.first+this.second+this.third; 
    }
}
var lee ={
    name:"lee",
    first:10,
    second:10,
    third:10, // * kim에 맞춰 추가한 변수 
    sum:function(){ // * 새로 추가된 변수로 인해 변경된 함수 
        return this.first+this.second+this.third; 
    }
}
console.log(kim.name, " 's sum : ",kim.sum())
console.log(lee.name, " 's sum : ",lee.sum())

-> We need the superpower of being able to build a factory. 

4-2. Touring an already-built factory (built-in code)

objectFactory.js) - Using a factory that is already built: new Date

//(위의 코드 뒤로 이어서)

// new Date로 새로운 객체 생성해서 d1에 담는다.
var d1 = new Date('2019-4-10'); 
// Date 객체의 구조, 설계도는 알수는 없지만 d1을 통해 Date의 상태, 값 등을 활용할 수 있다. 
// 위의 가내수공업 방식의 경우에는 객체의 요소와 구조, 설계도 모두가 노출된다.

console.log("getDate : ",d1.getDate());
console.log("getFullYear : ",d1.getFullYear())
console.log("getMonth : ", d1.getMonth()+1); //Month의 경우, 0부터 카운팅하기 때문에 +1

Execution result)

4-3. Building a factory ourselves (demo/practice) 

objectFactory.js) - Build a new factory and check its output 

//Date가 어떻게 생겼는지 확인해 보기
console.log("Date : ", Date);  
// 결과 -> function Date() { [native code] }
// Date는 함수 형태로 만들어진 내장 코드이다.

function Person(){
    this.name="kim",
    this.first=10,
    this.second=20,
    this.third=30, // 새로 추가된 변수 
    this.sum=function(){ // 새로 추가된 변수로 인해 변경된 함수 
        return this.first+this.second+this.third; 
    }
}
console.log("Person : ", Person); // 요소를 그대로 출력 
console.log("Person() : ", Person()); // 그냥 함수가 호출됨 
console.log("new Person() : ", new Person()); // 생성자 함수, new를 통해 객체를 생성하는 생성자의 역할 수행

Execution result)

4-4. Building a factory ourselves (real use, 1) 

objectFactory.js) - Apply it to the Kim and Lee objects 

function Person(){
    this.name="kim",
    this.first=10,
    this.second=20,
    this.third=30, // 새로 추가된 변수 
    this.sum=function(){ // 새로 추가된 변수로 인해 변경된 함수 
        return this.first+this.second+this.third; 
    }
}

var kim = new Person();
kim.name="kim";
kim.first=10;
kim.second=20;
kim.third=30;

var lee = new Person();
lee.name="lee";
lee.first=10;
lee.second=10;
lee.third=10;

console.log(kim.name, " 's sum : ",kim.sum());
console.log(lee.name, " 's sum : ",lee.sum());

Execution result)

4-5. Building a factory ourselves (real use, 2) 

objectFactory.js) - A more polished way to apply it to the Kim and Lee objects 

function Person(name,first,second,third){
    this.name=name,
    this.first=first,
    this.second=second,
    this.third=third, // 새로 추가된 변수 
    this.sum=function(){ // 새로 추가된 변수로 인해 변경된 함수 
        return this.first+this.second+this.third; 
    }
}

var kim = new Person("kim",10,20,30);
var lee = new Person("lee",10,10,10);

console.log(kim.name, " 's sum : ",kim.sum());
console.log(lee.name, " 's sum : ",lee.sum());

Execution result)

We're not done yet... but an epilogue to this practice round,

Hmm... the way objects are created and handled is almost the same as in Java. Personally, in the finer details, it feels even more flexible.

JAVA, an object from birth, versus javascript, which is transforming into something object-oriented as it grows up... I feel like you could compare them to the silver-spoon and bronze-spoon of the real world. Having started with JAVA, learning PHP and javascript as they evolve, it hits me again — "let me try to be a person like PHP and javascript (with that tone and manner)."