Chapter 5-2 (4) 239~241

✏️ 함수 즉시 호출하기

(function () { })()
함수 선언 후 뒤에 ()를 붙임으로써 즉시 호출

스코프 (scope)

• 변수가 존재하는 범위
• 같은 이름을 가지는 변수의 스코프는 같은 단계에 있을 경우 무조건 충돌 발생
• 충돌을 피하기 위해 중괄호를 사용하여 블록을 만들거나 함수를 생성해서 블록을 만들어 스코프 단계를 변경

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  let pi = 3.14
  console.log(`파이 값은 ${pi}입니다.`)           // 파이 값은 3.14입니다.

  // 블록을 사용한 스코프 생성
  {
    let pi = 3.141592
    console.log(`파이 값은 ${pi}입니다.`)         // 파이 값은 3.141592입니다.
  }
  console.log(`파이 값은 ${pi}입니다.`)           // 파이 값은 3.14입니다.

  // 함수 블록을 사용한 스코프 생성
  function sample() {                         
    let pi = 3.141592
    console.log(`파이 값은 ${pi}입니다`)          
  }                                           // 함수 선언만 한 상태

  sample()                                    // 함수 실행! // 파이 값은 3.141592입니다.
  console.log(`파이 값은 ${pi}입니다.`)           // 파이 값은 3.14입니다. 
</script>

섀도잉 (shadowing)

• 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상
• 블록 외부와 블록 내부에서 같은 이름으로 변수를 선언하면 내부 변수가 외부 변수와 충돌하지 않고 외부 변수를 가린다.
• 내부 블록에서는 내부 블록에서 선언한 변수만 볼 수 있음.

단지 충돌을 피하기 위해 함수 블록을 사용하는 것이므로, 선언과 동시에 실행되도록 즉시 호출 함수 사용

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
  let pi = 3.14
  console.log(`파이 값은 ${pi}입니다.`)		      // 파이 값은 3.14입니다.
</script>

<!-- 내가 만든 자바스크립트 코드 -->
<script>
  (function () {							  // (즉시 호출 함수)
    let pi = 3.141592
    console.log(`파이 값은 ${pi}입니다.`)
  })()										  //파이 값은 3.141592입니다.
</script>

✏️ 엄격 모드 (strict mode)

블록의 가장 위쪽에 'use strict' 라는 문자열
자바스크립트는 이 문자열을 읽어들인 순간부터 코드를 엄격하게 검사한다.

엄격 모드의 사용

<script>
  'use strict'
  문장
  문장
</script>  

일반적인 자바스크립트 코드에서 선언 없이 변수를 사용해도 문제없이 실행된다.
그러나 엄격 모드에서는 이러한 코드를 사용할 수 없다. (오류 발생)

모질라 엄격 모드 문서
: 엄격 모드에서 발생하는 오류에 대한 문서

즉시 호출과 엄격 모드

즉시 호출 함수를 만들고, 이 블록의 가장 위쪽에서 엄격 모드를 적용하면?
👉🏻 해당 블록 내부에서만 엄격 모드 적용

<script>
  (function () {
    'use strict'
    문장
    문장
  })()
</script>  

✏️ 익명 함수와 선언적 함수의 차이

익명 함수와 선언적 함수는 사용하는 상황이 비슷하다.
그래서 평소에는 본인(혼자 작업) 혹은 모두(협업)가 편하게 생각하는 것을 사용하면 되지만,
최근에는 익명 함수가 좀 더 안전하다고 평가되고 있어 익명 함수를 선호하는 편이다.

익명함수
: 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성된다.

선언적 함수
: 순차적인 코드 실행이 일어나기 전에 생성된다.
: 따라서 선언적 함수는 같은 블록이면 어디에서 함수를 호출하든 실행된다.

선언적 함수와 익명 함수의 조합

<script>
  // 익명 함수를 생성합니다.
  함수 = function () {
    console.log('익명 함수입니다.')
  }

  // 선언적 함수를 생성하고 할당합니다.
  function 함수 () {
    console.log('선언적 함수입니다.')
  }

  // 함수를 호출합니다.
  함수()								// 익명함수 실행됨
</script>

익명 함수는 코드를 읽을 때와 같은 순서로 함수가 선언되지만,
선언적 함수는 우리가 코드를 읽는 순서와 다른 순서로 함수가 선언된다.

함수를 같은 이름으로 덮어쓰는 것은 굉장히 위험한 일이다.(왜?)

그래서 안전하게 사용할 수 있는 익명함수가 더 선호되는 것!

블록이 다른 경우에 선언적 함수의 사용시 함수의 실행 흐름 예측이 힘들어진다.

<script>
  선언적함수()

  function 선언적함수 () {
    console.log('1번째 선언적 함수입니다.')
  }
</script>
<script>
  function 선언적함수 () {
    console.log('2번째 선언적 함수입니다.')
  }
</script>
<script>
  선언적함수()
</script>

let 사용의 의미

<script>
  // 익명 함수를 생성합니다.
  let 함수 = function () {
    console.log('익명 함수입니다.')
  }

  // 선언적 함수를 생성하고 할당합니다.
  function 함수 () {
    console.log('선언적 함수입니다.')
  }

  // 함수를 호출합니다.
  함수()
</script>

let, const 변수를 사용하며 익명 함수와 선언적 함수를 동시에 사용하면 함수가 중복 선언되는 상황이 발생한다. (let 과 const는 중복 선언 불가능)

👉🏻 error 발생 !!

Uncaught SyntaxError: Identifier '함수' has already been declared.

📌 결론

익명 함수와 선언적 함수는 함수가 선언되는 순서가 다르다!

익명 함수가 더 안전하고 선호되는 이유

• 익명 함수는 코드가 작성된 순서대로 실행된다.
• 선언적 함수는 블록이 다른 경우 그 실행 순서를 예측하기 힘들어지는데, 예상치 못하게 블록이 나뉘어질 경우 문제가 발생할 수 있다.