[JavaScript] 배열 다루기 Step#1

이번에는 JavaScript로 배열 다루는 방법을 공부해보는 시간을 갖도록 하겠습니다. 배열(Array)는 코드를 구현함에 있어 정말 다방면으로 활용할 수 있는 기초 중에 기초인 자료구조입니다. 이 Array만 잘 다룰 수 있다면 어떤 개발이든 무섭지 않을 수 있다고 자부할 수 있습니다. 그럼 JavaScript로 배열 다루기 알아보겠습니다.

 

 

 

 

JavaScript로 배열 다루기 - Step 1

 

JavaScript MDN 사이트 소개

먼저 JavaScript의 Array에 깊게 공부해보고 싶은 분들은 아래 사이트에서 공부하셔도 됩니다.

아래 다룰 내용들은 제가 개발자로서 활용도가 높거나 사용 경험이 있는 함수들만 추려서 정리해드릴 예정이니, 아래 없거나 추가적으로 공부하고 싶은 분들은 아래 JavaScript MDN 사이트를 참고하시기 바랍니다.

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

 

 

 

JavaScript 배열 다루기 API 리스트

 

그럼 JavaScript 배열 다루기에서 배울 Array 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() ★

 

역시 Array는 중요한 자료구조인 만큼 개발자에게 필요한 API들이 정말 많습니다. 오늘은 이 API 중 굵게 표시된 concat(), fill(), filter(), find(), findIndex() 총 5가지 함수들만 공부해보려고 합니다. 다른 API들은 다음 번에 순차적으로 공부해볼 예정이니 조금만 기다려주시기 바랍니다.

 

 

 

 

배열 다루기 API 소개

 

○ concat()

 

concat() 함수는 두 배열을 연결하는 함수입니다. 영어 단어 중 concatenate(사슬 같이 잇다)라는 단어에서 concat(enate)로 축약해서 만들어진 함수입니다. 즉, 영어 단어 concatenate와 함께 이해한다면 의미 파악이 쉬울 것 같습니다. 그럼 concat() 함수의 사용법을 알아보겠습니다.

 

 

array = array1.concat(array2);

 

 

사용법은 위와 같이 concat() 함수를 실행한 array1 뒤에 array2를 붙인 배열 결과를 얻고자 할 때, 위와 같이 사용할 수 있습니다. 주요한 점은 array1인 기존 배열은 변경되지 않으며, concat() 함수를 통해 새로운 배열을 만들어 반환하는 점 입니다.

 

 

JavaScript에서는 위 concat() 함수를 활용하지 않고, 두 배열을 연결할 수 있습니다. 바로 사용 방법은 아래와 같습니다.

 

 

array1 = [...array1, ...array2];

concat() 함수와 의미적으로나 결과적으로도 모두 같기에, JavaScript를 활용하여 배열을 합칠 때는 더 많이 활용되는 방법이라고 할 수 있습니다.

 

간단한 예를 통해 최종 점검해보겠습니다.

 

const array1 = [1, 2, 3];
const array2 = [2, 4, 6];

console.log(array1.concat(array2));	// [1, 2, 3, 2, 4, 6];

console.log([...array1, ...array2]);	// [1, 2, 3, 2, 4, 6];

 

그럼 두 개 이상의 배열을 병합하기 위해서는 concat() 함수와 배열 열거형 operator(...) 모두 활용할 수 있는 점 공부 마무리하겠습니다.

 

 

 

 

○ fill()

 

fill() 함수는 입력하고자 하는 값으로 시작 인덱스부터 끝 인덱스 이전까지 채울 수 있습니다. 말로 풀어쓰니 정말 어렵고 이해가 되지 않을 것 같아 바로 fill() 함수의 사용 방법 알아보겠습니다.

 

 

array.fill(value[, startIndex[, endIndex]])

 

 

여기서 []는 생략되도 default  값으로 채워지는 파라미터입니다. 그러므로 사용법은 (value)만 있거나, (value, startIndex) 두 개만 있거나, (value, startIndex, endIndex) 세 개 모두 있거나 할 수 있습니다. 이 역시 너무 보기 힘들고 어떻게 사용해야하는지 모르겠다고 생각이 드는 이 시점에서 바로 예제로 확인해보겠습니다.

 

 

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(array.fill(0, 6, 8));	// [1, 2, 3, 4, 5, 6, 0, 0, 9, 10]

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

console.log(array.fill(0));		// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

 

 

모두 예제을 통해 이해가 쏙쏙 되시나요??

맨 처음에는 세 개의 파라미터를 모두 입력되어, 6번째 Index ~ 8번째 이전 Index(7)까지 value인 0으로 채워지는 것을 확인하실 수 있습니다. 두 번째로는 두 개의 파라미터를 입력하여 11의 값으로 5번째 Index부터 끝까지 채워지는 것을 확인하실 수 있습니다. 마지막으로 하나의 파라미터를 입력하여 0의 값으로 첫번째부터 마지막까지 모든 인덱스 값이 0으로 채워지는 것을 확인하였습니다. fill() 함수는 파라미터의 개수에 따라 다르게 동작하기에 사용하기 어려워보이나, 배열을 다룸에 있어 초기화, 값 변경 등 다양한 상황에서 편하게 활용되어지는 함수입니다.

