[JavaScript]함수(Function)

Frontend/JavaScript

[JavaScript]함수(Function)

sukii 2023. 12. 29. 14:33

🤔함수(Function) : 매개변수로 값을 전달받아 가공 처리하여 결과값을 반환하는 기능을 제공

(자바로 치면 메소드 같은 기능)
=> 자바스크립트에서는 함수를 선언하고 함수를 호출하여 함수에 작성된 명령을 실행해 결과값을 반환받아 사용
=> 자바스트립트에서는 함수 선언방법에 따라 선언함수와 익명함수로 구분
🔘선언함수 : 함수명을 작성하여 선언한 함수
🔘익명함수 : 함수명을 작성하지 않고 선언한 함수

실행결과를 중간에 삽입하면서 확인해보기 위해서 이렇게 작성함.

맨 아래에 코드 전체가 쓰여있는 블록이 있음.

볼드 처리 되어 있는 것들이 선언문 또는 명령문!

//로 시작하는 것들은 주석문!

//선언함수 - 함수명(함수를 구분하기 위한 식별자)을 작성하여 함수 선언
//형식) function 함수명(매개변수, 매개변수, ...) { 명령; 명령; ... }
// => 내부적으로 함수명을 변수처럼 사용하여 선언함수를 값으로 저장
function display() {
alert("선언함수의 명령 실행");
}

alert(display);//함수명으로 출력 처리 - 함수명으로 저장된 선언함수 출력

//아래와 같이 창이 두번 실행됨

alert(typeof(display));

//typleof를 이용하면 자료형이 'function'인 것을 확인할 수 있음.

//선언함수는 함수명을 이용하여 함수 호출 - 함수를 반복적으로 호출 가능
//형식) 함수명(값, 값, ...)
//두번 호출하면 두번 실행 됨

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

//익명함수 - 함수명을 작성하지 않고 함수 선언
// => 익명함수는 함수를 선언하여 바로 함수를 호출하여 사용 - 함수를 한번만 호출 가능
//형식) (function (매개변수, 매개변수, ...) { 명령; 명령; ... })(값, 값, ...)
(function() {
alert("익명함수의 명령 실행");
})();//함수 선언 및 호출

//익명함수를 선언하여 변수에 저장 - 함수형 변수
// => 자바스크립트에서는 함수를 하나의 값으로 처리하므로 변수에 저장 가능
var display=function() {
alert("익명함수의 명령 실행");
}

alert(display); //함수변수를 출력 처리 - 변수에 저장된 익명함수 출력

//아래와 같이 창이 두번 실행됨

alert(typeof(display));//function
//typleof를 이용하면 자료형이 'function'인 것을 확인할 수 있음.

//함수변수를 사용하여 함수변수에 저장된 함수 호출 가능
// => 함수변수는 함수명과 동일한 역할 실행 - 함수변수를 사용하여 함수 반복 호출 가능
//형식) 함수변수(값, 값, ...)
display();

//선언함수는 자바스크립트 명령 실행전에 선언되어 생성 - 함수 작성 전에 함수 호출 가능
display();//함수 작성 전 함수 호출 가능

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

display();//함수 작성 후 함수 호출 가능

//익명함수를 선언하며 변수에 저장하면 명령으로 처리되어 함수 작성 전 호출 불가능
//display();//함수 작성 전 함수 호출 불가능 - 에러 발생

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

display();//함수 작성 후 함수 호출 가능

//선언함수를 선언하여 변수에 저장 가능하지만 함수명으로 함수 호출 불가능
// => 함수변수를 사용하여 선언함수 호출 가능
var display=function println() {
alert("함수 내부의 명령 실행");
}

//println();//에러 발생
display();

//ES6에서는 람다 표현식을 이용한 화살표함수 추가 => 코드를 간결하게 표현하여 가독성 증가
//형식) (매개변수, 매개변수, ...) => { 명령; 명령; ... }
// => 변수에 화살표함수를 저장하여 변수명으로 함수 호출 가능
// => 화살표함수를 저장하는 변수는 const 키워드를 사용하여 생성

