2025 / 01 / 31
오늘 수업 시간에는 return 키워드와 앞에 포스팅 했던 내용들을 활용해서
응용 문제와 실습 예제를 풀어보았습니다.
다양한 방식으로 문제를 풀어보니 조금은 이해가 빠르게 된 것 같습니다.
💌 return 키워드
return은 함수에서 특정 값을 외부로 반환하는 키워드입니다.
return을 만나면 함수의 실행을 즉시 종료하고, 지정된 값을 호출자에게 반환합니다.function 함수명() { // 반환할 값 return 반환값; }
1. 기본 사용
- add 함수는 두 개의 인자를 받아 더한 값을 return으로 반환합니다.
- return이 함수 실행을 종료하고 값을 반환하는 것을 볼 수 있습니다.
- 이 값은 result 변수에 저장됩니다.
function add(a, b) {
return a + b;
}
let result = add(3, 4); // 7
console.log(result); // 72. 동작 원리
1) 함수 종료
- return은 함수가 값을 반환하는 동시에, 해당 함수의 실행을 즉시 종료합니다.
- 반환값이 있을 경우에는 그 값으 함수 호출 위치로 전달됩니다.
- return이 없으면 함수는 undefined를 반환합니다.
function example() {
console.log("첫 번째");
return "반환된 값";
console.log("두 번째"); // 이 코드는 실행되지 않습니다.
}
let result = example(); // "첫 번째"
console.log(result); // "반환된 값"2) 반환값이 없는 경우
- return없이 함수가 끝나는 경우, 자바스크립트는 암묵적으로 undefined를 반환합니다.
function noReturn() {
console.log("반환값 없음");
}
let result = noReturn(); // undefined
console.log(result); // undefined3. 다양한 값 반환하기
1) 값을 직접 반환
- return뒤에 값을 지정하여 반환할 수 있습니다.
- 이 값은 숫자, 문자열, 객체, 배열 등 다양한 데이터 유형이 될 수 있습니다.
function greet(name) {
return "안녕하세요, " + name + "님!";
}
let greeting = greet("진하");
console.log(greeting); // "안녕하세요, 진하님!"2) 객체 / 배열 반환
- return을 사용하여 객체를 반환할 수 있습니다.
function getPerson() {
return { name: "진하", age: 23 };
}
let person = getPerson();
console.log(person); // { name: '진하', age: 23 }- return을 사용하여 배열을 반환할 수 있습니다.
function getNumbers() {
return [1, 2, 3, 4, 5];
}
let numbers = getNumbers();
console.log(numbers); // [1, 2, 3, 4, 5]4. return의 특징
1) 한 번만 반환 가능
- 함수 내에서 return은 한 번만 호출할 수 있습니다.
- 함수는 return이 실행되면 즉시 종료되기 때문에, 이후의 코드는 실행되지 않습니다.
2) 반환값은 자유롭게 설정 가능
- return뒤에 어떤 값이든 반환할 수 있으며, 필요에 따라 여러가지 형태로 값을 처리할 수 있습니다.
3) 함수 종료 시 자동 반환
- return을 사용하지 않으면 자바스크립트는 자동으로 undefined를 반환합니다.
💌 응용 문제
배열 필터링 및 변환
- processArray 함수는 두 개의 인자를 받습니다.
- 숫자들의 배열 (array) / 배열의 각 요소에 대해 실행할 콜백 함수 (callback)
- processArray 함수는 배열의 모든 요소에 대해 콜백 함수를 호출하고, 처리된 값을 새로운 배열에 담아 반환합니다.
- callback 함수로 숫자들을 2배로 만드는 함수를 전달하면, processArray는 배열의 각 숫자를 2배로 만들어 반환해야 합니다.
- callback 함수로 짝수만 출력하는 함수를 전달하면, processArray는 배열의 짝수만 출력하고 홀수는 null로 처리합니다.
- 만든 함수들을 활용해 결과를 출력합니다.
1. processArray 함수 생성
processArray 함수는 두 개의 인자를 받습니다.
숫자들의 배열 (array) / 배열의 각 요소에 대해 실행할 콜백 함수 (callback)// processArray 함수 작성 function processArray(array, callback) { // 내용 입력 }
2. 배열 순회
processArray 함수는 배열의 모든 요소에 대해 콜백 함수를 호출하고, 처리된 값을 새로운 배열에 담아 반환합니다.
function processArray(array, callback) { let resultArray = []; // 결과를 담을 배열 // 배열의 각 요소에 대해 콜백 함수 실행 for (let i of array) { resultArray.push(callback(i)); // 콜백 함수의 결과를 새로운 배열에 추가 } return resultArray; // 변환된 배열 반환 }
3. 콜백함수 생성(1)
callback 함수로 숫자들을 2배로 만드는 함수를 전달하면, processArray는 배열의 각 숫자를 2배로 만들어 반환해야 합니다.
// 콜백 함수1 : 숫자에 2배를 곱하는 함수 function doubleNumber(number) { return number * 2; }
4. 콜백함수 생성(2)
callback 함수로 짝수만 출력하는 함수를 전달하면, processArray는 배열의 짝수만 출력하고 홀수는 null로 처리합니다.
// 콜백 함수2 : 숫자가 짝수인 경우만 출력하는 함수 function isEven(number) { return number % 2 === 0 ? number : null; // 짝수만 반환, 홀수는 null }
5. 결과 출력
만든 함수들을 활용해 결과를 출력합니다.
// 문제 해결 예시 let numbers = [1, 2, 3, 4, 5, 6]; // 1. 숫자를 2배로 만드는 예시 console.log(processArray(numbers, doubleNumber)); // [2, 4, 6, 8, 10, 12] // 2. 짝수만 출력하는 예시 console.log(processArray(numbers, isEven)); // [null, 2, null, 4, null, 6]
💌 전체 코드
위에서 작성한 코드를 모두 하나로 합쳐 놓은 것입니다.
// processArray 함수 작성
function processArray(array, callback) {
let resultArray = []; // 결과를 담을 배열
// 배열의 각 요소에 대해 콜백 함수 실행
for (let i of array) {
resultArray.push(callback(i)); // 콜백 함수의 결과를 새로운 배열에 추가
}
return resultArray; // 변환된 배열 반환
}
// 콜백 함수1 : 숫자에 2배를 곱하는 함수
function doubleNumber(number) {
return number * 2;
}
// 콜백 함수2 : 숫자가 짝수인 경우만 출력하는 함수
function isEven(number) {
return number % 2 === 0 ? number : null; // 짝수만 반환, 홀수는 null
}
// 문제 해결 예시:
let numbers = [1, 2, 3, 4, 5, 6];
// 1. 숫자를 2배로 만드는 예시
console.log(processArray(numbers, doubleNumber)); // [2, 4, 6, 8, 10, 12]
// 2. 짝수만 출력하는 예시
console.log(processArray(numbers, isEven)); // [null, 2, null, 4, null, 6]💌 실습 예제
todo 리스트 만들기
- add, remove, list, exit 알림창을 만듭니다.
- add 입력 시 할 일을 추가할 수 있습니다.
- 더 입력할건지 물어보고 추가 작성이 가능하도록 합니다.- remove로 번호 선택 시 해당 할 일 삭제할 수 있습니다.
- 리스트의 번호가 배열이 길이를 넘어가는지 확인합니다.
- 지울 번호를 잘못 입력하면 유효하지 않다고 안내창을 띄웁니다.- list 선택 시 현재 리스트 확인할 수 있습니다.
- 리스트가 없으면 없다고 안내창을 띄웁니다.
- 리스트의 삭제 번호는 인덱스로 지워줘야하기 때문에 -1 해줍니다.- exit 선택 시 투두리스트가 종료됩니다.
- 새로운 투두리스트를 시작할 것인지 묻습니다.
1. add(추가 기능)
- 사용자가 할 일을 추가할 때마다 prompt를 사용해 입력을 받습니다.
- 입력값이 없거나 공백이면 경고 메시지가 출력되고, 다시 입력을 받습니다.
- 할 일이 추가되면 목록을 출력하고, 추가할지 말지 여부를 물어봅니다.
if (doing === "add" || doing === "1") { let next = "y"; while (next === "y") { let add = prompt("할 일을 입력해주세요!"); if (!add || add.trim() === "") { alert("잘못된 입력입니다. 할 일을 입력해주세요."); continue; } todo_list.push(add); // 할 일 목록에 추가 alert(listnumber()); // 목록 출력 next = prompt("<To-Do_List>를 더 입력하시겠습니까? (y/n)"); if (next === "y" || next === "n") { if (next === "y") { continue; } else { break; } } else { alert("잘못된 입력입니다."); } } }
2. remove(삭제 기능)
- 삭제할 항목의 번호를 입력 받습니다.
- 배열 인덱스와 사용자가 입력한 번호를 맞추기 위해 1을 빼서 처리합니다.
- 번호가 유효하면 삭제할지 묻고, 삭제 후 목록을 다시 출력합니다.
else if (doing === "remove" || doing === "2") { if (todo_list.length === 0) { alert("삭제할 목록이 없습니다."); } else { let removeIndex; while (true) { removeIndex = prompt(`${listnumber()}` + "\n지우실 목록의 번호를 입력해주세요!"); removeIndex = parseInt(removeIndex) - 1; // 1번부터 시작하는 번호를 배열 인덱스로 맞춤 if (removeIndex >= 0 && removeIndex < todo_list.length) { let q = prompt(`${todo_list[removeIndex]}를 지우시겠습니까? (y/n)`); if (q === "y") { const removedItem = todo_list.splice(removeIndex, 1)[0]; // 항목 삭제 alert(`"${removedItem}"라는 항목이 목록에서 삭제되었습니다.`); alert(listnumber()); // 삭제 후 목록 출력 break; } else { continue; } } else { alert("유효하지 않은 번호입니다. 다시 입력해주세요."); continue; } } } }
3. list(목록 보기 기능)
- 할 일이 없다면 "현재 할 일이 없습니다."라는 메시지를 출력합니다.
- 목록이 있다면 listnumber() 함수를 호출하여 현재 목록을 출력합니다.
else if (doing === "list" || doing === "3") { if (todo_list.length === 0) { alert("현재 할 일이 없습니다."); } else { alert(listnumber()); // 현재 할 일 목록 출력 } }
4. exit(종료 기능)
- 사용자가 종료를 선택하면, 새로운 리스트로 시작할 것인지 묻고, 리스트를 초기화하거나 프로그램을 종료합니다.
else if (doing === "exit" || doing === "4") { let last = prompt("투두리스트를 새로 시작하시겠습니까? (y/n)"); if (last === "y") { todo_list = []; // 새로 시작할 때 리스트 초기화 } else { alert("투두리스트를 종료합니다."); break; // 종료 시 프로그램 종료 } }
5. 목록 출력 함수
- todo_list 배열의 각 항목을 번호와 함께 출력합니다.
- 목록이 비었으면 "목록이 비었습니다."라는 메시지를 반환합니다.
function listnumber() { if (todo_list.length === 0) { return "목록이 비었습니다."; // 리스트가 비었을 경우 메시지 반환 } let list_info = ""; // 목록을 저장할 변수 for (let i = 0; i < todo_list.length; i++) { list_info += `${i + 1}. ${todo_list[i]} \n`; // 번호와 함께 목록 추가 } return list_info; // 목록 반환 }
💌 전체 코드
최종 흐름
- 1을 눌러 할 일을 추가하면, 할 일이 todo_list 배열에 저장되고, 목록이 출력됩니다.
- 2를 눌러 삭제할 항목을 선택하면, 해당 항목이 삭제되고 목록이 업데이트됩니다.
- 3을 눌러 목록을 보기 원하는 경우, 현재 할 일을 출력합니다.
- 4를 눌러 종료할 경우, 새로운 리스트를 시작할지 아니면 종료할지를 묻고, 선택에 따라 처리합니다.
let todo_list = [];
let doing;
todo();
function todo() {
while (true) {
doing = prompt(
"1. add(추가) / 2. remove(삭제) / 3. list(리스트 보기) / 4. exit(종료)"
);
if (doing === "add" || doing === "1") {
let next = "y";
while (next === "y") {
let add = prompt("할 일을 입력해주세요!");
// 예외 처리: 입력이 없거나 공백인 경우
if (!add || add.trim() === "") {
alert("잘못된 입력입니다. 할 일을 입력해주세요.");
continue; // 다시 입력 받기
}
todo_list.push(add);
alert(listnumber()); // 추가 후 목록을 출력
next = prompt("<To-Do_List>를 더 입력하시겠습니까? (y/n)");
if (next === "y" || next === "n") {
if (next === "y") {
continue;
} else {
break;
}
} else {
alert("잘못된 입력입니다.");
}
}
} else if (doing === "remove" || doing === "2") {
if (todo_list.length === 0) {
alert("삭제할 목록이 없습니다.");
} else {
let removeIndex;
while (true) {
removeIndex = prompt(
`${listnumber()}` + "\n지우실 목록의 번호를 입력해주세요!"
);
removeIndex = parseInt(removeIndex) - 1;
if (removeIndex >= 0 && removeIndex < todo_list.length) {
let q = prompt(
`${todo_list[removeIndex]}를 지우시겠습니까? (y/n)`
);
if (q === "y") {
const removedItem = todo_list.splice(removeIndex, 1)[0];
alert(
`"${removedItem}"라는 항목이 목록에서 삭제되었습니다.`
);
alert(listnumber()); // 삭제 후 목록을 출력
break; // 유효한 번호일 경우 루프 종료
} else {
continue; // 취소 시 다시 입력 받기
}
} else {
alert("유효하지 않은 번호입니다. 다시 입력해주세요.");
continue; // 유효하지 않은 번호인 경우 다시 입력 받기
}
}
}
} else if (doing === "list" || doing === "3") {
if (todo_list.length === 0) {
alert("현재 할 일이 없습니다.");
} else {
alert(listnumber()); // 현재 목록을 출력
}
} else if (doing === "exit" || doing === "4") {
let last = prompt("투두리스트를 새로 시작하시겠습니까? (y/n)");
if (last === "y") {
todo_list = []; // 리스트를 초기화하고 새로 시작
} else {
alert("투두리스트를 종료합니다.");
break;
}
} else {
alert("잘못된 입력입니다.");
}
}
}
function listnumber() {
if (todo_list.length === 0) {
return "목록이 비었습니다."; // 리스트가 없으면 알림
}
let list_info = "";
for (let i = 0; i < todo_list.length; i++) {
list_info += `${i + 1}. ${todo_list[i]} \n`;
}
return list_info; // 목록을 반환
}18일차(2) 후기
- 기명함수 / 익명함수 / 화살표함수를 모두 배웠지만 생략하면 헷갈리기도 하고.. 어려워서 문제들을 풀며 적용할 때는 기명 함수가 확실히 편한 것 같습니다.
- 생략을 하면 작성하는 저도 헷갈려서 그냥 기명 함수를 사용하고 있습니다.
- 여전히 예외처리할 때가 오류가 가장 많지만.. 그래도 문제 풀이는 완료했습니다!
- 리턴값을 2개 받고 싶어서 요즘 객체 분할 대입이라는 것을 공부하고 있습니다!
- 아직 배워야할게 많고 부족한 부분도 많지만 꾸준히 공부해보겠습니다! ૮(ॢ ᵕㅅᵕ ॢ )ა
૮꒰ ྀི〃´꒳`〃꒱ა