JavaScript 내부 함수에서 발생하는 어휘 범위 문제, 'new' 키워드 생성자로 해결하기

JavaScript에서 생성자 함수 내부에 내부 함수(inner function)를 정의하면 어휘 범위(lexical scope) 때문에 예상치 못한 문제가 발생할 수 있습니다. 내부 함수 안에서 this를 그대로 참조하면, 호출 시점에 따라 의도했던 객체가 아닌 전역 객체(global object)나 undefined를 가리키게 됩니다.

해결 방법: this 키워드와 별도 변수 활용

이 문제를 해결하려면 this 키워드의 개념을 활용하면 됩니다. 핵심은 객체 자신의 값을 담아둘 별도의 변수를 선언하고, 내부 함수 안에서는 그 변수를 참조하는 것입니다.

생성자 함수가 실행되는 시점의 this는 새로 생성되는 객체를 가리킵니다. 이 값을 변수에 저장해 두면, 내부 함수가 클로저(closure)를 통해 해당 변수에 접근할 수 있으므로 올바른 객체 데이터를 사용할 수 있습니다.

예제 코드

function Employee() {
   this.technologyName = "JavaScript";
   var currentTechnologyName = this;
   function workingTechnology() {
      console.log("I am working with " + currentTechnologyName.technologyName + " Technology");
   }
   workingTechnology();
}
var currentTechnology = new Employee();

코드 설명

• this.technologyName = "JavaScript"; — 새로 생성될 객체에 속성을 설정합니다.
• var currentTechnologyName = this; — 현재 객체(this)의 참조를 별도 변수에 저장합니다.
• 내부 함수 workingTechnology()는 클로저를 통해 currentTechnologyName에 접근하므로, this가 달라지는 문제 없이 객체의 속성 값을 정확히 읽어올 수 있습니다.

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다.

node fileName.js

여기서는 파일 이름이 demo216.js라고 가정합니다.

실행 결과

출력 결과는 다음과 같습니다.

PS C:\Users\Amit\JavaScript-code> node demo216.js
I am working with JavaScript Technology

이처럼 this 값을 별도 변수에 저장해 두면, 내부 함수에서도 생성자 함수가 만든 객체의 속성에 안전하게 접근할 수 있습니다. 최신 JavaScript에서는 화살표 함수(arrow function)를 사용해도 같은 문제를 더 간결하게 해결할 수 있습니다.