[생활코딩 따라가기] javascript 객체 지향 프로그래밍_02~04

javascript 객체 지향 프로그래밍

생코 수업 Link : https://opentutorials.org/module/4047/24604

객체의 사용 사례 - JavaScript 객체 지향 프로그래밍

 

02. 객체의 사용 사례 

2-1. 사례 _Math.

우리는 이미 이해하기 전에 익숙하게 사용하고 있다. 가장 대표적인 객체가 MATH 객체이다.

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));

실행 결과 )

MATH 객체의 실행결과 

 

2-2. 직접 만들어보기 _MyMath.

객체(MyMath)라는 것은 같은 취지의 연관된 변수(PI), 함수(random, floor)들을 MyMath라는 하나의 객체로 그룹핑해서 그 요소들에 이름을 붙이는 것이다.

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));

실행 결과 )

새로 생성한 MyMath 객체의 실행결과 

 

 

 

03. this

자기 자신을 가리키는 대명사 this 

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())

실행 결과)

this.js 실행결과 

 

 

 

04. 객체 공장 

4-1. 예제를 통해 앞으로 배워야 할 새로운 학습 목표 발견하기

objectFactory.js)  - 기본 예제

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)  - 가내수공업이 아닌 양산의 형태로 객체를 생성, 관리할 수 있는 방법에 대한 필요성 인식하기 예제 

kim의 객체 내부의 요소(변수, 함수 등)가 늘어 나는 경우 lee... 와 같이 같은 취지의 객체들의 요소들 모두도 수정해야 하는 상황 발생

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())

-> 우리에겐 공장을 만들 수 있는 초 능력이 필요하다 

 

4-2. 이미 만들어져 있는 공장 견학 가기 (내장 코드)

objectFactory.js) - 이미 만들어져 있는 공장을 사용해 보기 : 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

실행 결과)

견학간 date 공장에서 만들어낸 출력물 확인

 

4-3. 직접 공장 만들기(시범/연습용) 

objectFactory.js) - 새로운 공장을 짓고 생산 결과 확인하기 

//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를 통해 객체를 생성하는 생성자의 역할 수행

실행 결과)

새로운 person 공장을 짓고 생산한 결과

 

4-4. 직접 공장 만들기(실전용 1) 

objectFactory.js) - 김 씨와 이 씨 객체에 적용하기 

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());

실행 결과)

새로 지은 person 공장을 통해 김씨와 이씨 객체를  '양산'해낸 결과 

 

4-5. 직접 공장 만들기(실전용 2) 

objectFactory.js) - 김 씨와 이 씨 객체에 조금 더 세련되게 적용하기 

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());

실행 결과)

새로 지은 person 공장을 통해 김씨와 이씨 객체를 조금 더 세련되게 '양산'해낸 결과 

 

 

 

 

아직 끝난 건 아니지만.. 이번 실습 epilogue,

음.. 객체를 생성하고 다루는 방식이.. java와 거의 같다.. 개인적으로는 디테일 측면에서는 더 유연? 한 거 같다.

태어날 때부터 객체였던 JAVA, 성장하면서 객체로 변모하고 있는 javascript.. 마치 현실 세계의 금수저와 흑수저로 비유될 수 있지 않을까 한다. JAVA로 시작해서.. 변화해가는 PHP와 javascript를 배우며 새삼, 'PHP와 javascript 같은 (tone and manner를 지닌) 사람이 되자'는 생각을 해본다..