콜백(callback)함수 - setTimeout, setInterval, clearInterval, Array함수 - push, pop, shift, splice, join, forEach, filter, map, find, sort

2019. 5. 27. 14:16Java script

----------------------------------Callback 함수-------------------------------

콜백함수 (Callback)
 - 콜백함수란 사용자가 주체가 되어 사용하는게 아니라 시스템(브라우저, 운영체제 등)
    으로 인해 실행되는 함수를 말한다.
 - 명시적으로 호출되는 함수가 아니다.
 - 개발자가 함수를 등록해두면 특정 시점, 혹은 특정 이벤트가 발생했을 때 
   시스템 혹은 브라우져가 실행시키는 함수다.
 - 다른 함수의 인자로 이용되는 함수


예시1) setTimeout, setInterval 함수 사용




예시2) setInterval 함수 사용

 





========================================================
function fn2() {
            alert("안녕");
            return 10;
}


//클릭 이벤트 발생시 실행할 콜백함수가 무엇인지 지정한 것
btn2.onclick = fn2;
btn2.onclick = function fn2() { alert("안녕"); return 10; }

// fn2()를 실행해서 반환된 것을 클릭이벤트 발생시 실행할 것으로 지정한것
btn2.onclick = fn2();
btn2.onclick = 10;

=============================================================



예시3) 콜백함수 사용 click

 




예시) 콜백함수 불러와서 사용하기 button 사용 합, 차 구하기

 

 


////////////////////////////////////////////////Array 함수

push(값) : 배열에 새로운 값을 맨 마지막에 추가한다.
pop() : 배열의 맨 마지막 값을 삭제하고, 그 값을 반환한다.
shift() : 배열의 맨 처음값을 삭제하고, 그 값을 반환한다.
splice(인텍스, 1) : 배열에서 지정된 인덱스에서 부터 갯수만큼 삭제한다.




예시) 자바스크립트 Array 함수 사용하기




//////////////////////////////////////////////////////join 사용하기

join(), join(구분자) : 배열의 각 요소를 지정된 구분문자로 이어진 문자열을 만들어서 반환한다.
                          구분자를 지정하지 않으면 ,를 구분문자로 사용한다.




예시) join 사용하기




/////////////////////////////////////////////////////forEach 사용하기

forEach(콜백함수(값, 인덱스) {}) : 배열의 요소 갯수만틈 콜백함수를 실행한다.
                                          실행할 때마다 배열의 값과 인덱스를 순서대로 전달한다.



예시) forEach 사용하기




/////////////////////////////////////////////////////filter 사용하기

filter(콜백함수(값, 인덱스){}) : 배열의 요소 갯수만큼 콜백함수가 실행된다.
                                      콜백함수가 true를 반환하는 경우의 값만 모은 새로운 배열을 반환한다.




예시) filter 사용하기





/////////////////////////////////////////////////////map 사용하기

map(콜백함수(값, 인덱스){}) : 배열의 요소 갯수만틈 콜백함수가 실행된다.
배열의 모든 요소에 대해서 콜백함수를 실행해서 그 반환값을 모은 새로운 배열을 반환한다.
배열의 각 요소의 값을 가공한 새로운 배열을 만들 때 사용한다.






예시) map과 filter 사용하기   3의배수들만 제곱하기








예시) 배열과 map을 사용해서 값뽑아오기





/////////////////////////////////////////////////////find 사용하기

find(콜백함수(값, 인덱스){}) : 배열의 요소 갯수만큼 콜백함수가 실행된다.
                                      콜백 함수가 true를 반환하는 첫번째 값만을 제공한다.





예시) find 사용해서 값 뽑기





/////////////////////////////////////////////////////sort 사용하기

sort(), sort(콜백(값1, 값2){}) : 배열의 요소를 정렬한다. 콜백함수를 
                                      정의하면 콜백함수가 반환하는 값을 기준으로 정렬한다.

옵션
            reverse() : 배결의 순서를 역순으로 바꾼다.



예시) sort 사용하기




예시) sort 사용해서 값 정렬