💃 함수 선언으로 코드를 저장하고, 저장된 함수를 호출 해보자!
앞에서 변수 선언을 통해 데이터를 저장했지만 변수에는 코드를 저장할 수 없다.
그래서 함수 선언을 하여 코드를 메모리에 저장했다가 사용해야 한다.
함수는 내장함수(기본함수)와 사용자 정의 함수(직접 제작)로 나뉘며,
함수 선언은 'function(기능)' 키워드를 이용한다.
기본 함수 정의문 = 함수 선언
함수를 사용하여 코드를 저장하는 것을 함수 선언이라고 한다.
"이 '함수명'에 내가 만든 코드를 보관해줘~!" 라는 뜻.
function 함수명(){
코드 입력;
} 함수 호출
함수선언에 입력된 코드는 호출없이 실행되지 않는다.
함수명();매개변수
함수선언의 '함수명()'에서 () 안에는 매개변수가 들어간다.
매개변수를 넣으면 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다. 함수호출 시에 입력한 데이터 값을 함수선언의 매개변수가 받아 실행하여 출력하는 방식이다. (데이터1은 매개변수1, 데이터2는 매개변수2 ...)
function myFnc(매개변수1,매개변수2){
document.write("제 이름은 "+매개변수1+"입니다.", "<br>");
document.write("사는 곳은" +매개변수2+"입니다.", "<br>");
}
myFnc(데이터1,데이터2);호이스팅(hoisting) = '끌어올리다'
호이스팅이란, 함수선언과 함수호출의 순서가 바뀌어도 선언문을 위로 끌어올려 함수가 정상적으로 호출되도록 하는 방식이다. 일반 함수는 호이스팅이 적용되지만, 익명의 함수선언은 호이스팅 방식이 지원되지 않으니 참고하자.
문제를 통해 함수의 선언과 호출을 연습해보자!
문제 1. 현재 나의 통장잔액은 30000원이다.
잔액과 입금액을 전달받아 누적액을 알려주는 함수를 작성하여 호출하라.
- 콘솔창에 출력 = "현재 통장잔액은 32000원 입니다."
- 함수명 : saveFn
매개변수 : totmoney, inputmoney
function saveFn(totmoney, inputmoney){
console.log("현재 통장잔액은 "+(totmoney+inputmoney)+"원 입니다.");
}
saveFn(30000, 2000)문제 2. 주문할 치킨의 개수를 전달받아 주문개수와 주문총액을 출력하는 함수를 작성하여 출력하라.
- 콘솔창에 2줄 출력 = "주문하신 치킨 개수는 3개 입니다." / "주문 총액은 75000원 입니다."
- 함수명 : chickenTotalFn
매개변수 : ea
치킨 한마리 가격 = 25000원
주문 개수를 전달받을 것이니까 변수 ea는 개수가 된다.
(콘솔창 입력은 'br'태그 입력 안해도 됨!)
function chickenTotalFn(ea){
console.log("주문하신 치킨 개수는 "+ea+"개 입니다.");
console.log("주문 총 액은 "+(ea*25000)+"원 입니다.");
}
chickenTotalFn(3);문제 3. 두개의 매개변수 one, two를 통해 두 수 100, 200을 전달받아 그 합을 hab 변수에 저장후 콘솔창에 출력하는 sumFn 함수를 작성하여 호출하라.
- 콘솔창에 출력 = "hab = 300"
'hab 변수'를 응용할 것!
function sumFn(one, two){
let hab = one + two
console.log("hab ="+hab);
}
sumFn(100,200);