[js] 2. 자바스크립트 함수의 개념 | 내부함수 | 콜백함수 | 클로저함수

자바스크립트의 선언문은??
변수, 함수변수, 객체변수 ... 등등

명령들이 실행되기 전에 선언된 변수들과 함수들은 미리 생성되어있음
즉, 미리 메모리를 차지하고 있음!!!!!

 

1. 자바스크립트 함수의 개념

07_function.html

1) 메스드와 함수의 차이점

• 메소드 : 클래스 내부의 필드값을 이용해서 기능 제공
• 함수 : 매개변수로 값을 전달받아 그 값에 대한 가공된 결과값 주는 것

2) 자바스크립트 함수(Function)의 개념

• 매개변수로 값을 전달받아 가공 처리하여 결과를 반환하는 기능 제공
• 함수를 선언해야만 함수를 호출하여 함수 내부에 작성된 명령을 실행하여 처리결과 반환받아 사용 가능
• 함수는 선언 방법에 따라 선언함수와 익명함수로 구분

3) 선언함수

• 함수명을 명시하여 선언하는 함수
• 선언함수는 자바스크립트 명령 실행 전에 미리 생성되므로 함수 선언 전 호출 가능 (미리 생성)

🍒선언함수 선언 방법

• 함수명(함수를 구분하기 위한 식별자)을 명시하여 선언
• 내부적으로 함수명은 변수로 처리하고, 선언함수는 값으로 처리
• 즉, 내부적으로 함수를 변수처럼 사용한다는 의미 (얘들아, 함수도 변수처럼 값으로 처리해~~ 함수명을 변수로 하고, 선언함수는 값으로 하자!!)
• 자바스크립트에서는 함수도 function 이라는 자료형인 하나의 값으로 취급

🍒선언함수 선언 및 호출 형식

//선언함수 선언
function 함수명(매개변수, 매개변수, ...){ 명령; 명령; ...}

//선언함수 호출 : 선언함수는 함수명을 이용하여 함수 호출 - 반복 호출 가능
함수명(값, 값, ...);

 

 

🍒선언함수 사용 예시

//선언함수 선언
function display() {
	alert("선언함수의 명령 실행");
}

alert("자료형 = "+typeof(display)); //자료형 = function

//함수명은 내부적으로 변수와 동일한 기능을 제공하므로 함수명을 출력한 경우 선언된 함수가 "문자값"으로 변환되어 출력
//변수값 출력 - 함수 출력
alert("display = " + display);

//선언함수 호출 - 함수에 작성된 명령 실행
display();
display();
display();

alert("display = " + display);

display();

4) 익명함수

• 함수명을 명시하지 않고 선언하는 함수
• 익명함수는 자바스크립트 명령처럼 실행되어 생성되므로 함수 선언 전 호출 불가능 (순차적인 생성)

🍇익명함수 선언 방법

• 함수명을 명시하지 않고 함수 선언
• 익명함수 선언할 때 호출하여 사용 - 1번만 호출 가능

🍇익명함수 선언 및 호출 형식

//익명함수 선언 및 호출 (선언하자마자 호출됨)
(function(매개변수, 매개변수, ...){ 명령; 명령; ...})(값, 값, ...);

//변수에 익명 함수를 저장하고 변수를 이용하여 함수 호출 가능
const 변수명 = function(매개변수, 매개변수, ...){ 명령; 명령; ...};

 

🍇익명함수 사용 예시

//익명함수 선언 및 호출
(function(){
	alert("익명함수의 명령 실행");
})();
//선언하자 마자 딱 1번만 호출되는 함수~
//(특별한경우) 자바스크립트는 static 영역이 따로 없기 때문에 미리 명령들을 실행하고 싶을 경우에 사용함

5) 함수변수

🔥변수에 "익명함수" 저장 가능 (자주 사용함)

//=> 내부적으로 함수는 값으로 처리되므로 변수에 저장 가능
var display = function(){
	alert("익명함수의 명령 실행");
};
alert("자료형 = "+typeof(display)); //자료형 = function

//변수값 출력 - 함수 출력
alert("display = " + display);

//함수변수는 함수를 구분하기 위한 식별자와 동일한 역할 수행 - 함수변수를 사용하여 함수 호출 가능
//형식) 함수변수(값, 값,..)
display();

🔥변수에 "선언함수" 저장 가능 (가능하지만, 굳이..?)

