[JavaScript] 배열 다루기 Step #4

오늘 드디어 JavaScript 배열 다루기의 마지막인 4번째 학습을 시작하도록 하겠습니다. 정말 JavaScript에서 많이 쓰는 기본 자료구조인 배열. 이번 공부를 통해 자유롭게 활용하고 싶은 개발을 하는데 있어 막힘이 없도록 JavaScript로 배열 다루는 방법의 마무리를 지어보겠습니다.

 

 

그럼 먼저 혹시 이전 블로그 Step #1, #2, #3을 보고 오시지 않으셨다면, 보고 오시는 걸 추천드리고자 아래 url 남겨드립니다.

 

 

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

[JavaScript] 배열 다루기 Step#1

 

 

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

[JavaScript] 배열 다루기 Step #2

 

 

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

[JavaScript] 배열 다루기 Step #3

 

 

 

JavaScript 배열 다루기 - Step 4

 

JavaScript 배열 다루기 API 리스트

 

이번에 다룰 JavaScript 배열 다루기 함수들은 아래에 굵은 글씨로 다시 표시하였습니다.

 

• 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 배열 다루기 API 소개

 

∏ shift() / unshift()

shift() 함수와 unshift() 함수는 딱 봐도 반대의 의미를 가진 함수라고 바로 알아보시겠나요? 맞습니다. shift() 함수는 배열의 맨 앞(첫번째) 요소를 제거하고 제거된 요소를 반환합니다. unshift() 함수는 배열의 맨 앞(첫번째)에 요소를 추가하고 추가된 새로운 배열의 길이를 반환하는 함수입니다.

 

 

제가 작성한 이전 배열 다루기 글을 보셨다면 push() 함수와 pop() 함수를 떠올리신다면 공부를 잘 따라오고 계신거라고 생각합니다. push() 함수와 pop 함수는 위 함수들과 정반대로 맨 뒤의 요소에 추가하고, 마지막 요소를 제거하는 함수였습니다. 다시 한번 반복 학습하며 shift() 함수와 unshift() 함수의 사용법을 알아보겠습니다.

 

 

array.shift()

---

array.unshift([...element])

 

 

두 사용법은 push() 함수와 pop() 함수의 사용법과 정말 동일합니다. shift() 함수는 맨 앞 요소를 제거하는 함수로 인자를 따로 입력하지 않으며, unshift() 함수는 맨 앞에 요소(들)를 추가하는 함수로 인자(들)를 입력받을 수 있습니다. 그럼 마지막으로 예제를 통해 사용법을 익혀보겠습니다.

 

 

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

console.log(array.unshift(-1, 0));    // 6

console.log(array.shift());           // -1

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

 

 

shift() 함수와 unshift() 함수의 사용 예제를 살펴보겠습니다. unshift() 함수를 통해 만들어진 array는 [-1, 0, 1, 2, 3, 4]가 될 것이며, 두번째 shift() 함수를 통해 제거된 첫번째 요소는 -1입니다. 그래서 마지막 array의 최종 모습은 [0, 1, 2, 3, 4]가 되는 모습을 확인하실 수 있습니다.

 

 

이처럼 shift() 함수와 unshift() 함수를 활용하여 배열의 맨 앞의 조작을 수행할 수 있습니다. 

 

 

 

 

∏ slice() ★

slice() 함수는 단어 뜻 "일부분"이라는 의미 그대로 배열의 일부분을 복사하여 새로운 배열을 반환합니다. 일부분을 복사한다는 의미가 애매할 수 있으므로 바로 사용법을 통해 확인해보겠습니다.

 

 

array.slice([begin[, end]])

 

 

slice() 함수는 첫번째로 begin 이라는 인자를 통해 일부분의 시작 Index를 입력받을 수 있으며, 두번째로 end 라는 인자를 통해 일부분의 끝 Index를 입력받을 수 있습니다. 이 때, 시작 Index는 포함하며, 끝 Index는 제외하고 배열의 일부분을 추출하게 됩니다.

 

 

이 때, 첫번째 인자가 입력되지 않으면, 0부터 끝까지 복사된 배열을 반환하며, 첫번째 인자가 배열의 길이보다 큰 경우는 빈 배열을 반환합니다. 또한, 두번째 인자가 생략된다면 첫번째로 입력된 인자부터 배열의 끝까지를 잘라낸 배열을 반환합니다. 

 

 

