시베리안 허숙희의 자바스크립트 비기닝 17 (function을 class로...)

자바스크립트

by e7e 2023. 6. 14. 12:07

고비 사막을 건너야 할 때가 왔당!

고비사막이 넓다 하지만 결론은 끝없는 무한대가 아니공, 그 크기가 결정되어 있으니,

건너는 시간 차이와 추억의 색깔 차이만 조금 있을 뿐 누구라도 건널수 있겠당.

같이 수다라도 하면서 건널 사랑하는 친구가 있어 손 잡고 건너면 더 없이 좋지 않겠는강!

자바스크립트에서 function 키워드는 단순 함수를 만들 때도 사용되지만

객체지향언어에서 사용하는 키워드 class의 의미로도 사용될 수 있당, 물론 ES6 이상 버젼에서

class 키워드가 추가되어 class 키워드를 사용할 수도 있는데, 순수 자바스크립트(바닐라)에선

class 키워드를 사용하면 내부적으로 다시 function으로 바뀌어 실행되기 때문에 여기선 그냥

function 키워드를 사용하여 보장! (만약 typescript를 사용한다면 얘기가 쪼메 달라진당!)

요기서 자암깐 구분업시 마구 떠드는 class 와 object가 무언지

히미하고 간략하게 하지만 느낌만큼은 선명하게 개념 정리를 하고 가장

아래 그림은 한때 저에게 Heart Pounding 애착관계를 형성했던 클래시오브 클랜 이당!

예전엔 클래스와 객체를 붕어빵틀, 붕어빵으로 설명했는데, 이젠 오래되서 마니 식상하당!

위 그림에서 아래쪽(빨간 테두리) 유닛 메뉴를 class라 할 수 있겠당.

요걸(유닛메뉴) 도톰한 아기 손으로 클릭하면 요거이 new 키워드에 해당한다 하겠당.

클릭이 발생할 때 마다(new) 화면에 파란색으로 나타나는 것들이 객체라 하겠당!

참고로 영웅은 SingleTon 패턴이 적용되어 한마리밖에 못 맹근당! (느낌이 왕? 안왕? 불면증!)

이야기 꺼낸 김에 가끔 Object와 Instance의 차이를 구찌하게 묻는뎅

인간 vs 사람의 차이라 할 수 있겠당. 같은 의미지만 뉘앙스가 누앙 니앙 쪼메 다르당

미국 인간이란 말을 못 알아 듣진 않지만, 미국 사람이라 말해야 할 것 같은 강박에 시달린당

Instance(인스탄스)는 Object가 어디 class출신 Obejct인지를 표현 할 때 사용한당. (올케?)

아래 코드는 아이돌 그룹과 멤버를 class화 해서 블랙핑크와 그 멤버들을 한번 표현해 보았당.

코드 양이 너무 뚱뚱해지지 않게 메소드들은 다이어트해서 느낌 올 만큼만 넣었당.

this(이것-> 사물을 가리키는 대명사)의 의미가 머리속에 히미하지 않게 그려진다면 훌륭하당!

그렇지 않다면 자동차 공장 안에서 만들어지고 있는 자동차, 완성되어 나온 자동차를 생각해

보자, 공장 안에서 "this 내꺼" 했던 그거이 완성되어, 공장밖에서도 "this 내꺼" (더 어렵낭?)

레이저 포인터를 보는 사람과 레이저 포인터가 가리키는 곳을 보는 사람은 대화가 안된당!

암튼 this가 보이지 않는 사람들은 아래 틀을 가지고, 속성도 추가하고, 메소드도 요래조래

추가하고 console.log로 출력결과 누느로 쫓아, this에 은총을 얹어 느낌 받아 보장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // function 키워드를 class의 의미로 쓰깅 -> 그룹 class
    function Group(pName,pMembers){
        this.name = pName;          // 속성 추가
        this.members = pMembers;    // 속성 추가
        this.getName = function(){       // 메소드 추가
            return this.name;
        }

        // class의 의미로 쓸땐 아래 라인이 생략되어 있다 생각하장;
        // 곧 만든 객체를 내보낸다는 의미(semantics)
        return this;  
    }

    // 멤버 class
    function Member(pName,pAge,pGender,pRoles){
        this.name = pName;          // 속성 추가
        this.age = pAge;            // 속성 추가
        this.gender = pGender;     // 속성 추가
        this.roles = pRoles;        // 속성 추가
        this.getRoles = function(){       // 메소드 추가
            return this.roles;      // 메소드 추가
        }
        this.addRole = function(pRole){   // 메소드 추가
            this.roles.push(pRole);
        }

        return this;
    }

    // 멤버 생성
    const Roze = new Member("로제",26,"female",["메인보컬","리드댄서"]);
    const Jenni = new Member("제니",27,"female",["메인래퍼","리드보컬"]);
    const Risa = new Member("리사",26,"female",["메인댄서","리드래퍼","서브보컬"]);
    const Jisu = new Member("지수",28,"female",["리드보컬"]);

    const BlackPink = new Group("블랙핑크", [Roze,Jenni,Risa,Jisu]);
    
    console.log("체킁1: ", BlackPink);
    console.log("체킁2: ", BlackPink.members[0]);
    console.log("체킁3: ", BlackPink.members[0].getRoles());
    
