[JS] spread

📢 spread

    const arr = [1,2,3];
    const newArr = [...arr, '추가!']
    console.log('newArr',newArr)

결과

🔠 기존 배열이 변경 되지 않고, 새로운 객체를 만들어 기존 객체을 불러와 확장 하는것

✨기본 문법

🔠 spread 연산자는 배열을 통째로 받아서 오는 경우에 사용한다.
...array의 형태로 적어준다!

//배열
let arr1 = [3, 5, 1];
console.log(Math.max(arr1)) //NaN
console.log(Math.max(...arr1)) //5

//문자열 
let str = "안녕하세요";
console.log([...str]) //['안', '녕', '하', '세', '요']

🔠 배열 복사본의 요소 === 기존 배열 요소 : false

let arr = [3, 5, 1];
let arrCopy = [...arr]
console.log(arr === arrCopy); // false

🔠 기존 배열을 수정해도 복사본은 영향 X

arr.push(4);
console.log(arr); // 1, 2, 3, 4
console.log(arrCopy); // 1, 2, 3

🔠 객체 복사본의 프로퍼티 === 기존 객체 프로퍼티 : true

let obj = { a: 1, b: 2, c: 3 };
let objCopy = { ...obj }; 
console.log(JSON.stringify(obj) === JSON.stringify(objCopy)); // true

🔠 obj === objCopy : false

console.log(obj === objCopy)  //참조가 다름

🔠 기존 객체를 수정해도 복사본은 영향 X

obj.d = 4;
console.log(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
console.log(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}