전개 구문은 배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법입니다. 이를 통해 배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체를 생성할 수 있습니다. 전개 식이라고 표현하기도 합니다.
‘퍼지다, 펼치다’ 라는 의미의 spread 처럼, 배열이나 객체로 포장되어 있는 데이터를 가지런히 펼쳐놓는 이미지를 생각하시면 되겠습니다.
배열의 전개 구문은 대괄호([ ]) 안에서 세 개의 점(...)을 사용하여 배열을 확장합니다.
아래는 배열의 전개 구문을 사용한 예시입니다.
const 과일들 = ['사과', '파인애플', '수박'];
const 생선들 = ['조기', '갈치', '다금바리'];
const 합치면 = [...과일들, ...생선들];
console.log(합치면);
위 코드에서는 과일들과 생선들이라는 두 개의 배열을 선언하고, 전개 구문을 사용하여 두 배열을 펼친(spread) 합치면 배열을 생성합니다.
const 과일들 = ['사과', '파인애플', '수박'];
const 과일들2 = [...과일들];
과일들2.push('키위');
console.log(`${과일들2} & ${과일들}`);
위의 코드처럼 기존의 전개 구문을 이용하면 배열을 복사해 새로운 배열을 만들 수도 있습니다. 그리고 이렇게 생성된 배열은 기존의 객체 자료형처럼 참조를 공유하지 않고 완전히 별개인 새로운 값이 할당됩니다.
객체의 전개 구문은 배열과 마찬가지로 중괄호( { } ) 안에서 세 개의 점(...)을 사용하여 객체를 확장합니다.
아래는 객체의 전개 구문을 사용한 예시입니다.