[JavaScript] 배열 다루기 Step #2

오늘은 JavaScript로 배열 다루기 2탄을 공부해보려고 합니다. 이번에는 flat(), forEach(), from, includes(), indexOf() / lastIndexOf() 함수를 공부할 예정입니다. 혹시 Step #1 편을 보고 오지 않으셨다면, 먼저 공부했던 내용들을 보기 위해 아래 링크해드리는 이전 블로그에서 공부하고 오시기를 추천드립니다.

 

 

 

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

[JavaScript] 배열 다루기 Step#1

 

 

 

 

JavaScript로 배열 다루기 - Step 2

 

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로 배열 다루기는 총 4단계를 거쳐 학습할 예정이며, 이번에는 2번째 단계입니다. 앞으로 두번이 더 남아있으니 이 글을 보시는 분들께서는 모두 힘내시어 JavaScript로 배열 다루기 마스터가 되시기 바랍니다.

 

 

배열 다루기 API 소개

 

○ flat()

flat() 함수는 수행된 배열의 요소들을 입력한 단계에 따라 낮춰 하나의 배열로 다시 만들어주는 함수 입니다. 설명이 정말 어렵습니다. 하지만 사용법을 번저 확인해보시고, 예제를 바로 보신다면 바로 이해가 가실거라 생각합니다.

 

 

array.flat([depth])

 

 

사용법은 정말 간단합니다. 깊이 있는 배열에서 사용되어야 의미가 있으며, 파라미터 depth에 따라 단계를 맞춰서 새로운 배열로 반환해주는 함수입니다. 여기서 depth의 기본 값은 1입니다. 그럼 이해를 돕기위해 바로 예제로 넘어가겠습니다.

 

 

const array1 = [1, 2, [3, 4]];
console.log(array1.flat());		// [1, 2, 3, 4]

const array2 = [1, 2, [3, [4]]];
console.log(array2.flat());		// [1, 2, 3, [4]]
console.log(array2.flat(2));		// [1, 2, 3, 4]
console.log(array2.flat(infinity));	// [1, 2, 3, 4]

const array3 = [1, 2, , 4, 5];
console.log(array3.flat());		// [1, 2, 4, 5]

예제로 활용된 array1과 array2에서 사용된 flat() 함수의 출력 값들을 보면 이해가 보다 잘 될 것이라 생각합니다. 깊숙히 있는 배열을 밖으로 꺼내어주는 함수라고 보시면 됩니다. 여러개의 배열을 배열로 감싸고 있을 때 일렬로 된 하나의 배열로 만드는 방법으로 정말 간단하게 활용할 수 있습니다.

또한, 마지막 예제처럼 빈 값이 들어가 있는 요소도 제거해주는 기능도 있다는 것을 알고 넘어가시면 더 좋을 것 같습니다.

 

 

 

 

○ forEach() ★

forEach() 함수는 정말 유용하고 필요하고 활용도 높은 함수입니다. 정말 간단히 설명하자면, forEach() 함수는 반복문을 대체하여 활용할 수 있는 함수로 배열을 순회하기 위해 활용합니다. 우선 사용법부터 알아보고 가겠습니다.

 

 

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

 

 

이전 글을 보고 오셨다면 위 사용법이 익숙할 것입니다. forEach() 함수는 파라미터로 callback 함수를 활용하고 있기 때문입니다. 그럼 예제로 어떻게 활용되고 동작은 어떻게 수행되는지 확인해보러 가겠습니다.

 

 

const array = ['a', 'b', 'c'];

array.forEach(element, index => console.log(index + ': ' + element));
// 0: 'a'
// 1: 'b'
// 2: 'c'

 

 

for문이나 while문을 활용하지 않고도 배열을 순회할 수 있다니 정말 편하지 않으신가요? 저는 한번 쓰기 시작하면서부터 정말 자주 사용하고 있습니다.

 

 

 

 

○ from()

from() 함수는 Array 변수와 사용되지 않고 실제 Array Object의 함수로 활용되어져 유사 배열 객체 or 반복가능한 객체(iterable object)를 배열로 생성하는 함수입니다. 저는 유사 배열 객체인 Set 변수와 Map 변수를 배열로 만드는데 주로 활용했었습니다. 그럼 간단하게 사용법 알아보겠습니다.

 

 

Array.from(arrayLike[, mapFn[, thisArg]])

 

 

즉, 유사 배열 및 반복가능한 객체가 arrayLike로 보입니다. mapFn은 처음보는데 간단히 설명하자면 각 배열에 적용할 함수라고 보시면 됩니다. 그럼 간단한 예를 통해서 알아보겠습니다.

 

 

const str = "Hello";
console.log(Array.from(str));			// ['H', 'e', 'l', 'l', 'o']

