[JavaScript] 배열 다루기 Step #3

오늘은 오랜만에 JavaScript 배열 다루기 3탄으로 돌아왔습니다. JavaScript 배열을 빨리 마무리 하고 알고리즘 공부를 다시 시작해보려고 합니다. 그럼 다음 JavaScript 배열 관련 5가지 함수를 알아보겠습니다. 혹시 이전 블로그 보고 오시지 않으신 분들은 꼭 보고 오시기 바랍니다.

 

 

2022.06.17 - [컴공생의 Specification/JavaScript] - [JavaScript] 배열 다루기 Step#1

[JavaScript] 배열 다루기 Step#1

 

 

2022.06.21 - [컴공생의 Specification/JavaScript] - [JavaScript] 배열 다루기 Step #2

[JavaScript] 배열 다루기 Step #2

 

 

 

 

JavaScript로 배열 다루기 - Step 3

 

JavaScript 배열 다루기 API 리스트

 

이번에 다룰 배열 다루기 함수들은 위에서 나열한 것과 같이 아래에 굵은 글씨로 다시 표시해보았습니다.

 

• concat()
• fill()
• filter() ★★
• find()
• findIndex()
• flat()
• forEach()★
• from()
• includes() ★
• indexOf() / lastIndexOf() ★
• join() / toString()
• map() ★★
• pop() / push() ★
• reduce() ★★
• reverse()
• shift() / unshift()
• slice() ★
• some()
• sort()
• splice() ★

 

 

이번에 다룰 JavaScript 배열 함수 중에서 상당히 중요한 함수들이 많이 있습니다. 그럼 천천히 차근차근 하나하나씩 JavaScript 함수를 알아보도록 하겠습니다.

 

 

배열 다루기 API 소개

 

♠ join() / toString()

join() 함수와 toString() 함수는 모두 배열을 문자열로 변환해주는 함수입니다. 하지만 join()은 사용법에 따라 toString()을 포함하고 있기에, 더 큰 활용성을 가진 함수로 더 중요하게 공부해보겠습니다. 그럼 먼저 사용법부터 보시겠습니다.

 

 

array.join([seperator])

---

array.toString()

 

 

두 함수의 사용법은 정말 간단합니다.

먼저 join() 함수는 seperator라는 배열의 요소들을 문자열로 병합할 때 사용되는 구분자를 입력하거나, 입력하지 않을 수 있습니다. 이 때, 입력하지 않는다면 기본값으로 ','를 사용하여 문자열로 병합하게 됩니다. 기본값으로 문자열 만드는 것은 toString()의 결과와 같습니다. 즉, toString() 함수는 인자가 입력되지 않으며, 이 함수의 결과는 배열의 요소들을 문자열로 병합할 때, ','를 활용하여 만드는 함수입니다.

 

 

이에 배열을 문자열로 병합함에 있어서 join() 함수가 더 활용도가 높기에 주로 사용하실 것이라 생각하며, 예제로 더 자세하게 알아보겠습니다.

 

 

const array = ['H', 'E', 'L', 'L', 'O'];

console.log(array.join());	// "H,E,L,L,O"
console.log(array.join(''));	// "HELLO"
console.log(array.join('-'));	// "H-E-L-L-O"

console.log(array.toString());	// "H,E,L,L,O"

 

 

이렇게 배열의 요소들을 병합하여 문자열로 만드는데 있어서 쉽게 join() 함수와 toString()을 활용할 수 있습니다. 앞으로 JavaScript로 배열을 문자열로 만드는데 있어서 join() 함수와 toString() 함수를 활용해보시기 바랍니다.

 

 

 

 

♠ map() ★★

map() 함수는 정말 유용하고 배열 다루기에서 가장 많이 쓴다고 자부할 수 있는 활용도 Top 3 함수입니다.

이 map() 함수는 배열의 모든 요소를 순회하면서 주어진 함수의 결과를 모아 새로운 배열을 반환하는 함수입니다. 말로만 설명하면 이해가 어려울 수 있으니, 사용법을 먼저 알아보겠습니다.

 

 

