함수 이해하기

1. 함수를 변수에 담을 수 있다.

function testFn(){
    return 'testFn called';
}

let fnA = testFn;

  변수 fnA에는 testFn함수가 담긴다. 이 변수를 활용해서 testFn함수를 실행시키려면 일반적으로 함수를 실행시킬 때처럼 소괄호를 붙여주면 된다. 콘솔 창에 입력하면 결과는 아래와 같다.

fnA();
// "testFn called"

  함수의 '실행'을 변수에 담는 것과 구분해야한다. 함수의 실행을 변수에 담을 경우, 만약 그 함수가 어떤 값을 return 하도록 선언되었다면, 그 함수의 리턴 값이 변수에 담긴다.

let fnB = testFn();
fnB;
// "testFn called"

 

2. 함수 안에 함수가 있을 수 있다.

  함수 안에서 함수를 만들고 만들어진 함수를 리턴할 수 있다.

function outerFn(){
  function innerFn(){
    return ('inner function called');
  }
  return innerFn;
}

  outerFn함수는 내부에서 선언된 innerFn함수를 return 하는 함수다. 즉, innerFn 함수를 실행하려면 outerFn함수의 'return값'을 실행해야 한다.

  외부 함수를 변수에 담지 않은 채 내부 함수를 실행하고 싶으면 외부함수명 끝에 소괄호를 두 번 붙여주면 된다. 변수에 담아서 사용하고 싶다면 변수 뒤에 소괄호를 붙여주면 된다.

outerFn()();
// "inner function called";

let bigFn = outerFn();
bigFn();
// "inner function called";

  함수 안에 내부함수를 만들어서 사용할 때 주의할 점은 내부함수를 'return'하는 것과 그저 '실행'만 하는 것을 잘 구분해야 한다는 것이다. 내부 함수의 return값을 얻고 싶다면 외부 함수의 선언을 마치기 전에 'return' 키워드를 사용해야 하며, 내부 함수가 어떤 값을 리턴하는 것이 아니라 어떤 작업을 수행하도록 선언되었다면 '실행'만 시키면 된다.

let someArr = [1, 2, 3];

function pushFn(){
  function innerFn(){
    someArr.push(4, 5); // 값을 return하는 것이 아닌, 어떤 작업을 수행하는 내부함수
  }
  innerFn(); // 'return' 키워드 없이 함수를 그저 '실행'시킨다
}

pushFn();
console.log(someArr);
// [1, 2, 3, 4, 5]