그리고 중요한 한가지 fill() 함수는 원형을 변형한다는 가장 중요한 부분 짚고 넘어가겠습니다.

 

 

 

 

○ filter() ★★

 

filter() 함수는 처음으로 별 표가 있는 함수입니다. 별 표의 의미는 정말 많이 쓰고, 정말 중요하며, 개발 시 없어서는 안되는 JavaScript의 배열 다루기에서 중요한 함수입니다.

그럼 filter() 함수는 filter라는 영어 단어의 뜻과 같이 "거르다, 여과하다"의 의미로 어떤 조건에 따라 값을 거르는 함수입니다. 즉, 배열 내 값 중에서 어떤 조건에 해당하는 값을 추출하기 위해 활용되어지는 함수입니다.

활용법 알아보고 가겠습니다.

 

 

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

 

 

정말 활용법 어려운 것 같습니다. 저는 이걸로는 못 알아볼 것 같습니다. 그래서 제가 예제를 준비해보았습니다.

 

 

const scores = [0, 11, 80, 86, 90, 100, 50, 45];

// 85점이 넘는 점수만 추출하는 예제
console.log(scores.filter(score => score > 85));	// [86, 90, 100];

const result = scores.filter(function(score){
	return score > 85;
});

console.log(result);					// [86, 90, 100];

 

 

제가 가장 많이 사용하는 두가지 방법에 대해서 예제로 들어보았습니다.

먼저 활용된 예제는 간단하게 화살표 함수를 활용하여 callback 함수를 구현한 것이며, 두번째는 익명함수를 활용하여 callback 함수를 구현하였습니다. 또한 함수를 직접 선언 후 활용해도 무방합니다.

즉, filter() 함수에서 파라미터는 callback 함수로 어떤 조건에 의해 값이 추출될 수 있는 함수를 입력하면 됩니다. 정말 많이 업무에서 활용되기에, 자주 사용하다보면 익숙해질 수 있습니다.

 

 

또한, 배열 다루기에서의 많은 함수들이 이처럼 callback 함수를 활용한다는 점 참고하시기 바라며, 다음에는 보다 더 익숙해졌으면 하는 바람입니다.

 

 

 

 

○ find() / findIndex()

 

find() 함수와 findIndex() 함수는 유사하기에 한번에 같이 알아보도록 하겠습니다.

먼저 find() 함수는 단어 뜻 그대로 배열에서 어떤 조건에 해당하는 첫번째 값을 반환하는 함수입니다. 혹, 조건에 부합하는 요소가 없다면 undefined를 반환합니다.

findIndex() 함수는 단어 뜻과 같이 배열에서 어떤 조건에 해당하는 첫번째 인덱스를 반환하는 함수입니다. 이 함수에서는 조건에 부합하는 요소가 없다는 -1을 반환합니다.

 

 

두 함수는 어떤 조건에 해당하는 첫번째를 반환하지만, find()는 요소의 값을, findIndex()는 요소의 인덱스를 반환하는 차이점을 보이고 있습니다.

그럼 두 함수의 사용법 알아보겠습니다.

 

 

array.find(callback(element[, index[, array]])[, thisArg])
array.findIndex(callback(element[, index[, array]])[, thisArg])

 

 

find() 함수도, findIndex() 함수도 모두 callback 함수를 파라미터로 받고 있습니다. 사용법이 동일하다는 것이 공통점으로 알고 있으면 좋겠습니다. 사용법은 같으나, 반환하는 결과 값이 다르다는 것은 알아둔다면 정말 필요에 따라 쓰기 편할 것으로 보입니다.

마지막으로 간단한 예를 보고 마무리하도록 하겠습니다.

 

 

const array = [10, 5, 15, 30, 40, 20];

console.log(array.find(value => value > 10));		// 15

console.log(array.findIndex(value => value > 10));	// 2

 

 

사용한 함수 이름만 다르고 다른 것은 모두 같은데, 이렇게 결과 값이 다르니 신기하지 않으신가요? 

저는 개발을 하면서 이런 자세한 부분을 정확하게 알아가는 것이 정말 재미있고 몸 안에 있는 호기심을 불태우는 것 같습니다.

 

 

혹시 JavaScript로 배열 다루기를 많이 해보셨지만, 이렇게 상세하게 함수에 대해 공부해보지 않으셨다면 이 블로그를 보시면서 한번쯤 공부해보는 기회로 삼으셨으면 좋겠습니다.

또한, 이 JavaScript를 잘 사용할 줄 몰라 실제로 배열 다루기를 배우러 오셨다면, 맘껏 학습하고 가시기 바랍니다.