array.map(callback(element[, index[, array]])[, thisArg])

 

 

이 사용법 이전 포스팅에서 보신 적 없으신가요? filter() 함수와 forEach() 함수 등 배열의 모든 요소를 순회하는 함수들과 사용법은 동일합니다. 즉, 인자로 callback 함수를 받으며, callback 함수의 첫번째 인자는 배열의 요소인 element, 두번째 인자는 배열의 index, 세번째 인자는 배열 그 자체입니다. 이 사용법을 통해 어떻게 map() 함수가 활용되는지 이제 예제를 통해 알아보겠습니다.

 

 

const array = [1, 2, 3, 4];

const array2 = array.map(x => x*2);

console.log(array2);	// Array [2, 4, 6, 8]

 

 

위 예제처럼 배열의 모든 요소들이 callback 함수를 통해 얻은 결과들을 모아 새로운 배열인 array2로 만들어주게 됩니다. 이처럼 현재 배열에서 어떤 규칙 및 과정을 통해 새로운 배열을 만들고자 할 때, map() 함수를 사용하게 되며 이와 같은 경우는 개발함에 있어서 정말 비일비재합니다. 그럼 이번 공부 과정으로 배열 다루기 map() 함수를 마치겠습니다.

 

 

 

 

♠ push() / pop() ★

이번 함수는 push() 함수와 pop() 함수입니다. 이 함수들은 정말 많이 활용되는 함수입니다. 

먼저 push() 함수는 배열 맨 뒤에 요소를 추가하는 함수이며, pop() 함수는 배열 맨 뒤의 요소를 꺼내는 함수입니다.

이 함수들 이 전에 보신적 없으신가요? JavaScript를 활용하여 Stack과 Queue를 만드는데 활용되는 정말 중요한 함수들입니다. 이전 포스팅을 못 보신 분들은 아래를 눌러 보고 오시기 바랍니다.

 

 

2022.03.18 - [컴공생의 Specification/JavaScript] - [JavaScript] Stack과 Queue 만들기

[JavaScript] Stack과 Queue 만들기

 

 

그럼 push() 함수와 pop() 함수의 사용법부터 알아보겠습니다.

 

 

array.push(element, ...)

---

array.pop()

 

 

위 두 함수의 사용법은 정말 간단합니다. push() 함수는 추가할 요소들을 인자로 넣으면 되고, pop() 함수는 인자가 없습니다. 그럼 다음으로 예제를 통해 사용법 확인해보겠습니다.

 

 

const array = [1, 2, 3, 4, 5];

const arrayLength = array.push(6);

console.log(array);          // Array [1, 2, 3, 4, 5, 6]
console.log(arrayLength);    // 6

console.log(array.pop());    // 6
console.log(array);          // Array [1, 2, 3, 4, 5]

 

 

push() 함수와 pop() 함수를 정리해보면 이렇습니다.

push() 함수는 배열 맨 뒤에 요소를 추가하는 함수로 요소가 추가된 배열의 길이를 반환합니다.

pop() 함수는 배열 맨 뒤의 요소를 제거하며 제거된 요소를 반환합니다.

그럼 이것으로 push() 함수와 pop() 함수 공부를 마치고 다음 함수를 배워보겠습니다.

 

 

 

 

♠ reduce() ★★

reduce() 함수는 제가 요즘 정말 유용하고 배열 함수 중 제일 많이 활용하는 함수입니다.

reduce() 함수는 정말 복잡하지만, 간단하게 설명하자면 배열의 각 요소를 순회하면서 리듀서(reducer) 함수를 실행하여, 하나의 결과값을 반환하는 함수입니다. 그럼 사용법부터 알아보겠습니다.

 

 

array.reduce(callback[, initialValue])

 

 

사용법은 정말 간단하게 되어있지만, 여기서 나와있는 callback 함수는 리듀서 함수이며, 이 리듀서 함수는 네 개의 인자를 가집니다. 또한 initialValue는 리듀스 함수의 초기값입니다.

 

 

리듀서 함수의 네 개 인자

1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (index)
4. 원본 배열 (src)

 

 

