♻️재사용할 수 있는 함수

이준석·2024년 3월 28일

개념 정리

목록 보기
8/11

♻️함수의 '재사용성'이란?

  • alert()함수 괄호 안에 메시지만 바꿔서 함수를 실행하면 다른 메시지를 알림 창에 띄울 수 있습니다. 이렇게 입력을 바꿔 여러 번 사용할 수 있는 성질을 함수의 '재사용성'이라고 합니다. '재사용성'은 함수의 가장 큰 장점이라 할 수 있습니다.

📖매개변수, 인수, return 알아보기

-매개변수는 함수나 메서드를 정의할 때 사용되는 변수로, 외부에서 입력된 값을 함수 내부로 전달하는 역할을 합니다.

function addNumber() { 								
			var num1 = 2;
			var num2 = 3;
			var sum = num1 + num2;			
			alert("결과 값: " + sum);
		}
		addNumber();

addNumber() 함수는 실행할 때마다 계속 같은 결괏값(5)를 보여줍니다. 프로그램 안에서 여러 번 사용하는 함수인데 입력값을 바꾸지 못한다면 매우 불편할 것입니다.

  • 변수값이 자주 변하는 상황에서 함수를 사용하려면 값을 고정하지 않고 어떤 숫자든지 2개만 addNumber() 함수로 넘겨서 더해 주면 됩니다. 즉, 함수를 실행하는데 필요한 값을 함수 밖에서 제공하는 것이죠. 이렇게 하려면 함수를 선언할 때부터 외부에서 값을 받아 줄 변수를 미리 만들어야 합니다. 이것을 매개변수(parameter)라 하고 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣습니다.

🚩함수 선언할 때 매개변수 지정하기

function addNumber(num1, num2){ 								
			var sum = num1 + num2;			
			return sum;
		}
    var result = addNumber(2, 3);
    document.write("두 수를 더한 값 : " + result);
  • 매개변수는 다른 변수와 겹치지 않는 이름을 사용하면 됩니다. 위 코드에서 'num1, num2'가 매개변수 입니다.
  • 두 수를 더한 sum값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야 합니다. 이러한 동작을 값을 반환한다(return)고 합니다.
  • 매개변수가 있는 함수를 호출할 때 실제 값 부분을 인수(argument)라고 합니다. 위 코드에서 addNumber()함수 괄호안에 들어간 값 '2, 3'이 인수 입니다.

📌매개변수 기본값 지정하기

  • es6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능이 생겼습니다. multiple() 함수에서 매개변수 b와 c의 변숫값을 넘겨받지 못했을 때 기본값을 사용합니다.
function multiple(a, b = 5, c = 10) { 	// b = 5, c = 10으로 기본값 지정
			return a * b + c;
		}
    
    var result1 = multiple(5, 10, 20); // a = 5, b = 10, c = 20
    document.write("multiple(5, 10, 20)을 실행하면 결과는 " + result1 + "입니다. <br>")
    var result2 = multiple(10, 20);  // a = 10, b = 20, c = 10(기본값)
    document.write("multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는 " + result2 + "입니다.<br>")
    var result3 = multiple(30);  // a = 30, b = 5(기본값), c = 10(기본값)
    document.write("multiple(30)을 실행하면 두번째,  세번째 매개변수는 기본값을 사용하고 결과는 " + result3 + "입니다.")
profile
프론트엔드를 공부하고 있습니다.

0개의 댓글