Sread Operator / 펼침연산자 활용

Javascript

by 모모87 2021. 8. 24. 10:43

참조: 코딩애플

<!DOCTYPE html>
<html lang="kr">

<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>Document</title>
</head>

<body>
    <script>
        var arr = ['hello', 'world'];
        console.log(...arr);
        var 문자 = 'hello';
        console.log(...문자);

        var a = [1, 2, 3];
        var b = [4, 5];
        var c = [...a, ...b];
        console.log(...a);
        console.log(...b);
        console.log(c);

        var d = a; //그냥 등호로 복사하면 값을 공유함 주의
        console.log(d);

        var e = [...a]; //딥카피 (독립적으로 카피)
        console.log(e);

        var o1 = { a: 1, b: 2 };
        var o2 = { ...o1, c: 3, b: 4 };
        var o3 = { c: 3, b: 4, ...o1 }; //뒤에 있는게 이긴다.
        console.log(o2);
        console.log(o3);


        //Spread Operator 
        function 더하기(a, b, c) {
            console.log(a + b + c);
        }
        더하기(1, 2, 3);

        var arr3 = [10, 20, 30];
        더하기(arr3[0], arr3[1], arr3[2]);//방법1
        더하기.apply(undefined, arr3);//방법2
        더하기(...arr3);//방법3


        var person = {
            name: '나나',
            인사: function () {
                console.log(this.name + '안녕');
            }
        }
        var person2 = {
            name: '손흥민'
        }
        person.인사();
        person.인사.apply(person2, [1, 2]);
        person.인사.call(person2, 1, 2);
    </script>
</body>

</html>

'Javascript' 카테고리의 다른 글

함수 arguments 말고 rest 파라미터 (0)	2021.08.25
자바스크립트 함수 default parameter/arguments (0)	2021.08.24
자바스크립트가 문자 다루는 신기한 방법 (Template literals) (0)	2021.08.23
물리엔진 js Matter.js (0)	2021.08.13
jquery 모달 바깥영역 클릭시 닫기 (0)	2021.06.17