JS의 내장함수와 클로저 ( inner function & closure ) : javascript

horiz.d·2021년 12월 14일

JavaScript web

JS 꿀단지

목록 보기

14/35

해당 글은 tistory siyoon210님의 글을 개인적 공부를 위해 적극적으로 참고하였음을 밝힙니다. https://siyoon210.tistory.com/162

inner function : 내장 함수

a.k.a nested function

자바스크립트는 함수 안쪽에 또 다른 함수를 선언하는 내장(inner)함수가 가능하다.

이는 자바스크립트가 함수(function)를 변수와 동일하게 다루는 특성에 기인하는데 일례로 자바스크립트에서는 동일한 이름의 변수와 함수를 선언하는 것이 불가능하다. ( 동일하게 취급하기 때문 )

자바스크립트의 이런 독특한 문법인 내장함수는 어떤 경우에 어떤 관점으로 접근하고 사용하며, 지양해야 할까.

index

클린코드 관점
성능 관점
기능 관점 - closure

1. 클린코드 관점

일반적으로 함수는 반복된 코드의 재사용을 위해 사용되지만. 함수는 그 자체로 클린코드의 관점에서 충분한 의미를 가진다.

// 유저가 무직자인지 확인한다.
if(user.job == null) {
        ...    
}

if(user.isUnemployed()) {
   ...
}

위의 두 코드는 기능적으로 동일하다. 하지만 밑의 코드는 메서드를 활용하여 주석을 따로 붙이지 않고도 코드의 의도를 분명히 밝히므로 클린코드에 부합하다.

이처럼 단위 로직을 함수로 만드는 방법은 클린코드에 도움이 된다. 이런 맥락에서 자바스크립트의 Inner function은 클린 코드에 더욱 강력한 도움을 줄 수 있다

내장 함수는 해당 함수가 선언된 함수 내부가 아니면 호출하는 것이 불가능하다. 즉, 지역적이다.

따라서, 단위로직을 함수로 정리하여 클린코드를 만들고자 할 때, 내장 함수를 활용한다면 해당 함수가 전역적으로 사용되지 않고 해당 함수 내부에서만 사용될 것이라는 점을 분명히 명시적으로 나타내므로, 코드의 가독성에 큰 도움을 주게 된다.

function foo(){
  function bar() {
        console.log('Hello');
  }
    bar(); //해당 bar 함수는 foo 함수의 내장함수로 외부에서 호출할 수 없다.
}
bar(); // 내장함수를 외부에서 호출하여 에러 발생!

이처럼 자바스크립트는 java에서 사용되는 접근제어자(private,public 등)가 없더라도 공개적으로(public) 사용되는 함수와 이 함수를 도와주는 지역적 헬퍼(helper)함수를 내장함수로 둠으로써 좀 더 명확한 구분이 가능하다.

2. 성능 관점

기존의 구버전 브라우저와 JS엔진들 에선 내장함수의 소멸에 의한, 동기능 내장 함수를 반복적으로 생성해야 하는 경우, 성능에 치명적인 약점을 가졌다.

하지만 JS와 브라우저의 성능 최적화를 통해 이 같은 약점은 거의 완벽히 극복되었으므로, 이러한 이유로 내장 함수를 지양해야할 이유는 존재하지 않는다.

3. 기능 관점 - 클로저(closure)

클로저 (closure)

클로저는 자바스크립트의 특징을 활용한 일종의 테크닉 혹은 패턴이다.

앞에서 봤듯, 자바스크립트 함수 내부에서 지역적으로 선언된 값(varible or function)은 함수가 종료되면 소멸된다. 하지만 소멸되지 않게 하는 방법이 존재한다.

return을 활용하여 내부의 값들 중 외부로 공개하고자 하는 값을 외부로 반환한다. return 문이 외부 스코프와 함수내부를 이어주는 일종의 통로가 되는데, 이를 활용하는 기법을 클로저(closure) 라고 한다.

function makeFunc() {
  var name = "seongwoo";
  function displayName() {
    alert(name);
  }
  return displayName; //소멸예정인 내장함수인 displayName을 외부스코프로 반환
}