[자바스크립트] javascript find() 사용하기
자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수!
배열 요소 중, 어떠한 조건에 맞는 첫번째 요소만 골라내고 싶다면 가장 알맞은 함수!
[사용법]
//화살표 함수 표기법
array.find((element, index, array) => { ... });
//콜백함수로 호출하는 법
array.find(callbackFn, thisArg);
//익명함수로 표기법
array.find(function(element, index, array) {
}, thisArg);
[간단설명]
array.find() 는 배열을 순환하면서
콜백함수의 조건에 만족하는 첫번째 배열요소를 반환한다.
만약 조건에 만족하는 요소가 없다면, undefined 를 return!
[특징]
- 배열을 순환하면서 조건에 맞는 요소를 찾는 순간, 순환을 멈추고 즉시 값을 반환한다.
- 특정 index 에 값이 없거나, delete 됬어도 콜백함수 조건에 맞는지 확인한다.
- find() 자체는 원본배열을 변형시키지 않는다(callback함수에서 변형시킬수는 있어도)
- find() 첫 호출 당시 값이 존재했고, 콜백함수 처리 중에 값이 변경된 경우, 변경된 값으로 검사한다. (앞의 index에서 실행된 콜백함수가 이후 index의 값을 변경시킨 경우)
[주의]
배열요소 중,
- 어떤 값의 index 를 찾고싶은 경우, indexOf() 를 사용하는게 낫다.
- 어떤 값의 존재유무를 알고싶은 경우, includes() 를 사용하는게 낫다.
- 콜백함수 조건에 맞는 요소가 있는지/없는지 알고싶은 경우, some() 을 사용하는게 낫다.
파라미터(parameter) :
callback함수 :
배열의 모든 요소가 거쳐갈 함수.
element :
(순환 중) 현재 처리중인 요소 그 자체
index (optional) :
(순환 중) 현재 처리중인 요소의 index
array (optional) :
find() 가 실행되고 있는 원본배열
thisArg (optional) :
callback 함수가 실행중일 때 this로 사용될 값
[예제1]
var friends = [
{name: 'Son', age: 30},
{name: 'Kane', age: 29},
{name: 'Lucas', age: 30}
];
//화살표 함수
var result = friends.find( ({ name }) => name == 'Kane');
//result = {name: 'Kane', age: 29}
[예제2]
//3번 index 값 없음
var array = ['a', 'b', 'c', , 'e'];
array.find(function(el, index) {
console.log('key:', index, 'value:', el);
});
// 결과 :
// key: 0 value: a
// key: 1 value: b
// key: 2 value: c
// key: 3 value: undefined
// key: 4 value: e
[예제3]
//3번 index 값 없음
var array = ['a', 'b', 'c', , 'e'];
array.find(function(el, index) {
//순환 첫 순번에 index(2) 지움
if(index == 0) delete array[2];
console.log('key:', index, 'value:', el);
});
// 결과 :
// key: 0 value: a
// key: 1 value: b
// key: 2 value: undefined // 값이 지워져있음
// key: 3 value: undefined
// key: 4 value: e
배열요소 중에 하나라도 조건에 맞는게 있는지 알고싶다면?
https://devinserengeti.tistory.com/22?category=901017
'[개발 공부] > [자바스크립트]' 카테고리의 다른 글
[자바스크립트] javascript some() 사용하기 (0) | 2022.02.18 |
---|---|
[자바스크립트] javascript filter() 사용하기 (0) | 2022.02.17 |
[자바스크립트] javascript map() 사용하기 (0) | 2022.02.10 |
[자바스크립트] slice, splice, split 의 차이 (0) | 2022.01.08 |
[자바스크립트] Javascript This 정리 (0) | 2021.12.15 |