[JavaScript] 함수, 변수/함수 범위, 매개변수/인수

함수

• 함수 정의 - function 키워드
  • function 함수명(매개변수1, 매개변수2, …) { 실행문 };
  • 함수명(매개변수1, 매개변수2); ⇒ 함수호출
• 반환문 - return
  • function 함수명(매개변수1, 매개변수2, …) { … return ㅁㅁㅁ; };
  • var 변수명 = 함수명(매개변수1, 매개변수2); ⇒ return 값 변수에 저장
• 정의되어 있는 전역 함수 종류
  • eval() - 문자열로 표현된 식이나 코드 실행
    • ex) var x = 10, y = 20;
    • var a = eval("x + y"); // 30
  • isNaN() - NaN인지 검사하여 결과 반환
    • NaN은 Not A Number이라는 숫자가 아니라는 의미로 정의되지 않은 값이나 표현할 수 없는 값을 가리킨다.
    • 0 / 0도 NaN
    • ex) 문자열, undefined, NaN 값 true
  • parseInt(문자열) - 문자열을 정수로 반환

 

변수/함수 범위

• 지역 변수 (local variable)
  • 함수 내에서 선언된 변수
  • 함수 내에서만 유효하며, 함수 종료시 메모리에서 사라짐
  • 함수의 매개변수도 지역변수처럼 동작
  • var 키워드 사용하여 변수 선언
• 전역 변수 (global variable)
  • 함수 외부에서 선언된 변수 (var 키워드)
  • 프로그램 어느 영역에서나 접근 가능
  • 웹페이지가 닫혀야만 메모리에서 사라짐
  • 함수 내부에서 var 키워드 사용하지 않고 변수 선언시 전역변수로 선언
  • 함수 내부에서 전역변수 호출하려면 window.전역변수명 으로 호출 가능
• 호이스팅(hoisting)
  • 변수와 함수의 선언 순서에 상관없이 순서가 끌어올려져서 실행되는 현상
  • var 변수 호이스팅
    • 변수 할당전 사용시 undefined 출력
  • const, let 호이스팅
    • 참조 오류 발생
  • 함수 호이스팅
    • 함수 실행 - 함수 작성 순서로 코드를 작성해도 함수가 실행된다.

 

매개변수/인수

• 매개변수 - parameter
  • JS는 함수 정의시 매개변수의 타입을 따로 명시하지 않는다.
  • 함수 호출시 인수값에 대해 타입 검사도 하지 않는다.
    • 인수 갯수가 맞지 않아도 오류 발생하지 않고, 자동으로 매개변수에 undefined 값을 설정한다. (NaN)
    • if(매개변수 === undefined) 매개변수 = 0; 식으로 하면 NaN 반환 하지 않도록
• 인수 - arguments
  • arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있다.
  • arguments[인덱스]와 arguements.length 사용 가능
  • 예시

    • function addNum() {
          var sum = 0;                                // 합을 저장할 변수 sum을 선언함.
          for(var i = 0; i < arguments.length; i++) { // 전달받은 인수의 총 수만큼 반복함.
              sum += arguments[i];                    // 전달받은 각각의 인수를 sum에 더함.
          }
          
          return sum;
      }
      
      addNum(1, 2, 3); // 6
      addNum(1, 2);    // 3
      addNum(1);       // 1
      addNum();        // 0
      addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

      
      
      
• default 매개변수
  • function 함수명(매개변수1, 매개변수2 = 값) {…} 같이 매개변수값 기본값 설정 가능
• rest (나머지) 매개변수
  • 생략 접두사(…)을 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정 가능
  • 예시

    • // 첫 번째 인수를 변수 firstNum에 저장하고 나머지 인수들은 배열 restArgs에 저장함.
      function sub(firstNum, ...restArgs) {
          for(var i = 0; i < restArgs.length; i++) {
              firstNum -= restArgs[i];
          }
      
          return firstNum;
      }
      
      sub(10, 2, 3);    // 10 - 2 - 3 = 5
      sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4