본문 바로가기
JavaScript

JavaScript(이벤트전파, iterable, generator, spread)

by code2772 2022. 11. 10.

[ 목차 ]

    728x90
    반응형
    ✔ 이벤트 전파(Event Propagation)
        - 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정
        - document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남

        캡처링 전파방식
        - 부모에서 자식으로 이벤트를 전파

        버블링 전파방식
        - 자식에서 부모로 이벤트를 전파

        ✔ 이벤트 전파를 막는 방법
        이벤트객체명.stopPropagation();
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>이벤트전파</title>
        <style>
            #divBox{width :100%; height : 300px; border: 3px solid red;}
            #pBox{width :70%; height : 150px; border: 3px solid blue;}
            #spanBox{border: 3px solid gold;}
        </style>
        <script>
            window.onload = function(){
            // 버블링 전파 방식
            // document.getElementById('divBox').addEventListener('click',clickDiv);
            // document.getElementById('pBox').addEventListener('click',clickP);
            // document.getElementById('spanBox').addEventListener('click',clickSpan);

            //캡처링 전파방식 - 부모부터 출력된다.
            document.getElementById('divBox').addEventListener('click',clickDiv, true);
            document.getElementById('pBox').addEventListener('click',clickP, true);
            document.getElementById('spanBox').addEventListener('click',clickSpan, true);
        }
        function clickDiv(e){
            e.stopPropagation();
            document.getElementById('text').innerHTML += "<span style ='color:red;'>div를 클릭했어요</span><br>";
        }
        function clickP(e){
           
            document.getElementById('text').innerHTML += "<span style ='color:blue;'>p를 클릭했어요</span><br>";
        }
        function clickSpan(e){
           
            document.getElementById('text').innerHTML += "<span style ='color:gold;'>span을 클릭했어요</span><br>";
        }
        </script>
    </head>
    <body>
        <h2>이벤트전파</h2>
        <div id="divBox">
            <p id="pBox">
                <span id="spanBox">
                    클릭
                </span>
            </p>
        </div>
        <p id="text"></p>
    </body>
    </html>

    ✔ Iterable
- 순화가 가능한 것(탐색이 가능)
    const arr = [1,2,3,4,5];
    console.log(arr.values());
    console.log(arr.entries());
    console.log(arr.keys());
    //iterable을 이용하여 values,entry,key를 사용할 수 있으며 next사용도 가능하다.
    const iterator = arr.values(); // 값이 들어 있는지 확인이 가능하다
    while(true){
        const item = iterator.next(); // 다음 줄 내용을 뽑을 경우 반복
        if(item.done) break;// 데이터가 없으면 break, 데이터가 있는지 확인
        console.log(item.value)
    }

    for(let item of arr){ // for문간에 of를 사용할 수 있는 것들은 거이 iterator한 것이다.
        console.log(item);
    }

    for(let item of arr.values()){
        console.log(item)
    }
    ✔ generator
- 순회가 가능한 것
- 좀 더 심플하게 사용할 수 있는 객체

function* generatorName(){
실행문
...
}
    function* multipleGenerator(){
        try{
            for(let i=0; i<10; i++){
                console.log(i);
                yield i**2; //next 가 나와야 실행
                //yield는 한번만 돌고 다음 next가 다시 와야 한번 더 돈다
               
            }
        }catch(error){// callback으로 사용
            console.log(error);
        }
    }

    const multiple = multipleGenerator();
    let next = multiple.next();
    console.log(next.value, next.done);
    // 끝이 아닐경우 next.done은 false가 나온다
    next = multiple.next();
    console.log(next.value, next.done);
    next = multiple.next();
    console.log(next.value, next.done);



    ✔ Spread 연산자, 전개구문
- 모든 iterable은 Spread가 될 수 있음
- 순회가능한 데이터는 펼쳐 질 수 있음
func(...iterable)
[..iterable]
{...obj}

function add(num1, num2, num3){
return num1 + num2 + num3
}

