자바스크립트 함수와 중첩된 inner 함수

자바스크립트 함수와 중첩된 inner 함수 

 

글. 수알치 오상문

 

1) 간단한 자바스크립트 함수 예제

 

  function yourName(name) {  
    return "당신 이름은 " + name "입니다.";      
  } 

  console.log(yourName('홍길동'))  

 

  [실행 결과]

  "당신 이름은 홍길동입니다."

 

 

2) 전달인수에 기본 값 지정 

 

전달인수는 기본 값 undefined가 지정된다. 앞 예제 함수는 function yourName(name=undefined) 형태인 것이다. 

다음은 전달인수에 기본 값을 지정한 예제이다. 만약 name 값이 전달되면 그 값을 사용하고, 전달 값이 없으면 "guest"가 기본값으로 사용된다.

 

  function yourName(name = "***") {       
    return "당신 이름은 " + name "입니다."; 
  } 

  console.log(yourName('홍길동'))

 

 

3) inner 함수 예제 

 

함수 안에 만들어진 함수가 inner 함수이다. 

아래 두 예제를 비교하자(두 예제 모두 잘 동작한다).

 

  function yourName1(name = "guest") {  

 

    // 함수형 변수 정의 
    var inner_func1 = function(your_name) {
      return "당신 이름은 " + your_name + "입니다.";
    }

    return inner_func1(name);   
  } 
  
  console.log(yourName1('홍길동'));   // "당신 이름은 홍길동입니다."   
  
  // ----------------------------------------------------------------------------
  function yourName2(name = "guest") { 

 

    // inner 함수 정의  
    function inner_func2(your_name) {
      return "당신 이름은 " + your_name + "입니다.";
    }

 

    return inner_func2(name); // "당신 이름은 홍길동입니다."
  } 

 

그런데, 함수 정의 위치를 부모 함수에서 아래 부분으로 내리면 어떻게 될까? 

inner 함수는 잘 동작하지만 함수형 변수로 선언한 것을 에러가 발생함에 주의하자. 

(함수형 변수는 호이스팅에 의해서 선언 정보는 위로 올라가지만 실제 초기화는 나중에 이루어진다.)

 

  function yourName1(name = "guest") {

    return inner_func1(name);  // 에러! : 함수형 변수 초기화가 아래에서 이루지므로... 
    
    var inner_func1 = function(your_name) {
      return "당신 이름은 " + your_name + "입니다.";
    }
  } 
  
  console.log(yourName1('홍길동'))  // 에러 발생 
  
# ------------------------------------------------------------------   
  function yourName2(name = "guest") {  

    return inner_func2(name);   // 함수 호이스팅 때문에 정상 동작! 
    
    function inner_func2(your_name) {
      return "당신 이름은 " + your_name + "입니다.";
    }
  } 

 

  console.log(yourName2('홍길동'))  //  "당신 이름은 홍길동입니다."

 

 

4) 함수 arguments 객체 

 

함수에 전달된 모든 전달인수는 arguments 객체를 이용하여 다룰 수 있다.

 

  function func( ) {
    console.log("함수 전달인수: " + arguments.length + "개");
    for(item of arguments) 
        console.log(item);
  }

  func( );
  console.log("---------------------------");
  func(1, 2, 3, 4, 5);  

 

[실행 결과]

"함수 전달인수: 0개"

"---------------------------"

"함수 전달인수: 5개"

1

2

3

4

5

 

 

5) 함수형 변수 축약 표기 

 

함수형 변수 초기화 시 다음 예제처럼 축약 표기(화살표 함수 표기)를 사용할 수 있다.

 

  var func1 = function (name) { return('Hello, ' + name) }  // 일반 방식

  var func2 = (name) => ('Hello, ' + name)  // 화살표 함수 표기
    
  console.log(func1("홍길동1"));
  console.log(func2("홍길동2"));  

 

[실행 결과]

"Hello, 홍길동1"

"Hello, 홍길동2"