자바스크립트 javascript array 찾기

javascript 배열 안에서 원하는 값 또는 요소를 찾는 방법에 대해 알아보겠습니다.
배열안의 값을 찾는 법은 다양한 방법으로 구현할 수 있습니다.
찾는 값의 index번호를 알고 배열에서 바로 값을 가져오는 경우도 있고 값만 가지고 찾는 방법도 있습니다.
여러상황에서 사용하는 메서드를 알아보고 상황에 맞게 알맞은 방법을 사용하세요.

array[index]

배열의 값의 index번호를 알고 있으면 index값을 적용하여 값을 가져올 수 있습니다.

let array = ['apple', 'melon', 'grape', 'kiwi'];
let found = array[1];
console.log(found);
// output: melon

found = array[3]
console.log(found);
// output: kiwi

array.indexOf

배열에서 지정된 값(요소)와 일치하는 첫 번째 인덱스 값을 반환합니다.
찾는 값이 존재하지 않으면 -1를 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.indexOf(searchElement[, fromIndex])

• searchElement: 배열에서 찾을 값
• fromIndex: 검색을 시작할 index값 지정

let array = ['apple', 'melon', 'grape', 'kiwi', 123, "123"];
let found = array.indexOf('kiwi');
console.log(found);
// output: 3

found = array.indexOf('kiw');
console.log(found);
// output: -1

found = array[array.indexOf('kiwi')];
console.log(found);
// output: kiwi

found = array.indexOf('123');
console.log(found);
// output: 5

found = array.indexOf(123);
console.log(found);
// output: 4

배열에서 찾고자 하는 값과 정확히 일치하는 값의 index 값을 반환합니다.

NOTE: indexOf 메서드는 변수의 타입까지 비교(===)하여 일치하는 요소를 찾습니다.
123, '123'의 값이 서로 다른 index를 반환합니다.

- array.find

배열에서 주어진 조건을 만족하는 첫 번째 값을 반환합니다.
만일 조건을 만족하지 못하면 undefined를 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.find(callback(element[, index[, array]]) [, thisArg])

• element: callback 함수에서 현재 처리하고 있는 배열의 값
• index: 현재 처리하고 있는 배열의 index
• array: 원본 array

let array = ['apple', 'melon', 'grape', 'kiwi'];
let found = array.find(element => element == 'grape');
console.log(found);
// output: grape

array = [5, 9, 13, 20, 55];
found = array.find(element => element > 10);
console.log(found);
// output: 13

find 메서드는 조건을 만족하는 첫번째 값(요소)를 반환합니다.

INFO: 첫 번째 요소만 반환하기 떄문에 모든 요소를 찾으려면 다른 방법으로 구현해야합니다.

- array.findIndex

배열에서 주어진 조건을 만족하는 첫 번째 index 값을 반환합니다.
만일 조건을 만족하지 못하면 -1을 반환합니다.
기존 배열은 변경하지 않습니다.

Syntax: arr.findIndex(callback(element[, index[, array]])[, thisArg])

• element: callback 함수에서 현재 처리하고 있는 배열의 값
• index: 현재 처리하고 있는 배열의 index
• array: 원본 array

let array = ['apple', 'melon', 'grape', 'kiwi'];
let found = array.findIndex(element => element == 'grape');
console.log(found);
// output: 2

array = [5, 9, 13, 20, 55];
found = array.findIndex(element => element > 10);
console.log(found);
// output: 2

findIndex 메서드는 조건을 만족하는 첫번째 index 값을 반환합니다.

INFO: find, findIndex 차이는 배열의 값을 반환하느냐 또는 배열의 index 값을 반환하느냐의 차이입니다.

- array.includes

배열에서 찾는 값(요소)를 포함하고 있는지 판단합니다.
찾고자 하는 값을 포함하고 있으면 true를 반환합니다.
찾고자 하는 값을 포함하고 있지 않으면 false를 반환합니다.

Syntax: arr.includes(valueToFind[, fromIndex])

• valueToFind: 배열에서 찾을 값
• fromIndex: 검색을 시작할 index값 지정

let array = ['apple', 'melon', 'grape', 'kiwi', 123];
let found = array.includes('grape');
console.log(found);
// output: true

found = array.includes('Grape');
console.log(found);
// output: false

found = array.includes('123');
console.log(found);
// output: false

includes 메서드는 찾고자 하는 값이 배열에 존재하는지에 대한 결과를 반환합니다.

NOTE: 찾고자 하는 값이 문자나 문자열일 경우 includes는 대소문자를 구분합니다.
indexOf와 마찬가지로 변수의 타입까지 비교(===)하여 값의 존재 여부를 반환합니다.

[javascript] - 자바스크립트 javascript 문자열 찾기

[javascript] - 자바스크립트 javascript 문자열 공백 제거 trim

[javascript] - 자바스크립트 javascript string 길이 length

[javascript] - 자바스크립트 javascript 문자열 합치기

[javascript] - 자바스크립트 javascript 문자열 바꾸기 치환

[javascript] - 자바스크립트 javascript 문자열 추출 / 자르기