add(10,20,30); // 일반적인 값

const nums = [10, 20, 30];
add(...nums) = add(nums[0], nums[1], nums[2])


구조분해할당
const fruits = [ '🍎', '🍊','🍓', '🍌' ];
const [fruit1, fruit2, ...others] = fruits;

const point = [1,2];
const [x, y, z=0] = point;
​
     
     
     
    function add(num1, num2, num3){
        return num1 + num2 + num3;
    }
     
     
    function sum(num1,num2, ...nums){
        console.log(nums); //[ 3, 2, 5, 6, 7 ]
        // 앞에 두개는 이미 다른곳에
    }
     
     
    const nums = [10,20,30];
    console.log(add(nums[0], nums[1], nums[2]))
    console.log(add(...nums))
     
     
    sum(1,2,3,2,5,6,7);
     
     
    //배열(concat)
    const fruits1 =['🍎', '🍊'];
    const fruits2 =['🍓', '🍌'];
     
     
    let arr = fruits1.concat(fruits2);
    console.log(arr);
    arr = [...fruits1,...fruits2];
    console.log(arr);
     
     
    // fruits1과 fruits2  사이에 😈를 넣어보자
    arr = [...fruits1, '😈' ,...fruits2];
    console.log(arr);
     
     
    // 객체(object)
    const apple = {name :'김사과', age:20, address: {si : 'seoul'} };
    console.log(apple);
    // apple.job = '프로그래머';
    const apple_update ={...apple, job : '프로그래머'};
    console.log(apple_update);
     
     
    console.log('--------------------');
     
    // 구조분해
    const fruits = [ '🍎', '🍊','🍓', '🍌' ];
    const [fruit1, fruit2, ...others] = fruits;
    console.log(fruit1)// 🍎
    console.log(fruit2)// 🍊
    console.log(others)// [ '🍓', '🍌' ] 남은 나머지는 배열로 저장된다.

     

    const point = [1,2];
    const [x,y,z=0] = point;
    console.log(x) // 1
    console.log(y) // 2
    console.log(z) // 0 -undefined가 나오는게 싫어서 z=0을 초기 선언

     

    function sendEmoji(){
        return [ '🍎', '🍊','🍓', '🍌' ];
    }
     
    const [berry,apple2,banana,orange] = sendEmoji();
     
    console.log(berry)  //🍎
    console.log(apple2) //🍊
    console.log(banana) //🍓
    console.log(orange) //🍌
     
    console.log('--------------------');

     

    console.log(apple_update);
     
    // function display(apple){
    //     console.log('이름', apple.name)
    //     console.log('나이', apple.age)
    //     console.log('직업', apple.job)
    // }

     

    function display({name, age, job}){
        console.log('이름', name)
        console.log('나이', age)
        console.log('직업', job)
    }
     
    display(apple_update);
     
    const {name, age, pet='루시', job: hobby} = apple_update;
    console.log(name);
    console.log(age);
    console.log(pet);
    console.log(hobby);

    문제
const component = {
name : 'Button',
style : {
size :20,
color : 'black'
}
};

function changeColor(){
console.log(color);
}

changeColor(component)'​


    const component = {
        name : 'Button',
        style : {
            size :20,
            color : 'black'
        }
    };
    // 두 가지 방법

    function changeColor({style : {color}}){
        console.log(color);
    }


    // function changeColor(component){
    //     console.log(component.style.color);
    // }

    changeColor(component)





    반응형
    저작자표시 비영리 변경금지

    'JavaScript' 카테고리의 다른 글

    JavaScript(주석, 예외처리, 모듈, 가위바위보/ 퀴즈 문제)  (0) 2022.11.14
    JavaScript(set, map, operator)  (0) 2022.11.10
    JavaScript(이벤트 타입/리스너/객체)  (0) 2022.11.10
    JavaScript (class, extends, wrapper)  (0) 2022.11.09
    JavaScript - function, object 예제  (0) 2022.11.09

    관련글

    티스토리툴바