[JavaScript] setTimeout()의 형식과 익명함수, arrow 함수 공부

저번 승부차기 만들기 과제에서 상대가 1초 뒤 자동으로 공을 차게 하기 위해 setTimeout()을 사용했는데,

아직 setTimeout의 형태가 손에 잘 익지 않아 복습 겸 정리를 해본다.

 

자바스크립트에서는 딜레이를 주기 위해 setTimeout()을 사용한다.

일정 시간 간격마다 실행하고 싶다면 setInterval()을 사용하는데, 클럭처럼 사용해도 될 것 같다.

나는 주로 setTimeout()을 사용할 것 같으니 구조를 분해하며 알아보겠다.

 

setTimeout(function(){
       console.log('dddd');
}, 1000);
//1초 뒤에 콘솔 로그에 dddd를 출력하는 코드

 

setTimeout 함수의 기본형은 위와 같다.

위의 코드는 setTimeout(  ); 에 인자로 function(){ }, delay 를 넣어준 것이다.

---

1. function(){ } 사용(익명함수)

setTimeout()의 첫번째 인자로 사용한 function(){ }는 익명함수라고 한다.

보통 함수를 쓸 때 function func(param){ ... } 형태로 인자와 이름을 주고 선언해서 사용하는데,

함수를 재사용하지 않을 경우에는 함수의 이름을 정해주지 않고도 사용할 수 있다.

그 코드의 다른 곳에서 또 호출하려면 이름이 필요하지만, 일회성으로 쓸 땐 이름이 필요 없으니까 이름 없이 사용한다.

즉 function(){ }는 인자가 없는 익명함수라고 볼 수 있다.

 

딜레이를 주고 싶은 코드는 첫번째 인자인 function(){ ... } 형태로 넣으면 된다.

딜레이는 두번째 인자 자리에 ms 단위로 넣어주면 된다. 위 1000ms = 1s 딜레이가 생긴다.

 

=> setTimeout( function(){ }, delay ); 형태로 사용한다는 것을 기억하면 된다.

 

---

2. () => { } 사용(arrow 함수)

위에서 사용한 익명함수 function(){ }는 arrow 함수를 이용해 더 간단한 형태로 선언할 수 있다.

그냥 인자를 앞으로 빼고 function 키워드 대신 => 를 사용하면 된다.

처음에는 생소한 형태라 당황스러웠는데 생각보다 간단했다..

 

1에서의 코드를 arrow 함수로 바꿔보면 아래와 같다.

 

setTimeout(() => {
       console.log('dddd');
}, 1000);

 

뭔가 깔끔해진 것 같기도 하고 아닌 것 같기도 하고

arrow 함수는 인자 개수가 1개면 소괄호를 생략할 수 있고,

함수 바디가 한줄 구문이면 중괄호를 생략할 수 있고 암묵적으로 return된다고 한다.

(a, b) => a+b;                      //arrow 함수 표현

function(a, b) { return a+b; }      //익명 함수 표현

 

arrow 함수는 익명 함수로만 사용할 수 있기 때문에 호출하려면 함수 표현식을 써야 한다.

const add = (a, b) => a+b;    //arrow 함수 표현

console.log(add(3,5));        //8

function add(a, b) {            //일반 함수 표현
       return a+b;
}
console.log(add(3,5));          //8

사실 이렇게 봐서는 일반 함수 표현의 중괄호 줄넘김을 안하면 끝이기 때문에 아직 유용한지 잘 모르겠다.

누가 사용한 코드를 읽을 수 있을 정도로만 이해해놓고 나중에 필요하면 사용해봐야겠다.

 

---

※ 자바스크립트에서 setTimeout 실행 시 문제점

 

자바스크립트는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고

다음 코드를 먼저 실행하는 비동기 처리를 한다.

그렇기 때문에 c, c++처럼 코드의 중간에 delay를 넣으면 이 딜레이를 기다려주지 않고 밑의 코드를 실행해버려서

순서가 뒤죽박죽이 돼버리고 의도치 않은 결과를 얻게 되기도 한다.

 

이를 해결하기 위해 공부해야하는 것이 콜백 함수, promise, async/await 개념이다.

이미 배웠지만 어려운 내용이고 이거 정리하면서 에너지와 시간을 다 쏟아놔서

다음에 알아보도록 하자^.^ 첫 정리 끝~~