const map = new Map([[1, 'a'], [2, 'b']]);
console.log(Array.from(map));			// [[1, 'a'], [2, 'b']]

console.log(Array.from([1, 2, 3], x => x * 2));	// [2, 4, 6]

 

 

이렇게 총 3가지 예제를 들어보았습니다.

먼저 문자열을 Array.from() 함수를 통해 배열로 만들었으며, 두번째로는 Map을 배열로 만들었습니다. 즉, 문자열은 유사 배열 객체, Map은 반복 가능한 객체이기 때문에 Array.from() 함수의 인자로 입력될 수 있었고, 그 결과 배열로 만들 수 있었습니다. 마지막으로 배열과 함께 각 배열의 요소에 적용할 맵핑 함수를 같이 입력하면 맵핑 함수 내용이 적용된 새로운 배열이 생성됨을 확인할 수 있습니다.

이처럼 다양한 방법으로 배열을 생성할 수 있는 Array.from() 함수를 알아보았습니다.

 

 

 

 

○ includes() ★

includes() 함수는 배열 내 파라미터로 입력된 값을 포함하고 있으면 true를, 포함하고 있지 않다면 false를 반환하는 즉, 특정 요소의 포함여부를 알 수 있는 함수입니다. 배열 내 탐색을 하고자 할 때, 거의 무조건 활용되는 함수 입니다. 그럼 먼저 사용법부터 알아보겠습니다.

 

 

array.includes(valueToFind[, fromIndex])

 

 

사용법 확인하셨나요? 첫번째 인자는 배열 내에서 찾고자하는 값을 입력하고, 두번째로 생략가능한 인자는 찾고자하는 시작 인덱스 위치입니다. 없으면 0이 기본 값이랍니다. 그럼 예제를 통해 이해를 높혀보겠습니다.

 

 

const array = ['apple', 'banana', 'carrot'];

console.log(array.includes('apple'));	// true
console.log(array.includes('tomato'));	// false;

 

 

includes() 함수는 영어 단어의 뜻과 같이 포함하고 있는지 여부의 결과가 정말 확실하고 사용법도 간단합니다. 이처럼 문자열로 된 배열에서도 탐색이 가능하며, 숫자 등 배열의 요소로 갖을 수 있는 모든 객체들의 존재 유무를 확인할 수 있습니다.

 

 

 

 

○ indexOf() / lastIndexOf()

indexOf() / lastIndexOf()는 단어 뜻과 같이 입력된 인자의 인덱스 위치를 찾아주는 함수입니다. 반환되는 결과는 찾고자 하는 입력 값의 인덱스 위치가 되겠습니다. 하지만 찾지 못한다면 의미 없는 인덱스 값인 -1을 반환하게 되는 점 참고하시기 바랍니다. 그리고 두 함수의 가장 큰 차이점은 찾고자하는 시작 위치입니다. indexOf() 함수는 앞에서부터, lastIndexOf() 함수는 뒤에서부터 탐색을 시작하는 점입니다. 이 점 꼭 기억하도록 하면서, 사용법을 확인해보겠습니다.

 

 

array.indexOf(searchElement[, fromIndex])
array.lastIndexOf(searchElement[, fromIndex])

 

 

indexOf() 함수와 lastIndexOf() 함수의 사용법이 같습니다. 여기서 첫번째 인자는 searchElement로 찾고자하는 값이며, 두번재 생략가능한 인자는 찾고자하는 시작 인덱스 위치입니다. fromIndex가 생략되었을 경우는 0의 기본 값을 가지며 맨 처음부터 탐색합니다. 또한 fromIndex가 음수인 경우 마지막 인덱스부터 거꾸로 인덱스만큼 이동한 위치가 탐색의 시작점입니다. 이번 공부에서 마지막 예제로 indexOf() 함수와 lastIndexOf() 함수를 알아보겠습니다.

 

 

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

console.log(array.indexOf(3));		// 2
console.log(array.lastIndexOf(1)); 	// 5

console.log(array.indexOf(4, 2));	// 3
console.log(array.indexOf(4, 4));	// -1
console.log(array.indexOf(4, -3));	// 3

 

 

예제를 통해 indexOf() 함수와 lastIndexOf() 함수에 대해 이해할 수 있었습니다. indexOf()는 앞에서부터 찾고, lastIndexOf()는 뒤에서부터 찾으며, 두번째 인자로 인해 탐색하는 시작 인덱스가 바뀔 수 있는 점 너무 신기하고 재미있는 함수 공부였습니다.

 

 

 

 

이렇게 오늘도 JavaScript로 배열 다루기 Step2에서 5개의 함수를 알아보았습니다. 그럼 다음에도 계속 이어서 3번째, 4번째 포스팅으로 찾아뵙겠습니다. 여기까지 봐주셔서 감사합니다.