본문 바로가기
Front-End/JAVASCRIPT

[JAVASCRIPT] 자바스크립트 함수에 대해서(콜백, 클로저)

by You_mool 2024. 2. 5.
반응형

자바스크립트에서 함수의 매개변수의 수와 실제 전달되는 인자의 수가 일치하지 않아도 함수는 실행됩니다. 매개변수의 수보다 더 많은 인자를 전달하면 초과된 인자는 무시되고, 매개변수의 수보다 더 적은 인자를 전달하면 값이 주어지지 않은 매개변수의 값은 undefined가 됩니다.

function exampleFunc(a, b) {
  console.log(a); 
  console.log(b); 
}

exampleFunc(1); // 결과: 1, undefined
exampleFunc(1, 2, 3); // 결과: 1, 2 (3은 무시됨)

 

콜백함수란 :
콜백함수는 다른 함수에 인자로 전달되는 함수를 말합니다. 이 함수는 나중에 이벤트가 발생하거나 특정 시점에 호출됩니다.

function greeting(name) {
  console.log('Hello ' + name);
}

function processUserInput(callback) {
  let name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting); // "Hello [name]" 출력

결과 이유 : 1. processUserInput함수가 greeting 함수를 인자로 받아서 callback이라는 이름으로 저장합니다.
2. callback(greeting의 다른 이름)함수가 name을 인자로 가지고 greeting( = callback)함수를 실행합니다.

 

클로저란 :
클로저는 내부 함수가 외부 함수의 맥락에 접근할 수 있는 것을 가리킵니다. 내부 함수는 선언된 환경을 기억하고, 이 환경은 내부 함수가 실행되는 어느 곳에서도 접근 가능합니다.

function outerFunc(outerVar) {
  return function innerFunc(innerVar) {
    console.log('outerVar:', outerVar);
    console.log('innerVar:', innerVar);
  }
}

let newFunc = outerFunc('outside');
newFunc('inside'); // 결과: outerVar: outside, innerVar: inside

결과 이유 : 1. newFunc에 outerFunc('outside');를 실행하고 반환된 함수를 할당합니다.
2. 반환된 함수가 들어있는 newFunc에 'inside'를 인자로 넣어 실행합니다.

반응형