자바스크립트에서 다른 함수에서 함수 내부에 선언된 변수에 접근하는 방법

자바스크립트에서는 간단한 작업을 수행하는 함수를 작성하는 경우가 많습니다. 예를 들어 두 숫자를 더하거나 난수를 생성하는 작업 등이 있습니다. 이때 흔히 마주치는 문제 중 하나는 함수 내부에서 선언된 변수를 외부의 다른 함수나 전역 범위에서 어떻게 접근할 수 있는가입니다.

접근 방법: this 객체 활용하기

함수 내부에서 선언된 지역 변수는 기본적으로 외부에서 접근할 수 없습니다. 하지만 생성자 함수 내부에서 this 키워드를 사용해 값을 인스턴스 속성으로 할당하면, 함수 실행이 끝난 후에도 new 키워드로 생성한 인스턴스를 통해 해당 값에 접근할 수 있습니다.

핵심 아이디어는 다음과 같습니다.

• this에 값 할당: 생성자 함수 내부에서 this에 값을 할당하면 인스턴스 속성이 되어 외부에서 접근 가능합니다.
• 지역 변수의 한계 극복: 일반 지역 변수는 함수 실행이 종료되면 사라지지만, 인스턴스 속성은 객체가 유지되는 동안 계속 접근할 수 있습니다.

예제 코드

다음은 이 개념을 보여주는 코드입니다.

const num = 5;
const addRandomToNumber = function(num){
    // [0, 10) 범위의 난수 생성
    const random = Math.floor(Math.random() * 10);
    // 함수의 this 객체에 난수를 할당하여
    // 외부에서 접근할 수 있도록 함
    this.random = random;
    this.res = num + random;
};
const addRandomInstance = new addRandomToNumber(num);
const scopedRandom = addRandomInstance.random;
const result = addRandomInstance.res;
// result - scopedRandom은 반드시 num의 원래 값인 5와 같아야 함
console.log(result - scopedRandom);

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

5

코드 동작 원리

위 코드의 흐름을 단계별로 살펴보겠습니다.

1. addRandomToNumber 함수는 매개변수로 받은 숫자에 0 이상 10 미만의 난수를 더합니다.
2. 함수 내부에서 선언된 random 변수는 원래 지역 변수이지만, this.random = random; 구문을 통해 인스턴스 속성으로 복사됩니다.
3. new 키워드로 생성된 인스턴스 addRandomInstance를 통해 외부에서 random과 res 값에 자유롭게 접근할 수 있습니다.
4. 따라서 result - scopedRandom을 계산하면 더해졌던 난수가 다시 빠지면서 원래 입력값인 5가 출력됩니다.

이처럼 this 객체를 활용하면 함수 스코프 내부의 변수를 외부로 노출시켜 다른 함수나 전역 범위에서 안전하게 재사용할 수 있습니다.