함수
메모리에 코드를 저장 할 수 있는 수단으로 function이라는 키워드를 사용하여 선언이 가능하다. 함수는 선언 후에 호출이 되어야 저장된 코드가 실행되며 일반함수와 익명함수가 존재한다.
함수 선언
function를 활용하여 선언한다. 함수 선언 시 중괄호를 유효범위 혹은 스코프라고 하며 전역변수와 지역변수 구분이 확실하다. (함수 스코프: var, 블록 스코프 : let, const)
일반함수 구문: function 함수명 ( ) { } → 호이스팅 기술을 지원한다.
익명함수 구문 : function ( ) { } → 변수에 대입이 가능하다.
※ 익명함수 호출 시에는 익명함수가 호출부 위에 선언이 되어 있어야한다.
※ 호이스팅이란?
→ 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것
// 일반함수 선언 (정의문) : fuction 함수명 () {}
function getMemberName() {
console.log("일반함수", "getMemberName");
}
// 익명함수 선언 : 변수명 (var, let, const) = fuction(){}
var fnGetMemberName = function () {
console.log("익명함수", "fnGetMemberName");
};
// 화살표함수 : 변수명 (var, let, const) = () => {};
var arrowFnGetMemberName = () =>
console.log("화살함수", "arrowFnGetMemberName");
함수 호출
선언된 함수명으로 호출을 할 수 있으며 '함수명( );' 방식으로 함수명 '( )'를 붙여줘야 호출이 된다. '( )' 에는 인수를 삽입하여 호출 할 수 있고 익명 함수를 호출시에는 대입된 변수명( )를 하여 함수 호출이 가능하다.
// 함수 선언 코드와 이어서
getMemberName(); //일반 함수 호출
fnGetMemberName(); //익명 함수 호출
arrowFnGetMemberName(); //화살 함수 호출
매개 변수가 있는 함수
함수호출시 값을 삽입하여 호출을 하게 되면 매개변수로 받을 수가 있으며 선언시 '()' 안에 매개변수명을 지정할 수 있다. 매개변수의 갯수만큼 호출 시 값을 넣어 함수를 호출 해야하며 매개변수 선언에는 var나 let 키워드가 필요없다.
구문 : function 함수명(매개변수명, 매개변수명 ….) {}
호출시 : 함수명(인수, 인수 …..);
function sum(n1, n2){
console.log(n1 + n2);
}
sum(10,20);
var sum2 = function(n1, n2, n3){
console.log(n1 + n2 + n3);
}
sum2(10,20,30);
return
함수 내부에 return 키워드를 사용할 수 있다. return 키워드와 값을 지정하게 되면 함수를 호출한 곳에 값을 전달하게 하며return 키워드를 만날 경우 함수는 종료 된다
구문 : return 값;
function returnCall(n1, n2){
return n1 + n2;
}
//호출한 곳에 값을 전달 해준다.
var result = returnCall(10,20);
console.log(result);
재귀 함수
선언된 함수 내부에 자기 자신을 호출하는 방법으로 재귀호출은 꼭 필요한 상황이 아니면 지양해야 한다.
//카운팅 된값이 10 이상이면 리턴 하기 (재귀호출 종료하기)
var myFn = function(n){
console.log('함수 호출');
if(n == 10) return ;
myFn(n + 1);
};
내부 함수
var myFn = function(){
console.log('함수 호출');
var subFn = function(){
console.log('내부 함수 호출');
}
subFn();
};
myFn();
고차 함수
함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수입니다.
function fnArgFuction(fn) {
console.log(fn, "고차함수");
fn("홍길동");
}
콜백 함수
함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수입니다. 매개변수로 받은 함수를 실행 시 인수값을 삽입하여 실행할 경우, 인수로 삽입된 함수에서 매개변수로 값을 받을 수 있습니다. (비동기화 처리 시 주로 사용된다.)
fnArgFuction(function (name) {
console.log(name, "콜백함수");
});
고차함수와 콜백함수
매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 콜백 함수를 전달받는 함수를 고차함수 라고 한다
객체 생성자 함수
함수를 new 연산자를 활용하여 객체화 시킬 수 있는 방법입니다.
- 함수 내부에 this 키워드 활용
- new 연산자를 활용하여 객체화 되었을 시 Object형태로 변환
- this 키워드로 선언된 변수들은 외부에서 접근 가능
- var 혹은 let으로 선언된 변수들은 외부에서 접근 불가능
- this 키워드 혹은 함수가 확장(prototype)이 되었다면 그 함수는 객체 생성자 함수이다.
- 객체 생성자 함수 선언 시 함수명은 주로 파스칼 표기법으로 앞글자는 대문자로 표기한다.
//선언 - 일반적인 함수와 동일
var MyFn = function(){
//var 혹은 let으로 선언된 변수는 외부에서 접근 불가능
var name = '홍길동';
this.age = 20;
}
var mf = new MyFn();
//this 키워드를 활용하여 선언된 변수는 외부에서 접근가능
console.log(mf.age);
//정보은닉
var MyFn2 = function(){
var name = '홍길동';
this.getName = function(){
return name;
}
this.setName = function(myName){
name = myName;
}
}
var mf2 = new MyFn2();
console.log(mf2.getName()); //결괏값 홍길동
- prototype (확장)
원형함수를 확장시킨다. (상속 개념)
함수명.prototype.변수명 = 값 혹은 함수
MyFn.prototype.age = 20;
//prototype으로 확장 후 객체화
var mf = new MyFn();
console.log(mf.age);
MyFn.prototype.getAge = function(){
//prototype이나 this 키워드로 생성된 변수 혹은 메서드는 this 키워드로 활용하여 접근
return this.age;
}
console.log(mf.getAge());
-즉시 실행 함수
정의되자마자 즉시 실행되는 함수
(function(className) {
console.log(className);
})('name');
사용이유
- 필요없는 전역 변수의 생성을 줄일 수 있다.
- private한 변수를 만들 수 있다.
-클로저 (closer)
함수 실행시 상위 함수 내의 환경을 기억하고 있으며 주로 콜백함수와 같이 쓰인다.(비동기적인 코드에서 쓰임)
function closerFn(name) {
var memberName = name;
return function () {
return memberName;
};
}
//예시
const ClickBtn = document.getElementById("ctnBtn");
const resultH4 = document.getElementById("result");
const closureFun = (function(){
let cnt = 0;
return function(){
cnt++;
return cnt;
}
})();
ClickBtn.addEventListener("click", function(){
resultH4.innerHTML = "클릭횟수 : " + closureFun();
});
장점
- 데이터를 보존할 수 있다.
- 정보 접근을 제한한다.(캡슐화)
- 모듈화에 유리하다.
'코딩 공부 > JavaScript' 카테고리의 다른 글
[JS] 일급객체와 일급함수 (0) | 2022.10.31 |
---|---|
[JS] 내장 객체 (0) | 2022.10.31 |
[JS] 객체 (0) | 2022.10.14 |
[JS] 배열 (0) | 2022.10.13 |
[JS] 제어문 (0) | 2022.10.07 |