web/javascript
[js] 2. 자바스크립트 함수의 개념 | 내부함수 | 콜백함수 | 클로저함수
jeri
2024. 5. 4. 19:04
반응형
자바스크립트의 선언문은??
변수, 함수변수, 객체변수 ... 등등
명령들이 실행되기 전에 선언된 변수들과 함수들은 미리 생성되어있음
즉, 미리 메모리를 차지하고 있음!!!!!
1. 자바스크립트 함수의 개념
07_function.html
1) 메스드와 함수의 차이점
- 메소드 : 클래스 내부의 필드값을 이용해서 기능 제공
- 함수 : 매개변수로 값을 전달받아 그 값에 대한 가공된 결과값 주는 것
2) 자바스크립트 함수(Function)의 개념
- 매개변수로 값을 전달받아 가공 처리하여 결과를 반환하는 기능 제공
- 함수를 선언해야만 함수를 호출하여 함수 내부에 작성된 명령을 실행하여 처리결과 반환받아 사용 가능
- 함수는 선언 방법에 따라 선언함수와 익명함수로 구분
3) 선언함수
- 함수명을 명시하여 선언하는 함수
- 선언함수는 자바스크립트 명령 실행 전에 미리 생성되므로 함수 선언 전 호출 가능 (미리 생성)
🍒선언함수 선언 방법
- 함수명(함수를 구분하기 위한 식별자)을 명시하여 선언
- 내부적으로 함수명은 변수로 처리하고, 선언함수는 값으로 처리
- 즉, 내부적으로 함수를 변수처럼 사용한다는 의미 (얘들아, 함수도 변수처럼 값으로 처리해~~ 함수명을 변수로 하고, 선언함수는 값으로 하자!!)
- 자바스크립트에서는 함수도 function 이라는 자료형인 하나의 값으로 취급
🍒선언함수 선언 및 호출 형식
//선언함수 선언
function 함수명(매개변수, 매개변수, ...){ 명령; 명령; ...}
//선언함수 호출 : 선언함수는 함수명을 이용하여 함수 호출 - 반복 호출 가능
함수명(값, 값, ...);
🍒선언함수 사용 예시
//선언함수 선언
function display() {
alert("선언함수의 명령 실행");
}
alert("자료형 = "+typeof(display)); //자료형 = function
//함수명은 내부적으로 변수와 동일한 기능을 제공하므로 함수명을 출력한 경우 선언된 함수가 "문자값"으로 변환되어 출력
//변수값 출력 - 함수 출력
alert("display = " + display);
//선언함수 호출 - 함수에 작성된 명령 실행
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); //합계 = 303) 함수의 매개변수가 사용된 예제 ②
//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("임꺽정")();
반응형