//const display = () => { alert("화살표함수의 명령 실행") }

// => 함수 내부에 작성된 명령이 하나인 경우 { } 기호 생략 가능

const display = () => alert("화살표함수의 명령 실행");

display();

</script>
</body>
</html>

전체 코드👩‍💻⬇️

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<script type="text/javascript">
	//선언함수 - 함수명(함수를 구분하기 위한 식별자)을 작성하여 함수 선언
	//형식) function 함수명(매개변수, 매개변수, ...) { 명령; 명령; ... }
	// => 내부적으로 함수명을 변수처럼 사용하여 선언함수를 값으로 저장
	function display() {
		alert("선언함수의 명령 실행");
	}	
	alert(display);//함수명으로 출력 처리 - 함수명으로 저장된 선언함수 출력
	alert(typeof(display));//function
	
	//선언함수는 함수명을 이용하여 함수 호출 - 함수를 반복적으로 호출 가능
	//형식) 함수명(값, 값, ...)
	//두번 호출하면 두번 실행 됨
  	display();//함수 호출 - 함수 내부에 작성된 명령 실행	
	display();
	
	//익명함수 - 함수명을 작성하지 않고 함수 선언
	// => 익명함수는 함수를 선언하여 바로 함수를 호출하여 사용 - 함수를 한번만 호출 가능 
	//형식) (function (매개변수, 매개변수, ...) { 명령; 명령; ... })(값, 값, ...)
	(function() {
		alert("익명함수의 명령 실행");
	})();//함수 선언 및 호출
	
	//익명함수를 선언하여 변수에 저장 - 함수형 변수
	// => 자바스크립트에서는 함수를 하나의 값으로 처리하므로 변수에 저장 가능
	var display=function() {
		alert("익명함수의 명령 실행");
	}
	
	alert(display);//함수변수를 출력 처리 - 변수에 저장된 익명함수 출력
	alert(typeof(display));//function
	
	//함수변수를 사용하여 함수변수에 저장된 함수 호출 가능
	// => 함수변수는 함수명과 동일한 역할 실행 - 함수변수를 사용하여 함수 반복 호출 가능
	//형식) 함수변수(값, 값, ...)
	display();

	//선언함수는 자바스크립트 명령 실행전에 선언되어 생성 - 함수 작성 전에 함수 호출 가능
	display();//함수 작성 전 함수 호출 가능

	function display() {
		alert("선언함수의 명령 실행");
	}
	
	display();//함수 작성 후 함수 호출 가능
	
	//익명함수를 선언하며 변수에 저장하면 명령으로 처리되어 함수 작성 전 호출 불가능
	display();//함수 작성 전 함수 호출 불가능 - 에러 발생

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

	display();//함수 작성 후 함수 호출 가능
	
	//선언함수를 선언하여 변수에 저장 가능하지만 함수명으로 함수 호출 불가능
	// => 함수변수를 사용하여 선언함수 호출 가능
	var display=function println() {
		alert("함수 내부의 명령 실행");
	}
	
	println();//에러 발생
	display();
	
	//ES6에서는 람다 표현식을 이용한 화살표함수 추가
	// => 코드를 간결하게 표현하여 가독성 증가
	//형식) (매개변수, 매개변수, ...) => { 명령; 명령; ... }
	// => 변수에 화살표함수를 저장하여 변수명으로 함수 호출 가능
	// => 화살표함수를 저장하는 변수는 const 키워드를 사용하여 생성
	// => 함수 내부에 작성된 명령이 하나인 경우 { } 기호 생략 가능
	const display = () => { alert("화살표함수의 명령 실행") }
	const display = () => alert("화살표함수의 명령 실행");
	
	display(); 
	</script>
</body>
</html>