//=> 내부적으로 함수명은 변수와 동일하게 처리되므로 변수에 함수를 저장할 경우 함수명 소멸됨
var display=function printf(){
	alert("선언함수의 명령 실행");
}

display(); //ok
//함수명을 이용하여 함수 호출 불가능
printf(); //error  , 함수명 소멸( printf 이름의 함수는 없어요~ )

 

6) 선언함수 VS 익명함수의 선언 전 호출 가능 여부

🔥선언함수 - 함수 선언 전 호출 가능

function display() {
	alert("선언함수의 명령 실행");
}
display(); //ok

//자바스크립트 명령 실행 전 선언함수가 미리 생성되므로 선언함수는 함수 선언 전에 호출 가능
display(); //ok
function display() {
	alert("선언함수의 명령 실행");
}

🔥익명함수 - 함수 선언 전 호출 불가능

var display = function() {
	alert("익명함수의 명령 실행");
}
display(); //ok

//자바스크립트 명령처럼 익명함수가 생성되므로 익명함수는 함수 선언 전에 호출 불가능
display(); //error , display is not a function
var display = function() {
	alert("익명함수의 명령 실행");
}

7) 화살표함수(ES6)

• ES6에서는 람다 표현식을 이용한 화살표 함수 추가
• 코드를 간결하여 표현하여 가독성 증가 (처리 속도 증가)

🍓화살표함수의 선언 및 호출 형식

//화살표함수 선언 및 호출 (선언하자마자 호출됨)
((매개변수, 매개변수, ...) => {명령; 명령; ...})(값, 값, ...);

//변수에 화살표 함수를 저장하고 변수를 이용하여 함수 호출 가능
const 변수명 = (매개변수, 매개변수, ...) => {명령; 명령; ...};

 

🍓화살표함수 사용 예시

//일반적으로 변수 만들 때 const 나  let 많이 사용
const display = () => {alert("화살표함수의 명령 실행");}

//함수 내부에 작성된 명령이 하나인 경우 {} 기호 생략 가능
const display = () => alert("화살표함수의 명령 실행");

display();

 

 

 

 

 

2. 함수의 전역변수와 지역변수

08_scope.html

1) 전역변수(Global Variable)

• 함수 외부에서 선언된 변수 - 모든 함수에서 사용 가능

2) 지역변수(Local Variable)

• 함수 내부에서 선언된 변수 - 선언된 함수에서만 사용 가능

3) 전역변수 & 지역변수 사용 예시

• 전역변수 설정

var globalVar=100; //전역변수

 

• 지역변수 설정

function display1() {
	alert("display1 함수에서 사용하는 globalVar 변수값 = " + globalVar);
	globalVar = 200; //전역변수에 저장된 값 변경

	var localVar=300; //지역변수 - 선언된 함수가 종료되면 지역변수 자동 소멸
	alert("display1 함수에서 사용하는 localVar 변수값 = " + localVar);

	//💖변수를 var 키워드로 선언하지 않고 값을 저장하여 사용한 경우 "전역변수"로 처리
	variable = 400;
	alert("display1 함수에서 사용하는 variable 변수값 = " + variable);
}

function display2() {
	alert("display2 함수에서 사용하는 globalVar 변수값 = " + globalVar);
	//alert("display2 함수에서 사용하는 localVar 변수값 = " + localVar); //error 발생
	alert("display2 함수에서 사용하는 variable 변수값 = " + variable);
}

• 전역변수와 지역변수 사용

display1();
//display1 함수에서 사용하는 globalVar 변수값 = 100
//display1 함수에서 사용하는 localVar 변수값 = 300
//display1 함수에서 사용하는 variable 변수값 = 400

display2();
//display2 함수에서 사용하는 globalVar 변수값 = 200
//error , localVar is not defined
//display2 함수에서 사용하는 variable 변수값 = 400

 

 

 

 

 

 

 

 

3. 함수의 매개변수(Argument)

09_argument.html

1) 함수의 매개변수(Argument)

• 함수 내부에 작성된 명령을 실행하기 위해 반드시 필요한 값을 함수 호출 시 전달받아 저장하기 위한 변수

2) 함수의 매개변수가 사용된 예제 ①

//1.
//매개변수는 var 키워드 없이 선언하며 지역변수로 처리
function sum(num1,num2) {
	alert("합계 = "+ (num1+num2));
}


//2.
//함수의 매개변수 갯수에 같은 갯수의 값을 차례대로 전달하여 함수 호출 - 권장
sum(10,20); //합계 = 30



