자바스크립트 배열을 탐구 & 활용하기

배열

자바스크립트의 배열을 살펴보기 전에, 배열의 역할에 대해서 먼저 알아보겠습니다.

 

배열은 보통 일반적인 언어에서는 한 가지 타입을 묶어놓아서 관리하는 역할을 수행합니다.

Java를 예로 들자면

int[] numbers = {1, 2, 3, 4, 5};

위와 같이 int형인 데이터만 다루는 배열을 만들어 해당 배열을 다루는 역할을 하게되죠

이러한 데이터들이 모여서 반복이 가능한 상태를 이터러블(iterable) 하다(반복 가능하다) 라고 표현됩니다.

 

자바스크립트의 배열 

자 그러면 자바스크립트의 배열은 어떻게 다를까요?

그렇다면 먼저 자바스크립트의 특성을 생각해보아야 합니다. 🧐

 

자바스크립트는 스크립트 언어로서 쉽고 빠르게 개발하며, 느슨한 통제를 통해 타입도 직접 정하지 않는 동적 타입 언어입니다.

여기서 유추할 수 있는 것은 그렇다면 배열도 타입을 따로 정하지 않고 선언할 수 있다는 것을 알 수 있죠?

var arr = ["문자열", 123];

arr은 문자열과 숫자열을 한 번에 선언해도 됩니다. 저 두 가지 타입이 아니라도 언제든지 원하는 타입을 선언해서 다룰 수 있죠

 

추가로 자바스크립트의 배열은 객체의 한 종류입니다.❗️❗️❗️❗️

 

 

????????????????????????

 

arr 배열의 내부를 들여다보면,

var arr = {
   0: '문자열',
   1: 123
}

arr[0]
arr[1]

 

위처럼 객체 형태로 구현되어있고 해당 프로퍼티에 접근을 하는 방식입니다.

즉, 배열이란 것은 객체라는 것에서 파생된 것입니다.

 

하지만 객체와의 큰 차이점이 있습니다.

배열을 사용하면 해당 함수들을 통해 보다 효율적으로 데이터를 가공하기 편하다는 것입니다.

이 함수들은 고차함수(HoF)로서 함수 내부에 함수를 활용해 사용합니다.

 

그러면 이 함수들을 활용해 배열을 보다 쉽게 가공해봅시다.

 

배열 함수

여기서 사용되는 고차함수의 파라미터 값으로는 curr은 반복 되고 있는 현재 값, index는 반복되는 값의 인덱스 값을 나타냅니다.

 

forEach

for문과 동일한 역할을 합니다.

arr.forEach(function (curr, index) {
  console.log(curr);
  console.log(index);
});

arr 요소들을 하나씩 돌면서 특정 로직을 수행합니다.

 

map

배열의 요소들을 전체 다 반복하면서 특정 로직을 수행 후 새로운 배열을 만들어냅니다.

arr.map(function (curr, index) {
  return index;
})

arr 요소들의 인덱스 값만 따로 추려내어 새로운 배열로 리턴합니다.

map에서는 return을 사용해 꼭 보내주어야 합니다.

 

 

filter

배열의 요소들을 전체 반복하면서 특정 로직에 대해 해당되는 것만 필터링(걸러져서)되어 새로운 배열을 만들어냅니다.

  arr.filter(function (curr, index) {
    return typeof curr === "string";
  })

arr 요소들 중 문자열 타입만 추려내어 새로운 배열로 리턴합니다.

filter에서는 map과 마찬가지로 return을 사용해 꼭 보내주어야 합니다.

 

sort

배열의 요소들을 전체 반복하면서 내림, 오름차순으로 정렬합니다.

  sortArray.sort(function (now, after) {
    return now - after;
  })

now는 현재 값, after는 현재의 다음 값을 나타냅니다.

만약, 현재 값과 다음 값을 - 연산을 하였을 때 음수라면 현재 값이 더 작은 것을 뜻하니 오름차순으로 정렬되게 됩니다.

내림차순의 경우에는 값 위치를 바꾸어주면 됩니다.

 

some

배열의 요소를 반복하며 해당 값이 하나라도 존재하는 경우 true, 없을경우 false를 리턴합니다.

  arr.some(function (curr, index) {
    return curr === 123;
  })

현재 arr에는 123 이라는 값이 있으니 true가 리턴됩니다.

 

every

배열의 요소를 반복하며 전체가 이 값을 포함하고 있는지 확인합니다. 전부 존재하는 경우 true, 없을 경우 false를 리턴합니다.

  arr.every(function (curr, index) {
    return curr == 123;
  })

arr에는 123이라는 값이 하나 밖에 없으니 false가 리턴됩니다.

 

reduce

배열의 요소를 반복하며 누적값을 연산하여 리턴합니다. 

  arr.reduce(function (acc, curr, index, origin) {
    acc.push(index);
    return acc;
  }, [])

acc는 누적된 반환될 값, curr은 현재, index는 인덱스, origin은 기존 배열의 값을 나타냅니다.

현재는 reduce의 두 번째 파라미터로 배열을 선언하였기 때문에 배열로 리턴되지만 문자열, 숫자 등 여러 값을 초기값으로 선언할 수 있습니다.

 

curr, index가 반복되면서 acc 배열에 누적을 하게되고 최종적으로 return 하였을 때 arr의 인덱스 값들이 배열로 만들어질 것입니다.