FrontEnd/Javascript

[JavaScript] 전개 연산자 ( Spread Operator )

NandaNanda 2024. 1. 25. 14:31

출처: https://blog.naver.com/zoz0312/221622159150

 

전개 연산자는 배열 또는 객체를 하나하나 넘기는 용도로 사용된다.

코드를 통하여 확인하자

const arr = [1,2,3]; let test_arr = [4,5,6]; let test_arr2 = [4,5,6]; test_arr.push(arr); console.log(test_arr); //[4, 5, 6, [1, 2, 3]] //ES6 test_arr2.push(...arr); console.log(test_arr2); //[4, 5, 6, 1, 2, 3]

push를 이용할 때 전개 연산자를 사용하지 않은 코드는 array 전체가 들어가 2차원 배열이 되었지만,

전개 연산자를 사용하게 되면 array 내부의 요소 하나하나가 삽입이 된다.

다음은 객체의 전개 연산자다.

const obj = {
    "Name":"AJu",
    "Git":"zoz0312"
}
const test_obj = {
    "test1":1,
    "test2":2
}

//ES6
const a_merge = { obj, test_obj }
const b_merge = { ...obj, ...test_obj }

console.log(a_merge);
/*
{
    obj: {
        "Name":"AJu",
        "Git":"zoz0312"
    },
    test_obj: {
        "test1":1,
        "test2":2
    }
}
*/

console.log(b_merge);
/*
{
    "Name":"AJu",
    "Git":"zoz0312",
    "test1":1,
    "test2":2
}
*/

[출처] [JavaScript] 전개 연산자 ( Spread Operator )|작성자 AJu

위처럼 Merge 진행 시, Object 1Depth 이하의 요소들만 가져오고 싶은 경우에 전개 연산자 활용이 용이하다.