Aug 16, 2021 - Destructuring, set, weakset, map, weakmap, template

*8월16일

 

 

*Destructuring

let data2 = ["ki", "gogo", "jk", "grit"];

 

let [jisu,,,jung] = data2; //콤마 기준으로 배열 순서 매핑

console.log(jisu, jung); //ki, grit

 

 

let obj2 = {

    name : "ki",

    address : "seoul",

    age : 10

}

 

let {name, age} = obj2; //네이밍 기준으로 자동 매핑

console.log(name, age);

 

let {name:myName, age:myAge} = obj2; //새로운 이름으로 할당;

console.log(myName, myAge);

 

 

//JSON parsing

var news = [

    {

        "title" : "sbs",

        "imgurl" : "http://blabla.com",

        "newslist" : [

            "백신부족",

            "로또1등은?",

            "S&P500 사상최고치"

        ]

    },

    {

        "title" : "mbc",

        "imgurl" : "http://blabla22.com",

        "newslist" : [

            "언제까지 버티나",

            "올림픽중계사태",

            "Dow 사상최고치"

        ]

    }

];

 

//let [,mbc] = news;//들어가는 값을 기준으로, 0,1번 자리 값의 순서에 네이밍을하고 값을 받아옴

//console.log(mbc);

 

//let {title, imgurl} = mbc; //object 내의 key 값을 정확하게 연결해서 다시 빼옴; let[, mbc]와 연결

//console.log(title, imgurl);

 

let [, {title, imgurl}] = news; //내부 value까지 한번에 진행할 수도 있음;

//console.log(title, imgurl);

 

function getNewsList([, {newslist}]) { //파라미터에도 콤마로 구분해서 원하는 key값만 출력 가능

    console.log(newslist);

}

getNewsList(news);

 

 

<div>hellohellohello there</div>

 

    document.querySelector("div").addEventListener("click", function({target}) {

        console.log(target.tagName);

        console.log(target.innerText);

    });

 

-Array 변형 -> Set, WeakSet
-Object 변헝 -> Map, WeakMap

 

*Set & WeakSet

 

//Set : 중복없이 유일한 값을 저장 -> 이미 존재하는지 체크할 때 유용함

let mySet = new Set();

//console.log(toString.call(mySet));

 

mySet.add("ki");

mySet.add("park");

mySet.add("ki");

 

//console.log(mySet.has("ki")); //보유 여부 확인

 

mySet.forEach(function(v) {

    //console.log(v);

});

 

mySet.delete("park");

 

mySet.forEach(function(v) {

    //console.log(v);

});

 

//WeakSet : Set과 타입은 비슷하지만 객체 형태만 저장 가능

//참조를 가지고 있는 객체만 저장이 가능함; 중간에 값이 null 처리되면 나오지 않음;

//객체 형태를 중복없이 저장하려고 할 때 유용함!!

let arr2 = [1,2,3,4];

let arr3 = [5,6,7,8];

let obj3 = {arr2, arr3};

let ws = new WeakSet();

 

ws.add(arr2);

ws.add(arr3);

ws.add(obj3);

//ws.add(111); //invalid, number&string은 들어갈 수 없음

//ws.add("111"); //invalid

//ws.add(function(){});

arr2 = null;

 

//console.log(ws);

 

 

*Map & WeakMap

-WeakMap의 key는 항상 object형태

 

    //WeakMap 활용

    const wm = new WeakMap();

 

    function Area(height,width) {

        // this.height = height;

        // this.width = width;

        wm.set(this, {height, width}); //private 처리

        //console.log(this); //Area { }에 height와 width를 넣고 private 처리

    }

 

    Area.prototype.getArea = function() {

        const {height, width} = wm.get(this);

        return height * width;

    }

 

    let myarea = new Area(10, 20);

    console.log(myarea.getArea());

    console.log(myarea.height); //접근 불가

 

 

*destructuring & set을 활용한 중복없는 6자리 번호

const setting = {

    name : "lotttooooo",

    count : 6,

    maxNumber : 45

}

 

let lottoSet = new Set();

let {maxNumber} = setting;

let {count} = setting;

 

function getRandomNumber (maxNumber, count) {

 

    //랜덤한 유일한 값을 추출

    while(count > 0) {

        let num = Math.floor(Math.random() * 45 + 1);

 

        if(num <= maxNumber) {

            lottoSet.add(num);

            count--;

        }

    }

    return lottoSet;

}

 

let resultSet = new Set();

resultSet = getRandomNumber(maxNumber, count);

console.log(resultSet);

 

 

*DOM template

 

html

<div id="box"></div>

 

js

    const data = [{

            name: 'coffee-bean',

            order: true,

            items: ['americano', 'milk', 'green-tea']

        },

        {

            name: 'startbucks',

            order: false,

        },

        {

            name: 'mega-coffee',

            order: true,

            items: ['latte', 'mojito']

        }

    ]

 

    //Tagged template literals

    function fn(tags, name, items) {

        //console.log(tags);

        //console.log(name);

        //console.log(items);

        if (typeof items === "undefined") {

            items = "<span style='color:red'>주문 가능한 상품이 없습니다.</span>"

        }

 

        return (tags[0] + name + tags[1] + items + tags[2]); //태그 배열 형태로 담고, name과 item값 각각

    }

 

    data.forEach(function (v) {

        let template = fn `<h2>welcome ${v.name} !!</h2><h4>주문가능항목</h4><div>${v.items}</div>`;

        document.querySelector("#box").innerHTML += template;

    });