타이머 함수
자바스크립트에서 콜백함수를 사용하는 또 다른 대표적인 함수가 바로 타이머 함수이다.
타이머 함수는 크게
setTimeout()
setInterval()
이라는 함수로 나뉜다.
둘다 특정한 시간 후에 뭘 할때 사용을 한다.
setTimeout(함수,시간) -> 특정 시간 후에 함수를 한번 호출한다.
setInterval(함수,시간) -> 특정 시간마다 함수를 호출한다.
타이머 함수의 매개변수로는 첫번째에 콜백함수를 넣어주고,
두번째 매개변수로는
밀리초 단위의 시간(1000밀리초 = 1초)을 넣어준다.
아래 코드를 보자.
setTimeout(콜백함수,1000) 함수는 1초(1000밀리초)후에 안의 콜백함수를 한번 실행시킨다.
setInterval(콜백함수,1000) 함수는 1초(1000밀리초)마다 안의 콜백함수를 실행시킨다.
->콘솔창에 출력된 내용 왼쪽에 숫자가 시각적으로 반복되고있는 횟수를 보여준다.
타이머 제거 함수
우선 타이머 함수를 실행시켜 본다.
위와 같이 setInterval()함수는 계속 정해진시간단위마다 계속 콜백함수를 실행시킨다.
이것을 종료하거나 취소할때, 타이머 제거 함수를 사용한다.
clearTimeout(타이머ID) -> setTimeout()함수로 설정한 타이머를 제거한다.
clearInterval(타이머ID) -> setInterval() 함수로 설정한 타이머를 제거한다.
이 함수들의 매개변수에는 타이머ID라는 것을 넣는데,
타이머ID는 setTimeout(),setInterval()함수를 호출할 때 리턴값으로 나오는 숫자이다.
다시 상수에 타이머 함수를 할당시키고 선언한뒤에 사console.log()로 출력을 해본다.
console.log(a,b,c)에 대한 출력은 1, 2, 3 이라고 나오고 타이머 함수들이 실행되는걸 볼 수 있다.
여기에 타이머 제거 함수를 넣어보자.
위와같이 console.log(a,b,c)의 출력만 나오고 타이머 제거함수에 넣어둔 a,b의 타이머 함수의 콜백함수들은 실행되지 않고 타이머함수 c의 콜백함수만 실행된다.
왜 위에서부터 한번씩은 실행되고 타이머 제거함수를 거쳐 중지 되지않냐는 의문을 가질수 있다.
그 이유는 타이머 제거 함수의 위치에 상관없이 타이머 제거함수부터 먼저 실행되기 때문이다.
즉시 호출 함수
함수를 만들고 즉시 호출하는 함수 -> 즉시 호출 함수 IIFE(Immediately Invoked Function Expression)라고 부르기도 한다.
즉시 호출 함수는 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법이다.
형태는 아래와 같다.
(function() { }) ()
우리가 인터넷에서 여러코드를 보다보면
아래와같이 저렇게 괄호들로 감싸져있고 저런 코드들을 많이 볼 수 있다.
보기에 다소 이상해보일수도있지만, 저 코드들은
함수를 만든뒤에 함수를 곧바로 호출하는 코드이다.
위의 코드들이 한꺼번에 나열되어있어서 보기 힘들수도 있지만, 간단하게 써보자면
이런식으로 함수를 만들고 바로 실행한다는 의미이다.
이 즉시 호출 함수를 이제 왜쓰는지 알아보자.
아래의 한 웹사이트 안에 자바스크립트 코드가 굉장히 많이 들어가게 된다.
이 코드들은 한사람이 만든것 일수도있고,
여러사람이 같이 개발하고 합쳐서 만든것 일수도 있다.
HTML 코드로써 자바스크립트를 다시 살펴보게 되면,
<script></script>태그들을 여러개 써서 쓰는 걸 볼수 있다.
이 코드들은 모두 연결되어 있기때문에,
아래와 같이 함수이름의 중복 등이 발생하면 오류를 나타낸다.
개발자 한명이서 다 만들면 이러한 함수의 이름이 중복될경우 그냥 다른이름으로 고쳐쓰면 그만이지만,
실무에서는 얼굴도모르는 사람들끼리 서로 만들고 하기때문에 직접 이러한 충돌을 피하고자 즉시 호출 함수 를 쓸수 있어야한다.
즉시호출함수를 사용해서 코드를 써본다.
이렇게 즉시호출함수로 감싸게 되면,
그안의 변수나 상수가 함수 내부에서만 작동을 하기 때문에, 충돌이 일어나지 않는다.
엄격 모드 (strict mode)
여러 자바스크립트 코드를 보면 블록의 가장 위쪽에 'use strict'라는 문자열이 등장하는 것을 볼 수 있다.
이는 엄격 모드(strict mode)라고 부르는 기능으로
자바스크립트는 이러한 문자열을 읽어들인 순간부터 코드를 엄격하게 검사한다.
형태는 아래와 같다.
<script>'use strict' 문장 문장</script>
예를 들어 변수나 상수로 선언하지 않은 식별자에
아무거나 할당을 하고 출력을 해보면
이렇게 문제없이 출력이 된다.
하지만 엄격 모드에서는 이러한 코드를 사용할 수 없다.
첫번째 script태그안에 'use strict'를 넣어보자.
자바스크립트는 오류를 어느 정도 무시하고 넘어가는 것들이 있다.
그래서 편하게 코딩할 수 있지만 실수로 이어지기도 한다.
일반적으로 엄격 모드를 사용하는 것이 좋다.
즉시호출함수에 엄격모드 적용시켜보기
아래와 같이 하면 이 즉시 호출 함수내부에서만 엄격모드가 적용된다.
