2025 / 01 / 23
오늘은 수업 시간에 함수에 대해 배웠습니다.
매개변수와 인수의 차이를 알고 함수를 직접 만들어서 실습예제를 풀도록 하였습니다.
실습 예제를 풀며 이런저런 방식을 생각해보니 나름 초반보다는 실력이 올라간 것 같아 다행이었습니다.
💌 함수
함수는 특정 작업을 묶어놓은 코드 덩어리를 의미합니다.
어떤 일을 수행할 때마다 코드 반복을 줄이고, 재사용이 쉽도록 도와주는 역할을 합니다.
1. 함수 선언하기
- 자바스크립트에서 함수는 function 키워드를 사용하여 정의합니다.
function 함수이름(매개변수1, 매개변수2) { // 함수의 코드 return 반환값; // 값을 반환하는 경우 }
1-1. 예시
- 두 숫자를 더하는 함수를 정의하였습니다.
function add(a, b) { return a + b; }
2. 함수 호출하기
- 함수를 정의한 후, 원하는 곳에서 호출하여 실행할 수 있습니다.
let result = add(3, 5); // 3과 5를 더해서 8이 반환됨 console.log(result); // 8 출력
💌 매개변수
매개변수 (Parameter)
- 매개변수는 함수 정의에서 사용되는 변수입니다.
- 함수가 필요한 값을 받을 자리를 미리 정의하는 것을 말합니다.
- 함수 내부에서 사용될 값을 나타내며, 함수가 호출되기 전까지 실제 값은 결정되지 않습니다.
function greet(name) { console.log("Hello, " + name); }
- 위 함수에서 name이 바로 매개변수입니다.
- greet 함수가 정의될 때, name이라는 변수를 받아서 그 값을 출력하게 됩니다.
💌 인수
인수 (Argument)
- 인수는 함수를 호출할 때 전달되는 실제 값입니다.
- 함수가 호출될 때, 매개변수에 실제로 전달되는 값이 바로 인수입니다.
greet("Alice"); // "Alice"가 인수
- 위에서 Alice는 greet 함수의 인수입니다.
- greet 함수가 호출될 때 name 매개변수는 "Alice"라는 인수를 받게됩니다.
💌 관계성
매개변수와 인수의 관계성에 대해 알아보겠습니다.
- 1) 매개변수와 인수의 관계
- 2) 매개변수와 인수 예시
1. 매개변수와 인수의 관계
- 매개변수는 함수가 정의될 때, 함수의 인수로 받을 자리입니다.
- 인수는 함수를 호출할 때 매개변수에 실제로 전달되는 값입니다.
2. 매개변수와 인수 예시
- 매개변수와 인수의 예시로 sum이라는 함수를 정의하였습니다.
function sum(a, b) { // a와 b는 매개변수
return a + b;
}
>
let result = sum(5, 3); // 5와 3은 인수
console.log(result); // 8- 이 코드에서 a, b는 함수 sum의 매개변수입니다.
- 5와 3은 sum 함수에 전달된 인수입니다.
💌 차이점
매개변수와 인수의 차이점을 표로 정리해보았습니다.
| 구분 | 매개변수 (Parameter) | 인수 (Argument) |
|---|---|---|
| 정의 | 함수가 정의될 때 사용되는 변수 | 함수 호출 시 실제로 전달되는 값 |
| 역할 | 함수 내부에서 값을 받는 자리를 정의 | 함수 호출 시 해당 자리에 값을 전달 |
| 위치 | 함수 정의에서만 존재 | 함수 호출 시에만 존재 |
| 예시 | function greet(name)에서 name은 매개변수 | greet("Alice")에서 "Alice"는 인수 |
| 사용법 | 함수 내부에서 값에 접근하거나 계산에 사용 | 함수가 실제로 실행될 때 그 값이 사용된다 |
| 설명 | 함수가 실행되기 전까지 어떤 값이 올지 모른다. | 함수가 실행될 때 매개변수로 전달되는 값이다. |
💌 실습 예제
함수를 사용해서 계산기 만들기
- 사용자에게 첫 번째 숫자 / 연산자 / 두 번째 숫자를 입력 받습니다.
- 사용자에게 입력 받은대로 연산을 진행합니다.
- 한 번의 연산이 끝난 후 사용자에게 추가 계산을 진행할 것인지 묻습니다.
- yes를 누르면 연산자와 / 숫자를 다시 입력받고 첫번째 연산의 값과 계산을 이어갑니다.
- no를 누를 경우 계산기 프로그램이 종료됩니다.
- c를 누를 경우 계산기의 값이 초기화되고 처음부터 다시 실행됩니다.
- 숫자가 입력되지 않았거나 / 연산자가 아니거나 등의 예외처리를 진행하였습니다.
1. 입력받기
사용자에게 첫 번째 숫자 / 연산자 / 두 번째 숫자를 입력 받습니다.
- 각각의 변수를 선언후 바로 프롬프트로 받은 값을 할당해줍니다.
let num1 = Number(prompt("첫 번째 숫자를 입력해주세요")); let col = prompt("연산자를 입력해주세요 (+, -, *, /)"); let num2 = Number(prompt("두 번째 숫자를 입력해주세요"));
2. 연산 진행
사용자에게 입력 받은대로 연산을 진행합니다.
- 각 사칙연산의 함수를 만들어줍니다.
- 만든 함수를 활용해 연산을 진행합니다.
- 각각의 연산을 수행하는 함수는 함수 표현식 중 화살표 함수를 사용하였습니다.
- 나누기 함수는 두번째 숫자가 0이 입력되었을 때의 예외 처리를 하였습니다.
- 연산이 진행되고 결과가 null이 아니라면 해당 값을 result라는 빈 배열에 push합니다.
- 해당 함수 표현식에 대한 설명은 다음 포스팅에 있습니다.
let result = []; const add = (x, y) => x + y; const minus = (x, y) => x - y; const multi = (x, y) => x * y; const division = (x, y) => y !== 0 ? x / y : (alert("0으로 나눌 수 없습니다."), null); // 계산 결과가 null이 아닐 경우 배열에 결과 저장 if (calcResult !== null) { result.push(calcResult); }
3. 추가 연산 여부
한 번의 연산이 끝난 후 사용자에게 추가 계산을 진행할 것인지 묻습니다.
yes를 누르면 연산자와 / 숫자를 다시 입력받고 첫번째 연산의 값과 계산을 이어갑니다.
no를 누를 경우 계산기 프로그램이 종료됩니다.
c를 누를 경우 계산기의 값이 초기화되고 처음부터 다시 실행됩니다.
- 프롬프트로 추가로 연산을 진행할 것인지 묻고 해당 값을 user라는 변수를 선언하여 할당합니다.
let user = prompt("추가 계산을 하시겠습니까? (네/아니오/새로 시작 c)"); if (user == "네" || user == "" || user == "yes") { num1 = calcResult; // 계속 계산하려면 마지막 결과를 num1으로 설정 continue; } else if (user == "아니오" || user == "no" || user == null) { document.write(`최종 결과: ${result[result.length - 1]}`); break; } else if (user == "C" || user == "c") { alert("계산을 처음부터 다시 시작합니다."); return startCalculation(); // 종료하고 다시 시작 }
4. 초기화
3번에서 C를 누를 경우 초기화를 진행해야합니다.
- 사용자가 프롬프트 값으로 C를 누르는 경우 초기화를 하기 위해 위에서 작성한 코드를 하나의 함수로 만들어줍니다.
- 추가연산을 진행하게 되었을 때 사용자가 다시 받아야하는 값은 연산자와 num2이기 때문에 해당 구문은 while문에 작성하여 반복을 돌려줍니다.
- num1은 초반에 1번 받고 다시 사용자에게 입력받지 않기 때문에 함수안에는 작성하지만 while문 안에는 작성하지 않습니다.
function startCalculation() { let num1 = Number(prompt("첫 번째 숫자를 입력해주세요")); let col; let num2; let result = []; // 계산 결과를 저장할 배열 while (true) { col = prompt("연산자를 입력해주세요 (+, -, *, /)"); num2 = Number(prompt("두 번째 숫자를 입력해주세요")); let calcResult; // 연산자에 따라 계산 함수 호출 if (col == "+") { calcResult = add(num1, num2); } else if (col == "-") { calcResult = minus(num1, num2); } else if (col == "*") { calcResult = multi(num1, num2); } else if (col == "/") { calcResult = division(num1, num2); } // 계산 결과가 null이 아닐 경우 배열에 결과 저장 if (calcResult !== null) { result.push(calcResult); } console.log(result); // 콘솔로 값 확인해보기 alert(`${num1} ${col} ${num2} = ${calcResult}`); // 계산 결과 띄우기 let user = prompt("추가 계산을 하시겠습니까? (네/아니오/새로 시작 c)"); console.log(user);// 콘솔로 값 확인해보기 if (user == "네" || user == "" || user == "yes") { num1 = calcResult; // 계속 계산하려면 마지막 결과를 num1으로 설정 continue; } else if (user == "아니오" || user == "no" || user == null) { document.write(`최종 결과: ${result[result.length - 1]}`); break; } else if (user == "C" || user == "c") { alert("계산을 처음부터 다시 시작합니다."); return startCalculation(); // 종료하고 다시 시작 } } console.log(result); } // 계산 시작 startCalculation(); // 함수를 정의하고 사용하기 위해서는 꼭 호출을 해주어야합니다!!
5. 예외 처리
숫자가 입력되지 않았거나 / 연산자가 아니거나 등의 예외처리를 진행하였습니다.
- getValidNumber와 getValidCol라는 함수를 만들었습니다.
- getValidNumber는 숫자 이외의 값을 입력하면 다시 입력으로 돌아가는 함수입니다.
- getValidCol는 연산자 이외의 값을 입력하면 다시 입력으로 돌아가는 함수입니다.
// 숫자 입력 검증 함수 function getValidNumber(promptMessage) { let num; while (true) { num = Number(prompt(promptMessage)); if (!isNaN(num)) { // 입력값이 숫자라면 return num; } else { alert("유효하지 않은 입력입니다. 숫자를 입력해주세요."); } } } // 연산자 입력 검증 함수 function getValidCol(promptMessage) { let getCol; while (true) { getCol = prompt(promptMessage); if (getCol === "+" || getCol === "-" || getCol === "*" || getCol === "/") { // 입력값이 숫자라면 return getCol; } else { alert("유효하지 않은 입력입니다. 연산자를 입력해주세요."); } } }
해당 함수 적용은 이렇게!
- num1은 함수안에 col과 num2는 함수 안에 있는 반복문 안에 있습니다.
- 해당 함수가 프롬프트 값을 받을 수 있게 해당 구문은 감싸줍니다.
let num1 = getValidNumber("첫 번째 숫자를 입력해주세요"); // 유효한 첫 번째 숫자 입력 받기 col = getValidCol("연산자를 입력해주세요 (+, -, *, /)"); num2 = getValidNumber("두 번째 숫자를 입력해주세요"); // 유효한 두 번째 숫자 입력 받기
💌 전체 코드
- 위에서 설명한 코드를 모두 합쳐놓은 것입니다.
<script>
const add = (x, y) => x + y;
const minus = (x, y) => x - y;
const multi = (x, y) => x * y;
const division = (x, y) => y !== 0 ? x / y : (alert("0으로 나눌 수 없습니다."), null);
// 숫자 입력 검증 함수
function getValidNumber(promptMessage) {
let num;
while (true) {
num = Number(prompt(promptMessage));
if (!isNaN(num)) { // 입력값이 숫자라면
return num;
} else {
alert("유효하지 않은 입력입니다. 숫자를 입력해주세요.");
}
}
}
// 연산자 입력 검증 함수
function getValidCol(promptMessage) {
let getCol;
while (true) {
getCol = prompt(promptMessage);
if (getCol === "+" || getCol === "-" || getCol === "*" || getCol === "/") { // 입력값이 숫자라면
return getCol;
} else {
alert("유효하지 않은 입력입니다. 연산자를 입력해주세요.");
}
}
}
// 계산 함수
function startCalculation() {
let num1 = getValidNumber("첫 번째 숫자를 입력해주세요"); // 유효한 첫 번째 숫자 입력 받기
let col;
let num2;
let result = []; // 계산 결과를 저장할 배열
while (true) {
col = getValidCol("연산자를 입력해주세요 (+, -, *, /)");
num2 = getValidNumber("두 번째 숫자를 입력해주세요"); // 유효한 두 번째 숫자 입력 받기
let calcResult;
// 연산자에 따라 계산 함수 호출
if (col == "+") {
calcResult = add(num1, num2);
} else if (col == "-") {
calcResult = minus(num1, num2);
} else if (col == "*") {
calcResult = multi(num1, num2);
} else if (col == "/") {
calcResult = division(num1, num2);
}
// 계산 결과가 null이 아닐 경우 배열에 결과 저장
if (calcResult !== null) {
result.push(calcResult);
}
console.log(result);
alert(`${num1} ${col} ${num2} = ${calcResult}`);
let user = prompt("추가 계산을 하시겠습니까? (네/아니오/새로 시작 c)");
console.log(user);
if (user == "네" || user == "" || user == "yes") {
num1 = calcResult; // 계속 계산하려면 마지막 결과를 num1으로 설정
continue;
} else if (user == "아니오" || user == "no" || user == null) {
document.write(`최종 결과: ${result[result.length - 1]}`);
break;
} else if (user == "C" || user == "c") {
alert("계산을 처음부터 다시 시작합니다.");
return startCalculation(); // 종료하고 다시 시작
}
}
console.log(result);
}
// 계산 시작
startCalculation();
</script>16일차 후기
- 함수를 사용하기 위해서는 꼭 호출이라는 것을 해줘야하는데 나는 함수 정의한 그 자체가 작동하는 코드로 보여서 계속 호출하는 것을 까먹는다.. (｡•́︿•̀｡)
- 함수 호출 뿐만아니라 예를 들어 내가 변수에 어떠한 조건이 성립하면 1씩 더하고 싶을 때.. 변수를 선언하고 꼭 초기값을 지정해줘야하는데 그것도 계속 까먹는 것 같다.
- 그래도 그나마 다행인 점은 내가 어느 부분에 실수하는지 감이 오긴한다는거...?
- 함수를 사용하는게 확실히 코드를 간결화하고 중복 코드를 없앨 수 있어서 좋다.
- 함수를 쓰는게 헷갈리는데 반복해서 생각해보고 사용하면 바뀌겠지? ᕦ(๑•̀o•́๑)ᕤ
૮꒰ ྀི〃´꒳`〃꒱ა