[자바스립트(JavaScript )] 12. 함수의 다양한 형태 (즉시 실행 함수, 내부 함수, callback 등)

Front-End/JavaScript

[자바스립트(JavaScript )] 12. 함수의 다양한 형태 (즉시 실행 함수, 내부 함수, callback 등)

Bigone17 2022. 2. 21. 18:46

🟡 1. 함수의 다양한 형태

- 함수는 여러 가지 형태를 가지고 있고, 그 형태에 따라 부르는 명칭이 다릅니다. 이번 글에서는 4가지 형태에 대해서 얘기해보겠습니다.

즉시 실행 함수
내부 함수
재귀 함수
콜백(callback) 함수

🟣 1.1 즉시 실행 함수

- 함수가 정의됨과 동시에 실행이 되는 함수를 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)라고 합니다.

- 즉시 실행 함수는 최초 한 번만 호출이 되고 다시 호출할 수가 없습니다. 그래서 주로 초기화 처리에 사용이 됩니다.

// 기명 즉시 실행 함수
(function hi() {
	console.log('Hello!');
}());

hi(); //error -> hi is not defined : hi라는 함수는 즉시 실행된 후 사라지므로 재사용이 불가하다.

----------------------------------------------------------------------------------------------


// 익명 즉시 실행 함수
let sum;
(function() {
	sum = 20;
}());

console.log(sum); // 20

🟣 1.2 내부 함수

- 함수 내부에 선언된 함수를 내부 함수(Inner Function)라 합니다.

function animal(specie, name) {
	let animalInfo = {
    	specie : specie,
        name : name
    }
	function introduce() {
    	console.log(`Hello! My name is ${name}, I'm ${specie}`);
    }
    
    introduce();
}

animal('dog', '꾸기'); // Hello! My name is 꾸기, I'm dog

- 위 예제에서 animal은 부모 함수이고, introduce는 내부 함수가 됩니다.

- 부모 함수 외부에서는 내부 함수에 접근할 수 없습니다.

function sayHi(name){
	function hi(){
    	console.log('Hi! ' + name);
    }	
    hi();
}

sayHi('슈니') // Hi! 슈니
hi(); / error -> hi is not defined : 부모함수 외부에서 내부 함수에 접근 할 수 없다.

🟣 1.3 재귀 함수

- 재귀 함수(Recusice Function)는 자기 자신을 호출하는 함수를 뜻합니다.

- 재귀 함수는 자신을 무한히 연쇄 호출하므로 탈출 조건을 걸어 놓지 않으면, 무한 호출이 되어 stackoverflow 에러가 발생합니다.

function minus(n) {
	if(n == 0) {
    	console.log('End');
    	return n;
    }
    console.log(n-1);
    return minus(n - 1);
}

minus(5);
// 4
// 3
// 2
// 1
// 0
// End


// 탈출 조건이 없는 경우
function minus(n) {
    return minus(n - 1);
}

minus(5); //error -> Maximum call stack size exceeded

- 재귀 함수가 하는 기능은 반복문으로도 가능하므로, 최대한 반복문을 사용하는 것을 추천합니다. 재귀 함수를 잘 모르고 사용할 경우 stackoverflow 에러가 잘 발생하므로 조심해야 됩니다.

🟣 1.4 콜백(callback) 함수

- 콜백 함수는 함수를 특정 이벤트가 발생했을 때 시스템에 의해서 호출되는 함수를 뜻합니다.

- 많이 사용되는 곳은 이벤트 핸들러입니다. (ex:클릭 시 함수 호출, 엔터 시 함수 호출 등등)

<!DOCTYPE html>
<html>
<body>
  <button id="myButton">Click me</button>
  <script>
    var button = document.getElementById('myButton');
    // button이 클릭되었을 때, 함수를 실행.
    button.addEventListener('click', function() {
      alert('버튼이 클릭됐습니다!');
    });
  </script>
</body>
</html>

// 1초 후 함수 실행
setTimeout(function () {
  console.log('1초 후 출력된다.');
}, 1000);

- 콜백 함수는 주로 비동기식 처리에서 사용됩니다. 비동기식 처리는 처리가 종료되면 호출될 함수(콜백 함수)를 미리 매개변수에 전달해놨다가 처리가 종료되면 콜백 함수를 호출하는 방식입니다.

function afterCall(){
	setTimeout(function(){
    	console.log('1초후 실행된 코드');
    });
}

afterCall();
console.log('더 늦게 호출했는데 먼저 나옴');

// 더 늦게 호출했는데 먼저 나옴
// 1초후 실행된 코드

📝 정리

함수에는 여러 가지 종류가 있다.
즉시 실행 함수는 선언과 동시에 실행이 되고, 재사용이 불가하다. 초기화에 주로 사용된다
내부 함수는 함수 내부에 선언된 함수를 뜻 한다. 부모 함수 외부에서 내부 함수 호출은 불가하다.
재귀 함수는 자기 자신을 호출하는 함수이다. 탈출 조건을 주지 않으면 무한 호출을 해서 오류가 난다.
콜백 함수는 어떠한 처리가 이루어진 후에 실행되는 함수이다. 주로 이벤트 핸들러에서 사용된다.

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시