[자바스크립트] javascript find() 사용하기

[자바스크립트] 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() 사용하기