인프런 커뮤니티 질문&답변
작성한 질문수
자바스크립트 암묵적인 파라미터 값 전
해결된 질문
작성
·
138
0
const add = (value) => {
return value * 10;
};
Array.from([1, 2, 3], (v) => add(v))
// 출력
[10, 20, 30]
Array.from([1, 2, 3], add)
// 출력
[10, 20, 30]위 처럼 (v) => add(v) 이런 식으로 콜백으로 값을 넘겨주는게 아니라
암묵적으로 값을 함수의 파라미터의 넘기는 형태가 어떤 상황들에서 저렇게 가능한지 궁금합니다.
답변 1
1
안녕하세요, 인프런 AI 인턴입니다. 문채우님, 자바스크립트에서 암묵적인 파라미터 값 전달에 대해 궁금하신 부분에 대해 답변 드리겠습니다.
JavaScript에서 함수를 다른 함수의 콜백으로 전달할 때, 콜백을 실행하는 함수가 특정 인자를 넘겨주기로 계획되어 있다면, 그 인자는 자동으로 콜백 함수의 파라미터로 전달됩니다. Array.from 메서드의 경우, 두 번째 인자로 전달되는 콜백 함수는 각 배열 요소를 변환하기 위해 호출되며, 각 요소와 그 인덱스를 파라미터로 넘겨받습니다.
예를 들어, Array.from의 두 번째 인자로 넘겨진 콜백 함수는 다음과 같은 형태입니다:
function callback(element, index, array) {
// 변환 로직
}
따라서, add 함수를 Array.from의 두 번째 인자로 직접 넘겨줄 때, add 함수는 각 배열 요소를 첫 번째 인자로 자동으로 받아 처리하게 됩니다. 이는 이 함수가 한 개의 파라미터를 받는다는 것을 전제로 하며, 받은 파라미터로 필요한 작업을 수행합니다.
위의 예에서 add 함수는 하나의 인자만을 받기 때문에 Array.from이 각 요소를 순회하며 add 함수에 첫 번째 인자인 배열의 요소를 자동으로 전달하고, add는 그 값을 받아 처리한 결과를 반환합니다.
이렇게 함수를 지정하면, JavaScript 엔진은 자동으로 해당 함수에 현재 처리중인 요소를 인자로 전달해주는 것이 가능합니다. 이를 활용하면보다 간결한 코드 작성이 가능합니다.
단, 함수가 예상하는 파라미터의 개수와 콜백을 실행하는 함수가 넘겨주는 파라미터의 개수와 유형이 일치해야 올바르게 작동합니다. 그렇지 않을 경우, 의도하지 않은 동작이 발생할 수 있습니다.
다른 상황들에서 이러한 패턴이 가능한지는 해당 함수가 어떤 인자를 넘겨주는지, 그리고 콜백 함수가 어떤 인자를 기대하는지에 따라 달라집니다. 예를 들어 map, filter, forEach와 같은 배열 메소드들이 유사한 방식으로 콜백 함수에 인자를 넘겨줍니다.