Spread Operator - 전개 연산자

전개 연산자(Spread Operator)를 사용하면 배열의 모든 요소를 꺼내 개별 요소의 리스트로 변환해 줍니다. 

 

예시 코드와 함께 다양한 사용법을 정리해보도록 하겠습니다.

 

 

const fruits = ["apple", "banana", "melon", "cherry"];

const copiedFruits = [fruits];

console.log(fruits);

console.log(copiedFruits);

원본 배열을 복사한 배열을 담을 배열 안에 넣어주게 되면  위와 같은 결과가 나오게 됩니다.

 

즉 배열 안에 배열이 들어가 중첩 배열이 되는 것입니다.

 

 

const fruits = ["apple", "banana", "melon", "cherry"];

const copiedFruits = [...fruits];

console.log(fruits);

console.log(copiedFruits);

이때 전개 연산자를 사용하게 되면 원본 배열 안의 각 요소를 꺼내어 새로운 배열에 넣게 됩니다.

 

 

const fruits = ["apple", "banana", "melon", "cherry"];

const copiedFruits = [...fruits];

fruits.push("orange");

console.log(fruits);

console.log(copiedFruits);

전개 연산자를 사용하게 되면 원본 배열의 메모리 주소와 별개의 새로운 메모리 주소에 배열을 생성하게 되어

 

원본 배열의 값이 변하여도 영향을 받지 않게 됩니다.

 

 

 

전개 연산자는 위의 예시 코드처럼 복사본을 만들어 새로운 배열에 담는 것 외에도 다양한 것들을 할 수 있습니다.

 

예시 코드와 함께 정리하도록 해보겠습니다.

 

const nums = [9, 14, 2, 7, 21, 6];

const minNum = Math.min(...nums);

console.log(minNum); // 2 출력

위의 예시 코드는 배열 안의 숫자들 중 가장 작은 값을 반환하는 예시입니다.

 

만약 min() 메서드 안에 인자로 nums를 주게 되면, 즉 배열을 그대로 인자로 주게 되면 반환하는 값 NaN이 됩니다.

 

이때 전개 연산자를 사용하여 min() 메서드에 배열 안의 각 요소를 분리된 요소로 인자로 주게 되며

 

인자로 받은 값들 중 가장 작은 값을 반환하게 됩니다. 

 

 

 

전개 연산자를 사용하실 때 참고하실 점은 상단에서 설명한 것처럼 배열을 복사할 경우 원본 배열에 값을 추가하여도 복사본에는 영향을 미치지 않는다는 점입니다. 

 

참조값이 복사되는 것이 아닌 배열의 모든 요소를 복사하는 것이기 때문에 원본 배열의 값이 변해도 복사본은 영향을 받지 않는 것입니다. 

 

하지만 배열 안에 객체가 있는 경우 복사본에는 객체의 참조값을 가져오는 것이기 때문에 원본 배열 안의 객체의 값이 변하게 되면

 

복사본의 객체의 값도 변하게 됩니다.