내일배움캠프 TIL (230306): javascript 배열 내 중복 요소 제거 (new Set(), Array.from())

"data": [
		{
			"workshop_id": 3,
			"workshop_title": "테스트용 워크샵 3",
			"workshop_category": "online",
			"workshop_desc": "워크샵에 대한 추가적인 설명 3",
			"workshop_thumb": "thumb2.jpeg",
			"workshop_min_member": 40,
			"workshop_max_member": 50,
			"workshop_total_time": 200,
			"workshop_price": 30000,
			"workshop_deletedAt": null,
			"genre_tag_name": "체육 실기",
			"orderCount": "8",
			"purpose_name": [
				"서류 작성",
				"서류 작성",
				"서류 작성",
				"서류 작성",
				"커뮤니케이션 증진",
				"커뮤니케이션 증진",
				"커뮤니케이션 증진",
				"커뮤니케이션 증진"
			]
		},

테이블을 join한 결과로 이와 같은 json 데이터를 얻었을 때 purpose_name 배열에는 중복 값이 포함된다.

자바스크립트로 중복 값을 제거한다면 Set() 객체와 Array.from() 메서드를 활용하면 된다. Set 객체는 ES6에서 새로 도입된 자료구조로 중복이 허용되지 않는 유일한 값들의 집합이다.
(sql 쿼리 중 DISTINCT 문으로도 중복 제거 가능)

return querybuilder.map((workshop) => ({
  ...workshop,
  purpose_name: Array.from(new Set(workshop.purpose_name.split(','))))
}));

new Set()으로 배열 안의 중복 값을 제거하면 Set 객체로 변환되기 때문에
Array.from()으로 다시 배열로 변경해줘야 한다.