📚 [JavaScript] 함수

하나의 목적을 가진 작업을 수행하도록 설계된 블록

📕 함수 선언 및 호출

🎁 문법

function 함수이름(매개변수1, 매개변수2, ...) {
	함수가 호출되었을 때 실행하고자 하는 실행문;
}
함수이름() 또는 함수이름(변수1, 변수2, ...)

🎈 예제

<script>
function hello() {
	document.write("안녕하세요");
}
hello(); //안녕하세요

function add(x, y) {
	document.write(x + y);
}
add(10, 20); //30
</script>

📙 매개변수, 인수, return

1. 매개변수(parameter)

함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수

2. 인수(argument)

함수가 호출될 때 함수로 값을 전달해주는 값

3. return

값을 반환해주는 반환문

🎈 예제

<script>
function hello() {
	document.write("안녕하세요");
}
function num(x) {
	document.write(x + "을 입력했습니다");
} //x는 매개변수
function add(x, y) {
	return x + y;
} //x와 y는 매개변수
hello(); //안녕하세요
num(3); //3을 입력했습니다
var sum = add(3, 5); //3과 5는 인수
document.write(sum); //8
</script>

📒 변수의 유효 범위

1. 지역 변수(local variable)

함수 내에서 선언된 변수

🎈 예제

<script>
function num() {
	var x = 10;
   	document.write("지역변수 " + x); 
}
num(); //지역변수 10
document.write(x); //Uncaught ReferenceError: x is not defined
</script>

2. 전역 변수(global variable)

함수의 외부에서 선언된 변수

🎈 예제

<script>
var x = 10;
function num() {
   	document.write("전역변수 " + x);
    x = 20; //전역 변수는 함수 내부에서도 접근하여 변경 가능
}
num(); //전역변수 10
document.write(x); //20
</script>

📗 함수의 유효 범위

자바스크립트에서 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근할 수 있다

🎈 예제

<script>
var x = 10, y = 20; //전역 변수 x와 y
function sub() { //전역 함수 sub()
	return x - y; //전역 변수 x, y에 접근
}
document.write(sub()); //-10

function parentFunc() { //전역 함수 parentFunc()
	var x = 1, y = 2; //전역 변수의 범위 제한
    function add() { //내부 함수 add()
    	return x + y; //지역 변수 x, y에 접근
    } return add();
}
document.write(parentFunc()); //3
</script>

✔ 전역 함수는 모든 전역 변수와 전역 함수에 접근할 수 있다
✔ 내부 함수는 다른 함수 내에 정의된 함수로 그 함수의 부모 함수에서 정의된 모든 변수 및 부모 함수가 접근할 수 있는 모든 다른 변수까지도 접근할 수 있다

📘 재귀함수

함수 내부에서 자기 자신의 함수를 호출하는 함수

🎈 예제

<script>
//재귀함수를 사용해서 5 팩토리얼 구하기
function fact(x) {
	if(x == 1) {
    	return 1;
    } return x * fact(x - 1);
}
document.write(fact(5)); //120
</script>

📔 화살표 함수

🎁 문법

(매개변수) => { 함수 내용 }

🎈 예제

<script>
//매개변수가 없는 경우 매개변수를 넣는 괄호 안은 비워둔다
var hello = () => { return "안녕하세요" };
document.write(hello()); //안녕하세요

//중괄호 안에 함수 내용이 한 줄뿐이라면 중괄호를 생략할 수 있다
var hello = () => "안녕하세요";
document.write(hello()); //안녕하세요

//매개변수가 하나인 경우 매개변수의 괄호를 생략할 수 있다
var hi = user => { document.write(user + "님, 안녕하세요?"); }
hi("홍길동"); //홍길동님, 안녕하세요?

//매개변수가 둘 이상인 경우 매개변수를 쉼표로 구분한다
var sum = (x, y) => x + y;
document.write(sum(5, 6)); //11
</script>