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); //이렇게 쓰면 안 됨
이렇게 매우 간단해 보이지만 의외로 헷갈릴 때가 있다. 실수 조심~
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'
'JavaScript, HTML, CSS' 카테고리의 다른 글
[JS] 07. JS에서의 OOP (0) | 2019.11.14 |
---|---|
[HTML]03. 목차 클릭 시 해당 라인으로 이동하기(내부 링크), <a> 태그 (0) | 2019.10.06 |
[HTML, 코드스테이츠]02. DOM (0) | 2019.09.09 |
[HTML, 코드 스테이츠]01. HTML, CSS 기초 (0) | 2019.09.01 |
[JS, 코드 스테이츠]05. Closure, Parameter, new 키워드와 객체지향 JavaScript (0) | 2019.08.26 |