05-4 자바스크립트 함수 고급 타이머, 즉시 호출 함수(IIFE), 엄격 모드

타이머 함수

특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수
시간과 관련된 처리를 할 수 있음

시계를 만들 때, 움직임을 구현할 때 등에 사용함

setTimeout(함수, 시간)

특정 시간 후에 함수를 한 번 호출

setTimeout(function() {
  console.log('setTimeout 함수 입니다')
}, 1000) //밀리초 단위, 1000밀리초 → 1초

실행결과

1초 뒤에 한 번 호출

setInterval(함수, 시간)

특정 시간마다 함수를 호출

setInterval(function() {
  console.log('setInterval 함수 입니다')
}, 1000)

실행 결과

1초 마다 호출 (결과 왼쪽 숫자 → 몇번 반복되고 있다고 표현해주는 것)

타이머 제거 함수

타이머ID : setTimeout함수와 setInterval함수를 호출할 때 나오는 리턴값으로 나오는 숫자

clearTimeout(타이머_ID) / clearInterval(타이머_ID)

const a = setTimeout(function() {
  console.log('setTimeout 함수 입니다')
}, 1000) 
const b = setInterval(function() {
  console.log('setInterval 함수 입니다')
}, 1000)


console.log(a, b)

//타이머 끄기
clearTimeout(a)
clearInterval(b)

코드의 실행은 1초 안에 끝나기 때문에 1초 뒤 타이머가 동작하기 전에 타이머가 먼저 꺼짐

그래서 결과는~~~?

아무것도 뜨지 않습니다!

즉시 호출 함수 (IIFE)

익명 함수를 생성하고 즉시 호출하는 함수
IIFE(Immediately Invoked Function Expression)라고 부르기도 함

• 형태

<script>
  (function () {

  })()
</script>

왜 쓰냐?

변수 이름이 충돌할 가능성이 높기 때문에

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
</script>

<!-- 내가 쓴 코드! -->
<script>
  const a = 20
</script>

이렇게 쓰면 식별자가 이미 사용되고 있다는 오류를 발생하며
내가 쓴 코드! 가 실행되지 않는다..

스코프(scope) : 변수가 존재하는 범위
같은 단계에 있을 경우 무조건 충돌이 나기 때문에 단계를 변경해주어야 함

문제 해결하기

~ 스코프 단계를 변경하는 방법 ~

즉시 호출 함수를 사용하여 해결하기

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
  console.log(`하찌가 쓴 코드의 a는 ${a}다.`)
</script>

<!-- 내가 쓴 코드! -->
<script>
  (function () {
    const a = 20
    console.log(`내가 쓴 코드의 a는 ${a}다.`)
  })()
</script>

실행 결과
하찌가 쓴 코드의 a는 10다.
내가 쓴 코드의 a는 20다.

현대에는 이렇게 할 필요가 없는데도 다들 하던대로 하기 때문에 이런 코드를 사용한다.. 눈도장만... 쾅쾅... 찍어두기

블록과 함수 블록을 사용해 해결하기

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
  console.log(`a는 ${a}이다.`)
  
  // 블록을 사용한 스코프 생성
  {
    const a = 20
    console.log(`a는 ${a}이다.`)
  }
  console.log(`a는 ${a}이다.`)
  
  // 함수 블록을 사용한 스코프 생성
  function sample() {
    const a = 30
  	console.log(`a는 ${a}이다.`)
  }
  sample()
  console.log(`a는 ${a}이다.`)
</script>

다른 블록에 속하므로 변수 이름충돌이 발생하지 않음

실행 결과
a는 10이다.
a는 20이다.
a는 10이다.
a는 30이다.
a는 10이다.

→ 코드 실행 시 블록 내부에서 상수 a를 출력했을 때 각각 20과 30이 나오고 외부에서는 10이 나옴

섀도잉(shadowing)
블록 내부에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 충돌하지 않고 외부 변수를 가림 이 현상을 섀도잉이라고 부른당

엄격 모드 (strict mode)

자바스크립트는 유연하기 때문에 상수 또는 변수를 사용하지 않아도 출력이 된다 아래처럼...

<script>
  a = '하찌는'
  b = '귀엽다'

  alert(a + b)
</script>

실행 결과

하지만 실제로 이런 코드는 상수인지 변수인지도 모르고 많은 위험성을 내포하고 있당

그 래 서

<script>
  'use strict'
  a = '하찌는'
  b = '귀엽다'

  alert(a + b)
</script>

<script> 태그 가장 앞부분에 'use strict'문자열을 배치만 하면 코드를 엄격하게 검사하여 경고창이 출력되지 않고 오류가 발생한다.

협업할 때 내가 'use strict'를 썼다고 해서 다른 사람이 만든 코드까지 엄격하게 검사가 되면 문제가 될 수 있다.

그 래 서

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  const a = 10
  console.log(`하찌가 쓴 코드의 a는 ${a}다.`)
</script>

<!-- 내가 쓴 코드! -->
<script>
  (function () {
    'use strict'
    const a = 20
    console.log(`내가 쓴 코드의 a는 ${a}다.`)
  })()
</script>

즉시 호출 함수를 사용할 때 위에다 입력하는 경우가 많음
→ 그럴 경우 즉시 호출 함수 내부에서만 엄격 모드가 동작을 한다.