</script>

다양한 리액션이 있었당!, "이상했는데 자고 나니 당연하게 받아들여졌어요",

"산책하고 오닝, 갑자기 느낌이 팍 왔어용", "당연한 거 아니예용", "알인듯 닭인듯 해요"

모두 완존 괘안탕, 숨은 그림은 찾아내어야 그때 제대로 보인당(시간은 이 순간 Helper당)

위 소스는 이제까지 배웠던 걸 적용하면 아래코드 처럼 고칠 수 있당!

단순히 코드가 더 길어지네용 말공, 장단점을 파악하고, 어떤 경우에 위에 꺼, 어떤 경우에

아래 방식을 쓰면 좋을 지 잠시라도 생각해 보는 시간을 가져 보장

모든 조건에서 포크레인이 삽을 이길 수 있는 건 아니당!(게임의 룰은 승패를 바꾼당!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    //로제
    const Roze = {
        name:"로제",
        age:26,
        gender:"female",
        roles: ["메인보컬","리드댄서"],
        getRoles:function(){
            return this.roles;
        }        
    }
    Roze.addRole = function(pRole){
        this.roles.push(pRole);
    }

    //제니
    const Jenni = {
        name:"제니",
        age:27,
        gender:"female",
        roles: ["메인래퍼","리드보컬"],
    }
    Jenni.getRoles = function(){
            return this.roles;
    }        
    Jenni.addRole = function(pRole){
        this.roles.push(pRole);
    }

    //리사
    const Risa = {
        name:"리사",
        age:26,
        gender:"female",
        roles:["메인댄서","리드래퍼","서브보컬"],
        getRoles:function(){
            return this.roles;
        },
        addRole: function(pRole){
            this.roles.push(pRole);
        }

    }

    //지수
    const Jisu = {};
    Jisu.name = "지수";
    Jisu.age = 28;
    Jisu.gender = "female";
    Jisu.roles = ["리드보컬"];
    Jisu.getRoles = function(){
        return this.roles;
    }
    Jisu.addRole = function(pRole){
        this.roles.push(pRole);
    }

    // 블랙핑크 그룹 생성
    const BlackPink = {
        name:"블랙핑크",
        members:[Roze,Jenni,Risa,Jisu],
        getName: function(){
            return this.name;
        }
    }
    
    console.log("체킁1: ", BlackPink);
    console.log("체킁2: ", BlackPink.members[0]);
    console.log("체킁3: ", BlackPink.members[0].getRoles());
    BlackPink.members[0].addRole("마스코트");
    console.log("체킁4: ", BlackPink.members[0].getRoles());
    
</script>

여기서 매우 맘을 불편하게 하는 과제

일부러 메소드에 화살표함수를 쓰지 않았당.

(거부하고 싶지만 this 사용에 제약사항이 있다는 말이 웬지 기억날 거시당)

메소드 부분에 화살표함수를 쓰면 어케 되는지? 해결책 까지도 한번 조사해 보장!

결론은 최종적으로 피로한 건 결국 스스로의 학습능력 / 학습속도란 사실 인식이당!

정말 불편하고 편하당 ==> 낸중에 this에 대해 따로 다루도록 하장!

발톱은 의지로 성장속도를 제어할 수 없당. 지켜보지 않으면 양말에 구멍을 낸당!

제어 할 수 없다고 외면 하면 안된당. 같이 가치 있게 가야 한당!

반복된 깍아 주고, 보살피미 익숙해 졌을 때 쯤,

그때 발톱은 그 존재의 진정한 의미를 꽤 다름의 깨달음으로 귀에 뜸 해 줄것이다.

발톱아 난 네가 발가락 그 자리에 항상 있기를 바래!~~

https://www.youtube.com/watch?v=u9TrCN9S9zE

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 19 (this 키워드) (0)	2023.06.15
시베리안 허숙희의 자바스크립트 비기닝 18 (구조 분해 등등..) (0)	2023.06.14
시베리안 허숙희의 자바스크립트 비기닝 16 (Built-In 객체) (2)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 15 (즉각실행함수) (0)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 14 (재귀호출 & 화살표함수) (4)	2023.06.13