본문 바로가기

JavaScript, HTML, CSS

[JS]06. setTimeout(), apply(), 함수의 type

setTimeout(), apply(), 함수의 type 간단한 설명
- 목차
01. setTimeout()
02. apply()
03. 함수의 type
 

코드 스테이츠 Pre 코스 여덟째 주 수강 후기.

 

 

이번 주는 수업 중 배웠던 내용보다 underbar문제를 풀면서 알게 된 내용을 중점으로 정리해보려 한다.

 

화요일에는 Callback과 비동기 호출, 함수 메소드에 관해 강의를 했지만 당일에 일정이 있어서 저녁 7시에 있는 zoom수업에 참여를 못했다. 코드 스테이츠는 세션을 놓치게 되면 그 세션의 영상을 며칠 내로 올려주기 때문에 복습을 하고 싶거나 세션에 참여하지 못했을 경우 그 날의 수업 영상을 다시 볼 수 있어서 좋다. 어쨌든, 지금은 그 세션 영상을 봤지만 책이나 다른 자료들을 보고 더 공부를 해야 블로깅을 할 수 있을 듯해서 잠시 뒤로 미뤄두기로 했다 :)

일단 찾아 둔 MDN 페이지 [MDN] Function.prototype

 

 

목요일 수업에서는 자바스크립트로 무엇을 할 수 있는지에 대한 설명을 들었고 그와 관련된 여러 사이트들을 추천받았다.

 

Web Audio API Demo (Synth Pad) : 코드펜으로 구현한 Synth Pad

 

How to make Slither.io with JavaScript : 자바스크립트로 게임 만들기 시리즈

 

Kakao Developers - 카카오 : 카카오의 여러 API들을 사용할 수 있게 제공해줌

 

Puppeteer : Headless Chrome을 쉽게 사용할 수 있도록 Google Chrome팀에서 공개한 Node.js 라이브러리

 

New York Times | FlowingData : 데이터 시각화를 잘해둔 사례(뉴욕타임스)

 

 


01. setTimeout() [MDN]WindowTimers.setTimeout()

 

타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정함.

 

- 구문

var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code[, delay]);
window.setTimeout(function, milliseconds);
func · 이 타이머가 만료된 뒤 실행될 함수
code · 함수 대신에 문자열을 넣을 수 있는데, 타이머가 만료된 뒤 해석되고 실행됨.
· 이 구문은 eval()을 사용하는 것과 같은 보안 위험성을 이유로 권장되지 않음.
delay (Optional) · 타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간.
· 만약 이 매개변수를 생략하면, 0이 값으로 사용되며 실제 지연시간은 더 길어질 수 있음.
param1, ..., paramN (Optional) · 타이머가 만료되고 func에 전달 될 매개변수들
반환 값 · 반환되는 timeoutID는 숫자이고, setTimeout()을 호출하여 만들어진 타이머를 구분할 수 있는 0이 아닌 값.

 

* func에 넣을 함수는 실행하면 안 됨

 

function test() {
  console.log("test");
}
setTimeout(test, 10); //작동
setTimeout(test(), 10); //이렇게 쓰면 안 됨

 

이렇게 매우 간단해 보이지만 의외로 헷갈릴 때가 있다. 실수 조심~

setTimeout의 매개변수에서 함수를 실행해버린게 첫 번째 코드의 문제였다.


02. apply() [MDN]Function.prototype.apply()

주어진 this 값과 배열 (또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출.

- 구문

fun.apply(thisArg, [argsArray])
thisArg func를 호출하는데 제공될 this의 값.
argsArray (Optional) func이 호출되어야 하는 인수를 지정하는 유사 배열 객체, 함수에 제공된 인수가 없을 경우 null 또는 undefined.
반환값 지정한 this값과 인수들로 호출한 함수의 결과.


03. 함수의 type

자바스크립트에서는 함수도 하나의 변수로 취급받기 때문에 typeof를 쓸 수 있다!!

 

function func() { };
console.log(typeof func); //'function'