자바스크립트 / 7

 

 

 

 

 

 

 

 

 

- 코드를 가져와도 충돌하지 않는것이 고립화다

 

- 기본 노출(export문으로 바깥에 나가는거) 객체에 대한 이름을 정의할때는 default를 붙인다

 

- import Box from './box.js'; BOX에 괄호 안붙이는거는 default만이 할수있다

 

 

- 같은 이름을 가진 것을 또 가져올때는 별칭을 붙이는데 그것을 표현하려면  as 를 붙이면 된다

 

 

 

- export로 http 웹사이트(외부)에 있는것을 가져올수도 있다

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export - JavaScript | MDN

 

import Box from "tt";

/** @type {HTMLCanvasElement} */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var boxes = [
    new Box(30,30,"yellow"),
    new Box(40+50+20,30,"green"),
    new Box(40+50+20+50+20,30,"blue"),
    new Box(40+50+20+50+20+50+20,30,"red"),
];

for(var box of boxes){
    box.draw(ctx); 
}

    <script type="importmap">
        {
            "imports":{
                "tt":"http://127.0.0.1:5500/ex3-es6/box.js"
            }
        }
    </script>

 

 

 

---

 

 

 

<class>

 

export default class Box{ //Box클래스 생성(밖에서도 쓰고 상호작용 하기 위해 export default를 붙여줌)

    constructor(x,y,color){ //생성자
        this.x = x || 0; 
        this.y = y || 0;
        this.color = color || "black";
    }

    draw(ctx){ 
        var x = this.x;
        var y = this.y;
        var color = this.color;

        ctx.fillStyle = color; 
        ctx.fillRect(x,y,50,50); 
    }

}

 

 

- 자스의 클래스는 클래스가 아닌(클래스는 그냥 키워드) 실질적으로는 funtion()이다

 

- 은닉하고싶은 정보에다가는 #을 붙여준다. 그리고 그것들을 사용할때도 #을 붙여줘야한다

 

 

export default class Box{ //Box클래스 생성(밖에서도 쓰고 상호작용 하기 위해 export default를 붙여줌)

    #x;
    #y;
    #color;

    constructor(x=0,y=0,color="black"){ //생성자
        this.x = x; 
        this.y = y;
        this.color = color;
    }

    draw(ctx){ 
        var x = this.x;
        var y = this.y;
        var color = this.color;

        ctx.fillStyle = color; 
        ctx.fillRect(x,y,50,50); 
    }

    getX(){
        return this.#x;
    }

    setX(x){
        this.#x = x;
    }
    //게터 세터도 만들수 있당

}

 

 

export default class Box{ //Box클래스 생성(밖에서도 쓰고 상호작용 하기 위해 export default를 붙여줌)

    #x;
    #y;
    #color;

    constructor(x=0,y=0,color="black"){ //생성자
        this.#x = x; 
        this.#y = y;
        this.#color = color;
    }

    draw(ctx){ 
        var x = this.#x;
        var y = this.#y;
        var color = this.#color;

        ctx.fillStyle = color; 
        ctx.fillRect(x,y,50,50); 
    }

    get x(){
        return this.#x;
    }

    set x(x){
        this.#x = x;
    }
    //게터 세터도 만들수 있당

    get y(){
        return this.#y;
    }

    set y(y){
        this.#y = y;
    }

    get color(){
        return this.#color;
    }

    set color(color){
        this.#color = color;
    }
    
    //console.log(boxes[0].x+=20); 치면 x가 20 이동한 결과가 나온다
    //boxes[0].x=30 > getter
    //boxes[0=.x > setter

}

 

 

- let은 지역화가 가능한 변수 / const는 값의 재할당이 불가능 let을 사용하도록 하자!

 

 

var nums = [2,3,4];
Box.print(nums[0],nums[1],nums[2]); //이렇게 손수 배열을 다 꺼냈던 예전 시절..
Box.print(...nums); //하지만 앞에 쩜 세개만 붙이면 배열을 다 꺼낼수 있다!!!!!

 

- ... : 스프레드 연산자(배열을 뿌려주세용~)

https://paperblock.tistory.com/62

[ES6] Spread Operator (스프레드 연산자)

 

 

 

 

- 하지만 ...은 다른 함수를 덮어씌워버리니 사용시 유의해야 한다

var nums = [2,3,4];
Box.print(nums[0],nums[1],nums[2]);
Box.print(...nums);
Box.print(nums);

   static print(a,b,c){
        console.log("인자 받은 a:"+a+",b:"+b+",c:"+c);
    }//출력:2

    static print(...nums){
        console.log("nums:"+nums);
        con
    }//2

    static print(nums){
        console.log("nums:"+nums);
    } //2,3,4

 

 

 

- ` ` 를 쓰면 문자열 내려쓰기를 할수 있게 된다

        let template = `안녕
                        안녕`;

 

 

 

- $는 값을 꽂아줄때 사용한다 printf 같은 기능

let template = `a:"${a}",b:"${b}"`;

 

 

 

- \n은 개행을 할때 사용하는데 만약, 그냥 문자열 자체로 \n을 출력하고 싶다면, String.raw를 앞에 붙이면 문자열 날것 그대로 출력이 된다

        let template = String.raw`a:"${a}",\nb:"${b}"`;
        console.log(template);
        //출력:a:"2,3,4",\nb:"undefined"

 

 

 

 

---

 

 

 

<json 객체 표현식>

 

 

- 변수명과 키값이 같으면 한번만 써도 된다

변수명이 곧 키값이 된다

 

 

 

return {a,b,c,total:function(){return this.a+this.b+this.c}};
//function을 빼고 쓰는걸 추천한다
return {a,b,c,total(){return this.a+this.b+this.c}};

 

 

 

- 키에 변수를 쓸수도 있다