JS) Class 문법 사용하기 (function 코드랑 비교)

요즘 코딩 애플 스앵님 만나고

기분이 좋아짐 ㅎㅎㅎ

이해가 쏙쏙됨.

 

---

 

게임 캐릭터를 만든다 치자

그러면 이렇게 노가다로 만들어 볼 수 있다.

       const nunu1 = {
            q : 'consume', //q 누르면 이 능력
            w : 'snowball' //w 누르면 이 능력
        }

       const garen2 = {
            q : 'strike',
            w : 'courage'
        }

근데 만약 캐릭터가 1000개 있으면?

일단 감당 안됨,,,,

어느 세월에....

 

---

 

그럴 때 쓰는 게 class인데

옛날에는 class가 아닌 function을 씀.

그냥 이해 쉽게 한글로 캐릭터라고 했는데

실무에서는 영어로 하면 됨.

 function character(ddong, ddongman){}

이런 식으로..ㅋㅋㅋㅋㅋㅋㅋ

 

        function 캐릭터(똥,똥맨){
            this.q = 똥; //캐릭터(this) 안에 q를 만들껀데 거기에 피라미터로 구멍(똥)을 뾱 뚫을꺼야
            this.w = 똥맨;
        }

        const nunu = new 캐릭터('consume','물총공격');
        const garen = new 캐릭터('strike','불을 뿜어라 얍');

 

이건 내가 여러 개 적용해보고 싶어서

콤마 찍어서 2개 만들었는데,

 

하나만 적용하고 싶을 땐

말 그대로 그냥 하나만 놔두면 된다.

이렇게 👇

function 캐릭터(똥){
            this.q = 똥; //캐릭터(this) 안에 q를 만들껀데 거기에 피라미터로 구멍(똥)을 뾱 뚫을꺼야
            this.w = 'snowball';
        }

        const nunu = new 캐릭터('consume');
        const garen = new 캐릭터('strike');

그럼 구멍만 바뀜

this.w는 안 바뀜

---

 

class는 function이랑 비슷한데

constructor 이게 들어감. 

 

 class 캐릭터 {
            constructor(똥,똥맨){
                this.q = 똥;
                this.w = 똥맨;
            }
        }

        const 똥1 = new 캐릭터("똥1으로","바꿀려고")

        const 똥2 = new 캐릭터("똥2으로","바꿀려고")

 

만약 이걸 터미널 창 말고 화면에 띄우고 싶으면

 

 class 캐릭터 {
            constructor(똥,똥맨){
                this.q = 똥;
                this.w = 똥맨;
            }
            show(){
                 document.write("똥: "+this.q+"<br>"+"똥2: "+this.w+"<br>");
             }
        }

        const 똥1 = new 캐릭터("똥1으로","바꿀려고")
        	똥1.show(); //화면에 띄워주는

        const 똥2 = new 캐릭터("똥2으로","바꿀려고")
        	똥2.show(); //화면에 띄워주는

 

 

코딩 애플 선생님 따봉.... 진짜 이해 바로 됨