배열 메서드 정리 한번에 해보자

메서드란? 

쉽게 말해 함수다. 다만 일반적인 함수와는 다르다. 자료형에 포함된 함수이기 때문에 이를 구분하기 위해 메서드라고 부른다.

메서드는 원본 배열이 수정되는 것과 수정되지 않는 것이 있기 때문에 구분해서 사용해야 한다. (주의하자!)

 

---

 

unshift() - 맨 앞에 요소를 추가

- unshift() 메서드는 배열의 맨 앞에 1개 이상의 요소를 추가할 수 있다

- 다시 배열을 찍어보면 추가된 요소를 확인할 수 있다 (원본 배열이 수정됨)

 

shift() - 맨 앞의 요소를 삭제

- 배열 안에서 0번째 인덱스에 오는 요소를 제거한다

- 따로 매개변수가 없다

- 제거 한 첫 번째 요소를 반환한다

- 빈 배열에서 사용할 경우 undefined를 반환한다

 

push() - 맨 뒤에 요소를 추가

- 배열의 맨 끝에 1개 이상의 요소를 추가한다

- 배열을 다시 찍어보면 추가된 것을 확인 가능하다 (원본 배열 수정됨)

 

pop() - 맨 뒤의 요소를 삭제

- 배열의 마지막 요소를 삭제한다

- 삭제된 요소를 반환한다 (삭제된 요소를 사용하려면 변수에 담아서 사용해야 함)

- 빈 배열에서 사용할 경우 undefined를 반환한다

- 원본 배열이 수정됨

 

 

splice() - 특정한 인덱스에 요소 넣기

- 구문

배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수, 배열에 추가할 요소)

- 첫 번째 매개변수 : 넣고 싶은 요소를 위치시키고자 하는 인덱스 번호를 입력. 배열의 길이보다 큰 값을 입력하면 맨 마지막 인덱스로 간주된다. 음수를 입력하면 배열의 맨 끝에서부터 요소를 센다.

- 두 번째 매개변수 : 첫 번째 매개변수의 인덱스로부터 제거할 요소의 개수다. 아무것도 지우고 싶지 않다면 0을 입력한다.

- 세 번째 매개변수 : 넣고 싶은 요소를 입력한다.

- weniv [1] 위치에 잘 들어간 모습

- 두 번째 매개변수에 0을 주었으므로 아무것도 삭제하지 않는다

- 음수 값을 주어 맨 뒤로 들어간 모습

- 두 번째 매개변수에 2를 주었으므로 'binky'가 삭제되었다

 

 

- 요소를 추가하지 않고 특정 요소를 삭제하는 것도 가능하다

- 1번 인덱스부터 2개가 지워진 모습

 

 

slice() - 배열의 일부를 잘라서 새로운 배열로 반환

- 원본을 변경하지 않고 복사본을 만든다 (새로운 배열로 반환)

- 첫 번째 매개변수는 잘라낼 배열의 시작점의 인덱스

- 두 번째 매개변수는 잘라낼 배열의 종료지점 인덱스, 해당 인덱스는 잘라낸 배열에 포함되지 않는다

- 두번째 매개변수를 생략 시 첫 번째 매개변수의 인덱스로부터 배열의 마지막 요소까지 자동으로 선택된다.

 

 

reverse() - 순서 거꾸로 뒤집기

- 배열 내 요소를 거꾸로 뒤집고, 변환된 배열을 반환한다

- 마지막 요소가 인덱스 0번으로 오게 된다

- 원본 배열을 변형시킨다

 

indexOf() - 요소의 인덱스 찾기

- 배열에서 찾고자 하는 요소를 검색할 수 있다

- 첫 번째 매개변수는 찾고자 하는 요소를 입력한다

- 두 번째 매개변수는 찾기 시작할 인덱스를 입력하며, 이는 생략 가능하다

- 찾고자 하는 요소가 없을 시 -1을 반환한다

 

 

isArray() - 입력받은 매개변수가 배열인지 확인할 때

- 입력받은 매개변수가 배열인지 아닌지 여부를 불리언 값으로 판단해 준다

- 배열이라면 true, 아니라면 false를 반환한다

 

join() - 요소들을 하나로 연결하기

- 배열 내 원소들을 하나의 값으로 만든다

- 만든 값의 자료형은 문자열이 된다

- 매개변수를 생략하면 쉼표로 나타낸다

- 빈 문자열을 넣으면 띄어쓰기 없이 다 붙여서 연결된다

