Book/혼자 공부하는 자바스크립트
05-2. 함수 고급
키모87
2022. 2. 3. 02:16
콜백함수
자바스크립트는 함수도 하나의 자료형이므로 매개 변수로 전달 함수를 콜백 함수라고 한다.
<script>
function callThreeTimes(callback)
{
for(let i=0; i<3 ;i++)
{
callback(i)
}
}
function print(i)
{
console.log(`${i}번째 함수 호출`)
}
callThreeTimes(print)
</script>
화살표 함수
단순한 형태의 함수를 쉽게 입력하고자 화살표(arrow) 함수라는 함수 생성방법이 있습니다.
화살표 함수는 function 키워드 대신 ghktkfvy(=>)를 사용합니다.
(매개변수) => {
} 불표현식 || 불표현식이 거짓일 때 실행할 문장
아래와 같이 더 간단히 사용할 수 있으며 내부에서는 this 키워드가 지칭하는 대상이 다르다는 등의 미세한 차이가 있습니다.
(매개변수) => 리턴값
예제
const array = [0,1,2,3,4,5,6,7,8,9]
array.map((value) => value * value)
결과값 : (10) [0,1,4,9,16,25,36,49,64,81]
<script>
let numbers = [0,1,2,3,4,5,6,7,8,9]
numbers
.filter((value) => value % 2 ===0)
.map((value) => value * value)
.forEach((value)=>{
console.log(value)
})
</script>
메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝(method chaining)이라고 부릅니다.
타이머 함수
특정 시간 이후에 콜백 함수를 호출 할 수 있는 타이머(timer) 함수들이 있습니다.
함수 이름 | 설명 |
setTimeout(함수,시간) | 특정 시간 후에 함수를 한번 호출 합니다. |
setInterval(함수,시간) | 특정시간마다 함수를 호출합니다. |
타이머를 종료하고 싶을 때는 clearTimout()함수와 clearInterval()함수를 사용합니다.
함수이름 | 설명 |
clearTimeout(타이머_ID) | setTimeout()함수로 설정한 타이머를 제거합니다. |
clearInterval(타이머_ID) | setInterval()함수로 설정한 타이머를 제거합니다. |
<script>
let id
let count=0
id = setInterval(()=>{
console.log(`1초마다 실행됩니다.(${count}번째)`)
count++
},1*1000)
setTimeout(()=>{
console.log('타이머를 종료합니다.')
clearInterval(id)
},5*1000)
</script>
setInterval()함수를 사용해서 1초마다 메시지를 출력하고, setTimeout()함수를 사용해서 5초후 타이머를 종료합니다.