[JavaScript] 함수 - 익명 함수와 선언적 함수

박이레·2022년 9월 21일

JavaScript

목록 보기

5/13

꽃
3. 인기가 많거나 아름다운 여자를 비유적으로 이르는 말.

　꽃같은 여자에게는 어떤 꽃을 선물해야 할까요? 겉모습이 화려한 꽃일까요? 꽃말이 예쁜 꽃일까요? 선택지는 여러 개입니다. 그러나 상대의 마음에 드는 꽃을 선물해야 합니다. 그래야 데이트도 잘 진행되겠죠.

함수는 프로그래밍 문법의 꽃입니다. 어떤 함수를 선택하고 사용하는지가 중요합니다. 그래야 프로그래밍 진행도 수월할 겁니다.

이번 글에서는 어떤 상황에서 어떤 함수를 사용해야 하는지를 다룹니다. 프로그래밍에 정답은 없지만 오답은 있습니다. 오답만 피해도 중간은 갑니다.

익명 함수와 선언적 함수

익명 함수와 선언적 함수는 [JavaScript] 자료형에서 다뤘습니다. 여기서는 비슷한 두 함수를 어떻게 사용할 것인지에 등에 대해 다루겠습니다.

익명 함수가 더 안전한 이유

① 익명 함수의 사용
익명 함수는 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성됩니다. 매우 자연스러운 흐름입니다.

> let 익명함수
> 익명함수 = function() {
  	console.log('1번째 익명 함수입니다.')
}
> 익명함수 = function() {
  	console.log('2번째 익명 함수입니다.')
}
> 익명함수()
>> "2번째 익명 함수입니다."

② 선언적 함수의 사용
선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성됩니다. 같은 블록이라면 어디에서 함수를 호출해도 상관없습니다. 아래와 같이 선언적 함수를 생성하기 전에 함수를 호출해도 함수가 이미 호출된 상태이므로 아무 문제 없이 실행됩니다.

> 선언적함수()	// 다른 언어와 비교했을 때 매우 부자연스럽습니다.
>> "2번째 선언적 함수입니다."

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

그렇다면 2가지 상황이 조합된 경우에는 어떻게 될까요?

🧏‍♂️선언적 함수와 익명 함수의 조합

선언적 함수는 먼저 생성되고 이후에 순차적인 코드 진행을 시작하면서 익명 함수를 생성합니다.

> 함수 = function () {
  	console.log('익명 함수입니다.')
}

> function 함수 () {
  	console.log('선언적 함수입니다.')
}

> 함수()
>> "익명 함수입니다."	// 🥵😡🤬

① 익명 함수는 우리가 코드를 읽을 때와 같은 순서로 함수가 선언됩니다.
② 선언적 함수는 우리가 코드를 읽는 순서와 다른 순서로 함수가 선언됩니다.
따라서 함수를 같은 이름으로 덮어쓰는 것은 굉장히 위험한 일입니다.
그래서 안전하게 사용할 수 있는 익명 함수를 더 선호하는 것입니다.

🤷‍♂️블록이 다른 경우에 선언적 함수의 사용

선언적 함수는 코드 블록을 읽어들일 때 먼저 생성됩니다. 아래와 같이 블록이 나뉘어지면 선언적 함수의 실행 흐름을 예측하기 힘듭니다. 다른 프로그래밍 언어들은 선언적 함수 형태를 많이 사용하지만, JS는 아래처럼 블록이 예상치 못하게 나뉘는 문제 등이 발생할 수 있어 익명 함수를 더 많이 사용합니다.

// A BLOCK
<script>		
> 선언적함수()

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

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

// C BLOCK
<script>		
> 선언적함수()
</script>

>> "1번째 선언적 함수입니다."		// ??
>> "2번째 선언적 함수입니다."		// ??