data.push(...sectionData); 자바스크립트 ... 이게 뭐지?

언제 나왔을까요?

이런걸 누가 생각해 냈을때 사실 많이 놀랐습니다.

...   우리가 흔히 말줄임표라고 하지 않았던가?

JavaScript의 data.push(...sectionData); 문장에서 ... 연산자는 Spread 연산자입니다. Spread 연산자는 이터러블(iterable) 객체를 개별 요소로 확장하는 데 사용됩니다.

이 예제에서는 sectionData 배열의 모든 요소를 개별적으로 data 배열에 추가하는 것을 의미합니다. 이렇게 함으로써 sectionData 배열의 요소들이 data 배열에 바로 연결되어 하나의 배열로 합쳐집니다.

간단한 예제로 설명하겠습니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(...arr2);
console.log(arr1); // 결과: [1, 2, 3, 4, 5, 6]

위의 예제에서 arr1.push(...arr2); 문장을 사용하여 arr2 배열의 요소들을 arr1 배열에 추가했습니다. 결과적으로 arr1 배열은 [1, 2, 3, 4, 5, 6]로 확장되었습니다. 이와 같은 방식으로 data.push(...sectionData); 문장도 작동합니다.

// 정렬 함수 정의 (work_order 기준 오름차순)
function compareFunction(a, b) {
  return a["col2"] - b["col2"];
}

// 구간별 데이터 정렬
sectionData.sort(compareFunction);

// 정렬된 구간 데이터를 전체 데이터 배열에 추가
data.push(...sectionData);

위의 코드의 의미는?

위의 코드는 다음과 같은 작업을 수행합니다:
compareFunction 함수를 정의합니다. 이 함수는 두 객체를 매개변수로 받아서 col2 프로퍼티 값을 기준으로 오름차순 정렬을 수행합니다.sectionData 배열에 저장된 데이터를 compareFunction을 사용하여 정렬합니다.정렬된 sectionData 배열의 데이터를 전체 데이터 배열인 data에 추가합니다.
자세한 설명을 드리겠습니다:
compareFunction(a, b) 함수는 두 객체를 입력으로 받습니다. 이 함수의 목적은 두 객체의 col2 프로퍼티 값에 따라 어떤 객체가 먼저 와야 하는지 결정하는 것입니다. 함수 내에서 a["col2"] - b["col2"]를 반환하고 있습니다. 이렇게 되면 col2 값이 작은 객체가 먼저 정렬되어 오름차순 정렬이 이루어집니다. 만약 col2 값이 같다면, 두 객체의 순서는 변경되지 않을 수 있습니다.sectionData.sort(compareFunction)에서는 compareFunction을 사용하여 sectionData 배열을 정렬합니다. 이 과정에서 각 배열 요소가 compareFunction에 전달되어 col2 값을 기준으로 오름차순 정렬이 이루어집니다.data.push(...sectionData)에서는 정렬된 sectionData 배열의 요소들을 전체 데이터 배열인 data에 추가합니다. Spread 연산자(...)를 사용하여 sectionData 배열의 모든 요소를 개별적으로 data 배열에 추가하고 있습니다.
결과적으로, 위의 코드는 각 구간별 데이터를 work_order(col2)를 기준으로 오름차순 정렬하고 정렬된 데이터를 전체 데이터 배열에 추가하는 작업을 수행합니다.

 

참고하셔서 좋은 프로그램 작성하세요~