콜백함수!

김종원·2022년 7월 12일
0

[TIL (Today I Learned)]

목록 보기
26/44

콜백함수란?

함수에 파라미터로 들어가는 함수!

콜백함수 용도

자바스크립트에서 순차적으로 실행시키고 싶을 때 사용합니다.

<script>
											(함수)				(콜백함수)
	document.querySelector(''.button).addEventListener('click', function(){
    													    파라미터로 함수 넣음
        alert('Hello World'); -> 버튼 클릭 시 실행됩니다.
    })
    
    setTimeout(function(){
    	alert('Hello World'); -> 1초 후에 alert 실행이 됩니다.
    }, 1000)
    * setTimeout 함수, function(){ alert('Hello World'); -> 콜백함수
</script>

특징

1) 다른 곳에서 만든 함수도 콜백함수로 사용할 수 있습니다.
2) 콜백함수에 함수명 작성할 수 있습니다.
3) 콜백함수가 필요한 함수들에만 콜백함수를 사용할 수 있습니다.

<script>
	function first(파라미터){
    	파라미터();
    	console.log("first");
    }
    function second(){
    	console.log("second");
    }
    first(second);
</script>

=> "second"
	"first"

Promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

<script>
	async function first(){
    	return Promise.resolve("first");
    }
    function second(){
    	console.log("second");
    }
    first().then(alert);
</script>

async await

1) function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다.
2) 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.
3) 자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다.
결과는 그 이후 반환됩니다.

<script>
	async function first(){
    	let promise = new Promise((resolve, reject) => {
        	setTimeout( () => resolve("first"), 1000)
        });
        let result = await promise; // 프로미스가 이행될 때까지 기다립니다.
        
    	return result;
    }
    first().then(alert);
</script>

에러 핸들링

프라미스가 정상적으로 이행되면 await promise는 프라미스 객체의 result에 저장된 값을 반환합니다. 반면 프라미스가 거부되면 마치 throw문을 작성한 것처럼 에러가 던져집니다.

<script>
	async function first(){
    	try{
        	let promise = new Promise((resolve, reject) => {
        		setTimeout( () => resolve("first"), 1000)
        	});
            let result = await promise; // 프로미스가 이행될 때까지 기다립니다.
            return result;
        } catch(error){
        	alert(error);
        }
    }
    first().then(alert);
</script>
profile
발전하기위한 기록

0개의 댓글