[JAVA SCRIPT] JS - setTimeout(), new Promise() 문법

Ex01. setTimeout()

// ex01
// 1초 뒤에 함수 call
// non-block 이면서 비동기 함수이다.
setTimeout(function () {
    console.log(1);
}, 1000) 
console.log(2);

Ex01 실행결과

Ex02. setTimeout()의 인수전달1

// ex02
// setTimeout의 인수전달
// 호랑이는 a로, 30은 b로 인수가 전달이 된다.
setTimeout(function (a, b) {
    console.log(1);

    console.log(a, b); // 출력방법1
    console.log(arguments[0], arguments[1]); // 출력방법2
    
    // arguments를 사용하면 받는 인수의 개수와 상관없이 받아서 사용 할 수 있다.
    console.log(arguments[2], arguments.length);
    
}, 1000, '호랑이', 30, 40) 
console.log(2);

Ex02 실행결과

Ex03. setTimeout()의 인수전달2

// ex03
// 인수전달2 ...args의 사용
setTimeout(function (...args) {  
    console.log(1);

    console.log(args[0], args[1], args.length);
}, 1000, '호랑이', 30, 40) 
console.log(2);

Ex03 실행결과

Ex04. setTimtout()의 익명함수 사용

// ex04
// 익명함수 사용
// a, b 로 인수 전달 불가 : 되는 이유 무엇?
// argument도 사용 불가
// 익명 함수는...args로만 인수 전달 가능하다.
setTimeout( (...args) => {   
    console.log(args[0], args[1], args.length);

}, 1000, '호랑이', 50, 40) 
console.log(2);

Ex04 실행결과

Ex05. 콜백지옥의 예

- 1초 간격으로 출력

setTimeout(() => {
    console.log(1);
    setTimeout(() => {
        console.log(2);
        setTimeout(() => {
            console.log(3);
        }, 1000) 
    }, 1000) 
}, 1000) 

Ex05 실행결과

Ex06. for문 안에서의 setTimeout() 사용

// ex06
// 실행하는 시점에서의 i는 3이다. 
for (var i = 0; i < 3; i++) {
    setTimeout(()=> {
        console.log(i);
    }, 1000)
}

- 실행하는 시점에서의 i는 이미 for문을 다 돌고 난 후이기 때문에 모두 3이 출력됨

Ex06 실행결과

Ex07. 즉시 실행 함수(IIFE)

// 즉시 실행 함수 예제 (IIFE)
// 함수 생성 즉시 바로 호출
(function f1() {
    console.log(1);
})()

Ex07 실행결과

Ex08. 즉시 실행 함수의 인수 전달 방법

// 즉시 실행 함수의 인수 전달
(function f1(a, b) {
    console.log(a, b);
    
})(10, 20)

Ex08 실행결과

Ex09. for문을 사용하여 1초마다 i값 출력 예제

// ex09
// 가장 일반적으로 많이 사용되는 예제이다.
for (var i = 0; i < 3; i++) {
    // setTimeout(() => {
    //     console.log(i);
    // }, 1000)

    // 즉시 실행 했기 때문에 실행 할 당시의 i값은 전달을 했다.
    ((ii) => {
        setTimeout(() => {
            console.log(ii);	
//        }, 1000)			// 이렇게 사용하면 0 1 2가 한 번에 출력이 된다.
        }, 1000*(ii+1))		// 이렇게 사용하면 0 1 2가 1초마다 순차적으로 출력된다.
    })(i)
}

Ex09 실행결과

Ex10. (Ex09)와 같지만 다른 사용법 예제

// ex10
// let을 사용하면 즉시 실행함수와 같은 결과 값을 갖는다.
// var을 사용한 ex07과 같은 결과값을 가진다.
// 새로운 문법
for (let i = 0; i < 3; i++) {
    setTimeout(()=> {
        console.log(i);
    }, 1000)
}

Ex10 실행결과

Ex11. Promise 구조

// ex11
// Promise 사용 예제
// 기본 꼴이다.
// new, 생성자 함수를 이용해서 사용하고 있다.
new Promise(() => {
    // OK(then), 아니면 NG(catch) 발생
})
.then(() => {

})
.catch(() => {

})

Ex11. 생성자 함수와 클래스 함수

- 암묵적으로 함수명에 첫 글자를 대문자로 사용을 하면 생성자 함수이고, 소문자를 사용하면 함수라고 한다.

// ex11
// 생성자 함수
function Apple() {
   
}

// 생성자 함수의 사용 예시
const apple = new Apple();

Ex12. new Promise() 함수의 특징 -1

// ex12
// 내가 던진함수(코드)를 생성자 인수로 전달 받게 되고 어떻게든 내부에서 콜을 한다.
// 즉, new Promise 안의 코드가 생성자 인수로 전달받아서 어떻게든 실행이 된다는 뜻이다.
// 직접적으로 Promise 함수를 콜 하지 않았지만 안에 있는 log가 출력된다.
new Promise(() => {
    console.log('111111');
})

Ex12 실행결과

Ex13. new Promise() 함수의 특징 -2

// ex13
// r1:해결(resolve)->then으로 간다, r2:거절(reject)->catch로 간다
new Promise((r1, r2) => {
    console.log('ddddd');
    // r1();  // then으로 간다
    r2();     // catch로 간다.
})
.then(() => {
    console.log('then');
    
})
.catch(() => {
    console.log('catch');
})

Ex13 실행결과

 

 

2019.08.19(월) 

Java Script - setTimeout(), new Promise()