Search

반응형

'분류 전체보기'에 해당되는 글 576건

  1. 2022.08.15 [자바스크립트]함수 이야기 4탄 - 함수 범위 스코프(scope) 이해하기.
  2. 2022.07.31 [자바스크립트]함수 이야기 3탄 - 함수를 호출하는 방법
반응형

범위, 스코프(Scope)란?

범위 == 스코프이며 스코프라는 용어로 통일하겠습니다.

자바스크립트에서 스코프는 변수와 함수에서 중요한 역할을 담당합니다.

간단하게 의미를 살펴볼게요.

스코프 즉, 범위는 사용될 수 있는 위치를 말합니다.

 

함수를 만들 때 함수 내부에 변수 또는 함수를 선언하는 경우가 있습니다.

변수 또는 함수가 함수 내부에서 선언되었다는 의미는

함수의 범위 내에서만 접근이 가능하다는 의미입니다.

함수 밖에서는 함수 내부의 변수 또는 함수에 접근이 안된다는 의미로

오류가 발생합니다.

 

전역 함수는 모든 전역 변수에 접근할 수 있습니다.

함수 내부에 선언된 내부 함수는 그 부모 함수의 변수와

그 부모 함수가 접근할 수 있는 다른 변수에 접근이 가능하답니다.

 

다음 예를 보면서 다시 설명해볼게요.

1
2
3
4
5
6
7
var n1 = 10, n2 = 20;
 
function mult() {
  return n1 * n2;
}
 
console.log(mult());
cs

위 소스를 분석해보면 다음과 같습니다.

전역 변수 n1, n2를 선언했습니다. 

그리고 전역 함수 mult를 만들고

return 값으로 전역 변수 n1과 n2를 사용했습니다.

n1, n2는 함수 내부에 선언된 변수가 아니지만

전역 함수는 전역 변수에 접근이 가능하다는 것을

확인할 수 있습니다.

 

다음 예를 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var n1 = 10, n2 = 20, nm = "Mark";
 
function getData(){
    var n1 = 5, n2 = 3;
    
    function add(){
        return nm + " number is " + (n1 + n2);
    }
    
    return add();
}
 
console.log(getData());
 
cs

전역 변수 n1, n2 그리고 nm을 선언했습니다.

전역 함수 getData()를 선언하고 내부 변수 n1, n2를 

전역 변수와 같은 이름으로 선언했습니다.

궁금하네요.???

그리고 내부 함수 add()를 선언하고 내부 함수에서

n1, n2 그리고 nm을 참조해서 return 하고 있습니다.

add() 함수는 getData() 함수의 내부 함수인데

전역 변수와 함수 내 지역 변수 이름이 같은데

어떤 변수를 참조하고 있을지 궁금하네요.

또한 nm은 전역 변수인데

내부 함수에서 오류가 발생하지 않고 참조가 가능한지도

궁금합니다.

getData() 함수는 내부 함수 add()를 return 합니다.

그리고 console.log(getData()); 로 전역 함수를 실행하면

add() 함수가 리턴되면서 add() 함수를 실행합니다.

n1 + n2의 결과는 전역 변수의 합인 30일까요? 

아니면 내부 함수의 합인 8일까요?

 

내부 함수는 우선 이름이 같다면 가장 가까이 있는

변수를 참조하게 됩니다.

그래서 결과는 8이 나오게 됩니다.

 

지금까지 함수의 범위에 대해 간단히 살펴봤습니다.

 

 

반응형
반응형

함수를 정의하고 매개변수 사용방법에 대해 이전 포스팅에서 같이 살펴봤습니다.

이번 포스팅에서는 함수를 호출하는 방법에 대해 알아보겠습니다.

 

함수를 호출하는 방법

우리가 함수를 정의하는 방법을 배웠는데요.

이름을 만들어 주고 어디선가 이름을 호출을 했을 때

무엇을 해야 하는지 정의해 주는 것입니다.

코드상에 함수를 정의했다고 실행이 되는 건 아닙니다.

말 그대로 정의 또는 선언만 한거지요.

그 상태로 두면 아무런 일도 하지 않고 스크립트가 종료되면

같이 사라지게 됩니다.

 

그렇다면 어떻게 해야 함수가 실행이 될까요?

바로 다음과 같이 구현하면

여러분이 만든 함수를 실행할 수 있습니다.

1
2
3
4
5
6
7
/*함수선언*/
function multiple(num1, num2) {
  return num1 * num2;
}
 
/*함수사용*/
multiple(24);
cs

함수 multiple을 선언하고

인수 2, 4를 입력해서 실행했습니다.

결과는 2*4를 실행하고 결과 8이 return 될 겁니다.

 

1
2
3
4
5
6
7
8
9
function mFunction(){
    function multiple(num1, num2){
        return num1 * num2;
    }
    
    console.log(multiple(24));
}
 
multiple(23);
cs

이번 예제는 실행하면 오류가 납니다.

이유는 바로 함수의 범위(scope)와 관련이 있습니다.

만약 mFunction();을 실행했다면 문제없이 8을 출력했을 겁니다.

하지만 multiple함수는 mFunciton함수 내부에 선언이 되었습니다.

그래서 mFunction 내부가 multiple함수의 범위(스코프)가 된답니다.

벗어나면 인식이 안되고

Uncaught ReferenceError: multiple is not defined

이 오류가 날 겁니다.

 

함수도 변수처럼 호이스팅이 되기 때문에

함수를 호출하는 부분이

선언하는 부분보다 먼저 구현이 되어 있어도

오류 없이 잘 실행이 됩니다.

 

1
2
3
4
5
6
7
8
9
mFunction();
 
function mFunction(){
    function multiple(num1, num2){
        return num1 * num2;
    }
    
    console.log(multiple(24));
}
cs

하지만 주의할 부분이 있는데요.

함수가 호이스팅 되는 것은 맞지만

함수를 선언한 경우만 가능하고

함수 표현식(변수처럼)으로 만든 경우는

오류가 발생한답니다.

 

함수를 호출할 때는 인수를 같이 넣을 수 있는데요.

인수는 문자열뿐만 아니라 숫자도 그리고 객체도 가능하답니다.

심지어 함수도 전달할 수 있다는 겁니다.

 

또한 함수는 함수 내부에서 자기 자신을 다시 호출할 수 있습니다.

재귀 호출이라고도 하는데요.

팩토리얼을 계산할 때 사용한다는 예제를 다른 프로그래밍 언어에서도 봤을 겁니다.

팩토리얼은 다음과 같습니다.

2! = 2 * 1 = 2
3! = 3 * 2 * 1 = 6
4! = 4 * 3 * 2 * 1 = 24
...

이를 자바스크립트 함수로 만들어 보겠습니다.

 

1
2
3
4
5
6
7
8
function factorial(num) {
  if (num <= 1return num;
  else return (factorial(num - 1* num);
}
 
var rst = factorial(3);
 
console.log(rst);
cs

6번 라인처럼 호출하면 된답니다.

 

지금까지 자바스크립트 함수를 호출하는 방법에 대해 알아봤습니다.

이렇게 함수를 호출하는 방법을 통해서

여러분의 소스에 잘 적용해 보시길 바랍니다.

감사합니다.

 

 

반응형