그리고 첫번째 인자와 두번째 인자가 음수로 입력되었을 경우에는 뒤에서부터의 Index 계산을 통해 위치를 지정할 수 있음을 참고하시기 바랍니다.

 

 

그럼 slice의 사용 예를 통해 기능을 알아보겠습니다.

 

 

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

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

console.log(array.slice(2, 4));   // Array [3, 4]

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

console.log(array.slice(7));      // Array []

console.log(array.slice(-2));     // Array [4, 5]

 

 

위처럼 다양하게 slice() 함수를 활용할 수 있으며, slice() 함수는 배열의 일부분을 잘라내어 복사하는 과정에서 정말 많이 활용되는 함수입니다. 

 

 

 

 

∏ some()

some() 함수는 배열 안의 어떤 요소라도 주어진 조건을 통과하는지 테스트하는 함수입니다. 말로 들어보면 정말 어려운 함수이지만, 배열의 모든 요소가 주어진 조건을 통과하는지 테스트하는 함수인 every() 함수와 대조적으로 활용할 수 있는 함수입니다. some() 함수와 every() 함수를 함께 알아보겠습니다. 그럼 some() 함수의 사용법부터 알아보겠습니다.

 

 

array.some(callback[, thisArg])

 

 

some() 함수는 callback 함수를 인자로 받습니다. every() 함수 역시 사용법은 동일합니다.

여기서 인자로 받는 callback 함수의 인자는 총 3개까지 올 수 있으며, 첫번째 인자는 currentValue로 배열을 순회하며 현재 처리할 요소, 두번재 인자는 index로 처리할 현재 요소의 인덱스, 마지막 인자는 배열 전체를 받을 수 있습니다.

 

 

말로만 들었을 때는 이해하기 쉽지 않을 것 같아 some() 함수와 every() 함수의 사용 예제로 이해를 돕도록 하겠습니다.

 

 

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

console.log(array.some((element) => element % 2 === 0));   // true

console.log(array.every((element) => element % 2 === 0));  // false

 

 

위의 사용 예제처럼 배열의 요소 중 callback 함수의 결과 값이 하나라도 true이면 true를 반환하는 함수가 some() 함수이며, 모든 요소가 callback 함수의 결과 값이 true여야 true를 반환하고, 하나라도 false의 결과라면 false를 반환하는 함수가 every() 함수입니다.

 

 

참고로 some() 함수를 호출한 배열이 빈 배열이라면 무조건 false를 반환합니다.

every() 함수는 호출한 배열이 빈 배열이라면 무조건 true를 반환하고요. 정말 신기한 함수들입니다.

 

 

 

 

∏ sort()

sort() 함수는 배열의 요소들을 정렬한 후 그 배열을 반환해주는 함수로, 정말 많이 활용되는 함수입니다. 하지만 중요하다는 표시인 별 표가 없는 것은 정말 익숙하고 어렵지 않게 활용하는 함수이기에 배열을 사용한다면 모르면 안되는 기본 중의 기본 함수라 생각하여 다 알고 있다는 생각에 별 표시를 하지 않은 점 참고하시기 바랍니다.

(제 마음속에서는 배열 다루기 함수 중 제일 고맙고 감사한 함수입니다.)

 

 

그럼 sort() 함수의 사용법에 대해 알아보겠습니다.

 

 

array.sort([compareFunction])

 

 

sort() 함수는 인자가 없을 수도 있으며, 들어올 수 있는 인자는 각 인자끼리의 우선 순위를 정하기 위한 비교 함수입니다. 

이 때, 인자가 들어오지 않은 sort() 함수는 요소를 문자열로 변환하고 유니 코드 순서로 문자열을 비교하여 정렬하게 됩니다. 즉, 숫자 배열에서 sort() 함수를 인자 없이 사용한다면 숫자 크기에 따른 정렬이 되지 않는다는 것을 명심하시면서, 예제를 통해 사용법 알아보겠습니다.

 

 

const strArray = ["banana", "apple", "tomato", "melon"];
const numArray = [3, 4, 5, 2, 1, 0];


