JavaScript 함수

2023-03-30

 

함수

• 메모리에 코드를 저장 할 수 있는 수단
• function 이라는 키워드를 사용하여 선언이 가능하다
• 함수는 선언 후에 호출이 되어야 저장된 코드가 실행된다
• 함수에는 일반함수와 익명함수가 존재한다

 

함수 선언

• function를 활용하여 선언한다
• 일반함수 구문 : function 함수명 () {}
• 익명함수 구문 : function ()
• 익명함수는 변수에 대입이 가능하다
• 일반 함수는 호이스팅을 지원한다
• 익명함수 호출 시에는 익명함수가 호출부 위에 선언이 되어야 한다
• 함수 선언 시 중괄호를 스코프 라고한다
• 함수에는 전역변수와 지역변수 구분이 확실하다

//일반 함수 선언
fn(); //선언 전에도 호출 가능
function fn(){
	console.log('일반함수 실행');
}
fn(); //선언 후에도 호출 가능
일반함수 실행 <- console창 출력 값
일반함수 실행	<- console창 출력 값

//익명 함수 선언
const fn1 = function(){
	console.log('익명함수 실행');
		}
fn1(); //선언 후에만 호출가능
익명함수 실행 <- console창 출력 값

//화살표 함수 선언
const arrFn1 = () => {
	console.log('화살표 함수1 실행');
}
const arrFn2 = () => console.log('화살표 함수2 실행'); //한줄일경우 선언 가능
화살표 함수1 실행 <- console창 출력 값
화살표 함수2 실행 <- console창 출력 값

 

함수 호출

• 선언된 함수명으로 호출을 할 수 있다
• 함수명(); 방식으로 함수명 '()'을 붙여줘야 호출이 된다
• '()'에는 인수를 삽입하여 호출 할 수 있다
• 익명 함수를 호출시에는 대입된 변수명()을 하여 함수 호출이 가능하다

// 함수 선언 및 호출
// 1. 일반함수 선언 호이스팅 대상
func();		// 일반함수는 선언부 이전 호출 가능
function func (){ 
	console.log('일반함수 func 실행');
}
일반함수 func 실행 <- console창 출력 값

// 2. 익명함수 :  변수선언 = function(){} 
//func1(); // 익명함수는 선언부 이전에 호출 불가능
const func1 = function(){
	console.log('익명함수 func1 실행');
}
func1();
익명함수 func1 실행 <- console창 출력 값

// 3. 화살표 함수 : 변수 선언 = () => {};
//arrowFn3(); // 화살표함수는 선언부 이전에 호출 불가능
const arrowFn3 = () => {
	console.log('화살표 함수 arrowFn3 실행');
}
화살표 함수 arrowFn3 실행 <- console창 출력 값

 

매개변수가 있는 함수

• 함수호출시 값을 삽입하여 호출을 하게 되면 매개변수로 받을 수가 있다
• 선언시 '()'안에 매개변수명을 지정할 수 있다
• 매개변수의 갯수만큼 호출 시 값을 넣어 함수를 호출 해야 한다
• 구문 : function 함수명(매개변수명, 매개변수명 ...) {}
• 호출시 : 함수명(인수, 인수 ...);
• 매개변수 선언에는 var나 let 키워드가 필요없다

function sum(n1, n2){ //변수 선언 키워드를 안써도 된다 (매개변수명만 선언)
	console.log(n1 + n2);
}
sum(10,20);
//30 <- console창 출력 값

let sum2 = function(n1, n2, n3){
	console.log(n1 + n2 + n3);
}
sum2(10, 20, 30);
//60 <- console창 출력 값

//화살표 함수
const multiFn = num => {
	console.log(num);
	// 화살표함수는 arguments를 갖고 있지 않음.
	//console.log(arguments);
}

 

함수 return

• 함수 내부에 return 키워드를 사용할 수 있다
• return 키워드와 값을 지정하게 되면 함수를 호출한 곳에 값을 전달하게 한다
• 구문 : return 값;
• return 키워드를 만날 경우 함수는 종료 된다

function returnCall(n1, n2){
	return n1 + n2;
}
//호출한 곳에 값을 전달해 준다
let result = returnCall(10,20);
console.log(result);
// 30 <- console창 출력 값

 

내부 함수

• 함수 내부에 함수가 존재한다

function outterFn1(){
	let num = 5;
    innerFn();
    function innerFn(){
    	let num = 0;
        console.log(num);
    }
}
outterFn1();

//0 <- console창 출력 값

 

재귀호출

• 함수 내부에서 나 자신을 호출
• 재귀호출은 꼭 필요한 상황이 아니면 지양

function selfFn(n){
	console(`${n}번째 호출`);
    if(n == 10) return n;
    selfFn(n+1);
}
slefFn(1);
/*
1번째 호출
2번째 호출
3번째 호출
4번째 호출
5번째 호출
6번째 호출  <- console창 출력 값
7번째 호출
8번째 호출
9번째 호출
10번째 호출
*/