//3.
//함수의 매개변수 갯수보다 적은 갯수의 값을 전달하여 함수 호출 가능
// => 값을 전달받지 못한 매개변수는 [undefined] 자료형의 변수로 처리 - 비정상적인 처리결과 발생
sum(10); //합계 = NaN


//4.
//함수의 매개변수 갯수보다 많은 갯수의 값을 전달하여 함수 호출 가능
// => 매개변수에 값이 차례대로 전달되어 저장되며 남은 값은 미사용 처리
sum(10,20,30); //합계 = 30

3) 함수의 매개변수가 사용된 예제 ②

//1.
//모든 함수 내부에는 함수 호출시 전달되는 모든 값을 저장된 Arguments 변수( Arguments 객체 - 배열) 제공
function total() {
	alert("total 함수의 명령 실행");
	alert(arguments); //[object Arguments] : Arguments라는 클래스가지고 만든 객체에요~
	alert(arguments.length); //Arguments 객체에 저장된 요소의 갯수 - 전달값의 갯수

	var tot = 0;
	for(i=0; i<arguments.length; i++){
		//Arguments[index] : Arguments 객체에 저장된 index 위치의 값 - 전달값
		tot += arguments[i];
	}
	alert("합계 = " + tot);
}



//2.
//매개변수에 상관없이 함수명을 이용하여 함수 호출 가능
total();
//total 함수의 명령 실행
//[object Arguments]
//0
//합계 = 0





//3.
//모든 함수가 가진 Arguments 객체를 이용해 매개변수가 없는 함수에 값이 전달된 경우에도 
//전달된 값 처리 가능
total(10,20,30);
//total 함수의 명령 실행
//[object Arguments]
//3
//합계 = 60

total(10,20,30,40,50);
//total 함수의 명령 실행
//[object Arguments]
//5
// 합계 = 150

 

 

 

 

4. 함수의 return문

10_return.html

• 함수를 강제로 종료하기 위한 명령

function display(name) {
	if (name == "홍길동") {
		alert("관리자님, 안녕하세요.");
		return; //조건이 참인 경우 함수 종료
	}
	alert(name + "님, 안녕하세요.");
}

display("홍길동"); //관리자님, 안녕하세요.
display("임꺽정"); //임꺽정님, 안녕하세요.

• 함수 내부값(처리결과)을 반환하는 기능 제공

function sum(num1,num2) {
	return num1+num2; //함수를 종료하면서 결과값 반환
}

var tot = sum(10,20); //함수를 호출하여 반환되는 값을 변수에 저장
alert("합계 = " + tot);
//합계 = 30


//🖤화살표 함수(ES6)의 return문
const sum = (num1,num2) => {return num1 + num2; }

//화살표 함수의 명령으로 값을 반환하는 명령이 하나만 있는 경우 { } 기호 및 return 키워드 생략 가능
//const sum = (num1,num2) => return num1 + num2; //error
const sum = (num1,num2) => num1 + num2;

alert("합계 = " + sum(10,20)); //함수를 호출하여 반환되는 값을 저장하지 않고 출력
//합계 = 30

• 반환값(return문) 없는 함수 호출
  • 반환값이 없는 함수를 호출할 경우 함수의 반환값을 사용하면 [undefined] 자료형으로 처리

function display() {
	alert("선언함수의 명령 실행");
}

alert(display());

 

 

 

 

 

 

 

5. 내부함수 | 콜백함수 | 클로저함수

1) 내부함수(Inner Function)

📦11_inner.html

• 함수 내부에 선언된 함수
• 선언된 함수 내부에서만 호출 가능
• 함수 변수(let or const)를 사용하는 이유 : 동일한 이름의 함수가 선언되어 덮어씌우기를 방지 하기 위해

📦내부 함수 사용 안한 예제

display(); //두번째 함수만 호출됨

//첫번째 함수
//함수 사라짐
function display() {
	alert("display 함수의 명령 실행 - 1")
}

//동일한 이름의 두번째 함수
//동일한 이름의 함수 선언 가능 - 기존 함수 덮어씌우기(OverWrite)
function display() {
	alert("display 함수의 명령 실행 - 2")
}

 

📦내부 함수 사용한 예제

outer();   //외부함수 호출 - 내부함수가 생성되어 호출됨
display(); //일반함수 호출

