코밍이의 하루

[JS] 함수 스코프 개념 이해 본문

웹언어 공부/JS

[JS] 함수 스코프 개념 이해

코밍이 2021. 8. 13. 16:37

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3, JS
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

2. 주요 문법

1) 함수 스코프

- 스코프(Scope)의 사전적 의미는 '범위'이며, 변수 또는 함수의 유효 범위를 가리킨다.

용어 설명
스코프 변수 또는 함수의 유효 범위
지역 변수 - 스코프 영역에서 선언한 변수를 가리킨다.
- 스코프 영역에서만 사용할 수 있다.
지역 함수 - 스코프 영역에서 선언한 함수를 가리킨다.
- 스코프 영역에서만 호출할 수 있다.

 

2) 전역 변수 vs 지역 변수

- 전역 변수 : 자바스크립트 어디에서든 사용할 수 있는 변수

- 지역 변수 : 함수 스코프에서만 사용할 수 있는 변수

기본형 예시
var 변수명; //전역 변수

function 함수명() {
  var 변수명; //지역 변수
}		 var score = 10;

function myFnc() {
  var score = 50; // 함수 스코프에서는 지역 변수 데이터를 가져옴

  alert(score); //50
}

myFnc();

alert(score); //10 , 함수 스코프 밖에서는 전역 변수 데이터를 가져옴

3) 전역 함수 vs 지역 함수

- 전역 함수: 자바스크립트 어디에서든 사용할 수 있는 함수

- 지역 함수: 함수 스코프에서만 사용할 수 있는 함수

기본형 예시
function 함수1() {
  자바스크립트 코드;
}

function 함수2() {
  function 함수3(){
    자바스크립트 코드;
  }
}		 function myFnc() {
  alert("전역 함수");
}

function outerFnc(){
  function myFnc() {
    alert("지역 함수");
  }
  myFnc(); // 지역 함수 호출
}

outerFnc();
myFnc(); // 전역 함수 호출

4) 즉시 실행 함수

- 함수 선언과 동시에 함수 호출 가능

기본형
(function 함수1() {
  자바스크립트 코드;
}());
(function() {
  var 변수명; //지역 변수

  function 함수명() { //지역 함수
    자바스크립트 코드;
  }
}());

 

3. 소스 코드 및 실행 결과

- function_8_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 함수 </title>
    <script>
        var num = 100;
        function menu(){
            num += 100;
            alert(num);
        }
        menu();

        function menu(){
            alert(num);
        }
    </script>
  </head>
  <body>
  </body>
</html>

function_8_test.html

 

- function_9_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 함수 </title>
    <script>

    (function() {
        var num = 100;
        function menu() {
            num += 100;
            alert(num);
        }
        menu();
    }());

    (function(){
        var num = 100;
        function menu() {
            alert(num);
        }
    }());
    </script>
  </head>
  <body>
  </body>
</html>

 

function_9_test.html

 

저작자표시 비영리 변경금지

'웹언어 공부 > JS' 카테고리의 다른 글

[JS] 자바스크립트 내장함수  (0) 2021.08.13
[JS] 객체 생성자 함수의 활용  (0) 2021.08.13
[JS] 함수 - 함수에서 return 문의 역할  (0) 2021.08.13
[JS] 함수  (0) 2021.08.13
[JS] 브라우저 객체  (0) 2021.08.12
'웹언어 공부/JS' Related Articles more