console.log(strArray.sort());                 // Array ["apple", "banana", "melon", "tomato"]
console.log(numArray.sort((a, b) => a - b));  // Array [0, 1, 2, 3, 4, 5]

 

 

문자열 배열의 sort() 함수 사용 예제와 숫자 배열의 sort() 함수 사용 예제가 다른 것을 확인하실 수 있습니다.

먼저 문자열 배열의 sort() 함수는 알파벳 순서에 따라 정렬됨을 확인하실 수 있습니다.

그리고 숫자 배열의 sort() 함수는 숫자 사이의 비교 함수를 넣어 오름차순 정렬이 됨을 확인하실 수 있습니다. 이 때, 숫자 간 비교 함수에 대해 알아보겠습니다.

 

 

1. a, b에 대해서 결과가 음수인 경우: a가 b보다 앞에 있다.
2. a, b에 대해서 결과가 0일 경우: a와 b 간 위치 변경이 없다.
3. a, b에 대해서 결과가 양수인 경우: b가 a보다 앞에 있다.

 

 

위와 같은 두 인자(a, b)에 대한 결과에 따라 정렬 위치가 결정되기에 위 내용을 기반으로 비교 함수를 자유자재로 구현하실 수 있습니다.

 

 

마지막으로 sort() 함수는 삽입 정렬(Insertion sort)과 병합 정렬(Merge sort)를 결합하여 만든 Tim sort 알고리즘을 활용하여 최적의 시간복잡도는 O(N)이며, 평균과 최악 모두 O(N * logN)의 시간복잡도를 갖기에 sort() 함수를 활용하시는데 있어 참고하시기 바랍니다.

 

 

 

 

∏ splice() ★

splice() 함수는 slice() 함수와 유사하지만 splice의 의미인 "접착"의 뜻으로 자유자제로 삭제하거나 교체, 새로운 요소를 붙일 수 있는 함수입니다. 즉, splice() 함수는 배열의 기존 요소를 삭제하거나 교체, 추가하여 배열의 내용을 변경하는 함수입니다. 그럼 splice() 함수의 사용법을 알아보겠습니다.

 

 

 array.splice(start[, deleteCount[, item ...]])

 

 

위의 사용법처럼 splice() 함수는 최대 3가지 인자를 입력받을 수 있습니다. 첫번째 인자인 start는 배열에서 조작을 시작할 인덱스입니다. 두번째로 올 수 있는 인지인 deleteCount는 시작 인덱스로부터 제거할 요소의 개수를 뜻합니다. 마지막으로 여러 개의 인자를 입력받을 수 있는 item은 시작 인덱스 위치에 추가할 요소(들)입니다.

 

 

첫번째 인자가 배열의 길이보다 크다면 배열의 마지막 요소의 위치를 시작 인덱스로 설정하며, 음수인 경우는 맨 뒤에서부터의 위치를 시작 인덱스로 설정합니다. 그럼 splice()의 사용 예제로 사용법을 익혀보도록 하겠습니다.

 

 

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

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

array.splice(3, 0, 6, 7);
console.log(array);     // Array [1, 4, 5, 6, 7]

 

 

위의 사용 예제처럼 splice() 함수는 배열의 중간을 없애버릴 수도 있으며, 배열의 어느 위치에 요소를 추가할 수 있습니다.

 

 

 

 

JavaScript 배열 다루기를 마치며

이번 JavaScript 배열 다루기 4탄을 통해 JavaScript로 배열을 다루는데 있어 많이 활용되는 API들을 공부해보았습니다. 여기서 다루지 않은 함수들도 있지만, 제가 개인적으로 자주 활용했던 함수들에 대해 함수의 정의. 사용법부터 사용예제를 통해 함수의 기본을 정리하는 시간으로 저에게는 정말 유용했었습니다.

 

앞으로도 언어 활용의 기본에 있어 시간을 내어 꼭 한번씩 정리하는 습관을 가지려고 노력하겠습니다.

 

이 블로그에 들어오시는 분들도 주기적으로 놀러와 함께 더 좋은 개발자로 발전하기 위해 기본을 다지는 계기가 되었으면 하는 바람입니다.

 

그럼 이만 JavaScript 배열 다루기를 마치도록 하겠습니다.