Array.find 사용실패기 - 콜백함수 사용하기

날짜 : 2017. 9. 19(화)

Array.find 사용실패기 - 콜백함수 사용해 보기

• 동기 : Array.find()를 사용하고 싶어서
• 결과 :
  1. Array.find()는 원하는 목적의 함수가 아니였다. (Array.indexOf() 가 적합한 함수였다.)
  2. 이전에 이해가 되지 않던 this이슈 -> call&apply함수 가 연관이 있다는 것을 알게 되었다.
  3. ES6로 오면서 비동기를 해결하기 위한 함수 및 bind, call, apply의 차이를 별도로 정리해 볼 필요가 있을것 같다.
  4. 이후에는 디자인 패턴 혹은 best practice를 알아야 할 것 같다.

동기

var array = [1,2,3,4];
var value = 1;
//값이 존재하는지 직접 코드를 짜면 for loop을 돌아야 한다.
for(var i = 0; i < array.length; i++){
    if(value === array[i]) return i;
}

배열에서 다른곳에 인자로 받은값이 존재하는지 확인을 하고 싶었다. MDN document을 확인해보니 Array.find()으로써 구현할 수 있을것이라 생각이 들었다.

callback함수를 진행되는 코드에서 작성시 scope chain으로 인하여 value변수를 호출할 수 있다.

var array = [1,2,3,4];
var value = 1;

array.find(function(element, index, array){
    if(element === value) return index;
    })

callback함수를 모듈화 시키는 경우에는 어떻게 해야할지 모르겠었다.

callback = function(element, index, array){
   if(element === ????) return index; 
}

var array = [1,2,3,4];
var value = 1;

array.find(callback)

확인내용

1. 내부 API에서 index값을 반환하는 함수가 존재를 했었다. Array.indexof(value). 문서를 읽을때 함수의 목적 혹은 사용하는 경우를 인지하는 것이 중요하다는 것을 알게 되었다.

2. callback함수에서 인자값을 전달하는 것은 방법은 여러가지가 있다는 것을 알게 되었다.

   • 무명함수 안에 콜백함수를 호출

callback = function(element, index, array, 원하는 인자값){
   if(element === 원하는 인자값) return index; 
}

var array = [1,2,3,4];
var value = 1;

array.find(function(){
    callback(element, index, array, 원하는 인자값)
})

• 실행 컨텍스트를 지정해 주는 방법

callback = function(element, index, array){
   return element == this.value 
}

var array = [1,2,3,4];
var test = {
   var value : 1;
}
array.find(callback, test);

실행 컨텍스트를 지정해 주는 이유는 this가 가리키는 것이 호출되는 위치에 따라 달라지기 떄문에 그것을 임의로 지정을 해주는 것이다.(this이슈, call&apply 사용이유)

참고사이트

1. yubylab블로그 - 자바스크립트의 콜백함수 이해하기!_v2

2. nextree블로그 - JavaScript : Scope 이해