[JavaScript] 전개 연산자(...) 이해하기, 예제코드

프로그래머스 문제를 풀던 중 for문을 통해 반복적으로 반환된 배열들을 하나의 배열로 합치는 작업이 필요했다.

구글링으로 전개 연산자 (...)를 알게 되어 예제코드와 함께 내용을 정리해본다.

 

 

 

전개 연산자(Spread Operator)

전개 연산자 (...)는 배열이나 객체의 요소를 개별로 분리하거나 함수의 인수로 전달하는 등 다양한 상황에서 사용할 수 있으며 기존 배열이나 객체를 변경하지 않고 새로운 배열이나 객체를 생성한다.

간결하고 가독성이 좋은 반면 매번 새로운 배열을 생성하므로 대량의 요소가 있는 경우 메모리 사용량이 늘어날 수 있다.

 

 

 

배열 요소 분리

function solution(my_string) {
    const myStr = [...my_string]
	return myStr
}
console.log(solution("helloWorld"))
//Output: ["h", "e", "l", "l", "o", "W", "o", "r", "l", "d"]

 

 

 

 

배열 연결

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

console.log([...arr1, ...arr2])
//Output: [1, 2, 3, 4, 5, 6]

 

Tip.

배열을 합치는 방법 중 concat() 함수도 활용할 수 있다.

concat() 함수도 마찬가지로 기존 배열을 변경하지 않고 새로운 배열을 반환한다.

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

console.log(arr1.concat(arr2))
//Output: [1, 2, 3, 4, 5, 6]

 

 

 

 

 

객체 연결

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2)
//Output: { a: 1, b: 2, c: 3 }

 

 

 

 

전개연산자를 활용한 프로그래머스 문제 풀이

• 문제⎜n개 간격의 원소들

• 정수 리스트 num_list와 정수 n이 주어질 때, num_list의 첫 번째 원소부터 마지막 원소까지 n개 간격으로 저장되어있는 원소들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요.

 

• 제한 사항

• 5 ≤ num_list의 길이 ≤ 20
• 1 ≤ num_list의 원소 ≤ 9
• 1 ≤ n ≤ 4

 

function solution(num_list, n) {
  let array = [];

  for (let i = 0; i < num_list.length; i += n) {
    array.push(...num_list.slice(i, i + 1));
  }

  return array;
}

console.log(solution([4, 2, 6, 1, 7, 6], 2))
//Output: [4, 6, 7]

 

• 풀이

• for문에서 i는 num_list 배열의 길이보다 작으면 계속 반복하며, 반복문이 한 번 실행될 때마다 i에 n을 더하여 n개 간격으로 배열을 탐색한다.
• slice(i, i + 1) 함수로 배열의 i 에서 시작하여 i + 1 전까지의 배열 [4], [6], [7]을 추출한다. 
  첫번째 반복에서 i는 0이므로 num_list.slice(0, 1)이 실행되어 [4]를 반환
  두번째 반복에서 i는 2이므로 num_list.slice(2, 3)이 실행되어 [6]를 반환
  세번째 반복에서 i는 4이므로 num_list.slice(4, 5)이 실행되어 [7]를 반환
• 추출한 각각의 배열을 전개연산자를 활용해 빈 배열에 추가한다.

 

• 느낀점

• 문제 풀이를 성공하고 다른 사람의 코드를 살펴보니 주로 filter() 함수를 활용하거나 for문으로 정석 코드를 작성했다. 나는 다른 사람들보다 풀이가 오래 걸렸다. 처음에는 n개 간격이 아닌 요소를 제외시키려고 splice() 함수를 활용하느라 1시간을 고민하다가 제외가 아닌 n개 간격의 요소를 추가하는 slice()를 사용하는게 더 쉬울 것 같아 시도를 바꿨다.
  풀이 시간이 오래 걸렸을지라도 새로운 접근 방식으로 문제 풀이에 성공하고 새로운 함수를 학습하고 시도할 수 있는 경험이었다.