[JavaScript] array (배열)

배열은 순서가 있는 데이터를 저장할 때 사용되는 자료구조 이다.

예를들면 html 요소 목록, 1등부터 3등까지 순위 등등 순서대로 데이터를 정렬할때 사용한다.

배열은 값이 들어오는 순서대로 정렬되며 특별한 객체이다.

그렇다면 객체를 사용하여 데이터를 정렬해도 될 수 있다고 생각할 수 있지만

배열은 우리가 알고있는 객체와는 조금 다른 특별한 객체이며, 일반적인 객체의 경우 데이터 목록을 만들 수 있지만 순서대로 자료를 저장할 수 없다.

일반 객체는 배열처럼 데이터를 순서대로 작성하여도 순서대로 저장과 출력이 되지 않는다.

위에서 말했듯이 배열은 특별한 객체이다. 배열 또한 객체와 같이 프로퍼티를 추가하거나 하는등의 동작을 할 수 있다.

하지만 배열은 순서가있는 자료들을 다루는데 특화되어있으므로 일반적인 객체와 같이 프로퍼티를 추가한다던가 할 경우 순서대로 일을 처리하는것에 최적화되어 동작할 수 있는 방식을 방해하게 되므로 배열이 가지고있는 최적화된 성능이 떨어지게 된다.

그러므로 프로퍼티를 추가하거나 임의의 키를 사용해야 한다면 배열보다는 일반 객체를 사용하는것이 좋다.

배열은 일반적으로 아래와 같은 두가지 문법을 사용한다.

let arr = [];

let arr = new Array();

let fruits = ["apple", "banana", "lemon"];

console.log(fruits[0]); // apple

console.log(fruits[1]); // banana

console.log(fruits[2]); // lemon

배열에는 문자열 이외에도 객체, 함수, boolean 그리고 자기 자신과 동일한 자료형인 배열 등등의 여러가지 자료형이 들어올 수 있다.

배열 안에 값을 출력하기 위해서는 인덱스 값을 사용하여야 한다.

일반적으로 사람들은 1번, 2번, 3번과 같이 숫자를 1부터 세지만

컴퓨터의 경우 0부터 숫자를 세기 때문에 첫번째 값을 가져오려면 위 예제와 같이 fruit[0] 을 작성해야 첫번째 값 apple을 출력할 수 있다.

배열에서 자주 사용되는 프로퍼티와 내장 메서드

length - 배열 안에 요소들의 갯수를 측정할 때 length를 사용한다. 정확히 말하면 갯수가 아니며 가장 큰 인덱스에 1을 더한 값이다. 만약 배열에 인덱스 22에만 데이터가 존재한다면 length 프로퍼티를 사용하는 경우 값으로 23을 반환한다. 이렇게 사용할거면 배열이 아닌 일반 객체를 사용하는것이 좋다.

push() - 배열 마지막에 요소를 추가한다.

pop() - 배열 마지막 요소를 제거하고 해당 요소를 반환한다.

shift() - 배열 제일 첫번째 요소를 제거한 후 제거한 요소를 반환한다. 뒤에있는 요소들이 한칸씩 앞으로 당겨진다. 2번째 요소가 1번째 요소가 된다.

unshift() - 배열 맽 앞에 요소를 추가한다. 추가한 요소의 갯수만큼 뒤로 밀린다.

push와 pop은 빠르게 동작하지만 shift와 unshift는 느리게 동작한다.

push와 pop의 경우 배열의 끝에 요소를 추가하거나 삭제한다.

push와 pop의 경우 추가하거나 제거한 요소를 제외한 나머지 요소들은 그대로 존재한다.

반면에

shift와 unshift는 배열의 맨 앞부분의 요소를 추가하거나 삭제한다.

shift와 unshift를 사용하여 배열의 맨 앞부분에 요소를 추가하거나 삭제할 경우 위에서 말했듯이 나머지 모든 요소들이 해당부분을 채우기 위해서 한칸씩 또는 여러 칸을 이동하여야 하는데 이때 메모리 관련 연산이 많아지게된다. 

짧은 배열의 경우 크게 차이를 못 느낄 수 있지만 배열에 요소가 많으면 그 많은 요소들을 모두 이동하여야하고 메모리가 연산을 해야하므로 push와 pop과 다르게 느리게 동작한다.

slice() - 배열의 요소 또는 문자열을 일부 잘라내어 잘라낸 요소들로 새로운 배열은 반환한다. 추가적으로 slice 메서드에 따로 인수를 넘기지 않고 array.slice()를 사용하면 기존의 배열과 동일한 요소를 가진 배열을 만들며 이렇게 만들어진 배열은 기존의 배열을 참조하지 않는 배열이다.

splice() - 배열 요소를 추가, 삭제, 교체 모두 가능한 메서드이며 삭제된 요소를 배열로 반환한다.

concat() - 배열의 요소를 이용해 새로운 배열을 만들거나 기존의 배열에 요소를 추가할 수 있다.

forEach() - 콜백 함수를 이용하여 배열의 각각의 요소들에대해 함수를 적용할 수 있게 해준다.

indexOf(), lastIndexOf() - 배열에서 요소를 찾으면 찾은 요소의 인덱스를 반환하고, 찾지 못했다면 -1을 반환한다.

includes() - 배열에서 찾는 요소가 있다면 true를 반환한다. 없다면 false를 반환한다.

find() - 객체로 이루어진 배열에서 조건에 부합하는 단 하나의 객체를 찾고자 할 때 사용한다. 조건에 부합하는 객체를 찾으면 해당 객체를 반환한다. 실무에서 많이 사용된다.

findindex() - find와 유사하나 객체를 반환하지 않고 해당 객체의 인덱스 값을 반환한다. 

filter() - 특정 조건에 부합하는 요소들을 담은 배열을 반환한다.

map() - 콜백함수를 통해 각각의 요소들에 콜백함수를 적용하고 그 결과를 배열로 반환한다.

reduce() - 배열의 요소를 차례대로 순회하면서 콜백함수를 호출하며, 순회되는 각각의 요소들은 다음 요소가 호출 될때 전달되고 차례대로 진행되어 합쳐져서 값을 반환한다.

sort() - 배열 요소들을 정렬한다. sort 메서드는 기본적으로 요소를 문자열로 취급되어 재정렬한다.

reverse() - 배열 요소들을 역순으로 정렬한다.

split() - 문자열에 구분자를 사용하여 해당 구분자를 기준으로 문자열을 나누고, 나누어진 문자열을 배열의 각각의 요소로 저장하여 배열을 반환한다.

join() - split과 반대로 배열의 각각의 요소들을 구분자를 이용하여 문자열로 반환한다.

reduce는 블로그에 다른부분에 더 자세히 공부하여 정리해 두었다.