[javascript] 자바스크립트 코드 읽기 연습 - 중급 퀴즈1

자바스크립트의 심화 개념을 익히는 것은 더욱 효율적인 코드 작성에 도움이 됩니다. 이번에는 콜백 함수와 고차 함수(Higher-order Function)를 활용한 문제를 준비했습니다. 코드를 분석하고, 문제를 풀어보세요!

---

퀴즈를 위한 코드

function modifyArray(arr, callback) {
    if (!Array.isArray(arr) || typeof callback !== 'function') {
        return "Invalid input";
    }
    return arr.map(callback);
}

function square(num) {
    return num * num;
}

console.log(modifyArray([1, 2, 3, 4], square));
console.log(modifyArray([5, 6, 7, 8], (n) => n * 2));
console.log(modifyArray("not an array", square));
console.log(modifyArray([1, 2, 3], "not a function"));

---

퀴즈 문제

1. 위 코드를 실행하면 콘솔에 어떤 출력이 나올까요?
   • a) [1, 4, 9, 16], [10, 12, 14, 16], "Invalid input", "Invalid input"
   • b) [1, 4, 9, 16], [10, 12, 14, 16], undefined, undefined
   • c) [2, 3, 4, 5], [10, 12, 14, 16], "Invalid input", "Invalid input"
   • d) 오류 발생
2. arr.map(callback)의 역할은 무엇일까요?
   • a) 배열의 모든 요소를 callback 함수에 적용하여 새로운 배열을 반환한다.
   • b) 배열의 모든 요소를 문자열로 변환한다.
   • c) 배열을 정렬한 후 새로운 배열을 반환한다.
   • d) 배열의 길이를 반환한다.

---

 

 

 

 

 

 

정답 및 해설

1번 문제 해설 (출력 결과 예상)

console.log(modifyArray([1, 2, 3, 4], square)); // [1, 4, 9, 16]
console.log(modifyArray([5, 6, 7, 8], (n) => n * 2)); // [10, 12, 14, 16]
console.log(modifyArray("not an array", square)); // "Invalid input"
console.log(modifyArray([1, 2, 3], "not a function")); // "Invalid input"

• modifyArray([1, 2, 3, 4], square) → square 함수가 배열의 각 요소에 적용되어 [1, 4, 9, 16] 반환
• modifyArray([5, 6, 7, 8], (n) => n * 2) → 콜백 함수 (n) => n * 2가 적용되어 [10, 12, 14, 16] 반환
• modifyArray("not an array", square) → 첫 번째 인자가 배열이 아니므로 "Invalid input" 반환
• modifyArray([1, 2, 3], "not a function") → 두 번째 인자가 함수가 아니므로 "Invalid input" 반환

정답: ✅ a) [1, 4, 9, 16], [10, 12, 14, 16], "Invalid input", "Invalid input"

2번 문제 해설 (arr.map(callback)의 역할)

• map() 메서드는 배열의 각 요소에 대해 주어진 callback 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
• 따라서 arr.map(callback)은 배열의 모든 요소를 callback 함수에 적용하여 변형된 새 배열을 반환하는 역할을 합니다.

정답: ✅ a) 배열의 모든 요소를 callback 함수에 적용하여 새로운 배열을 반환한다.

---

 

 

이 문제를 풀기 위해 필요한 자바스크립트 개념

• 콜백 함수 (Callback Function)
• 고차 함수 (Higher-order Function)
• 배열 메서드 (map())
• typeof 연산자
• Array.isArray() 메서드

---

끝