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 이하의 요소들만 가져오고 싶은 경우에 전개 연산자 활용이 용이하다.
'FrontEnd > Javascript' 카테고리의 다른 글
리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입에 대하여 (0) | 2024.01.31 |
---|---|
프로토타입에 대하여 (0) | 2024.01.29 |
호이스팅과 var과 let의 차이점 그리고 let, const의 블록레벨스코프 (0) | 2024.01.23 |
템플릿 리터럴: 백틱(``), 달러(${ }) 사용법 (0) | 2024.01.23 |
자스의 함수 (1) | 2024.01.23 |