JavaScript - 배열(2)

지금까지 배열의 요소값이나 구조를 변경하는 메서드를 알아봤습니다. 그럼 이렇게 저장된 요소값들을 빠르게 탐색해서 찾을때 도움을 주는 메서드를 알아보도록 하겠습니다.

indexOf(찾을려는 요소 값, 몇번 인덱스부터 탐색할지 인덱스 값)

메서드를 사용할때 인수를 넘겨주면 찾을려는 요소 값이 있다는 그 요소의 인덱스 값을 반환합니다. 만약 없다면 -1 을 반환 합니다.
두번째 매개변수 값은 생략 가능하며 생략한다면 0번 인덱스부터 탐색 합니다.

lastIndexOf

위의 indexOf 와 같은 기능을 합니다. 다른 점은 배열의 뒤에서부터 탐색을 시작한다는 점이 다릅니다.

includes(찾을려는 요소 값, 몇번 인덱스부터 탐색할지 인덱스 값)

메서드를 사용할때 인수를 넘겨주면 찾을려는 요소 값이 있다면 true를 반환해주고 없다면 false를 반환합니다. 두번째 매개변수 값은 생략 가능하며 생략한다면 0번 인덱스부터 탐색합니다.

위의 3개의 메서드들은 요소 값을 찾을때 완전 항등 연산자로 비교해서 ( ===) 찾습니다. 또 includes로는 요소 값이 NaN도 찾을수 있습니다. 원래 NaN은 완전 항등 연산자 비교에서 값이 같더라도 false를 반환 합니다.

find, findIndex (함수(요소값,인덱스,배열))

find 함수가 참을 반환하면 함수가 종료되고 그 요소값을 반환한다. 조건에 해당하는 요소가 없으면 undefined 가 반환된다. 객체로 구성된 배열을 다룰때 주로 사용한다. 객체로 구성된 배열 중 name 이 kane 인 객체를 찾는 코드를 보면

let arr = [
  {name : "kane", hobby : "soccer"},
  {name : "son", hobby : "baseball"},
  {name : "tom", hobby : "basketball"}
];

let searchKane = arr.find(function(item) {
  return item.name == "kane";
});

console.log(searchKane);
// {name : "kane", hobby : "soccer"} 출력

위와 같이 item 요소 값의 name 프로퍼티 값에 kane이 있어 true가 반환되면 item을 반환하고 만약 kane이 없다면 undefined가 반환되는 것을 확인할 수 있습니다. find 함수는 인덱스, 배열 매개변수를 잘 사용하지 않는다고 한다.
findIndex 함수는 find 함수와 같지만 다른점은 함수가 true 라면 item을 반환하는것이 아니라 그 item 의 인덱스 값이 반환됩니다.

filter(함수(요소,인덱스,배열)

filter 함수는 find 함수와 같이 함수에서 조건에 충족되어서 true를 반환하는 요소 반환하지만 조건에 충족되는 요소 값이 한개가 아닐때 사용하면 유용 합니다. filter 함수는 조건에 충족되는 요소를 만났을때 요소를 반환하면서 종료되는것이 아니라 조건에 충족되는 요소를 모두 찾아 배열에 저장하여 반환 합니다. 만약 조건에 충족되는 요소가 없다면 [] 를 반환합니다.
예를 들어 배열의 요소에서 짝수를 찾아 짝수들을 배열로 반환하는 코드를 작성해보면

let arr = [1,2,3,4,5,6,7,8,9,10];
let result = arr.filter(function(item) {
  return item%2 == 0;
});
console.log(result);
// [2,4,6,8,10]

위와 같이 코드를 작성하면 요소 값을 2로 나누었을때 0 인 요소값을 result 배열에 저장하여 반환해주기 때문에 짝수 요소로 구성된 배열을 얻을 수 있습니다.

map(함수(요소,인덱스,배열))

map 함수는 배열의 모든 요소를 대상으로 함수를 호출 합니다. 그리고 함수 호출 결과를 반환합니다.
각각의 요소에 "+id"를 붙이는 코드를 작성해보면

let arr = ["hello", "kane", "son"];
let result = arr.map(function(item) {
    return item+"+id";
});
console.log(result);
// ["hello+id", "kane+id", "son+id"];

위와 같이 코드를 작성하면 모든 요소에 "+id"를 붙여서 배열로 반환되는것을 확인할 수 있다.

sort(function)

sort 함수는 인자로 아무 함수도 넣어주지 않으면 기본적으로 모든 배열의 요소를 문자형으로 변환 후 사전편집 순으로 비교해 정렬됩니다.
만약 정렬 기준을 사용자가 원하는대로 바꾸기 위해서는 인자로 정렬 기준이 되는 함수를 전달해야 합니다.
이 정렬 기준을 나누는 함수에서는 들어오는 인수가 두개여야 하며 두 값을 비교해 반환값도 있어야 합니다.
sort 함수는 인자로 들어오는 함수의 반환 값을 기준으로 정렬하기 때문에 개발자는 정렬 함수를 만들어 반환값으로 sort 함수에 인수로 전달 해주면 됩니다.
오름차순을 기준으로 정렬함수에서 양수, 0 , 음수가 반환되면 됩니다.
코드로 보면

let arr = [3,6,2,1,8,4];
let result = arr.sort(function(a,b) {
  return a-b;
});

console.log(arr);
// [1, 2, 3, 4, 6, 8] 출력

위와 같이 a-b로 양수면 a가 b보다 크다는 뜻이고 0이면 a와 b가 같다는 뜻이고 음수면 a가 b보다 작다는 뜻 입니다. 그 결과의 인수를 sort 함수에 인수로 전달하면 배열을 오름차순으로 정렬하여 반환하는 코드 입니다.

아래의 코드와 같이 화살표 함수를 사용해서 더 간결하게 표현할 수 있습니다.

let result = arr.sort( (a,b) => a-b);