[Javascript 개념] 7-1. 배열 메서드

배열?

여러개의 값을 순차적으로 담을 수 있는 비원시형 자료

배열은 많은 메서드를 포함하고 있는데, 이를 이용하면 깔끔한 프로그래밍을 할 수 있다.

---

1. 배열 요소 조작 메서드

1 - 1.  요소 추가 메서드

배열 메서드	설명
push	배열의 마지막에 요소를 추가
pop	배열의 마지막에 요소를 제거

 

1 - 2.   요소 제거 메서드

배열 메서드	설명
shift	배열의 맨 앞에 요소를 추가
unshift	배열의 맨 앞의 요소를 제거
slice	배열의 특정 부분을 제거

 

예시

아래 글에서 push, pop, shift, unshift의 자세한 설명을 볼 수 있습니다.

[JavaScript 개념] 7. 배열

 

---

1 - 3.   요소 결합 메서드

배열 메서드	설명
concat	두 개의 서로 다른 배열을 이어붙여 새로운 배열을 반환

 

예시

let arr1 = [1,2]
let arr2 = [3,4]

let concat = arr1.concat(arr2)

console.log(concat)//[1,2,3,4]

 

---

2.  배열 요소 순회 및 탐색 메서드

배열 메서드	설명
forEach	각 배열 요소에 대해 제공된 함수를 한 번씩 실행하는 메서드
includes	배열의 특정 요소가 있는지 확인하는 요소
indexOf	특정 요소의 인덱스(위치)를 찾아 반환하는 메서드
findIndex	모든 요소를 순회하면서, 콜백함수를 만족하는 첫번째 요소의 인덱스를 반환하는 메서드
find	모든 요소를 순회하면서, 콜백함수를 만족하는 첫번째 요소의 값 반환하는 메서드

 

2 - 1. forEach

forEach(function(element, idx, arr){},thisArg) 

 

🔎 매개변수

• element : 배열에서 처리 중인 현재요소
• index : 배열에서 처리 중인 현재 요소의 인덱스
• array : forEach()를 호출한 배열
• thisArg : 함수가 실행할 때 this값으로 사용하는 값 (필수요소 X)

예시

let arr = [1, 2, 3, 4, 5];

arr.forEach((elm, idx, array) => {
    console.log(`${idx} 번째 요소는 ${elm} 입니다.`);
    console.log(array)
});

//0번째 요소는 1입니다. [1,2,3,4,5]
//1번째 요소는 2입니다. [1,2,3,4,5]
//2번째 요소는 3입니다. [1,2,3,4,5]
//3번째 요소는 4입니다. [1,2,3,4,5]
//4번째 요소는 5입니다. [1,2,3,4,5]

 

2 - 2. includes()

includes(searchElement, fromIndex) 

→ 특정요소가 포함되어 있으면 true, 없으면 false를 반환한다.

 

🔎 매개변수

• searchElement : 찾고자 하는 값
• fromIndex : 검색을 시작할 인덱스 (필수요소 X)

예시

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
["1", "2", "3"].includes(3); // false

 

2 - 3. indexOf()

includes(searchElement, fromIndex) 

→ 특정요소를 찾으면 해당요소가 있는 첫번째 인덱스를 반환하고, 없으면 -1을 반환한다.

 

🔎 매개변수

• searchElement : 찾고자 하는 값
• fromIndex : 검색을 시작할 인덱스 (필수요소 X)

예시

const beasts = ["ant", "bison", "camel", "duck", "bison"];

console.log(beasts.indexOf("bison"));//1

//두번째 인덱스에서 시작했을 때
console.log(beasts.indexOf("bison", 2));//4

//요소가 없을 때
console.log(beasts.indexOf("giraffe"));-1

 

2 - 4. findIndex()

findIndex(function(element, idx, arr){},thisArg) 

→ 특정요소를 찾으면 해당요소가 있는 첫번째 인덱스를 반환하고, 없으면 -1을 반환한다

 

🔎 매개변수

• element : 배열에서 처리 중인 현재요소
• index : 배열에서 처리 중인 현재 요소의 인덱스
• array : forEach()를 호출한 배열
• thisArg : 함수가 실행할 때 this값으로 사용하는 값 (필수요소 X)

예시

let arr8 = [1,2,3]

let findInedx = arr8.findIndex((item)=>{
    if(item % 2 === 0) return true;
})

console.log(findInedx)//0

 

2 - 5. find()

find(function(element, idx, arr){},thisArg) 

→ 특정요소를 찾으면 해당요소가 있는 첫번째 요소를 반환하고, 없으면 undefined를 반환한다

 

