💎 함수 내의 함수 호출

함수 선언과 호출 참조

👭 같은 depth에 있는 함수끼리 호출

Hello()내의 one()과 two()가 서로 호출

함수 선언문으로 선언된 함수 호출

• this가 붙지 않은 함수는 바로 호출 가능
• 화살표 함수도 같은 방법으로 가능

export default function Hello () {
  this.one = function () {
    console.log("one");
    two();				//one()에서 two() 호출
  }
  
  function two() {
    console.log("two");
  }
  
  this.one();
}

new Hello();
//one
//two

화살표 함수 호출

export default function Hello () {
  this.one = function () {
    console.log("one");
    two();				//one()에서 two() 호출
  }
  
  const two = () => {
    console.log("two");
  }
  
  this.one();
}

new Hello();
//one
//two

👭 같은 depth에 있는 this 붙은 함수 호출

함수 선언문으로 선언된 함수에서 this 붙은 함수 호출

🥊 아래에 작성해둔 것과 같은 문제점이 발생하므로 bind()를 사용하거나 화살표 함수를 사용하는 것이 나아보인다

• two()에서 one() 호출

export default function Hello () {
  this.one = function () {
    console.log("one");
  }
  
  this.two = function () {
    console.log("two");
    let a = new Hello();
    a.one();			//two()에서 one() 호출
  }
}

let b = new Hello();
b.two();
//two
//one

🚨 문제점

• Hello()내에서 two()를 호출하면 two가 무한 호출된다
  • new Hello()를 two 내에서 실행
  • Hello()내에서 two()를 호출
• 특이한 점은 new Hello() 라고 작성하나 let a = new Hellow()라고 하나 결과는 같다는 점이다
• a.one()은 있으나 마나 결과와 관련이 없다

export default function Hello () {
  this.one = function () {
    console.log("one");
  }
  
  this.two = function() {
    console.log("two");
    let a = new Hello();	//two에서 Hello()가 호출된다
    a.one();			//무의미한 코드
  }
  
  this.two();
  //two를 호출
}

new Hello();
//two 무한 호출하다 Maximum call stack size exceeded 에러가 뜬다

bind()를 이용한 함수 호출

• oneBind라는 새로운 변수 생성
• this.one()함수를 bind시켜버린다
  • this가 변하지 않기 때문에 아무데서나 갖다 사용가능하다

export default function Hello () {
  this.one = function () {
    console.log("one");
  }
  
  let oneBind = this.one.bind();
  
  function two() {
    console.log("two");
    oneBind();			//two()에서 one() 호출
  }

  two();
  }

new Hello();
//two
//one

화살표 함수에서 this 붙은 함수 호출

• 화살표 함수는 this가 없기 때문에 그 상위의 this를 가져옴
  • 화살표함수 three() 내의 this는 Hello()를 지칭
  • 따라서 바로 this.one()으로 호출이 가능

export default function Hello () {
  this.one = function () {
    console.log("one");
  }
  
  //화살표 함수
  const three = () => {
    console.log("three");
    this.one();				//three()에서 one() 호출
  }
  
  three();
}

new Hello();
//three
//one

🎄 클래스 내의 함수 호출

👭 같은 클래스 내에 있는 함수끼리 호출

• Two 클래스 내에는 two()와 three()가 있으며 two()가 three()를 호출한다
• 같은 클래스의 함수를 호출할 때에는 함수 앞에 this를 붙여서 호출해준다

//test.js
export default class Two {
  two () {
    console.log("you just called two");
    this.three();			//two()에서 three()호출
  }
  
  three() {
    console.log(" and three")
  } 
}

let a = new Two();
a.two();
//you just called two
// and three

📲 다른 파일에서 함수 호출

💎 함수 내의 함수 호출

• index.js 내의 Hello() 함수
  • one()에서 two를 호출
• Two()라는 상위 함수를 import해서 변수에 저장 후 사용

import Three from './test.js';

export default function Hello () {
  function one () {
    let a = new Two();
    a.two();		//one에서 Two()의 two() 호출
  }
  
  one();
}

new Hello();
//called by one

• this가 붙은 함수만 호출 가능

//test.js
export default function Two () {
  this.two = function () {
    console.log("called by one");
  }
}

🎄 클래스 내의 함수 호출

• index.js에서 INDEX() 내의 one()
  • one()은 test.js의 Two 클래스를 불러와 선언
  • Two 클래스 내의 two() 함수를 호출

//index.js
import Two from './test.js';

export default function Hello () { 
  function one () {
    var newTwo = new Two();
    newTwo.two();		//one()에서 Two의 two()호출
  }

  one();
}

new Hello();
//you just called two

• Two 클래스 내의 two()

//test.js
export default class Two {
  two () {
    console.log("you just called two");
  }
}