[JS] 배열의 추가/삭제 및 탐색/변형

항상 헷갈리는 배열의 메소드들을 이번에 정리 해 보려고 한다.

배열의 추가/삭제

Array.push()

배열의 마지막 요소 뒤에 추가

Array.pop()

배열의 마지막 요소 삭제

Array.unshift()

배열의 첫번째 요소 앞에 추가

Array.shift()

배열의 첫번째 요소 삭제

Array.splice()

배열의 지정 요소를 삭제, 해당 요소를 삭제하고 그 부분에 새로운 요소를 추가시키기도 가능.
fruits.splice(1,2) 는 fruits라는 배열의 index가 1인 요소부터 2개를 삭제시킨다는 뜻이다. (index가 1인요소 = 두번째 요소)

아래와 같이 삭제시키고 그 부분에 새로운 요소를 추가시킬 수도 있다.

Array.concat()

여러개의 배열을 병합

배열의 탐색 및 변환

Array.indexOf()

찾고싶은 배열 요소의 index값을 앞에서부터 탐색

fruits.indexOf("orange")는 orange라는 요소가 몇번째 index에 위치해 있는지를 반환한다.
여기서 fruits는 두개의 orange가 있는데, 두번째 요소 orange의 index 1를 반환하는 것을 볼 수 있다.
만약에 4번째 요소인 orange를 반환하고 싶다면, indexOf("orange",2)로 하면 된다. 아래 코드처럼 index가 2이후부터 탐색하기 때문에 4번째 요소 orange의 index값 3을 반환한다.

Array.lastIndexOf()

찾고싶은 배열 요소의 index값을 뒤에서부터 탐색

indexOf와 달리 뒤에서부터 탐색하기때문에 뒤에있는 orange의 index 3를 찾은 것을 볼 수 있다.
여기서 뒤에 2값을 넣어준다면 3번째 요소인 melon부터 뒤에서 앞으로 탐색하기 때문에 앞에있는 orange의 index값인 1을 반환한다.

Array.includes()

해당요소가 배열에 포함되어 있는지를 true, false값으로 반환한다.

Array.sort()

배열의 요소들을 정렬
sort메소드는 기본적으로 문자열로 정렬하기 때문에 숫자 배열을 정렬할 때는 콜백 함수를 사용하여 숫자로 변환한 뒤 비교해야 한다. 아래코드에서는 두 개의 인자 a와 b를 받아서 a - b를 반환한다. 이를 통해 sort() 함수는 배열의 요소들을 숫자로 변환한 뒤 비교하여 오름차순으로 정렬한다.

Array.reverse()

배열의 요소들을 반전 정렬
아래 코드는 문자열 배열과 숫자 배열을 오름차순으로 정렬한 뒤 reverse 메소드를 사용해 배열을 반전시켜 주었다. -> 내림차순 정렬이 됨.

Array.join()

배열을 문자열로 변환
join() 괄호 안에 문자를 넣어주면 요소 사이마다 정해둔 문자가 들어가게 된다. 아무것도 정해주지 않으면 기본적으로 ","이 들어가게 된다.

Array.split()

문자열을 배열로 변환 join과 마찬가지로 배열의 요소들을 나눌 기준 문자를 정한 뒤 그 문자를 기준으로 배열들을 나눈다. 아무것도 설정하지 않으면 기본적으로 ","을 기준으로 한다.