[Javascript ES6] 기초 문법 5. Spread Operator

 

 

 

Spread Operator

 

배열이나 문자열, 오브젝트 앞에 ... 을 붙여, 배열의 괄호를 제거해 줄 수 있다. 주로 배열을 합치거나 복사할 때 사용한다. 중괄호, 대괄호, 소괄호 안에서만 사용할 수 있는 것이 큰 특징이다.

<script>
   
    let array = ['hello', 'world']
    // 1. Array에 붙이면 대괄호를 제거해준다.
    console.log('...aray',...array)

    let 문자 = '문자열입니다.'
    // 2. 문자에 붙이면 문자를 하나씩 분리해준다.
    console.log('...문자', ...문자)
    console.log('...문자[4]', ...문자[4])

    // 어레이를 합치거나 복사할 때 사용한다.
    // (Array Deep copy)
    let a = [1,2,3];
    let b = [4,5];

    let c = [...a, ...b];
    console.log('c',c)

</script>

배열과 문자열에 적용한 결과

 

오브젝트에 사용할 경우, 만일 값의 중복이 일어나면 '나중에 정해진 값이 저장' 된다.

<script>
   
    let o1 = {
        a:1,
        b:2
    }

    let o2 = {
        ...o1,
        c:3
    }

    let o3 = {...o2}

    let o4 = {a:4, ...o1}

    console.log('o2',o2)
    console.log('o3',o3)
    console.log('o4',o4)

</script>

o4에서 o1을 복사하기 전에 a에 4라는 값을 할당하였지만, o1이 나중에 삽입되었기 때문에 o1의 a:1이 a:4를 덮어버렸다.

 

함수의 파라미터 인자로 배열을 넣고 싶을 때도 사용할 수 있다.

<script>
   
    const 곱하기 = (a,b,c) => {
        console.log('a*b*c= ',a*b*c)
    }

    곱하기(2,3,4)

    let array = [2,3,4]
    곱하기(...array)

</script>