위와 같이 4개의 인자를 받지만 실제로 4개의 인자가 무엇인지 이해가 되지 않는 부분이 하나 있을 것입니다. 그것은 바로 첫번째 인자인 누산기(acc)일 것입니다. 나머지는 현재 값(cur)은 배열을 순회하며 선택된 현재 요소, 현재 인덱스(index)는 배열을 순회하며 선택된 현재 요소의 인덱스, 원본 배열(src)은 배열 전체를 인자로 가질 수 있습니다.

 

 

여기서 누산기(acc)는 배열을 순회하며 리듀서 함수가 실행되는데, 이 때, 실행되는 리듀서 함수에서 반환되는 값이라고 생각하시면 이해가 되실 거라 생각됩니다. 혹시 이해가 되지 않으신 분들은 다음의 reduce() 함수의 예제를 통해서 이해해보시기 바랍니다.

 

 

const array = [1, 2, 3, 4, 5];

const sumOfArray = array.reduce((prev, cur) => {
     return prev + cur;
}, 0)

console.log(sumOfArray)     // 15

 

 

위 예제에서 prev라는 reduce() 함수의 callback 첫번째 인자가 바로 누산기(acc)입니다. callback 함수 내에서 return 되는 prev+cur이 계속 prev로 누산되어 모든 배열을 순회하면서 반환된 결과가 reduce() 함수의 결과가 되는 것입니다.

 

 

즉, 위 예제는 array 배열 내에 있는 모든 요소의 합을 reduce() 함수를 통해 구하는 예제이며, 초기값은 0으로 선언되어있고 배열을 순회하며 누산된 결과인 prev 변수에 현재 값(cur)을 더하는 과정을 통해 모든 요소의 합계를 구하고 있습니다.

 

 

위처럼 배열을 순회하여 어떤 하나의 결과를 얻기 위해 reduce() 함수가 주로 활용되며, 일반 반복문과 같이 어떤 영향도 없이 결과를 만들 수 있기에 정말 편하게 배열 순회 결과를 얻기에 좋은 함수입니다. 그럼 JavaScript 배열 다루기에서 가장 중요하다고도 볼 수 있는 reduce() 함수를 알아보았습니다.

 

 

 

 

♠ reverse()

reverse() 함수는 배열의 순서를 반전하는 함수입니다. 말 그대로 완전 거꾸로 만드는 함수입니다.

그럼 사용법부터 알아보겠습니다.

 

 

array.reverse()

 

 

역시 reverse() 함수의 사용법 간단합니다. 인자가 없이 단독으로 사용할 수 있습니다. 그럼 예제를 통해 어떻게 활용되는지 확인해보겠습니다.

 

 

const array = [1, 2, 3, 4, 5];
console.log(array);         // Array [1, 2, 3, 4, 5]

const reverseArray = array.reverse();
console.log(reverseArray)   // Array [5, 4, 3, 2, 1]
console.log(array)          // Array [5, 4, 3, 2, 1]

 

 

reverse() 함수의 사용 예제를 통해서 알 수 있는 부분이 하나 더 있었습니다.

reverse() 함수는 배열의 순서를 반전하는 함수로, 반전된 배열 자체를 반환하고 있습니다. 또한 reverse() 함수를 사용한 원 배열 또한 순서 반전이 일어나 기존 배열에 영향을 미치는 것을 확인하실 수 있습니다.

 

 

 

 

배열 다루기 Step #3을 마치며

오늘은 join() / toString() 함수와 같이 배열을 문자열로 만드는 함수, map(), reduce() 함수와 같이 배열을 순회하면서 어떤 동작을 하는 함수, push() / pop() 함수와 같이 배열의 맨 마지막에 추가하고 맨 마지막을 제거하는 함수, 마지막으로 reverse() 함수와 같이 배열의 순서를 반전하는 함수 이렇게 총 7가지 함수를 알아보았습니다.

 

 

이처럼 유용하고 재미있는 JavaScript 배열 다루기 3탄을 공부해보았습니다. 그럼 다음에는 JavaScript 배열 다루기 4탄 마지막으로 찾아오겠습니다.