🔎 매개변수

• element : 배열에서 처리 중인 현재요소
• index : 배열에서 처리 중인 현재 요소의 인덱스
• array : forEach()를 호출한 배열
• thisArg : 함수가 실행할 때 this값으로 사용하는 값 (필수요소 X)

예시

let arr8 = [1,2,3]

let find = arr8.find((item)=>{
    if(item % 2 === 0) return true;
})

console.log(findInedx)//1

---

🔎  indexOf와 findIndex의 차이점

indexOf는 얕은 비교(===)이기 때문에 원시타입이 아닌 배열의 값이 들어왔을 때 인덱스 값을 찾지 못한다

findIndex는 콜백함수를 통해 비교하므로 가능하다

 

예시

let objArr = [
    {name:"hee"},
    {name:"james"}
]
console.log(
    objArr.indexOf({name:"hee"})//-1(찾을 수 없음)
)
console.log(
    objArr.findIndex(
    (item)=>{item.name === "hee"} //0
    )
)

 

---

3.  배열 변형 메서드

배열 메서드	설명
filter	기존 배열에서 조건을 만족하는 요소를 필터링하여 새로운 배열로 반환
map	배열의 모든 요소를 순환하며, 콜백함수를 실행한 값을 새로운 배열로 반환
sort	배열을 사전순으로 정렬하는 메서드
toSorted	배열을 사전순으로 정렬해 새로운 배열로 반환
join	배열의 모든 요소를 하나의 문자열로 합쳐 반환

 

3- 1. filter()

filter(function(element, idx, arr){},thisArg) 

 

🔎 매개변수

• element : 배열에서 처리 중인 현재요소
• index : 배열에서 처리 중인 현재 요소의 인덱스
• array : forEach()를 호출한 배열
• thisArg : 함수가 실행할 때 this값으로 사용하는 값 (필수요소 X)

예시

const words = ["spray", "elite", "exuberant", "destruction", "present"];

const result = words.filter((word) => word.length > 6);

console.log(result);//Array ["exuberant", "destruction", "present"]

 

 

3- 2. map()

map(function(element, idx, arr){},thisArg) 

 

🔎 매개변수

• element : 배열에서 처리 중인 현재요소
• index : 배열에서 처리 중인 현재 요소의 인덱스
• array : forEach()를 호출한 배열
• thisArg : 함수가 실행할 때 this값으로 사용하는 값 (필수요소 X)

예시

const array1 = [1, 4, 9, 16];

const map1 = array1.map((x) => x * 2);

console.log(map1);//:[2, 8, 18, 32]

 

 

3- 3. sort()

arr.sort(function(){}) 

 

🔎 매개변수

• function : 정렬 순서를 정의하는 함수 생략할 경우 유니코드 값에 의해 정렬한다 (필수요소 X)

예시

const months = ["B", "C", "A", "D"];
months.sort();
console.log(months);//["A", "B", "C", "D"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);//[1, 100000, 21, 30, 4]

🚨숫자를 정렬할 때도 유니코드 순으로 정렬되기 때문에 순차적으로 정렬되지 않는다

🪄 sort()로 숫자 오름차순, 내림차순으로 정렬하는 법

→ sort안의 함수를 이용해 숫자를 정렬할 수 있다

a,b 두 요소를 전달하고 a-b가 음수인지 양수인지 0인지에 따라 정렬할 수 있다.

//오름차순
arr3.sort((a,b)=>{return a - b})
//내림차순
arr3.sort((a,b)=>{return b - a})

 

 

3- 4. toSorted()

toSorted(function(){}) 

🚨sort와 다르게 toSorted는 원본배열의 변형 없이 새로운 배열을 반환한다.

 

🔎 매개변수

• function : 정렬 순서를 정의하는 함수 생략할 경우 유니코드 값에 의해 정렬한다 (필수요소 X)

예시

const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

 

3- 5. join()

join(separator)

🚨sort와 다르게 toSorted는 원본배열의 변형 없이 새로운 배열을 반환한다.

 

🔎 매개변수

• separator : 배열을 결합할 때 각 요소를 구분하는 문자열. 생략시 쉼표로 구분 (필수요소 X)

예시

const elements = ["Fire", "Air", "Water"];

console.log(elements.join());//"Fire,Air,Water"

console.log(elements.join(""));//"FireAirWater"

console.log(elements.join("-"));//"Fire-Air-Water"

---

출처
효빈 - 한 방으로 끝내는 자바스크립트 강의
Mordern Javascript Tutorial - https://ko.javascript.info/
Mdn web Docs -https://developer.mozilla.org/ko/