2025 / 01 / 24
오늘은 수업 시간에 함수 표현식과 종류에 대해 배웠습니다.
기명 함수랑은 다르게 익명 함수와 화살표 함수가 있는데 조금 헷갈렸습니다.
익명함수는 C#에서 봤던 개념과 유사해서 이해하는 것에 큰 어려움은 없었습니다.
배운 함수를 활용해서 실습 예제를 풀어보았습니다.
💌 함수 표현식
함수 표현식은 함수를 변수에 할당하는 방법입니다.
- 함수 선언문과 달리 함수 표현식은 변수에 할당되기 전에 실행될 수 없습니다.
- 함수 표현식에 서 기명 함수와 익명 함수가 사용될 수 있습니다.
1. 예시
- add라는 변수에 익명함수가 할당된 형태입니다.
const add = function(x, y) {
return x + y;
};2. 특징
- 변수에 할당된 함수
- 이름을 가질 수도 있고, 가질 수도 없다.
- 주로 콜백 함수나 이벤트 핸들러에서 사용
💌 기명 함수
기명 함수 (Named Function)
- 기명 함수는 이름이 있는 함수입니다.
- 함수 선언문 또는 함수 표현식에서 모두 사용할 수 있습니다.
- 기명 함수는 함수 내부에서 재귀적으로 호출될 수 있으며, 디버깅 시 함수의 이름을 확인할 수 있어 유리합니다.
1. 예시
- sum은 기명 함수의 이름이고, add는 해당 함수가 할당된 변수입니다.
const add = function sum(x, y) {
return x + y;
};2. 특징
- 이름이 있는 함수
- 디버깅 시 유리하고, 재귀 함수에 유용
- 변수에 할당된 형태로 사용 가능
💌 익명 함수
익명 함수 (Anonymous Function)
- 익명 함수는 이름이 없는 함수입니다.
- 대부분 함수 표현식에서 사용됩니다.
- 주로 한 번만 사용되는 함수나 콜백 함수에서 사용됩니다.
1. 예시
- function(x, y)는 익명 함수이고, 이름이 없기 때문에 익명 함수라고 합니다.
const add = function(x, y) {
return x + y;
};2. 특징
- 이름이 없는 함수
- 주로 콜백 함수나 한 번만 호출될 함수에 사용
- 이름이 없어서 재귀 호출이 불가능(필요 시 기명 함수 사용)
💌 화살표 함수
화살표 함수 (Arrow Function)
- 화살표 함수는 함수 표현식의 일종으로, 더 간결하고 직관적인 문법을 제공합니다.
- function 키워드 대신 =>를 사용하여 함수를 정의합니다.
- this 바인딩 방식이 일반 함수와 달라서 유용하게 사용됩니다.
1. 예시
- 화살표 함수는 function을 사용하지 않고 =>로 함수의 몸체를 정의합니다.
const add = (x, y) => x + y;2. 특징
- 간결한 문법 (function 키워드를 생략할 수 있음)
- this 바인딩이 외부에서 결정 (일반 함수와 다름)
- 익명 함수로 주로 사용되지만, 기명 함수로도 사용 가능
💌 함수 비교
기명 함수 / 익명 함수 / 화살표 함수를 비교해서 정리해보았습니다.
| 특징 | 기명 함수 | 익명 함수 | 화살표 함수 |
|---|---|---|---|
| 이름 | 있음 | 없음 | 없음 |
| 호이스팅 | 함수 선언이 호이스팅되어 함수 선언 전에 호출 가능 | 호이스팅되지 않음 | 호이스팅되지 않음 |
| this 바인딩 | 함수 호출 시 동적으로 this가 바인딩 | 함수 호출 시 동적으로 this가 바인딩 | 상위 스코프의 this를 상속받음 |
| 문법 | function functionName() { ... } | const func = function() { ... } | const func = () => { ... } |
| 예시 | 일반적인 함수 선언 및 재사용, 코드 가독성 좋음 | 일시적인 함수나 콜백 함수에서 사용 | 간결한 콜백 함수에 사용 |
| 매개변수 | 있을 수 있음 | 있을 수 있음 | 있을 수 있음 |
| 본문 | 블록 코드 사용 가능 (여러 줄 가능) | 블록 코드 사용 가능 (여러 줄 가능) | 단일 식을 반환하는 경우 블록 생략 가능 |
| 재사용 | 높음, 여러 번 호출 가능 | 낮음, 주로 한번만 사용 | 높음, 간단한 계산이나 콜백 함수에서 많이 사용 |
💌 실습 예제
로또 당첨 확인 프로그램
- 사용자에게 로또 번호를 입력받습니다.
- 컴퓨터는 1~45 까지의 로또번호(난수 6개)를 뽑습니다.
- 뽑은 로또번호를 배열에 담습니다. ( push( ) 활용 )
- 배열 안에 랜덤 난수가 중복되는 번호가 있는지 검사합니다.
- 로또번호와 사용자에게 입력받은 번호를 비교합니다.
- 비교하여 같은 번호가 있다면 해당 갯수를 출력합니다.
1. 입력 받기
사용자에게 로또 번호를 입력받습니다.
- 입력 받은 값을 정수로 변환하여 배열에 저장합니다.
- 사용자가 입력한 숫자가 6개인지 확인하는 함수를 만들어줍니다.
- 입력 숫자의 개수가 6개가 아니면 false / 맞으면 true를 반환합니다.
- 사용자에게 입력받는 프롬프트를 반복을 돌려서 해당 함수가 실행되고 해당 조건이 맞으면 break;를 사용해 반복문을 빠져나갑니다.
let user; // 사용자 입력을 저장할 변수 let answer = []; // 랜덤으로 생성된 로또 번호를 저장할 배열 let score = 0; // 점수를 저장할 변수 let number; // 사용자가 입력한 로또 번호를 저장할 변수 // 사용자가 입력한 숫자가 6개인지 확인하는 함수 function ck() { if (number.length !== 6) { // 입력된 숫자의 개수가 6개가 아닐 경우 alert("6개의 숫자를 입력해 주세요."); return false; } return true; } // 사용자가 로또 번호를 입력했을 때의 예외처리 while(true) { // 사용자로부터 로또 번호를 입력받음 user = prompt("당신의 로또 번호를 주세용"); // 입력받은 값을 쉼표를 기준으로 나누고, 각 요소를 정수로 변환하여 배열에 저장 number = user.split(",").map(num => parseInt(num.trim())); if (ck()) break; }
2. 랜덤 숫자 뽑기
컴퓨터는 1~45 까지의 로또번호(난수 6개)를 뽑습니다.
뽑은 로또번호를 배열에 담습니다. ( push( ) 활용 )
배열 안에 랜덤 난수가 중복되는 번호가 있는지 검사합니다.
- Math.floor(Math.random( ))을 활용해서 랜덤 숫자를 뽑아줍니다.
- 배열 이름.includes(비교할 문자나 숫자)를 사용해서 해당 문자나 숫자가 배열에 들어있는지 확인합니다.
// 랜덤 난수로 럭키 번호를 6개 뽑음 while(answer.length < 6) { // 1 ~ 45 사이의 랜덤 숫자를 생성 let random = Math.floor(Math.random() * 46 + 1); // 중복되지 않으면 배열에 추가 if (!answer.includes(random)) { answer.push(random); } }
3. 로또 번호 비교
로또번호와 사용자에게 입력받은 번호를 비교합니다.
- 사용자의 로또 번호와 컴퓨터의 로또 번호를 비교해주는 함수를 하나 만들어줍니다.
- 반복문을 돌려서 사용자의 숫자가 컴퓨터의 숫자에 포함되어 있으면 matchCount를 증가시켜줍니다.
- 여기서 lottoCheck함수의 인수는 number라는 사용자가 입력한 로또 번호를 배열에 담은 것과 answer라는 컴퓨터가 랜덤으로 뽑은 숫자를 배열에 담은 것입니다.
// 사용자의 로또 번호와 랜덤으로 생성된 로또 번호에서 일치하는 숫자의 개수를 확인하는 함수 let lottoCheck = (userNumbers, luckyNumbers) => { let In_matchCount = 0; // 일치하는 숫자의 개수를 셀 변수 선언 for (let i = 0; i < userNumbers.length; i++) { // 사용자의 숫자가 럭키 번호에 포함되어 있으면 if (luckyNumbers.includes(userNumbers[i])) { matchCount++; // 일치하는 숫자 카운트 증가 } } return matchCount; }; // 사용자의 로또 번호와 컴퓨터의 랜덤 번호에서 일치하는 숫자 개수 계산 let matchCount = lottoCheck(number, answer);
4. 출력하기
비교하여 같은 번호가 있다면 해당 개수를 출력합니다.
- 함수를 하나 만들어서 일치하는 번호의 개수에 따라 순위도 매겨주었습니다.
- matchCount의 개수에 따라 출력문을 다르게 설정해줍니다.
// 결과 출력 alert(`사용자의 로또 번호는? ${user} \n컴퓨터의 로또 번호는? ${answer}`); if (matchCount === 0) { // 일치하는 번호가 없으면 alert(`당첨 숫자가 없습니다. \n${win(matchCount)}`); } else { // 일치하는 번호가 있을 경우 alert(`당첨 숫자는 ${matchCount}개 입니다. \n${win(matchCount)}`); } // 맞춘 갯수에 따라 순위를 매겨주는 함수 function win(x) { switch (x) { case 6: return "1등 당첨 축하드립니다."; break; case 5: return "2등 당첨 축하합니다."; break; case 4: return "3등 아쉽네요."; break; default: return "로또 다시 사야합니다."; } }
💌 전체 코드
위의 코드를 하나로 합쳐놓은 것입니다.
<script>
let user; // 사용자 입력을 저장할 변수
let answer = []; // 랜덤으로 생성된 로또 번호를 저장할 배열
let score = 0; // 점수를 저장할 변수
let number; // 사용자가 입력한 로또 번호를 저장할 변수
// 사용자가 입력한 숫자가 6개인지 확인하는 함수
function ck() {
if (number.length !== 6) { // 입력된 숫자의 개수가 6개가 아닐 경우
alert("6개의 숫자를 입력해 주세요.");
return false;
}
return true;
}
// 사용자가 로또 번호를 입력했을 때의 예외처리
while(true) {
// 사용자로부터 로또 번호를 입력받음
user = prompt("당신의 로또 번호를 주세용");
// 입력받은 값을 쉼표를 기준으로 나누고, 각 요소를 정수로 변환하여 배열에 저장
number = user.split(",").map(num => parseInt(num.trim()));
if (ck()) break;
}
// 랜덤 난수로 럭키 번호를 6개 뽑음
while(answer.length < 6) {
// 1 ~ 45 사이의 랜덤 숫자를 생성
let random = Math.floor(Math.random() * 46 + 1);
// 중복되지 않으면 배열에 추가
if (!answer.includes(random)) {
answer.push(random);
}
}
// 사용자의 로또 번호와 랜덤으로 생성된 로또 번호에서 일치하는 숫자의 개수를 확인하는 함수
let lottoCheck = (userNumbers, luckyNumbers) => {
let In_matchCount = 0; // 일치하는 숫자의 개수를 셀 변수 선언
for (let i = 0; i < userNumbers.length; i++) {
// 사용자의 숫자가 럭키 번호에 포함되어 있으면
if (luckyNumbers.includes(userNumbers[i])) {
matchCount++; // 일치하는 숫자 카운트 증가
}
}
return matchCount;
};
// 사용자의 로또 번호와 컴퓨터의 랜덤 번호에서 일치하는 숫자 개수 계산
let matchCount = lottoCheck(number, answer);
// 결과 출력
alert(`사용자의 로또 번호는? ${user} \n컴퓨터의 로또 번호는? ${answer}`);
if (matchCount === 0) {
// 일치하는 번호가 없으면
alert(`당첨 숫자가 없습니다. \n${win(matchCount)}`);
} else {
// 일치하는 번호가 있을 경우
alert(`당첨 숫자는 ${matchCount}개 입니다. \n${win(matchCount)}`);
}
// 맞춘 갯수에 따라 순위를 매겨주는 함수
function win(x) {
switch (x) {
case 6:
return "1등 당첨 축하드립니다.";
break;
case 5:
return "2등 당첨 축하합니다.";
break;
case 4:
return "3등 아쉽네요.";
break;
default:
return "로또 다시 사야합니다.";
}
}
</script>17일차 후기
- 오늘 수업 시간에는 화살표 함수를 배우고 사용했는데.. 어려운 것 같습니다.
- 실습 예제를 풀어보며 함수가 진짜 유용하다고 생각하게 되었습니다.
- 배운 함수들 중에서는 기명 함수가 제일 편한 것 같습니다.
- 지금은 편한대로 기명함수로 작성하지만 나중에 더 실력이 좋아지면 생략해서 쓰는 익명 함수나 화살표 함수도 자연스럽게 쓸 수 있었으면 좋겠습니다.
- 이제 곧 연휴라서 오늘은 과제를 따로 받았는데 생각보다 난이도가 있는 것 같습니다.
- 블랙잭이라는 게임을 만들어야하는데 규칙이 조금 다른... 하지만 세부적인 조건이 그래도 많아서.. 어찌저찌 구현은 해봤는데 예외 처리가 더 필요할 것 같습니다.
- 정리가 되는대로 이후에 포스팅하도록 하겠습니다! ٩(๑•̀o•́๑)و FIGHTING☆
૮꒰ ྀི〃´꒳`〃꒱ა