function outer() {
	/*
	//방법1 - 선언함수로 내부함수 선언 및 호출
	function display() {//내부 함수 선언
		alert("display 함수의 명령 실행 - 1")
	}
	display();//내부함수 호출
	*/
  //방법2 - 익명함수로 내부함수 선언 및 호출 : 선언하고 딱 한번 호출 할 것이므로 선언함수 보다는 익명함수 사용이 더 좋음
	(function () {
		alert("display 함수의 명령 실행 - 1")
	})();
}

function display() {
	alert("display 함수의 명령 실행 - 2")
}

2) 콜백함수(CallBack Function)

📦12_callback.html

• 매개변수로 함수를 전달받아 저장하고, 함수내부에서 매개변수를 이용하여 호출되는 함수
• 이벤트 처리 시 많이 사용

📦매개변수로 함수를 전달받아 함수 내부에서 호출되지 않으면? : 콜백함수아님

//📦선언함수로 함수 선언
function display1() {
	alert("display1 함수의 명령 실행");
}

//📦선언함수 호출
//함수명은 함수를 구분하기 위한 식별자로 내부적으로 함수변수처럼 함수를 저장하여 사용
alert(display1); //함수명 >> 함수
//function display1() {alert("display1 함수의 명령 실행");}

display1(); //함수명을 이용하여 함수 호출 - 함수 내부에 작성된 명령 실행
//display1 함수의 명령 실행

alert(display1());
//display1 함수의 명령 실행
//undefined

//📦익명함수를 선언하여 변수에 저장 - 함수변수
var display2 = function () {
	alert("display2 함수의 명령 실행");
}

//📦익명함수 호출
alert(display2); //함수변수 >> 함수
//function () {alert("display2 함수의 명령 실행");}
display2(); //함수변수를 이용하여 함수 호출
//display2 함수의 명령 실행
alert(display2());
//display2 함수의 명령 실행
//undefined

 

📦콜백함수

//📦함수의 매개변수로 함수를 전달받아 저장 하고 호출
function display(callback) {
	//alert(callback); //매개변수에 저장된 함수가 "출력"됨
	callback(); //매개변수에 저장된 함수가 "호출"됨 - 콜백함수
}

//1. 📦콜백함수 호출
display(display1); //함수명을 이용하여 매개변수에 저장된 함수 전달
//display1 함수의 명령 실행
display(display2); //함수변수를 이용하여 매개변수에 저장된 함수 전달
//display2 함수의 명령 실행

//2. 📦"익명 함수를 생성"하여 매개변수에 전달해 저장없이 콜백함수 호출
display(function() {alert("익명 함수의 명령 실행");});
//익명 함수의 명령 실행

//3. 📦"화살표 함수(Arrow Function)를 생성"하여 매개변수에 전달해 저장없이 콜백함수 호출
display(() => alert("화살표 함수의 명령 실행"));
//화살표 함수의 명령 실행

 

3) 클로저함수(Closure Function)

📦13_closure.html

• 콜백함수와 반대되는 개념의 함수
• 함수 내부에서 선언된 함수(내부함수)를 반환받아 함수 외부에서 호출하는 함수

📦외부함수(내부함수 선언 및 반환하는 함수) 선언 및 호출

function outer() {
	//내부함수 선언
	function display() {
		alert("outer 함수 내부에 선언된 display 함수의 명령 실행");
	}
	//내부함수 호출
	//display(); // 내부함수는 선언된 함수에서만 호출 가능

	//내부함수 반환
	return display; //함수명을 이용하여 함수 반환
}

//📦외부함수(내부함수 반환받아 저장) 호출
//display(); //error , 내부함수를 함수 외부에서 호출한 경우 에러 발생
outer(); //ok, 외부함수 호출 - 내부함수가 생성되어 호출 가능
var inner = outer(); //외부함수를 호출하여 내부함수를 반환받아 변수에 저장
inner(); //함수변수를 이용하여 반환받은 내부함수 호출 - 클로저 함수

//외부함수를 호출하면 -> 내부함수를 반환함 : outer();
//반환받은 내부함수를 변수에 담지 말고 바로 호출 가능 : outer()();
outer()();

📦외부함수(익명내부함수를 반환하는 함수) 선언 및 호출

function closure(name) {
	//익명함수를 생성하여 반환
	return function() {
		//내부함수에서는 외부함수의 변수 사용 가능
		alert(name+"님, 안녕하세요.")
	}
}

//📦반환받은 내부함수를 변수에 저장하지 않고 직접 호출 가능
closure("홍길동")();
closure("임꺽정")();