- 요소 안에 null, undefined 가있을 경우 빈 문자열로 반환된다

 

 

fill() - 배열을 모두 똑같은 요소로 채우기

- 배열 안을 원하는 요소로 채울 수 있다

- 원본 배열이 바뀐다

- 입력 가능한 매개변수는 총 세 개

- 첫 번째는 넣고 싶은 값

- 두 번째 매개변수는 입력한 값을 채우기 시작할 인덱스 번호다

- 생략하면 자동으로 0이 할당된다

 

- 세 번째 매개변수는 인덱스의 종료지점이다

- 음수 값을 입력하면 배열 마지막 요소를 -1로 시작한다

- 위 같은 경우는 yeeed라는 요소를 [2] 번째부터 [-1]번까지 이므로 [2] 번째 요소가 바뀐 것을 확인할 수 있다

- 마찬가지로 생략 가능하며 생략 시 변수. length로 반환된다

 

flat() - 배열을 원하는 깊이로 펼치고 싶을 때

- 배열 안에 배열을 갖고 있을 때 이를 원하는 깊이로 펼칠 수 있다

- 매개변수 안에 기본값은 1이다

- Infinity를 넣으면 모든 배열을 평탄화해준다

 

includes() - 배열에 특정 요소가 포함되었는지 확인

- 배열 안에 특정 요소를 탐색한다

- 탐색하는 요소가 문자열이라면 대소문자를 구분한다

- 첫 번째 매개변수에는 탐색하고자 하는 요소를 입력한다

- 두 번째 매개변수는 탐색을 시작하고자 하는 인덱스를 입력한다. 생략 가능하며 값이 없는 경우 전체를 탐색한다

- 음수를 입력할 경우, 맨 뒤에서부터 세기 시작하고 배열의 길이보다 긴 값을 입력하면 false를 반환한다

 

 

find() - 하나의 요소라도 조건을 만족하는지 확인할 때

- 배열에서 특정 조건에 맞는 요소를 단 1개만 찾아 반환한다

- filter() 메서드와 문법이 비슷하지만, 단 하나의 요소만 찾는다는 점이 다르다

- 하나의 요소만 찾기 때문에 filter보다 성능이 우수하며, 어떠한 요소도 찾지 못한다면 undefined를 반환한다

 

 

filter() - 모든 요소가 조건을 만족하는지 확인할 때

- 특정 조건에 부합하는 값을 찾고 찾은 값들로 새로운 배열을 만든다

- 하나의 요소라도 부합하지 않으면 빈 배열을 반환한다

 

 

map() - 각각 요소에 함수를 호출

- 배열 안에 있는 요소를 오름차순으로 접근해 새로운 배열을 만든다

- 객채나 json 형태의 데이터를 탐색하는 용도로도 사용 가능하다

 

 

flatMap() - 함수를 실행과 동시 배열을 평탄화

- 앞서나 온 map() , flat()의 기능을 합친 것과 같다

- 다른 점은 최대 1만큼만 평탄화 할 수 있다는 점

 

forEach() - 각각의 요소를 순회하고 싶을 때

- 각 배열의 요소마다 콜백을 1회씩 실행

- 배열을 반환하지 않는다. 오직 순회만 한다

 

reduce() - 각 요소를 누적하며 실행

- 배열 내 각 요소에 reducer 함수를 실행

- 매개변수는 4개를 갖지만 Indes, array는 생략하는 경우가 많다

- 배열.reduce((누적값, 현재값, 인덱스, 요소 => {retrun 결과}, 초깃값) 의 형태

- 초깃값을 지정하지 않으면 배열의 첫번째 값이 초깃값으로 지정된다

 

 

Array.from() - 배열의 모양으로 다시 만들어 줄 때

- 배열, 문자열 등처럼 반복이 가능한 객체를 새로운 배열 객체로 만든다

- 여러 객체를 배열로 만들 때 사용한다

 

concat() - 배열을 합치거나, 새로운 요소를 추가

- 매개변수로 주어진 값을 기존 배열에 추가해 새로운 배열을 반환한다

- 기존 배열은 변화가 없다

 

 

sort() - 배열을 정렬할 때

- sort()는 유니코드 코드 포인트에 의해 요소를 오름차순으로 정렬한다. 이과정에서 요소를 문자열로 취급하게 된다

- 이를 사용하면 원본 배열이 재 정렬되므로 원본이 변경된다