[Java Script] 변수 스코프 (지역변수와 전역변수), 익명 함수, Lamda함수

변수 스코프(scope) - 지역변수와 전역변수

 

사용자 함수 내 (서브루틴) 에서 사용되는 변수를 지역변수라고 하고 메인루틴에서 사용되는 변수를 전역변수(Global Variable)이라고 한다. 

변수 선언에서 var 예약어를 사용했을 때 사용되는 영역(Scope)을 가지고 있기 때문에 재할당과 재선언을 할 수 있다.

함수가 다르면 동일한 함수를 재선언하고 값을 재할당해서 사용해도 된다.

하지만 잘못 사용하면 오류가 발생할 수 있기때문에 가급적 var를 사용하지 않도록 한다. 

 

전역변수(함수 밖에서 선언하는 변수와 상수변수)는 최소한으로 사용하고, var 변수는 함수의 시작 부분에서 선언하며, for문에서는 var 보다 let를 사용해서 변수를 선언해주는 것이 좋다. 그리고 ES6 이상을 사용한다면 var 보다 let를 사용하는 것이 좋다. 

 

<script>
        function calcSum(n) {
            sum = 0; // 지역변수 (함수 내에서 사용이 되는)
            for (let i = 1; i<=n; i++) {
                sum +=i;
                 console.log(sum);
            }
        }
        calcSum(30);
    </script>

 

const 상수로써 상수 변수로 취급한다. 프로그램에서 특정 값을 자주 사용한다면 상수로 선언하는 것이 좋지만 재선언이나 재할당이 불가하다.

ex) const curYear = 2020;
console.log(curYear);
const curYear=2024; //오류발생

---

<script>
        function calcSum(){
            var x = 10;
            document.write(x + "<br>");
            }
            calcSum();
            document.write(x+"<br>");	//오류
    </script>

---

  <script>
        var x = 10; //함수 밖이어서 전역변수
        function calcSum(){
            var x = 12; // 함수내이므로 지역변수, x를 재지정하고 값도 할당
            document.write(x + "<br>");
            }
            calcSum();  // 함수 호출
            document.write(x+"<br>");   // 함수 밖인데 x는 전역변수가 사용됨. 
    </script>
    
    결과값 : 12, 10

---

익명 함수 (Anonyous Fuction)

익명 함수는 말 그대로 이름이 없는 함수이다. 함수를 만들고 변수를 선언한 뒤 변수에 함수를 저장하는 방식인데 이런식으로 만드는 것을 '함수 리터럴(Literal)'이라고 한다. 함수 호출은 변수를 호출하면 된다. 익명 함수는 프로그램 전반에 일정한 규칙을 정한다. ?

var 변수명 = function( ) {	// 함수 정의를 변수에 저장
지시문1;
지시문2;
... 
}
...
변수명( ); // 함수실행

/*  function으로 함수를 정의하는데 함수_명이 없고 정의한 함수를 변수_명에 저장한 뒤, 
나중에 변수_명으로 익명 함수를 호출해서 사용한다. 
익명 함수는 프로그램 전반에 일정한 규칙을 줄 때 사용한다. */

 <script>
    //function add(a,b) { } // 일반적인 함수 정의   
    var add = function(a,b) { // 익명함수 :  함수를 정의한 뒤 add라는 변수에 저장
      return a+b;
    }
    var x; // 전역변수 : 함수 밖에서 선언한 변수
    x = add(10,20)  // 인자로 10,20을 주어서 add( )함수를 호출, 그 결과를 return으로 받아서 다시 x에 저장
    document.write(x);   // x를 출력 
  </script>
  
  결과값 : 30

즉시 실행 함수 

일반적으로 함수를 선언한 뒤 필요하면 (인자를 주어서) 호출해서 실행시키는데 한 번만 실행하는 함수는 선언할 필요가 없는 즉시 실행 함수로 만들어 두면 편리하게 사용할 수 있다.

기본형 ( function() {
명령어
} ( ) );

<script>
(function ( ) { // 인자없이 함수만 선언
 var useName = prompt("이름을 입력하세요");
 document.write("안녕하세요?" + userNanme + "님!!");
 } ( ) // ( )인자가 필요하면 넣어주는 곳
 ) ;
 </script>
 
 <script>
(function (a,b) { // 인자없이 함수만 선언
  sum = a+b;
  } (100,200)
  );
  document.write("함수 실행 결과 : " + sum);
 </script>

화살표 함수

E26부터는 Lamda함수처럼 => 표기법으로 함수 선언을 간단하게 처리하는데 익명함수에서만 사용될 수 있다.

<script>
//매개변수가 하나 있으면 
let hi = function(user) {
               document.write(user + “님, 안녕하세요??”);
              } //하는 것은
let hi = user => { document.write(user + “님, 안녕하세요??”); } //식이 된다.
//매개변수가 두 개 있으면 
let sum = function(a, b) {
  return a + b;
} //하는 것은 
let sum = (a, b) => a + b; // 와 같다.
</script>

기본형 (매개변수) => { 함수 내용 } 인데, 매개변수가 없으면 기본형 => { } 구문이다.
<script>
const hi = function() {	// 함수를 상수_변수에 저장 = 익명 함수
                  return “안녕하세요?”;
               } 하는 것을 
const hi = (매개변수) => { return “안녕하세요??” }; 식이 된다. 줄여서 
const hi => { “안녕하세요??” }; 해도 된다.
</script>