자바스크립트 배열 합치기 concat() 함수, 전개 연산자 지금 쓰자!

배열 합치기 방법 1 : concat() 함수

concat 메서드는 두 배열을 병합할 때 씁니다. 다음은 배열을 두 개 생성하고 병합하는 예시입니다.

let arr1 = ["I", "LOVE"]
let arr2 = ["JavsScript"]
let arr3 = arr1.concat(arr2); 
document.write(arr3) // 결과 ILOVEJavsScript

변수를 arr1, arr2를 생성하고 arr3는 arr1 배열과 arr2 배열을 병합해서 생성했습니다. arr3에는 두 배열이 병합되어 있고, arr1과 arr2는 변함없이 원래 배열을 유지하고 있습니다.

 

배열 합치기 방법 2 : 전개 연산자 spread operator

자바스크립트는 배열을 전개해서 함수의 매개변수로 전달해 주는 전개 연산자를 제공합니다. 전개 연산자는 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용합니다.

 

함수명(...배열명)

 

전개연산자를 사용해서 매개변수를 전달하고, 전달받은 매개변수를 단순하게 나머지 매개변수로 출력해보겠습니다.

let fruits = ["banana", "pear", "avocado"]

function fruit(...items) {
	document.write(items)
 }
 
 fruit(...fruits) // 결과 banana,pear,avocado

 

객체를 작성하고 전개연산자를 쓸 수 있다. 

let arr = [10,20,30]

let [a,b,c] = arr

document.write([a,b,c]) // 결과 [10,20,30]

let [a, ...rest] = arr

document.write([a]) // 결과 [10]
document.write([rest]) // 결과 [20,30]

// 객체에 전개 연산자 가능하다 
let idol = {
	name: "newJeans",
	number: 5, 
	girlGroup: true
}

let {name, ...restInfo} = idol

document.write([name]) // 결과 ['newJeans']
document.write(restInfo.number) // 결과 
document.write(restInfo.girlGroup) // 결과 true

 

 

배열에 쓰이는 더 많은 함수에 대해서 알고 싶으시면 다음 글을 읽어주세요.

 

2023.07.24 - [JavaScript] - JavaScript 배열 join, reverse, sort, push, pop, unshift, shift , slice , splice , filter , map , includes